diff --git a/bower.json b/bower.json index 8f5380f..aaa9e3b 100644 --- a/bower.json +++ b/bower.json @@ -18,7 +18,6 @@ "tests" ], "dependencies": { - "mirage": "https://github.com/wsick/mirage.git", - "mirage-html": "https://github.com/wsick/mirage-html.git" + "mirage-html": "https://github.com/wsick/mirage-html.git#^0.1.1" } } diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..88ac5c6 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,20 @@ + + + + Logo + Created with Sketch. + + + + + \ No newline at end of file diff --git a/images/page.svg b/images/page.svg new file mode 100644 index 0000000..18a6ef2 --- /dev/null +++ b/images/page.svg @@ -0,0 +1,31 @@ + + + + web-design + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/pencil.svg b/images/pencil.svg new file mode 100644 index 0000000..d3552cd --- /dev/null +++ b/images/pencil.svg @@ -0,0 +1,14 @@ + + + + Shape + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/images/wrench.svg b/images/wrench.svg new file mode 100644 index 0000000..17a2723 --- /dev/null +++ b/images/wrench.svg @@ -0,0 +1,20 @@ + + + + wrench + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 6a4316c..e605e7e 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,87 @@ Mirage - - + + - + + +
+
+
+ + + +

Quickly layout your application and keep the frameworks you’re used to

+
+ Get started +
+ +
+ +
+ +

Simple design language

+

Code with a simple design syntax and properly align elements with ease

+
+ +
+ +

Integrates with tools you know

+

Create part or all of your application with Mirage and use the frameworks you’re already using

+
+ +
+ +

Adaptable to many formats

+

Build designs which can quickly be rendered in HTML, Canvas, SVG or more

+
+ +
+
+
+ +
+
+

Meet the team

+ +
+
+
+ +
+

@bsick

+
+ +
+
+ +
+

@bsick

+
+ +
+
+ +
+

@bsick

+
+
+ +
+ +
+
- \ No newline at end of file + diff --git a/styles/main.css b/styles/main.css index 699a279..469443d 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,3 +1,115 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} body { - margin: 0; + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Site CSS */ + +p, a, h1, h2, h3, span { + font-family: 'Source Sans Pro'; + font-weight: 300; + font-size: 16px; +} + +h1 { + font-size: 2.5rem; + text-align: center; + line-height: 3rem; +} + +h2 { + font-weight: 700; + font-size: 2rem; +} + +h3 { + font-weight: 700; + font-size: 1.2rem; + text-align: center; +} + +.mainContent { + color: white; + background-color: #55A7DD; +} + +.menu--option { + padding: 0px 20px; +} + +.button--cta { + background-color: #15669C; + border-radius: 8px; +} + +.feature > p { + text-align: center; + font-size: 1.2rem; + line-height: 30px +} + +.meetTheTeam { + background-color: white; + color: #15669C; +} + +.meetTheTeam--photo { + width: 100px; + height: 100px; + border-radius: 100px; + border: 5px solid #55A7DD; +} + +.meetTheTeam--photo > img { + border-radius: 100px; +} + +.meetTheTeam--handle { + color: #55A7DD; + font-size: 1.2rem; + text-align: center; }