From 8f59078bb0269553a280dbca2f521d8a98141510 Mon Sep 17 00:00:00 2001 From: douglasjordan Date: Sat, 15 Dec 2018 00:16:41 -0600 Subject: [PATCH 1/2] finished the MVP --- css/index.css | 574 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 71 +++++++ 2 files changed, 644 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 09344e0dc..5747c8e40 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,573 @@ -/* 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*/ + +/* Use your own code or past solution for Great Idea Web Page CSS here! */ + +/* 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 { + 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 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; +} + +/* Copy and paste your work from yesterday here and start to refactor into flexbox */ + +html { + font-size: 62.5%; +} + +body { + max-width: 880px; + margin: auto; + position: relative; +} + +header { + width: 100%; +} + +.header-top { + display: flex; + justify-content: space-between; + margin-top: 3%; +} + +.header-top nav { + font-size: 1.255rem; + width: 68.8%; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 0.5%; +} + +.header-btm { + display: flex; + justify-content: flex-end; + margin-top: 8%; +} + +.left { + align-self: flex-start; + justify-self: flex-end; + width: 50%; + display: flex; + flex-direction: column; +} + +.logo { + align-self: center; +} + +header nav a { + text-decoration: none; + color: #b9b9b9; +} + +.left>h1 { + font-size: 5.78rem; + line-height: 1; + text-align: center; + margin-top: 12%; + margin-right: 4%; +} + +.services-main>h1 { + font-size: 2.6rem; + line-height: 0.95; + text-align: left; +} + +button { + border: 1px solid black; + font-size: 1.25rem; + cursor: pointer; + padding: 1.3% 9.5%; + align-self: center; + background-color: white; + margin-top: 2.5%; + margin-right: 3.5%; +} + +button:hover, +section>a { + color: white; + background-color: black; + transition: background-color ease-out 0.5s; +} + +.container { + display: flex; + flex-wrap: wrap; + max-width: 880px; + justify-content: flex-start; + padding: 4.3% 0 4% 0; + margin: 8.5% 0 1% 0; + border-top: 2px solid black; + border-bottom: 2px solid black; +} + +section>a { + text-decoration: none; + border: 1px solid black; + border-radius: 5px; + height: 30px; + width: 120px; + font-size: 1.2rem; + color: black; + background-color: white; +} + +main p { + font-size: 1.28rem; + line-height: 1.15; +} + +h2 { + font-size: 1.3rem; +} + +.features, +.about { + width: 50%; +} + +.middle-img { + margin: 3.3% 0 3.6% 0; +} + +.services, +.product { + width: 31.2%; + margin-right: 2.2%; +} + +.vision { + width: 31.2%; +} + +ul { + list-style-type: square; + list-style-position: inside; + margin-top: 20px; + line-height: 2; +} + +footer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 4%; + font-size: 1.6rem; +} + +.contact, +.contact>a { + line-height: 1; + font-size: 1.28rem; +} + +.some-facts { + width: 48%; +} + +main { + border-bottom: 2px solid black; +} + +.copyright { + text-align: center; + display: flex; + padding-top: 4.52%; + justify-content: center; + font-size: 1.28rem; + width: 100%; +} + +.services-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.services-main { + padding-top: 30px; + height: 170px; + border-bottom: 2px solid black; +} + +.item a { + align-self: left; + margin-top: 20px; + text-align: center; + padding: 8px 0; +} + +.item h2 { + align-self: flex-start; +} + +.item { + width: 48%; + margin: 40px 0; + display: flex; + flex-direction: column; + border: 1px solid black; + padding: 20px; + background-color: #ececec; +} + +.btm-services { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.contact>a { + text-decoration: none; + border: none; +} + + +/* <-- NO PERCENTAGE --> */ + + +/* Tablet Styles */ +@media(max-width: 800px) { + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + @keyframes dissolve { + 0% { opacity: 0; } + 100% { opacity: 1 } + } + + @keyframes stretchwide { + 0% { width: } + } + + .right { + + } + + body { + margin: 0 auto; + width: 100vw; + } + + header { + display: flex; + flex-direction: column; + margin: 0 auto; + } + + + .header-top { + display: flex; + flex-direction: column-reverse; + margin-top: 3.8%; + } + + .header-top nav { + display: flex; + justify-content: space-between; + width: 88.1vw; + margin: 5% auto 0 4%; + } + + .header-btm { + width: 100vw; + display: flex; + justify-content: center; + align-content: center; + } + + .left h1 { + margin: 2% auto; + padding: 0 + } + + .left button { + margin: 4.5% 2%; + padding-left: 10%; + padding-right: 10%; + } + + .right { + display: none; + } + + .container { + width: 95vw; + margin: 7.3% auto 4.4% auto; + padding-top: 4.5%; + padding-bottom: 4.5%; + justify-content: space-between; + } + + .features, + .about { + width: 45vw; + margin: 0 auto; + } + + .middle-img { + width: 95vw; + height: 19.5vw; + margin: 4% auto 4.4% auto; + } + + .services { + width: 27vw; + margin-left: 1.4%; + } + + .product { + width: 27vw; + } + + .vision { + width: 27vw; + margin-right: 3.5%; + } + + footer { + width: 92.5vw; + margin: 0 auto; + } + + .copyright { + padding-top: 5%; + } + + /* Services Styles */ + + .services-container { + width: 700px; + margin: 0 auto 50px auto; + } + + .services-header-img { + width: 700px; + margin: 40px auto; + } + + .services-container { + margin-top: -50px; + } + + .some-facts { + width: 280px; + } + + .services-info-img { + width: 400px; + } +} + +/* Mobile Styles */ +@media(max-width: 500px) { + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + width: 100vw; + } + + header { + width: 100vw; + } + + .header-top { + width: 100vw; + } + + .logo { + margin-left: calc(50vw - 41.5%); + margin-top: 0.1%; + } + + .header-btm { + width: 100vw; + justify-content: center; + } + + .left { + width: 400px; + } + + .header-top nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100vw; + border-top: 1px solid #b9b9b9; + margin-top: 4.2%; + } + + .header-top nav a { + border-bottom: 2px solid #b9b9b9; + width: 100vw; + text-align: center; + font-size: 1.6rem; + padding: 3.9%; + } + + .container { + width: 92%; + margin-left: calc(50vw - 41.8%); + margin-top: 11.5%; + padding-top: 12%; + padding-bottom: 0; + } + + .left h1 { + margin-left: calc(50vw - 44%); + margin-top: 2%; + } + + .left button { + margin-left: calc(50vw - 50%); + padding-bottom: 1.5%; + padding-top: 1.5%; + } + + .middle-img { + width: 100%; + height: 15.9vh; + margin-top: 1.5%; + margin-bottom: 6.7%; + } + + .features, + .about { + padding-bottom: 10%; + width: 100%; + margin-left: 0; + } + + .services, + .product, + .vision { + padding-bottom: 14%; + width: 100%; + margin-left: 0; + } + + .vision { + padding-bottom: 8%; + } + + footer { + width: 92%; + margin-left: calc(50vw - 41.8%); + margin-top: 7%; + } + + .contact { + margin-bottom: 3%; + } + + /* Services Styles */ + + .services-container { + width: 480px; + margin: 0 auto 50px auto; + padding-bottom: 40px; + } + + .services-header-img { + width: 500px; + margin: 10px auto 40px auto; + } + + .services-container { + margin-top: -50px; + } + + .services-main { + height: 200px; + } + + .some-facts { + width: 480px; + } + + .some-facts>ul { + display: flex; + font-size: 1.4rem; + justify-content: space-around; + margin-bottom: 30px; + } + + .services-info-img { + width: 480px; + } + + .item { + margin-bottom: 10px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 6ee66a434..d07e77202 100644 --- a/index.html +++ b/index.html @@ -17,5 +17,76 @@ + +
+
+ + + +
+ +
+
+

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.

+
+
+ + + \ No newline at end of file From 5b828578dd3ba25bbf382f5b3ce40bea0d3aae72 Mon Sep 17 00:00:00 2001 From: douglasjordan Date: Sat, 15 Dec 2018 11:39:12 -0600 Subject: [PATCH 2/2] fixed the scaling issues with the mobile design --- css/index.css | 69 +++++++++++++++++++++++---------------------------- 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/css/index.css b/css/index.css index 5747c8e40..0eac673f3 100644 --- a/css/index.css +++ b/css/index.css @@ -71,6 +71,7 @@ h1, h2, h3, h4, h5 { html { font-size: 62.5%; + overflow: scroll; } body { @@ -297,17 +298,8 @@ main { box-sizing: border-box; } - @keyframes dissolve { - 0% { opacity: 0; } - 100% { opacity: 1 } - } - - @keyframes stretchwide { - 0% { width: } - } - .right { - + display: none; } body { @@ -335,6 +327,10 @@ main { margin: 5% auto 0 4%; } + .header-top nav a { + text-align: center; + } + .header-btm { width: 100vw; display: flex; @@ -353,10 +349,6 @@ main { padding-right: 10%; } - .right { - display: none; - } - .container { width: 95vw; margin: 7.3% auto 4.4% auto; @@ -434,70 +426,72 @@ main { } body { - width: 100vw; + width: 100%; } header { - width: 100vw; + width: 100%; } .header-top { - width: 100vw; + width: 100%; } .logo { - margin-left: calc(50vw - 41.5%); - margin-top: 0.1%; + margin: auto; } .header-btm { - width: 100vw; + width: 100%; justify-content: center; } .left { - width: 400px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; } .header-top nav { display: flex; flex-direction: column; align-items: center; - width: 100vw; + width: 100%; border-top: 1px solid #b9b9b9; - margin-top: 4.2%; + margin: 4.2% auto 2% auto; } .header-top nav a { border-bottom: 2px solid #b9b9b9; - width: 100vw; + width: 100%; text-align: center; font-size: 1.6rem; - padding: 3.9%; + padding: 4% 0; + margin: auto; + } .container { - width: 92%; - margin-left: calc(50vw - 41.8%); - margin-top: 11.5%; - padding-top: 12%; + width: 95%; + margin: 11% auto 7% auto; + padding-top: 12.5%; padding-bottom: 0; } .left h1 { - margin-left: calc(50vw - 44%); - margin-top: 2%; + margin: 0 auto; } .left button { margin-left: calc(50vw - 50%); - padding-bottom: 1.5%; - padding-top: 1.5%; + margin-top: 5.1%; + padding: 1.25% 8.5%; } .middle-img { width: 100%; - height: 15.9vh; + height: 15.9%; margin-top: 1.5%; margin-bottom: 6.7%; } @@ -522,13 +516,12 @@ main { } footer { - width: 92%; - margin-left: calc(50vw - 41.8%); - margin-top: 7%; + width: 95%; + margin: 0 auto; } .contact { - margin-bottom: 3%; + margin-bottom: 3.5%; } /* Services Styles */