From ff27048af72272473b37eb33db1ce297593fe4dc Mon Sep 17 00:00:00 2001 From: Zak Date: Wed, 4 Dec 2019 13:45:50 +0100 Subject: [PATCH 1/4] Add the h3's --- great-idea-website/index.html | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..1c8858829 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -32,32 +32,33 @@ Image of a code snippet. - Features +

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 +

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 +

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 +

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 +

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 +

Contact

+ + + + + \ No newline at end of file From 1528391bc2c097e4f22c99a877fe95901f62c4a0 Mon Sep 17 00:00:00 2001 From: Zak Date: Wed, 4 Dec 2019 13:51:43 +0100 Subject: [PATCH 2/4] added

--- great-idea-website/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 1c8858829..d02046bcf 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -33,23 +33,23 @@ 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. +

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

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

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

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

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

From fe9eaf29c9e957910d07f6359bd6f208fba8bba8 Mon Sep 17 00:00:00 2001 From: Zak Date: Wed, 4 Dec 2019 14:38:53 +0100 Subject: [PATCH 3/4] add most of the HTML --- great-idea-website/css/index.css | 9 +++- great-idea-website/index.html | 77 +++++++++++++++++--------------- 2 files changed, 50 insertions(+), 36 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..c48713dd9 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,11 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ + +a { +color:gray; +font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +text-decoration:none; +} + diff --git a/great-idea-website/index.html b/great-idea-website/index.html index d02046bcf..10229804b 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,48 +15,55 @@ - - Services - Product - Vision - Features - About - Contact - - - Innovation - On - Demand - - Get Started - - Image of a code snippet. - -

Features

+ +
+

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

-

About

+

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

+

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.

- -

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

Contact

+
    123 Way 456 Street
+
    Somewhere, USA
+
    1 (888) 888-8888
+
    sales@greatidea.io
+
Copyright Great Idea! 2018
From 4e6d625a0801df904fe31dac3a90e04ed8338f00 Mon Sep 17 00:00:00 2001 From: Zak Date: Wed, 4 Dec 2019 17:12:56 +0100 Subject: [PATCH 4/4] Do the HTML and CSS -still bugs --- README.md | 6 +-- great-idea-website/css/index.css | 81 ++++++++++++++++++++++++++++++++ great-idea-website/index.html | 45 ++++++++++-------- 3 files changed, 109 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index dffdf0bc8..a0c3043e1 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,11 @@ Project objectives are meant to increase your knowledge by giving you practice o **Watch this short guide on how to setup your project:** [UI Project Setup 101](https://youtu.be/UU9WjpMsaLE) -- [ ] Study the [desktop design file](design-files/desktop.jpg). Visualize how you would convert the design into HTML and CSS. Make a quick sketch of how you would build the HTML structure. Use your sketch as a plan of action for the next two objectives. Challenge yourself to only use 10 minutes for this particular objective. +- [x] Study the [desktop design file](design-files/desktop.jpg). Visualize how you would convert the design into HTML and CSS. Make a quick sketch of how you would build the HTML structure. Use your sketch as a plan of action for the next two objectives. Challenge yourself to only use 10 minutes for this particular objective. -- [ ] Go to your [index.html](great-idea-website/index.html) file and build out your HTML structure. You have been provided all the content and images you need to get started inside the `index.html` file. Start to code HTML around the content! +- [x] Go to your [index.html](great-idea-website/index.html) file and build out your HTML structure. You have been provided all the content and images you need to get started inside the `index.html` file. Start to code HTML around the content! -- [ ] Style your HTML using the [desktop design file](design-files/desktop.jpg) as a visual guide. Use any CSS properties you want for general styling but for layout, you can only use the box model (content, padding, margin, border) and `display:inline-block`. +- [x] Style your HTML using the [desktop design file](design-files/desktop.jpg) as a visual guide. Use any CSS properties you want for general styling but for layout, you can only use the box model (content, padding, margin, border) and `display:inline-block`. ## Stretch Goals: diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index c48713dd9..8e08464d0 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -65,9 +65,90 @@ h1, h2, h3, h4, h5 { /* Your code starts here! */ +body{ + padding:200px; +} + + a { +display:inline-block; color:gray; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; text-decoration:none; +margin:30px 35px; +} + +img { + display:inline; +} + +div{ + width:49%; + display:inline-block; + text-align:center; + font-size:100px; + +} + +button{ + border:1px solid black; + padding:10px 50px; + margin-bottom: 40%; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + background-color:white; +} + +h2{ + text-align:left; +} + +.p1,.p2{ + display:inline-block; + width:49%; +} + +.p3,.p4,.p5{ + display:inline-block; + width:33%; } + +.top-content{ +display:inline-block; +width:49%; +height:center; +margin:20px 0 0 0; +} + +.top-section{ + padding:20px; + border: 1px solid white; + border-top-color: black; +} + + + +.middle-img{ + width:100%; + display:block; +} + +ul{ + line-height: 30px; +} + +footer{ + text-align:center; + padding:50px 0 100px; + +} + +.sec-section{ + padding:20px; + border: 1px solid white; + border-bottom-color: black; +} + +.contact{ + padding:20px; +} diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 10229804b..a11bf28d7 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,7 +15,7 @@ -