From e7a595ac983ad634e0b442c66d8d33173d7fa43b Mon Sep 17 00:00:00 2001 From: toricruzmendiola Date: Wed, 11 Mar 2020 12:45:50 -0700 Subject: [PATCH 1/8] Added HTML structure to GI Website Layout and will now begin CSS Styling --- great-idea-website/css/index.css | 2 +- great-idea-website/index.html | 72 +++++++++++++++++++------------- 2 files changed, 45 insertions(+), 29 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..8eb088f1b 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,4 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..a1d3d399d 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -3,7 +3,7 @@ - + Great Idea! @@ -16,48 +16,64 @@ +
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. +
+ Innovation + On + Demand - 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. + Get Started - Image of code snippets across the screen + Image of a code snippet. +
- 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. - +
+ 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. - 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 + 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. +
+ - Copyright Great Idea! 2018 + 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 22b62f6bb1ea4897ee9bfe3f4e82a85c6952231c Mon Sep 17 00:00:00 2001 From: toricruzmendiola Date: Wed, 11 Mar 2020 13:43:46 -0700 Subject: [PATCH 2/8] Properly marked up HTML and just completed navigation style layout. 5 sections left --- README.md | 4 +-- great-idea-website/css/index.css | 8 +++++ great-idea-website/index.html | 52 ++++++++++++++++---------------- 3 files changed, 36 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index dffdf0bc8..0b2694cbe 100644 --- a/README.md +++ b/README.md @@ -20,9 +20,9 @@ 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`. diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 8eb088f1b..f6657cf1f 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -22,6 +22,7 @@ time, mark, audio, video { font-size: 100%; font: inherit; vertical-align: baseline; + border: 1px solid grey; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, @@ -64,3 +65,10 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ +/*Navigation Styling Here*/ +.navigation *{ + display:inline-block; + margin-left:4%; + width: 9%; +} +/*Header Styling Goes Here*/ diff --git a/great-idea-website/index.html b/great-idea-website/index.html index a1d3d399d..9a61955bd 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -17,57 +17,57 @@
- Services - Product - Vision - Features - About - Contact - - + Services + Product + Vision + Features + About + Contact + +
- Innovation - On - Demand +

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

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

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

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