kippyhixson · kippyhixson · Aug 9, 2021 · Aug 9, 2021 · Aug 9, 2021 · Aug 10, 2021
diff --git a/images/beach.jpg b/images/beach.jpg
diff --git a/images/bird1.jpg b/images/bird1.jpg
diff --git a/images/bird2.jpg b/images/bird2.jpg
diff --git a/images/cactus.jpg b/images/cactus.jpg
diff --git a/images/cow.jpg b/images/cow.jpg
diff --git a/images/nightbeach.jpg b/images/nightbeach.jpg
diff --git a/images/oakleaves.jpg b/images/oakleaves.jpg
diff --git a/images/snowcactus.jpg b/images/snowcactus.jpg
diff --git a/index.html b/index.html
@@ -13,16 +13,59 @@
 <body>
     <header>
         <nav>
-          <a class="orange" href="">Home</a>
-          <a class="blue" href="">About</a>
-          <a class="yellow" href="">Contact</a>
-          <a class="green" href="">Projects</a>
+          <h1>Kippy Hixson</h1>          
+           <links>
+            <button><a href="index.html">HOME</a></button>
+            <button><a href="about.html">ABOUT</a></button>
+            <button><a href="contact.html">CONTACT</a></button>
+            <button><a href="projects.html">PROJECTS</a></button>
+          </links>
         </nav>
-      </header>
+     </header>
+
+     <section class="top-section">
+            <button class="image-button">
+              <h1>Kippy Hixson</h1> 
+              <a href="projects.html">My Portfolio</a>
+            </button>
+     </section> 
+
+     <section>
+       <div class="row">           
+        <div class="portfolio-element">
+          <img src="https://picsum.photos/300"/>
+          <p>Portfolio Piece</p>
+        </div>
+        <div class="portfolio-element">
+          <img src="https://picsum.photos/300"/>
+          <p>Portfolio Piece</p>
+        </div>
+        <div class="portfolio-element">
+          <img src="https://picsum.photos/300"/>
+          <p>Portfolio Piece</p>
+        </div>
+       </div>
+
+       <div class="row">           
+        <div class="portfolio-element">
+          <img src="https://picsum.photos/300"/>
+          <p>Portfolio Piece</p>
+        </div>
+        <div class="portfolio-element">
+          <img src="https://picsum.photos/300"/>
+          <p>Portfolio Piece</p>
+        </div>
+        <div class="portfolio-element">
+          <img src="https://picsum.photos/300"/>
+          <p>Portfolio Piece</p>
+        </div>
+       </div>
+     </section>
+
+    <footer>
+        <button><a href="contact.html">Contact Me</a></button>
+    </footer> 
 
-      <div class="bigpic">
-        <img src="" alt="">
-      </div>
 
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -46,4 +46,74 @@ blockquote, q {
         margin:0;
         max-width:100%;
         border: 1px solid magenta
-    }
+    }
+
+nav{
+	display: flex;
+	justify-content: space-between;
+}
+
+.top-section{
+	display:flex;
+	justify-content:center;
+}
+.image-button{
+	background-image: url("https://picsum.photos/600/400");
+	background-repeat: no repeat;
+	background-size: cover;
+	color: white;
+	font-size: large;
+	width: 600px;
+	height: 400px;
+}	
+.row{
+	display:flex;
+	justify-content: space-evenly;
+	flex-direction:row;
+	padding: 20px;
+}	
+.portfolio-element{
+	text-align:center;
+}
+button{
+	background-color:lightgrey;
+	color:navy;
+	border: navy solid 1px;
+	padding: 5px 10px;
+}
+button:hover{
+	background-color:black;
+	color:lightblue;
+	border: lightgrey 1px;
+}
+button a{
+	text-decoration: none;
+	color:inherit;
+}
+
+footer{
+	background-color: lightblue;
+	padding: 20px;
+	text-align: center;
+}
+
+
+
+
+	/*Media Queries go here*/
+
+/*tablet view - 800px*/
+/*when the screen size reaches 800px or smaller these rules apply*/
+@media (max-width: 800px){
+
+
+}
+
+
+
+/*when the screen size reaches 500px or smaller these rules apply*/
+/*mobile view 500px*/
+@media (max-width: 500px){
+
+
+}