DaveMadden · DaveMadden · Sep 2, 2021 · Sep 2, 2021 · Sep 2, 2021 · Sep 6, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -1,11 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Fira+Sans&family=Old+Standard+TT&display=swap" rel="stylesheet">
+
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>David Madden's Responsive Portfolio of Awesomeness</title>
+    <link rel="stylesheet" href="style/index.css">
 </head>
 <body>
-
+    <header>
+        <div class="left">
+            <h2>David Madden</h2>
+        </div>
+        <div class="right">
+            <nav>
+                <a href="#">Home</a>
+                <a href="#">About</a>
+                <a href="#">Contact</a>
+                <a href="#">Projects</a>
+            </nav>
+        </div>
+    </header>
+    <section class="hero">
+        <div aria-label="a rainbow over a valley in rural oregon with barns and pine forest in the distance">
+            <h1>David Madden</h1>
+            <a href="mailto:davelearnsstuff@gmail.com">Hire this guy</a>
+        </div>
+    </section>
+    <section class="gallery">
+        <div class="gallery-item">
+            <img src="pics/vgg.jpg" alt="a very good old dog smiling">
+            <a href="">very good girls</a>
+        </div>
+        <div class="gallery-item">
+            <img src="pics/cooking.jpg" alt="a young girl making pasta">
+            <a href="">cooking</a>
+        </div>
+        <div class="gallery-item">
+            <img src="pics/scythe.JPG" alt="a scythe and the grass it cut">
+            <a href="">lindy yardcare</a>
+        </div>
+        <div class="gallery-item">
+            <img src="pics/nap.jpg" alt="a cat napping on a chair">
+            <a href="">napping</a>
+        </div>
+        <div class="gallery-item">
+            <img src="pics/homestead.JPG" alt="a stack of firewood">
+            <a href="">resiliency</a>
+        </div>
+        <div class="gallery-item">
+            <img src="pics/garden2.JPG" alt="an overgrown garden bursting with veggies">
+            <a href="">regenerative agriculture</a>
+        </div>
+    </section>
+    <footer>
+        <a href="">Hire Me</a>
+    </footer>
 </body>
 </html>
diff --git a/pics/books.JPG b/pics/books.JPG
diff --git a/pics/chickens.jpg b/pics/chickens.jpg
diff --git a/pics/cooking.jpg b/pics/cooking.jpg
diff --git a/pics/garden.JPG b/pics/garden.JPG
diff --git a/pics/garden2.jpg b/pics/garden2.jpg
diff --git a/pics/hero.JPG b/pics/hero.JPG
diff --git a/pics/homestead.JPG b/pics/homestead.JPG
diff --git a/pics/nap.jpg b/pics/nap.jpg
diff --git a/pics/rainbow.JPG b/pics/rainbow.JPG
diff --git a/pics/scythe.JPG b/pics/scythe.JPG
diff --git a/pics/vgg.jpg b/pics/vgg.jpg
diff --git a/style/index.css b/style/index.css
@@ -1 +1,191 @@
-/* Add CSS styling here */
+/* Add CSS styling here */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	/* border: 0; */
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1.5;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* end of reset */
+
+/*defaults*/
+*{
+  box-sizing: border-box; /*respect the width*/
+  max-width: 100%; /*stops images from being larger than their parent*/
+  padding:0;
+  margin:0;
+  /* border: 1px solid grey; */
+}
+
+html{
+  font-size:62.5%; /*makes 1 rem == 10px*/
+}
+body{
+  font-size:1.6rem; /*brings back to 16px, but responsive*/
+  color: #4F4F4F;
+  margin:2%;
+}
+/*end of defaults*/
+
+h1, h2, h3{
+    font-family: 'Old Standard TT', serif;
+    text-transform: uppercase;
+    text-align: center;
+}
+a{
+    font-family: 'Fira Mono', monospace;
+    text-transform:lowercase;
+    text-decoration: none;
+    padding:1%;
+    color: black;
+}
+p{
+    font-family: 'Fira Sans', sans-serif;
+}
+
+h1{
+    font-size: 7rem;
+}
+h2{
+    font-size:3rem;
+    text-align:center;
+}
+
+header{
+    display:flex;
+    justify-content: space-between;
+    /* align-content:center; */
+}
+header div{
+    width:40%;
+}
+nav{
+    align-content:center;
+    display:flex;
+    justify-content: space-between;
+    /* border: 1px black solid */
+}
+
+nav a, .hero div a, footer a{
+    border:1px solid black;
+    border-radius: 5px;;
+}
+nav a{
+    background-color:pink;
+}
+
+.hero div a, footer a{
+    background-color: white;
+}
+
+.hero{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    height:50vh;
+    color: white;
+}
+.hero div{
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 80%;
+    height: 90%;
+    background-image: url(/pics/rainbow.JPG);
+    background-size: cover;
+    background-position: center;
+}
+.gallery{
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+.gallery-item{
+    width:30%;
+    display:flex;
+    flex-direction: column;
+}
+footer {
+    background-color: pink;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100px;
+
+}
+
+/* 800PX BREAK POINT STYLES */
+@media (max-width: 800px) {
+    header{
+        flex-direction: column;
+        justify-content: center;
+        align-items:center;
+    }
+    .gallery-item{
+        width:45%
+    }
+    h1{
+        font-size: 6rem;
+    }
+    header div {
+        width: 80%
+    }
+}
+
+/* 500PX BREAK POINT STYLES */
+@media (max-width: 500px) {
+    nav{
+        flex-direction: column;
+        justify-content: center;
+        align-items:center;
+    }
+
+    h1{
+        font-size: 5rem;
+    }
+}