diff --git a/README.md b/README.md index dffdf0bc8..62abb7bbe 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: @@ -37,4 +37,4 @@ Stretch goals are not required. Complete the project objectives before working o - [ ] Change all the image tags into background images instead -- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items \ No newline at end of file +- [x] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items \ No newline at end of file diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..e8babb187 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, @@ -63,4 +64,110 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +/*General styling goes here*/ +body{ + width:100%; + text-align:center; +} +hr{ + margin-right:27%; + margin-left:26.75%; +} +/*Navigation Styling Here*/ +.navigation *{ + display:inline-block; + margin-top: 1%; + margin-left:4%; + width: 4%; +} +.logo{ + width: 8%; +} +.navigation span{ + color: grey; +} +/*Header Styling Goes Here*/ +header div{ + text-align: center; + display:inline-block; + margin-top: 4%; + width: 35%; + font-size: 70px; + padding: 0 11%; +} +button{ + margin-top:0; + margin-bottom:50%; + font-size:18px; + padding: 4px 36px; + background-color: white; + transition: all 0.5s; + cursor: pointer; +} +.circleimg{ + margin-right:10%; +} +/* Section top goes here*/ +.one{ + text-align:left; + width:20%; + margin-right:2%; + display:inline-block; + margin-top:2%; +} +.two{ + text-align:left; + width:20%; + margin-left:4%; + display:inline-block; +} +/* Section image goes here*/ +.image{ + margin-bottom:2%; + margin-top:2%; +} +/* Section bottom goes here */ +.three{ + text-align:left; + width:13%; + margin-right:1.75%; + margin-left:1.75%; + display:inline-block; +} +.four{ + text-align:left; + width:13%; + margin-right:1.75%; + margin-left:1.75%; + display:inline-block; +} +.five{ + text-align:left; + width:13%; + margin-right:1.75%; + margin-left:1.75%; + display:inline-block; + margin-bottom:1%; +} +/* Section contact goes here */ +.six{ + text-align:left; + padding-left:26.75% +} +.contact h3{ + padding-left:26.75%; + text-align: left; + margin-top: 2%; +} +address{ + padding-bottom:15px; +} +.contact p{ + padding-bottom:15px; +} +/* Section footer goes here*/ +footer{ + margin-bottom: 5%; + margin-top: 5% +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..d94f7b1bd 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -3,7 +3,7 @@ - + Great Idea! @@ -16,48 +16,79 @@ - 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 + Product + Vision + Features + About + Contact + + +
+ + +
+
+

Innovation + On + Demand

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

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

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