From 3aea145dd816e54127882d265af9dc81702ae209 Mon Sep 17 00:00:00 2001 From: Gregory Poole Date: Wed, 15 Jan 2020 17:25:27 -0500 Subject: [PATCH 1/3] the header is now almost right --- great-idea-website/css/index.css | 20 ++++++++++++++++++-- great-idea-website/index.html | 22 ++++++++++++++++++---- 2 files changed, 36 insertions(+), 6 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18d..7b02bf830e 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -18,7 +18,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 0; + border: 1px solid red; font-size: 100%; font: inherit; vertical-align: baseline; @@ -63,4 +63,20 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +.navigation { + display: block; + margin-left: 5%; +} +.logo { + display: inline-block; + margin-left: 21%; +} +header { + display:inline-block; + +} +div { + display:inline-block; + margin: 0 auto; +} diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd658..a5b977d98b 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -16,31 +16,41 @@ +
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. +
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. @@ -50,14 +60,18 @@ 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 4317f78f6bbdaee2ee5faa29929469f095c172e5 Mon Sep 17 00:00:00 2001 From: Gregory Poole Date: Wed, 15 Jan 2020 20:56:13 -0500 Subject: [PATCH 2/3] almost done --- great-idea-website/css/index.css | 119 +++++++++++++++++++++++--- great-idea-website/index.html | 142 +++++++++++++++++++++---------- 2 files changed, 205 insertions(+), 56 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7b02bf830e..7656464674 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -64,19 +64,118 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ -.navigation { - display: block; - margin-left: 5%; +.container { + width: 800px; + margin: auto; + } + +.top-nav { + margin: 0 auto; } + +nav { + display: inline-block; + margin: 0 0 10px; +} + +nav a { + /* TB LR */ + margin: 20px; + color: lightgray; + text-decoration: none; +} + .logo { display: inline-block; - margin-left: 21%; + margin: 20px 0 -11px 50px; } -header { - display:inline-block; - + +.header-content { + display: block; } -div { - display:inline-block; - margin: 0 auto; + +.billboard { + margin-top: 50px; + display: inline-block; +} + +.main-heading { + width: 400px; + margin: 5px; + display: inline-block; +} + +.main-heading h1 { + padding: 0px; + margin: 80px; + font-size: 60px; + text-align: center; +} + +.main-heading button { + margin: -29px 78px 54px 100px; + padding: 5px 33px; + font-size: 13px; + text-align: center; + border: 1px solid black; +} + +.main-img { + display: inline-block; + width: 400px; +} + +.top-content { + width: 800px; + border-top: 1px solid black; + margin-top: 20px; +} + +.top-left { + display: inline-block; + width: 380px; + margin: 20px 0; +} + +.top-right { + display: inline-block; + width: 380px; +} + +.middle-img { + width: 100%; +} + +.bottom-content { + width: 800px; + margin-top: 20px; +} + +.bottom-left { + display: inline-block; + width: 250px; + margin-right: 13px; +} + +.bottom-middle { + display: inline-block; + width: 250px; + margin-right:13px; +} + +.bottom-right { + display: inline-block; + width: 250px; + margin-right: 0; } + +address h2 { + margin: 20px; +} + +footer p { + margin: 30px 0; + text-align: center; +} + + diff --git a/great-idea-website/index.html b/great-idea-website/index.html index a5b977d98b..adb1cee0bc 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -14,64 +14,114 @@ +
+ + +
+ + -
- 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. +

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

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

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

+ +
-
- Copyright Great Idea! 2018 -
+ + + \ No newline at end of file From c9f222f2b6cb50beb1a72189fae71513ac1d5fe7 Mon Sep 17 00:00:00 2001 From: gregorypoole Date: Fri, 13 Mar 2020 01:51:42 -0400 Subject: [PATCH 3/3] done --- great-idea-website/css/index.css | 153 ++++++++++++++-------------- great-idea-website/index.html | 168 +++++++++++-------------------- 2 files changed, 138 insertions(+), 183 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7656464674..efe5a72b39 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -18,7 +18,6 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 1px solid red; font-size: 100%; font: inherit; vertical-align: baseline; @@ -64,118 +63,124 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ -.container { - width: 800px; - margin: auto; - } - -.top-nav { - margin: 0 auto; +*{ + box-sizing:border-box; + padding:0; + margin:0; + max-width:100%; } -nav { - display: inline-block; - margin: 0 0 10px; +p { + font-size:20px; } -nav a { - /* TB LR */ - margin: 20px; - color: lightgray; - text-decoration: none; -} -.logo { - display: inline-block; - margin: 20px 0 -11px 50px; +h2{ + font-size:20px; } -.header-content { - display: block; +.links{ + display:inline-block; + width:40%; + color: grey; + } -.billboard { - margin-top: 50px; - display: inline-block; +header{ + display:inline-block; + width:100%; +} +header nav a{ + width:70%; + text-decoration:none; + padding: 15px; } -.main-heading { - width: 400px; - margin: 5px; - display: inline-block; +.logo{ + margin-left: 80%; + border-top: 1px solid black; + max-width:100%; } -.main-heading h1 { - padding: 0px; - margin: 80px; - font-size: 60px; - text-align: center; +#top .container{ + display:inline-block; + width: 50%; } -.main-heading button { - margin: -29px 78px 54px 100px; - padding: 5px 33px; - font-size: 13px; - text-align: center; +#top p{ + display:inline-block; + width: auto; + margin-left:275px; + margin-bottom:50px; + padding: 10px 15px; border: 1px solid black; } -.main-img { - display: inline-block; - width: 400px; +#top h1{ + font-size: 50px; + text-align: center; + padding: 15px; } -.top-content { - width: 800px; + +#middletop .container{ + display:inline-block; + width: 100%; + padding: 2%; border-top: 1px solid black; - margin-top: 20px; } -.top-left { - display: inline-block; - width: 380px; - margin: 20px 0; +.features{ + display:inline-block; + width:49%; } -.top-right { - display: inline-block; - width: 380px; +.about{ + display:inline-block; + width:49%; } -.middle-img { +.middle-img{ + display:inline-block; + margin: 25px auto; width: 100%; + height: 180px; } -.bottom-content { - width: 800px; - margin-top: 20px; +#middlebottom .container2{ + display:inline-block; + width: 100%; + padding: 2%; } -.bottom-left { - display: inline-block; - width: 250px; - margin-right: 13px; +.services{ + display:inline-block; + width:33%; } -.bottom-middle { - display: inline-block; - width: 250px; - margin-right:13px; +.product{ + display:inline-block; + width:33%; } -.bottom-right { - display: inline-block; - width: 250px; - margin-right: 0; +.vision{ + display:inline-block; + width:33%; } -address h2 { - margin: 20px; +address{ + display:inline-block; + padding-top:5%; + width: 100%; + margin-top: 30px; + border-top: 1px solid black; } -footer p { - margin: 30px 0; - text-align: center; +address p{ + line-height: 1.6; } - +footer{ + padding-top: 25px; + text-align: center; +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index adb1cee0bc..17077c3e47 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -1,127 +1,77 @@ - - Great Idea! - - -
- - -
- -
- + + \ No newline at end of file