diff --git a/README.md b/README.md index dffdf0bc8..67a48ec82 100644 --- a/README.md +++ b/README.md @@ -20,21 +20,21 @@ 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: Stretch goals are not required. Complete the project objectives before working on stretch. Stretch goals are not covered in the guided demo and need some research on your part. There is no particular order in this list, just pick one that sounds fun and push yourself. -- [ ] Give the navigation a background color and have it be fixed to the top of the page so that it scrolls with the user. You will want to study what z-index means in case you encounter any issues when you scroll. -- [ ] Introduce a new font family from [google fonts](https://fonts.google.com/) +- [X] Give the navigation a background color and have it be fixed to the top of the page so that it scrolls with the user. You will want to study what z-index means in case you encounter any issues when you scroll. +- [X] Introduce a new font family from [google fonts](https://fonts.google.com/) -- [ ] Create a new page based off of a navigation item. Create your own layout using box model and `display: inline-block;` +- [X] Create a new page based off of a navigation item. Create your own layout using box model and `display: inline-block;` see the button in the middle instead of the nav bar. - [ ] 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..d1ff9cd9e 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -54,7 +54,7 @@ table { html, body { height: 100%; - font-family: 'Titillium Web', sans-serif; + font-family: 'Oxygen'; } h1, h2, h3, h4, h5 { @@ -63,4 +63,116 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +header.navbar{ + overflow: hidden; + background-color: #6b5b95; + position: fixed; + top: 0; + width: 100%; +} + +a:link { + text-decoration: none; +} + +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +header{ + margin:10px; + padding-top: 10px; + padding-bottom: 40px; + padding-left: 20px; + padding-right: 20px; + text-align: center; +} +div.spacer{ + height:100px; +} + +footer{ + padding: 80px; +} + +hr{ + width: 90%; + height: 5px; + background:black; +} + +p.copyright{ + text-align: center; +} + +a.intro{ + display: inline-block; + color:#a2b9bc; + width:12%; +} +a.intro:hover{ + background:#ff7b25; +} +img.logo { + display: inline-block; + width:12%; +} + +div.container{ + display: inline-block; + width:47%; + text-align: center; + padding:5px; +} +h1.motto{ + font-size:60px; + text-align: center; + padding:20px; + margin:10px; +} +a.button{ + display: inline-block; + text-align: center; + border: 2px solid black; + width: 20%; + padding: 5px; + backgroung: +} +a.button:hover{ + background:#ff7b25; + +} + +div.wrapper{ + display: inline-block; + width: 47%; + padding: 5px; +} +div.wrapper2{ + display: inline-block; + width: 29%; + padding: 5px; + margin: 5px; +} +div.code{ + display:block; + text-align:center; +} + +h3.subtitle{ + display: inline-block; + text-align: left; +} + +section{ + padding-left:80px; + padding-right:80px; + padding-bottom:20px; + padding-top:20px; +} + diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..bed16c1d3 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -14,50 +14,81 @@ - - - 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 + +
+ +
+
+
+
+
+

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

+
+
+
+