From 6474912357f0e8e0976676cb58095b858451754a Mon Sep 17 00:00:00 2001 From: sergio bolanos Date: Thu, 19 Mar 2020 20:04:18 -0400 Subject: [PATCH 1/3] Project User Interface 2 --- great-idea-website/css/index.css | 71 ++++++++++++++++++++++++++++- great-idea-website/index.html | 77 +++++++++++++++++--------------- 2 files changed, 112 insertions(+), 36 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..0f81bc609 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,73 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +.entirePage{ + width:80%; + margin:auto; + +} +.logo{ + display:inline-block; + + margin-left: 80%; +} +.headerLinks{ + display:inline-block; + width:60%; +} +.headerLinks a { + display:inline-block; + margin: 0px 4%; + +} +.innovation{ + width:50%; + text-transform: uppercase; + display:inline-block; + height:35%; + border:2px solid black; + text-align: center; +} +.imgHeader{ + margin: 0px 470px; + + display:inline-block; + margin: 0% 100%; + margin-left: 135git add%; +} +.innovation, .imgHeader{ + display:inline-block; +} +.features{ + width:50%; + +} +.featureFont{ + text-transform: capitalize; + color:pink; +} +.about{ + width:50%; + + margin-left:50%; +} +.features, .about { + display:inline-block; +} +.middle-img{ + width:100%; + height: 15%; +} +.midSection{ + width:33%; + border: 2px solid black; +} + + + + + + + + diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..6243e8846 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -14,43 +14,50 @@ - - - Services - Product - Vision - Features - About - Contact - + +
+ Services + Product + Vision + Features + About + Contact +
- 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. - +
+
+

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

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 From 3959e5dca2e01bcb7d75266c385f8ac92c0ee5df Mon Sep 17 00:00:00 2001 From: sergio bolanos Date: Fri, 20 Mar 2020 13:02:25 -0400 Subject: [PATCH 2/3] b --- great-idea-website/css/index.css | 102 +++++++++++++++++-------------- great-idea-website/index.html | 84 +++++++++++++------------ 2 files changed, 102 insertions(+), 84 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 0f81bc609..bc5a11d48 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -49,7 +49,8 @@ table { /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; + display:inline-block; } html, body { @@ -65,71 +66,80 @@ h1, h2, h3, h4, h5 { /* Your code starts here! */ .entirePage{ - width:80%; + width:90%; margin:auto; - } -.logo{ - display:inline-block; - - margin-left: 80%; +.headerLinks a{ + margin:0% 3%;; + padding:0%; } -.headerLinks{ - display:inline-block; - width:60%; +.logo{ + margin-left: 90%; + margin-top: 5%; } -.headerLinks a { - display:inline-block; - margin: 0px 4%; - +.headerLink{ } .innovation{ - width:50%; - text-transform: uppercase; - display:inline-block; - height:35%; - border:2px solid black; - text-align: center; + margin:auto; + margin-top: 5%; } .imgHeader{ - margin: 0px 470px; - - display:inline-block; - margin: 0% 100%; - margin-left: 135git add%; + margin-left: 80%; + margin-bottom: 10%; + vertical-align: top; } -.innovation, .imgHeader{ - display:inline-block; +.innovation nav h1{ + text-align: center; + margin-bottom: 10%; + margin-left: 10%; } -.features{ - width:50%; +.featureLeft{ + width:45%; + text-align: center; + margin-bottom: 3%; + margin-top:2%; + margin-right:0%; +} +.aboutRight{ + width:45%; + margin-left:3%; + text-align: center; + margin-left:10%; +} +.middle-img{ + width:100%; + height:15%; } -.featureFont{ - text-transform: capitalize; - color:pink; +.services{ + width:30%; + float:left; + text-align: center; + margin:3% 0%; } -.about{ - width:50%; - - margin-left:50%; +.product{ + width:30%; + float:left; + text-align: center; + margin:3% 2%; } -.features, .about { - display:inline-block; +.vision{ + width:30%; + float:left; + text-align:center; + margin: 3% 3%; } -.middle-img{ +.contact{ width:100%; - height: 15%; + margin-top:5%; } -.midSection{ - width:33%; +.featuresAbout{ border: 2px solid black; + border-left:none; + border-right:none; + display:inline-block; } - - - - diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 6243e8846..3296f784c 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,56 +15,64 @@ -
+
- -
-
-

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.

-
+

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

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 de80dfe8729c9a4aa9ca607a0d06955f49c1c729 Mon Sep 17 00:00:00 2001 From: sergio bolanos Date: Fri, 20 Mar 2020 16:00:04 -0400 Subject: [PATCH 3/3] Completed Project --- great-idea-website/css/index.css | 55 ++++++++++++++++++++++---------- great-idea-website/index.html | 44 +++++++++++++------------ 2 files changed, 62 insertions(+), 37 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index bc5a11d48..de0ca6577 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -66,45 +66,50 @@ h1, h2, h3, h4, h5 { /* Your code starts here! */ .entirePage{ - width:90%; + width:80%; margin:auto; } .headerLinks a{ - margin:0% 3%;; + margin:0% 2%;; padding:0%; } .logo{ - margin-left: 90%; + margin-left: 120%; margin-top: 5%; } -.headerLink{ -} .innovation{ margin:auto; margin-top: 5%; + width:100%; + text-align: center; } .imgHeader{ - margin-left: 80%; - margin-bottom: 10%; + margin: 0% 3% 3%; vertical-align: top; + width:20%; + display:flex; + float:right; } .innovation nav h1{ text-align: center; - margin-bottom: 10%; - margin-left: 10%; + margin: 0% auto;; } -.featureLeft{ +.featuresLeft{ width:45%; + float:left; text-align: center; - margin-bottom: 3%; - margin-top:2%; - margin-right:0%; + margin-top: 2%; + margin-bottom:2%; } .aboutRight{ width:45%; margin-left:3%; text-align: center; margin-left:10%; + text-align: center; + float:left; + margin-top:2%; + margin-bottom: 2%; } .middle-img{ width:100%; @@ -137,9 +142,25 @@ h1, h2, h3, h4, h5 { border: 2px solid black; border-left:none; border-right:none; + border-bottom:none; display:inline-block; } - - - - +.bottomPara{ + width:100%; + height:20%; + border: 2px solid black; + border-right:none; + border-left:none; + border-top:none; +} +.copyright{ + text-align: center; + width:100%; +} +.midHeading{ + font-size: 50px; +} +.midHeading button{ + font-size: 40px; + margin-bottom: 10%;; +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 3296f784c..f45adbfc6 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -29,28 +29,32 @@
- +
+

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

Contact

- 123 Way 456 Street - Somewhere, USA - 1 (888) 888-8888 - sales@greatidea.io +

123 Way 456 Street


+

Somewhere, USA


+

1 (888) 888-8888


+

sales@greatidea.io

- Copyright Great Idea! 2018 +

Copyright Great Idea 2018

\ No newline at end of file