From 732d9b6abd2ce5f705f2f6d6a9087864a476735e Mon Sep 17 00:00:00 2001 From: Jason <47641725+Jfadelli@users.noreply.github.com> Date: Tue, 7 Apr 2020 20:48:40 -0700 Subject: [PATCH 1/4] retro-submission --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 476b4b8cb9..b8f558a557 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + Great Idea - Responsive I @@ -11,6 +12,8 @@ - + + + \ No newline at end of file From 6be1debdec4c1e8f7ec561dfded023e4bd8b4d7d Mon Sep 17 00:00:00 2001 From: Jason <47641725+Jfadelli@users.noreply.github.com> Date: Wed, 8 Apr 2020 20:49:03 -0700 Subject: [PATCH 2/4] work in progress --- css/index.css | 358 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 83 +++++++++++- 2 files changed, 437 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 0c9959c1e5..4bef54af28 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,361 @@ /* Use your own code or past solution for Great Idea Web Page CSS here! */ +Given + /* 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; + } + +/* Your code starts here! */ + +/* index focused css*/ + +body{ + display:flex; + flex-direction: column; + padding:10%; +} +a{ + text-decoration: none; + color: grey; + padding: 0 5%; + flex-wrap: nowrap; + justify-content: space-between; +} +a:hover{ + color:black; + text-shadow: darkslategray; +} + +nav{ + display:flex; + flex-direction: row; + width: 100%; + max-width: 100%; + min-width:45%; + align-items: center; + color:grey; + white-space: nowrap; + padding-bottom: 7vh; +} + +.links{ + flex-direction: row; + justify-content: space-evenly; +} + +a:last-child{ + padding: 0 50% 0 0 +} + +.logo{ + display:flex; + width: 200px +} + +section{ + width:100% +} +.sec1{ + display: flex; + align-items: center; + word-spacing: 3em; + padding-bottom:30px; + justify-content: space-around; +} +.header50{ + display:flex; + padding-left:1%; + padding-right: 1%; + flex-direction: column; + align-items: center; +} +.button{ + border-style: solid; + border-color:black; + border-width: 1px; + text-align:center; + padding:.5%; + word-spacing: 1px; + margin: 0 35% 0 +} + +.services-header-img{ + display: flex; + flex-grow: 1; + justify-content: center; + padding-bottom: 20px; + margin-bottom: 20px; +} +.sec2{ + display: flex; + justify-content: space-between; + border-top-style:solid; + border-top-color:black; + border-top-width: 1px; + padding-top: 2em; + padding-bottom: 30px +} +.sec3{ + display: flex; + padding-top: 2em; + padding-bottom: 30px +} +.sec4{ + display: flex; + justify-content: space-between; + border-bottom-style:solid; + border-bottom-color:black; + border-bottom-width: 1px; + margin-bottom: 2em; + padding-bottom: 2em; +} + +.smbox50{ + display:flex; + flex-direction: column; + padding: 0 2% 0 0 +} +.smbox33{ + display:flex; + text-align:left; + flex-direction: column; + padding: 0 1% 0 0 +} + +h1{ + font-size:5em; + display: flex; + flex-wrap: wrap; + text-align:center; +} + +h2{ + font-style: italic; + font-style: bold; +} + +.middle-img{ + display:flex; + width:100% +} + +footer{ + display:flex; + justify-content: space-evenly; +} + +.foot{ + display:flex; + flex-direction: column; +} + +.sec2w{ + display: flex; + align-content: column; + padding-bottom: 30px +} + +.wrapper{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: space-evenly; + padding: 1em; + border-top-style:solid; + border-top-color:black; + border-top-width: 1px; +} + +.box{ + border-width: 1px; + border-color:black; + border-style:solid; + background-color: rgb(245, 243, 241); + display: flex; + justify-content: flex-start; + width: 300px +} + +.lm{ + border-width: 1px; + border-color:black; + border-style:solid; + padding:10px; + display: flex; + justify-content: space-evenly; + width: 150px; + background-color:white; +} + +.boxp{ + display: flex; + justify-content: flex-start; +} + +.boxh3{ + +} + +.lm{ + padding: 5px; + display: flex; + justify-content: space-evenly; + width: 150px; + background-color:white; +} + +@media (min-width: 768px) and (max-width: 1024px){ + body{ + width: 100%; + margin: 0 auto; + padding: 0 auto; + } + nav{ + flex-direction: column-reverse; + text-align: center; + min-height: 10vh; + justify-content: space; + } + + .links{ + width:100%; + flex-direction: row; + text-align: center; + } + a:last-child{ + padding: 0; + } + + .logo{ + padding: 0 0 3vh 0 + } + a{ + width: 100%; + padding: 0 4% 0 + } + + #circle-img{ + display: none; + } + + .sec1{ + width: 100%; + flex-direction: column-reverse; + justify-content: space-around; + align-items: center; + + } + + .header50{ + padding: 0 0 5vh 0 + } + + .smbox50{ + padding: 0 5% 0 0 + } + + .smbox33{ + padding: 0 5% 0 0 + } +} + +@media (min-width: 320px) and (max-width: 480px){ + + body{ + justify-content: flex-start; + align-content: flex-start; + + } + + nav{ + flex-direction: column-reverse; + text-align: center; + } + + .link{ + width: 100%; + padding: 0 4% 0; + border-bottom: solid black 2px; + flex-direction: column; + } + + } + a{ + width: 100%; + padding: 0 4% 0; + border-bottom: solid black 2px; + flex-direction: column; + } + + img{ + display: none; + } + + .sec1{ + width: 100%; + justify-content: space-around; + align-items: center; + } +} diff --git a/index.html b/index.html index b8f558a557..854da8fd4b 100644 --- a/index.html +++ b/index.html @@ -5,15 +5,90 @@ Great Idea - Responsive I - - + - - + +
+
+

Innovation

+

On

+

Demand

+
+ Get Started +
+
+
+ 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

+
+
+ \ No newline at end of file From fe8408ffa6e4dd64b6cfcbeb597deca4158f9700 Mon Sep 17 00:00:00 2001 From: Jason <47641725+Jfadelli@users.noreply.github.com> Date: Fri, 10 Apr 2020 20:34:36 -0700 Subject: [PATCH 3/4] mvp 99% --- .vscode/settings.json | 3 ++ css/index.css | 112 +++++++++++++++++++++++++++--------------- index.html | 5 +- 3 files changed, 78 insertions(+), 42 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..6f3a2913e1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 4bef54af28..1c62b5c1b6 100644 --- a/css/index.css +++ b/css/index.css @@ -75,12 +75,13 @@ body{ flex-direction: column; padding:10%; } + a{ text-decoration: none; color: grey; padding: 0 5%; - flex-wrap: nowrap; - justify-content: space-between; + flex-wrap: nowrap; + } a:hover{ color:black; @@ -95,21 +96,20 @@ nav{ min-width:45%; align-items: center; color:grey; - white-space: nowrap; - padding-bottom: 7vh; + padding-bottom: 7vh; + justify-content: space-evenly; } .links{ flex-direction: row; - justify-content: space-evenly; + justify-content: space-between; } a:last-child{ - padding: 0 50% 0 0 + padding: 0 0 0 0 } .logo{ - display:flex; width: 200px } @@ -253,10 +253,6 @@ footer{ justify-content: flex-start; } -.boxh3{ - -} - .lm{ padding: 5px; display: flex; @@ -265,6 +261,15 @@ footer{ background-color:white; } +@media (min-width: 1025px){ + nav{ + white-space: nowrap; + padding-right: 2rem; + width: 100%; + flex-direction: row; + justify-content: space-between; + } +} @media (min-width: 768px) and (max-width: 1024px){ body{ width: 100%; @@ -320,42 +325,71 @@ footer{ } } -@media (min-width: 320px) and (max-width: 480px){ +@media (max-width: 767px){ body{ + display: flex; + flex-direction: column; justify-content: flex-start; align-content: flex-start; - - } - + } + nav{ - flex-direction: column-reverse; - text-align: center; - } - - .link{ - width: 100%; - padding: 0 4% 0; - border-bottom: solid black 2px; - flex-direction: column; - } + flex-flow: column wrap; + text-align: center; + height: 60vh; + justify-content: flex-start; + align-content: center; + width: 100%; + min-width: 0; + white-space: pre-wrap; + padding-bottom: 7vh; + } - } - a{ - width: 100%; - padding: 0 4% 0; - border-bottom: solid black 2px; - flex-direction: column; - } + a{ + border-bottom: solid black 1px; + font-size: 1.5rem; + line-height: 3rem; + width: 10rem + } + + .links:first-child{ + margin-top: 1rem + } - img{ - display: none; - } + #circle-img{ + display: none; + } .sec1{ - width: 100%; - justify-content: space-around; - align-items: center; - } + width: 100%; + justify-content: space-around; + align-items: center; + flex-direction: column; + } + + .sec2{ + flex-direction: column; + align-items: center; + /* word-spacing: 3em; */ + justify-content: space-around; + } + + .smbox50:first-child{ + padding-bottom: 3rem + } + + .sec4{ + flex-direction: column; + align-items: center; + /* word-spacing: 3em; */ + justify-content: space-around; + } + + .smbox33{ + padding-bottom: 3rem + } + } + diff --git a/index.html b/index.html index 854da8fd4b..e08ba21c3d 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,14 @@
@@ -48,7 +48,6 @@

About

Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.

-
Image of code snippets across the screen From 77326f9e28793943580bc1969205fe6e363896f8 Mon Sep 17 00:00:00 2001 From: Jason <47641725+Jfadelli@users.noreply.github.com> Date: Fri, 10 Apr 2020 21:03:26 -0700 Subject: [PATCH 4/4] mvp complete --- css/index.css | 20 ++++++++++++++------ index.html | 4 ++-- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index 1c62b5c1b6..695c32730b 100644 --- a/css/index.css +++ b/css/index.css @@ -335,28 +335,36 @@ footer{ } nav{ - flex-flow: column wrap; + display: flex; + flex-direction: column; text-align: center; height: 60vh; justify-content: flex-start; align-content: center; width: 100%; min-width: 0; - white-space: pre-wrap; - padding-bottom: 7vh; + /* white-space: pre-wrap; */ + /* padding-bottom: 7vh; */ + } + + .links{ + display: flex; + flex-direction: column-reverse; + width: 100% } a{ border-bottom: solid black 1px; font-size: 1.5rem; line-height: 3rem; - width: 10rem + padding: 0 20% 0 20% + } .links:first-child{ - margin-top: 1rem + margin-top: 1rem; } - + #circle-img{ display: none; } diff --git a/index.html b/index.html index e08ba21c3d..fadab80b10 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,14 @@