From 39b95af9c193b91d192296d574586595a4c1bd3d Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Wed, 8 Apr 2020 12:30:27 -0600 Subject: [PATCH 1/8] Intital Commit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 476b4b8cb9..209ebef451 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - +

Test commit

From cc472bccf96d0f9608dd5649d0df5dab21c37f90 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Wed, 8 Apr 2020 13:41:46 -0600 Subject: [PATCH 2/8] Test Heading Deleted --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 209ebef451..bf3449902b 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ -

Test commit

+

From 1f2484f772ef412939fd8cb24af3a6bf11517f21 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Wed, 8 Apr 2020 17:36:54 -0600 Subject: [PATCH 3/8] Adding Styling for the nav menu --- css/index.css | 81 +++++++++++++++++++++++++++++++++++++++++++ index.html | 95 ++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 168 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index 0c9959c1e5..594f893a39 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,84 @@ /* 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; +} + +/* Your code starts here! */ + +body { + width: 60%; + box-sizing: border-box; + margin: auto; +} +/*First Logo*/ +.logo{ + justify-content: flex-end; +} +/*Second Logo*/ +logo2{ + margin-left: auto; +} + diff --git a/index.html b/index.html index bf3449902b..e4cda0b0a4 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,95 @@ - - Great Idea - Responsive I - + Great Idea! - - + + -

- - + + + + + +
+ + +
+

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

+
+ + \ No newline at end of file From 41e546fb15cc674e21e818f447baf62f677082ec Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Wed, 8 Apr 2020 19:10:13 -0600 Subject: [PATCH 4/8] Working on the middle content flex box --- css/index.css | 65 ++++++++++++++++++++++++++++++++++++++++--------- index.html | 67 ++++++++++++++++++++++++--------------------------- 2 files changed, 85 insertions(+), 47 deletions(-) diff --git a/css/index.css b/css/index.css index 594f893a39..43f62834d9 100644 --- a/css/index.css +++ b/css/index.css @@ -65,20 +65,63 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ +/*Making the Top Part of Menu Container*/ +.navigation { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + align-content: flex-start; + padding: 10px 0px 5px 0px; + background: white; +} +/*Menu itself*/ +.navigation a { + text-decoration: none; + display: block; + padding: 1em; + color: gray; +} -body { - width: 60%; - box-sizing: border-box; - margin: auto; +.navigation a:hover { + background:gray; + color: white; } -/*First Logo*/ -.logo{ +/*First and second Logo Aligned to right most*/ +.logo .logo2{ justify-content: flex-end; } -/*Second Logo*/ -logo2{ - margin-left: auto; -} - +/* Defining the main-heading class */ +.mai-heading { + display: flex; + justify-content: center; +} +.mai-heading .mh-itmone{ + display: flex; + flex-direction: column; + align-self: center; + text-align: center; + padding-right: 8em; +} +.middle-sec{ + border-top: 1px solid black; + margin-top: 75px; + padding-top: 40px; ; +} +.middle-sec .mid-top-con{ + display: flex; + padding: 0 10px; + justify-content: space-evenly +} + /*Same clas used to format paragraph content */ +.desc-txt{ + width: 425px; + margin-right: 34px; +} +.mid-top-con .midsec-img{ + margin-top: 45px; + width: 100%; + align-items: center; +} \ No newline at end of file diff --git a/index.html b/index.html index e4cda0b0a4..184a0293e2 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,8 @@ - - - - -
- - + +

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 - -
-

About

+ + +
+
+

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.

+
+
- - 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.

-
From aed109f28ccf7d72e1fbc62fef9c3ae0523848b2 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Wed, 8 Apr 2020 19:59:01 -0600 Subject: [PATCH 5/8] Added the middle bottom content style --- css/index.css | 33 ++++++++++-- index.html | 138 ++++++++++++++++++++++++-------------------------- 2 files changed, 94 insertions(+), 77 deletions(-) diff --git a/css/index.css b/css/index.css index 43f62834d9..1fcc1e712e 100644 --- a/css/index.css +++ b/css/index.css @@ -69,12 +69,17 @@ h1, h2, h3, h4, h5 { .navigation { display: flex; flex-flow: row wrap; - justify-content: center; + justify-content: space-evenly; align-items: center; align-content: flex-start; padding: 10px 0px 5px 0px; background: white; } +/*The main full size container*/ +.container-box { + margin: 0 auto; + width: 880px; +} /*Menu itself*/ .navigation a { text-decoration: none; @@ -104,7 +109,9 @@ h1, h2, h3, h4, h5 { text-align: center; padding-right: 8em; } - +h1{ + font-size: 75px; +} .middle-sec{ border-top: 1px solid black; margin-top: 75px; @@ -120,8 +127,26 @@ h1, h2, h3, h4, h5 { width: 425px; margin-right: 34px; } -.mid-top-con .midsec-img{ +.middle-sec .midsec-img{ margin-top: 45px; width: 100%; align-items: center; -} \ No newline at end of file +} +.mid-bott-con{ + display: flex; + padding: 45px 0; + justify-content: center; + border-bottom: 1px solid black; +} +.mid-bott-con .desc-txt{ + width: 325px; + margin-right: 60px; +} +.contact{ + padding: 39px 10px 0; +} +footer{ + text-align: center; + font-size: 15px; + margin: 32px 0; +} diff --git a/index.html b/index.html index 184a0293e2..f69ed2b014 100644 --- a/index.html +++ b/index.html @@ -10,81 +10,73 @@ - - - - -
-
-

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

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.

-
-
-
+ +
+
+

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

+
- - - -
-

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 08b78b150df2e16196d865aa1c5eb3d55f8528fa Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sat, 11 Apr 2020 12:51:55 -0600 Subject: [PATCH 6/8] Renaming the class to make sense more --- css/index.css | 55 ++++++++++++++++++++++++++++++++++++++++++--------- index.html | 36 +++++++++++++++++++-------------- 2 files changed, 67 insertions(+), 24 deletions(-) diff --git a/css/index.css b/css/index.css index 1fcc1e712e..73140d4cc7 100644 --- a/css/index.css +++ b/css/index.css @@ -66,29 +66,43 @@ h1, h2, h3, h4, h5 { /* Your code starts here! */ /*Making the Top Part of Menu Container*/ -.navigation { + +.mnu-link{ display: flex; - flex-flow: row wrap; - justify-content: space-evenly; + width: 100%; + text-align: center; +} +/*The Menu Links*/ +.container-box header nav { + display: flex; + justify-content: space-between; align-items: center; align-content: flex-start; + margin-bottom: 20px; padding: 10px 0px 5px 0px; background: white; } + +.great-idea-logo{ + display: flex; + justify-content: flex-end; +} + /*The main full size container*/ .container-box { margin: 0 auto; width: 880px; + max-width: 1080px; } /*Menu itself*/ -.navigation a { +nav a { text-decoration: none; - display: block; + display: flex; padding: 1em; color: gray; } -.navigation a:hover { +nav a:hover { background:gray; color: white; } @@ -100,9 +114,10 @@ h1, h2, h3, h4, h5 { /* Defining the main-heading class */ .mai-heading { display: flex; - justify-content: center; + text-align: center; + justify-content: space-around; } -.mai-heading .mh-itmone{ +.mai-heading .mh-itmone .mh-itmtwo{ display: flex; flex-direction: column; align-self: center; @@ -122,7 +137,7 @@ h1{ padding: 0 10px; justify-content: space-evenly } - /*Same clas used to format paragraph content */ + /*Same class used to format paragraph content */ .desc-txt{ width: 425px; margin-right: 34px; @@ -150,3 +165,25 @@ footer{ font-size: 15px; margin: 32px 0; } + + + /*Tablet @ 800PX*/ +@media(max-width: 800px) { + header nav { + display: flex; + flex-direction: column-reverse; + } + + .mnu-link { + display: flex; + justify-content: space-evenly; + width: 100%; + margin-top: 5%; + } + + .mai-heading img { + display: none; + } + +} + diff --git a/index.html b/index.html index f69ed2b014..c36d31913e 100644 --- a/index.html +++ b/index.html @@ -5,22 +5,25 @@ Great Idea! + -
-
- Image of a code snippet. +
+ Image of a code snippet. +
- +
@@ -67,6 +72,7 @@

Vision

+

Contact

123 Way 456 Street
@@ -74,9 +80,9 @@

Contact

1 (888) 888-8888

sales@greatidea.io

- + - + \ No newline at end of file From 5a6228817373355dd96762b94933dfa062a5cdb8 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sat, 11 Apr 2020 15:32:47 -0600 Subject: [PATCH 7/8] changed class name on the heading container class --- css/index.css | 22 ++++++++++------------ index.html | 40 ++++++++++++++++++++++++---------------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/css/index.css b/css/index.css index 73140d4cc7..ba2a5a5719 100644 --- a/css/index.css +++ b/css/index.css @@ -67,13 +67,14 @@ h1, h2, h3, h4, h5 { /* Your code starts here! */ /*Making the Top Part of Menu Container*/ -.mnu-link{ +/*The Menu Links*/ +.nav-mnu-link{ display: flex; width: 100%; text-align: center; } -/*The Menu Links*/ -.container-box header nav { + +.cont header nav { display: flex; justify-content: space-between; align-items: center; @@ -89,7 +90,7 @@ h1, h2, h3, h4, h5 { } /*The main full size container*/ -.container-box { +.cont { margin: 0 auto; width: 880px; max-width: 1080px; @@ -106,18 +107,15 @@ nav a:hover { background:gray; color: white; } -/*First and second Logo Aligned to right most*/ -.logo .logo2{ - justify-content: flex-end; -} -/* Defining the main-heading class */ -.mai-heading { +/* Defining the cont-heading class */ +.cont-heading { display: flex; text-align: center; - justify-content: space-around; + justify-content: space-evenly; } -.mai-heading .mh-itmone .mh-itmtwo{ +/* Defining the item-one and item-two class */ +.item-one .item-mtwo{ display: flex; flex-direction: column; align-self: center; diff --git a/index.html b/index.html index c36d31913e..c514bb3085 100644 --- a/index.html +++ b/index.html @@ -4,38 +4,46 @@ Great Idea! - - + + + + > -
+
+
- -
-
+ + +
+ +

Innovation
On
Demand

+
- Image of a code snippet. + Image of a code snippet.
-
+
+
From 417d5aa99a40846c8068647cb1552e56f13e6ec0 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 12 Apr 2020 11:16:19 -0600 Subject: [PATCH 8/8] Finished --- css/index.css | 85 +++++++++++++++++++++++++++++++++++++++++++-------- index.html | 19 ++++++------ 2 files changed, 82 insertions(+), 22 deletions(-) diff --git a/css/index.css b/css/index.css index ba2a5a5719..eebc4b537c 100644 --- a/css/index.css +++ b/css/index.css @@ -72,27 +72,28 @@ h1, h2, h3, h4, h5 { display: flex; width: 100%; text-align: center; + justify-content: space-evenly; } - +/*The nav with in the header */ .cont header nav { display: flex; - justify-content: space-between; align-items: center; - align-content: flex-start; - margin-bottom: 20px; - padding: 10px 0px 5px 0px; + margin: 20px 20px; + padding: 30px; background: white; + justify-content: space-evenly; } .great-idea-logo{ display: flex; justify-content: flex-end; + } -/*The main full size container*/ +/*The main full size container */ .cont { margin: 0 auto; - width: 880px; + width: 100%; max-width: 1080px; } /*Menu itself*/ @@ -102,26 +103,45 @@ nav a { padding: 1em; color: gray; } - +/*Menu color change on focus defined*/ nav a:hover { background:gray; color: white; } +/*Defining the button for get started*/ + +.item-one a{ + border: 1px solid black; + padding: 0px 10px 0px 10px; + text-decoration: none; + font-size: 16px; + min-width: 16px; + max-width: 17px; +} + +/*item one back ground annd text color change on focus defined*/ +.item-one a:hover{ + background-color: cornflowerblue; + color: white; +} + /* Defining the cont-heading class */ .cont-heading { display: flex; text-align: center; + align-items: center; justify-content: space-evenly; } /* Defining the item-one and item-two class */ -.item-one .item-mtwo{ +.item-one .item-two{ display: flex; flex-direction: column; - align-self: center; text-align: center; padding-right: 8em; + align-content: center; } + h1{ font-size: 75px; } @@ -172,16 +192,55 @@ footer{ flex-direction: column-reverse; } - .mnu-link { + .nav-mnu-link { display: flex; justify-content: space-evenly; width: 100%; margin-top: 5%; } - - .mai-heading img { + .cont-heading img { display: none; } + .cont-heading{ + justify-content: center; + } + } + +/*Phones*/ +@media(max-width: 500px) { + .cont{ + display: flex; + flex-direction: column; + } + header nav { + display: flex; + flex-direction: column-reverse; + } + + .nav-mnu-link { + display: flex; + flex-direction: column; + text-align: center; + width: 100%; + justify-content: center; + align-items: center; + } + header nav a { + padding: 15px; + border-bottom: 1px solid black; + } + +.cont nav a { + width: 100%; + text-align: center; + justify-content: center; + align-items: center; } +header nav a:hover{ + color: black; + background-color: lightblue; + font-weight: bold; +} +} diff --git a/index.html b/index.html index c514bb3085..d908a72d40 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,9 @@ - > +
- +
-

Contact

- 123 Way 456 Street
- Somewhere, USA
- 1 (888) 888-8888

- sales@greatidea.io

+

Contact

+ 123 Way 456 Street
+ Somewhere, USA
+ 1 (888) 888-8888

+ sales@greatidea.io

\ No newline at end of file