From 3aea145dd816e54127882d265af9dc81702ae209 Mon Sep 17 00:00:00 2001 From: Gregory Poole Date: Wed, 15 Jan 2020 17:25:27 -0500 Subject: [PATCH 1/2] 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 7766e7f18..7b02bf830 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 92beabd65..a5b977d98 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/2] 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 7b02bf830..765646467 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 a5b977d98..adb1cee0b 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

+ +
- + + + \ No newline at end of file