Toricruz mendiola

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
+- [x] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items

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! */
+/* 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%
+}

great-idea-website/index.html

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+  <meta http-equiv="refresh" content="3">
   <title>Great Idea!</title>
 
   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
@@ -16,48 +16,79 @@
 
   <body>
 
-  Services
-  Product
-  Vision
-  Features
-  About
-  Contact
-
-  <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-  Innovation
-  On
-  Demand
-
-  Get Started
-
-  <img src="img/header-img.png" alt="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.
-
-  <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+  <div class="navigation">
+    <span>Services</span>
+    <span>Product</span>
+    <span>Vision</span>
+    <span>Features</span>
+    <span>About</span>
+    <span>Contact</span>
+
+    <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+  </div>
+
+
+  <header>
+    <div>
+      <h1>Innovation
+        On
+      Demand</h1>
+      <button>Get Started</button>
+    </div>    
+    <div class="circleimg">
+      <img src="img/header-img.png" alt="Image of a code snippet.">
+    </div>
+  </header>
+
+  <hr>
 
-  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
+  <section class="top">
+    <div class="one">
+      <h3>Features</h3>
+      <p>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.</p>
+    </div>
+    <div class="two">
+      <h3>About</h3>
+      <p>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.</p>
+    </div>
+  </section>
+
+  <section class="image">
+    <img class="midimg" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+  </section>
+
+  <section class="bottom">
+    <div class="three">
+      <h3>Services</h3>
+        <p>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.</p>
+      </div>
+
+    <div class="four">
+      <h3>Product</h3>
+        <p>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.</p>
+    </div>
+    <div class="five">
+      <h3>Vision</h3>
+        <p>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.</p>
+    </div>
+  </section>
+
+  <hr>
+
+  <section class="contact">
+    <h3>Contact</h3>
+      <div class="six">
+        <address>123 Way 456 Street
+      Somewhere, USA</address>
+        <p>1 (888) 888-8888</p>
+        <p>sales@greatidea.io</p>
+    </div>
+  </section>
+
+  <footer>
+    Copyright Great Idea! 2018
+  </footer>
+
 
   </body>
 </html>