From b0a06244634242c29ccf6c866d7569b4bf9394e8 Mon Sep 17 00:00:00 2001 From: kbrian97 Date: Sat, 15 Dec 2018 19:33:03 -0500 Subject: [PATCH 1/2] finished desktop and tablet view --- css/index.css | 396 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 79 +++++++++- 2 files changed, 471 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 09344e0dc..b0bc52bd9 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,395 @@ -/* Use your CSS from RWD - I here. IF you don't have CSS, use the solution CSS from RWD - I*/ \ No newline at end of file +/* Use your CSS from RWD - I here. IF you don't have CSS, use the solution CSS from RWD - I*/ + + +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 { + 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; +} + +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + font-family: 'Titillium Web', sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; +} + +/* Your code starts here! */ +html { + font-size: 62.5%; +} + +.full-container { + display: flex; + flex-direction: column; + align-items: center; + max-width: 880px; + margin: 0 auto; + +} + +.container { + display: flex; + justify-content: space-around; + align-items: center; + margin: 4.4% 0%; + width: 90%; +} + + +.container2 { + display: flex; + justify-content: space-around; + margin-top: 2%; + margin-left: 18%; +} + +.container3 { + font-weight: bold; + font-size: 45px; + width: 30%; + display: flex; + flex-wrap: wrap; + align-items: center; + align-content: center; + justify-content: center; + margin-left: 0.5%; +} + +.container4 { + width: 50%; +} + +.container5 { + display: flex; + margin-top: 2.4%; + margin-bottom: 2%; + width: 80%; + font-size: 1.29rem; +} + +.container6 { + margin-top: 2.5%; + display: flex; + width: 80%; + font-size: 1.29rem; +} + + +.copy{ + width: 100%; + text-align: center; + margin-top: 2%; +} + +.street { + margin-bottom: 1%; +} + +.phone { + line-height: 2.5rem; +} + +a { + font-size: 1.29rem; + text-decoration: none; + color: grey; +} + + +nav { + word-spacing: 4.58rem; + margin-left: 1%; +} + + +button { + cursor: pointer; + background: white; + border: 1px solid black; + font-size: 40%; + width: 100%; + margin-top: 10%; +} + +h1 { + font-size: 5.6rem; + width: 100%; + text-align: center; + margin-right: 9%; +} + +hr { + width: 80%; + margin-bottom: 1%; + border-top: 0.2rem solid black; +} + +hr.first-line { + margin-top: 6%; +} + +hr.second-line{ + margin-top: 2.5%; +} + +.middle-img { + width: 79.5%; +} + +.logo { + width:19%; + padding-right: 1%; +} + +.logo img{ + width: 100%; +} + +.container4 img { + width: 85%; +} + +.button { + width: 61.5%; + display: flex; + justify-content: flex-end; +} + +.foot { + width: 80%; + margin-top: 2%; + font-size: 1.25rem; +} + + + +/* tablet view */ +@media(max-width: 800px) { + +.container { + width: 100vw; + flex-direction: column-reverse; + align-items: center; + margin: 0 auto; +} + +.container2 { + width: 80%; + margin: 0% 0%; + padding-right: 0.2rem; + padding-top: 7%; + padding-bottom: 1rem; + } + +.container4 { +display: none; +} + +.container5 { + width: 80%; + font-size: 1.3rem; + justify-content: space-around; + margin-bottom: 1rem; +} + +.container6 { + width: 79.5%; + margin: 3.5% 1% 0% 0%; + padding-right: 2%; +} + +.container6 p { + font-size: 1.25rem; + line-height: 1.4rem; +} + +img.middle-img { + width:78%; +} + +.feat { + border: 1px solid white; + width: 90%; + margin-left: 2.5%; +} + +.about { + border: 1px solid white; + width: 90%; +} + +.serve { + padding: 0% 3%; +} + +.prod { + padding: 0% 3%; +} + +.visi{ + padding: 0% 3%; +} + +.logo { + margin-top: 4%; + margin-right: 1%; + width: 19%; +} + +p { + font-size: 1.35rem; +} + +nav { + margin-top: 4%; + margin-right: 6%; + word-spacing: 6.25rem; +} + +h1 { + /* margin-top: 5.7rem; + margin-left: 32.5rem; */ + width: 100%; + margin-bottom: 5%; +} + + +hr.first-line { + margin-top: 7%; + width: 78%; +} + +hr.second-line { + margin-top: 2.5%; + width: 78%; +} + +.button { + display: flex; + justify-content: center; + width: 100%; + padding-right: 9%; + padding-left: 13%; + margin-right: 4%; +} + +button { + font-size: 30%; +} + +.foot { + width: 76%; + padding-top: 0.3rem; +} + +.copy p { + font-size: 1.3rem; +} + +} +/* mobile view */ +@media(max-width: 500px) { + + .full-container { + max-width: 100%; + } + + .container { + width: 100%; + } + + .container2 { + margin: 40px 0px; + + } + + .container5 { + flex-direction: column; + width: 400px; + } + + .container6 { + flex-direction: column; + margin: 20px; + } + .about { + margin-left: 30px; + } + + button { + width: 125px; + } + + .middle-img { + padding: 10px; + } + + nav { + width: 410px; + word-spacing: 300px; + padding: 10px; + text-align: center; + display: flex; + flex-direction: column; + } + + a { + line-height: 60px; + border-bottom: 1px solid black; + } + + .logo { + width: 390px; + border-bottom: 1px solid black; + text-align: center; + padding-bottom: 20px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 6ee66a434..86a94007c 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,80 @@ - - - +
+ +
+ + +
+
+
+
+

+ Innovation + On
+ Demand
+

+
+
+ +
+
+
+ Image of a code snippet. +
+
+
+
+
+

Features

+

Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.


+
+
+

About

+

Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.


+
+
+ Image of code snippets across the screen +
+
+

Services

+

Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.


+
+
+

Product

+

Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.


+
+
+

Vision

+

Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.


+
+
+
+
+
+

Contact

+
+

123 Way 456 Street
+ Somewhere, USA

+

1 (888) 888-8888
+ sales@greatidea.io

+

+
+

Copyright Great Idea! 2018

+
+
+
+ +
+ \ No newline at end of file From 6da08aaab6c08c712833c9b814bd088e76323d70 Mon Sep 17 00:00:00 2001 From: kbrian97 Date: Mon, 17 Dec 2018 08:14:39 -0500 Subject: [PATCH 2/2] finished mvp --- css/index.css | 131 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 88 insertions(+), 43 deletions(-) diff --git a/css/index.css b/css/index.css index b0bc52bd9..32be834df 100644 --- a/css/index.css +++ b/css/index.css @@ -79,7 +79,7 @@ html { display: flex; justify-content: space-around; align-items: center; - margin: 4.4% 0%; + margin: 4% 0%; width: 90%; } @@ -93,7 +93,7 @@ html { .container3 { font-weight: bold; - font-size: 45px; + font-size: 4.5rem; width: 30%; display: flex; flex-wrap: wrap; @@ -173,7 +173,7 @@ hr { } hr.first-line { - margin-top: 6%; + margin-top: 6rem; } hr.second-line{ @@ -209,13 +209,11 @@ hr.second-line{ font-size: 1.25rem; } - - /* tablet view */ @media(max-width: 800px) { .container { - width: 100vw; + max-width: 100%; flex-direction: column-reverse; align-items: center; margin: 0 auto; @@ -225,12 +223,13 @@ hr.second-line{ width: 80%; margin: 0% 0%; padding-right: 0.2rem; - padding-top: 7%; + padding-top:8%; padding-bottom: 1rem; } .container4 { display: none; + } .container5 { @@ -280,18 +279,15 @@ img.middle-img { .logo { margin-top: 4%; - margin-right: 1%; - width: 19%; -} - -p { - font-size: 1.35rem; + margin-left: 1.5%; + width: 22%; } nav { + display: flex; + justify-content: space-around; + width: 95%; margin-top: 4%; - margin-right: 6%; - word-spacing: 6.25rem; } h1 { @@ -303,12 +299,12 @@ h1 { hr.first-line { - margin-top: 7%; + margin-top: 6%; width: 78%; } hr.second-line { - margin-top: 2.5%; + margin-top: 2.25%; width: 78%; } @@ -327,12 +323,15 @@ button { .foot { width: 76%; - padding-top: 0.3rem; + padding-top: 0.35rem; } .copy p { font-size: 1.3rem; } +.logo img { + width: 100%; +} } /* mobile view */ @@ -347,49 +346,95 @@ button { } .container2 { - margin: 40px 0px; - + width: 100%; } .container5 { flex-direction: column; - width: 400px; - } + margin-top: 8.5%; + padding-bottom: 2.5%; + } .container6 { - flex-direction: column; - margin: 20px; - } - .about { - margin-left: 30px; - } + flex-direction: column; + margin-top: 0%; + } - button { - width: 125px; - } .middle-img { - padding: 10px; - } + padding: 1rem 1rem; + } nav { - width: 410px; - word-spacing: 300px; - padding: 10px; + width: 83%; + border-top: 1px solid black; text-align: center; display: flex; - flex-direction: column; + flex-direction: column; } a { - line-height: 60px; + font-size: 1.5rem; + line-height: 4.75rem; border-bottom: 1px solid black; } .logo { - width: 390px; - border-bottom: 1px solid black; - text-align: center; - padding-bottom: 20px; - } + width: 84%; + text-align: center; + margin-top: 5%; + } + + .logo img { + width: 37%; + } + + .button { + margin-top: 5%; + margin-left: 3%; + } + + button { + border: 1px solid black; + width: 100%; + } + + hr.first-line { + margin-top: 10.5%; + } + + hr.second-line { + margin-top: 3%; + width: 80%; + } + + .about { + margin-top: 6.5%; + margin-left: 2%; + } + + .feat { + margin-left: 2%; + } + + .serve { + margin-top: 3%; + } + + .prod { + margin-top: 10%; + + } + + .visi { + margin-top: 11%; + } + + .foot { + margin-top: 4%; + } + + .copy { + margin-top: 4%; + } } \ No newline at end of file