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 7766e7f18..8e08464d0 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,92 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* 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 92beabd65..a11bf28d7 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,49 +15,62 @@ - - 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. - - - 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 - + +
+
+

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

+ + +

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

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