From 8446bae3be15896c4599a151d58a7bbb22ebb40c Mon Sep 17 00:00:00 2001 From: Josh Schaben Date: Wed, 18 Sep 2019 19:22:09 -0500 Subject: [PATCH 1/4] redid html and css from original adder media --- css/index.css | 196 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 74 +++++++++++++++++++ 2 files changed, 270 insertions(+) diff --git a/css/index.css b/css/index.css index 0c9959c1e5..72f03b895b 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,199 @@ /* 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 */ + +@media(max-width: 800px){ + nav{ + display: flex; + flex-flow: row-reverse wrap-reverse; + } + .image1{ + display: none; + } +} +@media(max-width: 500px){ + .image1{ + display: none; + } + nav { + display: flex; + flex-direction: column; + flex-flow: column-reverse nowrap; + align-items: center; + } + h1 .title { + display: flex; + margin-bottom: 30px; + justify-content: center; + font-size: 48px; + } + + .get-attention{ + display: flex; + flex-direction: column; + align-items: center; + } + .content{ + display:flex; + flex-direction: column; + + } +} + + +nav{ + display: flex; + flex-wrap: wrap; +} + +body{ + max-width: 880px; + width: 90%; + display:flex; + flex-direction: column; + justify-content: flex-start; + margin: 0 auto; +} + +body nav{ + display: flex; + justify-content: space-around; + align-items: center; + height: 75px; + margin: 25px 0px; +} + +body nav a{ + color: grey; + text-decoration: none; + text-align: center; +} + +header{ + display: flex; + margin-bottom: 30px; +} +header section{ + display: flex; + align-items: center; + justify-content: space-around; + text-align: center; + +} +.logo{ + margin: 20px 0px 0px 110px; + padding-top: 20px; +} + + + +.button1{ + padding: 10px 40px; + margin: 0px; + background-color: white; + border: 1px solid black; + color: black; +} + +@keyframes link{ + 0%{background:black;} + 25%{background:darkgreen;} + 50%{background: darkblue;} + 100%{background:blueviolet } +} +.button1:hover{ + color: white; + font-size: 75%; + animation-name: link; + animation-duration: 2s; + animation-iteration-count: infinite; +} +h1{ + font-size: 48px; +} + +.content{ + display: flex; +} + +.content1{ + margin: 20px 1%; +} +.content2{ + margin: 20px 1%; +} + +.content img{ + width: 100%; + padding: 10px; +} + +footer{ + margin-bottom: 50px; + padding: 25px; + text-align: center +} \ No newline at end of file diff --git a/index.html b/index.html index 476b4b8cb9..01ad9daf96 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Great Idea - Responsive I @@ -11,6 +12,79 @@ + + + +
+
+

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

+

Way 456 Street

+

Somewhere, USA


+ 1 (888) 888-8888

+ sales@greatidea.io +
+ + + +> \ No newline at end of file From c33e77563d711b0972f39223defe515a1c955734 Mon Sep 17 00:00:00 2001 From: Josh Schaben Date: Wed, 18 Sep 2019 20:14:40 -0500 Subject: [PATCH 2/4] figured out the nav bar placement --- css/index.css | 95 ++++++++++++++++++++++++++++++--------------------- index.html | 26 +++++++------- 2 files changed, 69 insertions(+), 52 deletions(-) diff --git a/css/index.css b/css/index.css index 72f03b895b..c67491f8ea 100644 --- a/css/index.css +++ b/css/index.css @@ -67,10 +67,24 @@ h1, h2, h3, h4, h5 { /* Copy and paste your work from yesterday here and start to refactor into flexbox */ @media(max-width: 800px){ - nav{ + .container{ + width:90%; + } + header{ display: flex; - flex-flow: row-reverse wrap-reverse; + flex-direction: column-reverse; + } + header nav{ + margin-top: 45px; + width: 92%; + } + header nav a:last-child{ + margin-right: 0px; + } + .innovate{ + justify-content: center; } + .image1{ display: none; } @@ -79,18 +93,25 @@ h1, h2, h3, h4, h5 { .image1{ display: none; } - nav { + .container{ + width: 100%; + } + header nav{ + width: 100%; display: flex; flex-direction: column; - flex-flow: column-reverse nowrap; - align-items: center; } - h1 .title { + header nav a{ + width: 100%; display: flex; - margin-bottom: 30px; justify-content: center; - font-size: 48px; + padding: 20px; + border-bottom: 1px solid black; } + header nav a:first-child{ + border-top: 1px solid black; + } + .get-attention{ display: flex; @@ -103,53 +124,52 @@ h1, h2, h3, h4, h5 { } } - - -nav{ +body{ display: flex; - flex-wrap: wrap; + justify-content: center; } - -body{ +.container{ max-width: 880px; - width: 90%; - display:flex; - flex-direction: column; - justify-content: flex-start; - margin: 0 auto; } - -body nav{ +header{ display: flex; - justify-content: space-around; + justify-content: space-between; align-items: center; - height: 75px; - margin: 25px 0px; + margin-top: 35px; } - -body nav a{ - color: grey; +header nav{ + display: flex; + justify-content: space-between; + color: gray; + width: 69%; +} +header nav a{ + color: gray; text-decoration: none; - text-align: center; } - -header{ +.innovate{ display: flex; - margin-bottom: 30px; + justify-content: flex-end; + margin: 70px 0px 75px 0px; } -header section{ +.innovote-text{ display: flex; + flex-direction: column; + justify-content: center; align-items: center; - justify-content: space-around; text-align: center; - + font-size: 75px; + width: 51%; } + + .logo{ margin: 20px 0px 0px 110px; padding-top: 20px; } - - +header img{ + width: 50%; +} .button1{ padding: 10px 40px; @@ -172,9 +192,6 @@ header section{ animation-duration: 2s; animation-iteration-count: infinite; } -h1{ - font-size: 48px; -} .content{ display: flex; diff --git a/index.html b/index.html index 01ad9daf96..dee022043e 100644 --- a/index.html +++ b/index.html @@ -12,32 +12,31 @@ - +
+
- -
-
+ + + +
+
+

Innovation
On
Demand

- +
+
Image of a code snippet. +
- Image of a code snippet. -
+
@@ -82,6 +81,7 @@

Contact

Copyright Great Idea! 2018
+
> From e07bf15844c330e8dbaab6464f1d55fe0a68d88f Mon Sep 17 00:00:00 2001 From: Josh Schaben Date: Wed, 18 Sep 2019 20:20:47 -0500 Subject: [PATCH 3/4] fixed issue with innovation not being centered --- css/index.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index c67491f8ea..c46f0ee0a4 100644 --- a/css/index.css +++ b/css/index.css @@ -82,6 +82,9 @@ h1, h2, h3, h4, h5 { margin-right: 0px; } .innovate{ + display: flex; + flex-direction: column; + align-items: center; justify-content: center; } @@ -113,7 +116,7 @@ h1, h2, h3, h4, h5 { } - .get-attention{ + .innovate{ display: flex; flex-direction: column; align-items: center; From fc2315eeaa0bfad6b85badf9c007aa4eaa3c226f Mon Sep 17 00:00:00 2001 From: Josh Schaben Date: Wed, 18 Sep 2019 21:57:15 -0500 Subject: [PATCH 4/4] fixed logo centering --- css/index.css | 134 +++++++++++++++++++++++++------------------------- 1 file changed, 68 insertions(+), 66 deletions(-) diff --git a/css/index.css b/css/index.css index c46f0ee0a4..e8d99daf78 100644 --- a/css/index.css +++ b/css/index.css @@ -66,67 +66,7 @@ h1, h2, h3, h4, h5 { /* Copy and paste your work from yesterday here and start to refactor into flexbox */ -@media(max-width: 800px){ - .container{ - width:90%; - } - header{ - display: flex; - flex-direction: column-reverse; - } - header nav{ - margin-top: 45px; - width: 92%; - } - header nav a:last-child{ - margin-right: 0px; - } - .innovate{ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - .image1{ - display: none; - } -} -@media(max-width: 500px){ - .image1{ - display: none; - } - .container{ - width: 100%; - } - header nav{ - width: 100%; - display: flex; - flex-direction: column; - } - header nav a{ - width: 100%; - display: flex; - justify-content: center; - padding: 20px; - border-bottom: 1px solid black; - } - header nav a:first-child{ - border-top: 1px solid black; - } - - - .innovate{ - display: flex; - flex-direction: column; - align-items: center; - } - .content{ - display:flex; - flex-direction: column; - } -} body{ display: flex; justify-content: center; @@ -151,8 +91,7 @@ header nav a{ text-decoration: none; } .innovate{ - display: flex; - justify-content: flex-end; + display: flex; margin: 70px 0px 75px 0px; } .innovote-text{ @@ -167,12 +106,10 @@ header nav a{ .logo{ - margin: 20px 0px 0px 110px; + margin-left: 110px; padding-top: 20px; } -header img{ - width: 50%; -} + .button1{ padding: 10px 40px; @@ -216,4 +153,69 @@ footer{ margin-bottom: 50px; padding: 25px; text-align: center +} +@media(max-width: 800px){ + .container{ + width:90%; + } + header{ + display: flex; + flex-direction: column-reverse; + align-items: center; + } + header nav{ + margin-top: 45px; + width: 92%; + } + .logo{ + margin-left: 0px; + } + + .innovate{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .image1{ + display: none; + } +} +@media(max-width: 500px){ + .image1{ + display: none; + } + .container{ + width: 100%; + } + header nav{ + width: 100%; + display: flex; + flex-direction: column; + } + header nav a{ + width: 100%; + display: flex; + justify-content: center; + padding: 20px; + border-bottom: 1px solid black; + } + header nav a:first-child{ + border-top: 1px solid black; + } + + .logo{ + margin-left: 0px; + } + .innovate{ + display: flex; + flex-direction: column; + align-items: center; + } + .content{ + display:flex; + flex-direction: column; + + } } \ No newline at end of file