jtvnn · jtvnn · Jun 2, 2021 · Jun 3, 2021 · Jun 3, 2021 · Jun 3, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/ReadMe.md b/ReadMe.md
@@ -1,6 +1,6 @@
 # Flexbox Module Challenge
 
-The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor.
+The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor..
 
 ## User Interface and Git
 

diff --git a/images/backgroundImg.jpg b/images/backgroundImg.jpg
diff --git a/images/img1.jpg b/images/img1.jpg
diff --git a/images/img2.jpg b/images/img2.jpg
diff --git a/images/img3.jpg b/images/img3.jpg
diff --git a/images/img4.jpg b/images/img4.jpg
diff --git a/images/img5.jpg b/images/img5.jpg
diff --git a/images/img6.jpg b/images/img6.jpg
diff --git a/index.html b/index.html
@@ -3,9 +3,65 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Jason Vann's Portfolio</title>
+    <link rel="stylesheet" href="style/index.css">
 </head>
 <body>
-
+    <header>
+        <nav>
+            <div class="iconName">
+                <h2>Jason Vann</h2>
+            </div>
+            <div class="links"></div>
+                <a href="index.html">Home</a>
+                <a href="about.html">About</a>
+                <a href="contact.html">Contact</a>
+                <a href="projects.html">Projects</a>
+            </div>
+        </nav>
+    </header>
+    <section class="top">
+        <div class="topImg">
+            <div class="bgButton">
+                <h2>Jason Vann</h2>
+                <a href="projects.html">Projects</a>
+            </div>
+        </div>
+    </section>
+    <section class="galleries">
+        <div class="gallery1">
+            <div>
+                <img src="../images/img1.jpg" alt="Multiple displays">
+                <p>Plenty of Screens</p>
+            </div>
+            <div>
+                <img src="../images/img2.jpg" alt="Open Laptop on a table">
+                <p>Open to begin</p>
+            </div>
+            <div>
+                <img src="../images/img3.jpg" alt="Man working in front of multiple screens">
+                <p>Projects all day long</p>
+            </div>
+        </div>
+        <div class="gallery2">
+            <div>
+                <img src="../images/img4.jpg" alt="Backlit keyboard">
+                <p>Night Work</p>
+            </div>
+            <div>
+                <img src="../images/img5.jpg" alt="Sound studio image">
+                <p>Music helps</p>
+            </div>
+            <div>
+                <img src="../images/img6.jpg" alt="Code on screen">
+                <p>Code and more code</p>
+            </div>
+        </div>
+    </section>
+    <footer>
+        <div class="contactButton">
+            <a href="contact.html">Contact Me</a>
+        </div>
+    </footer>
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,197 @@
-/* Add CSS styling here */
+/*Google Fonts import*/
+@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');
+/* 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;
+	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;
+}
+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;
+}
+
+* {
+    box-sizing:border-box; /*respect the width I've given you, if I add padding or margin apply it within the given width no in addition to it*/
+    padding:0;
+    margin:0;
+    max-width:100%; /*you can never be bigger than you parent*/
+    /* border:1px solid grey; */
+}
+
+/*General Styles*/
+html {
+    font-size: 62.5%;
+}
+
+body {
+    font-size: 1.8rem;
+    line-height: 1.5;
+    color:#4F4F4F;
+}
+
+a {
+    text-decoration: none;
+    color: #4F4F4F;
+}
+
+section {
+    padding: 4% 0;
+}
+html{
+    font-family: 'Squada One', cursive;
+}
+/*Header*/
+nav{
+    display: flex;
+    justify-content: flex-end;
+    padding: .25%;
+}
+.iconName{
+    width: 90%;
+    padding: 1%;
+    font-size: 175%;
+}
+nav a{
+    padding: 1%;
+    font-size: 175%;
+}
+
+/*Top*/
+
+.topImg{
+    height: 90vh;
+    margin: 2% 5% ;
+    background-image: url('../images/backgroundImg.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.bgButton a{
+    background-color: #4F4F4F;
+    color:antiquewhite;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid black;
+    border-radius: 10px;
+}
+.bgButton h2{
+    color:antiquewhite;
+    font-size: 200%;
+}
+/*Galleries*/
+.gallery1, .gallery2{
+    margin: 2% 6%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.gallery1 div, .gallery2 div{
+    width: 21%;
+}
+.gallery1 div img, .gallery2 div img{
+    width: 100%;
+}
+.gallery1 div p, .gallery2 div p{
+    text-align:center;
+    font-size: 100%;
+}
+/*Footer*/
+.contactButton{
+    margin: 3%;
+    display: flex;
+    justify-content: center;
+    background-color: #A0B09C;
+
+}
+.contactButton a{
+    border: 2px solid black;
+    background-color: antiquewhite;
+    border-radius: 10px;
+    padding: 1%;
+}
+
+/*Media Queries*/
+@media(max-width:800px){
+    nav a{
+        padding: 1%;
+        font-size: 150%;
+    }
+    .topImg{
+        height: 75vh;
+    }
+    .gallery1 div p, .gallery2 div p{
+        text-align:center;
+        font-size: 85%;
+    }
+}
+
+@media(max-width:500px){
+    nav{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .topImg{
+        height: 50vh;
+    }
+    .iconName{
+        text-align: center;
+    }
+    .galleries{
+        display: flex;
+    }
+    .gallery1, .gallery2{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .gallery1 div, .gallery2 div{
+        width: 50%;
+    }
+    .gallery1 div p, .gallery2 div p{
+        text-align:center;
+        font-size: 75%;
+    }
+}