bloominstituteoftechnology · madysanmiller · Feb 17, 2023 · Feb 17, 2023 · Feb 21, 2023
diff --git a/ProjectImages/GitHub-Mark.png b/ProjectImages/GitHub-Mark.png
diff --git a/ProjectImages/LinkedIn-Logo.png b/ProjectImages/LinkedIn-Logo.png
diff --git a/ProjectImages/SPblurryBlep.jpg b/ProjectImages/SPblurryBlep.jpg
diff --git a/ProjectImages/SPburrito.jpg b/ProjectImages/SPburrito.jpg
diff --git a/ProjectImages/SPlayingOnSide.jpg b/ProjectImages/SPlayingOnSide.jpg
diff --git a/ProjectImages/SPlookingDownAtCamera.jpg b/ProjectImages/SPlookingDownAtCamera.jpg
diff --git a/ProjectImages/SPlookingDumb.jpg b/ProjectImages/SPlookingDumb.jpg
diff --git a/ProjectImages/SProllinInSunBeam.jpg b/ProjectImages/SProllinInSunBeam.jpg
diff --git a/ProjectImages/SPshrimpin.jpg b/ProjectImages/SPshrimpin.jpg
diff --git a/ProjectImages/SPshrimpyLaying.jpg b/ProjectImages/SPshrimpyLaying.jpg
diff --git a/ProjectImages/SPsideView.jpg b/ProjectImages/SPsideView.jpg
diff --git a/ProjectImages/SPsideView2.jpg b/ProjectImages/SPsideView2.jpg
diff --git a/ProjectImages/SPsitting.jpg b/ProjectImages/SPsitting.jpg
diff --git a/ProjectImages/SPsittingOnDresser.jpg b/ProjectImages/SPsittingOnDresser.jpg
diff --git a/ProjectImages/SPsittingWeird.jpg b/ProjectImages/SPsittingWeird.jpg
diff --git a/ProjectImages/SPsleeping.jpg b/ProjectImages/SPsleeping.jpg
diff --git a/ProjectImages/selfie1.jpg b/ProjectImages/selfie1.jpg
diff --git a/about.html b/about.html
@@ -1,11 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style/index.css">
+    <link rel="stylesheet" href="./style/responsive.css">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
+    <nav>
+        <h1>Madysan Miller</h1>
+        <div class="menu">
+            <a href="/index.html">Home</a>
+            <a href="/projects.html">Projects</a>
+            <a href="/about.html">About</a>
+            <a href="/contact.html">Contact</a>
+        </div>
+    </nav>
+    <div class="HomeTitle">
     <h1> ABOUT </h1>
+    </div>
+    <div class="About">
+        <div class="left">
+            <img class="photo" src="ProjectImages/selfie1.jpg" alt="Picture of Madysan Miller">
+        </div>
+        <div class="links">
+            <a href="https://github.com/madysanmiller"><img src="ProjectImages/GitHub-Mark.png" alt="" class="social"></a>
+            <a href=""><img src="ProjectImages/LinkedIn-Logo.png" alt="" class="social"></a>
+            <a href=""><img src="" alt="" class="social"></a>
+        </div>
+        <div class="right">
+            <p>My name is Madysan Miller, I'm 21 and I'm studying Full Stack Web Development at Bloomtech. I have a cat named Sweet Potato and a bearded dragon named Pogo. I like baking, playing video games, music, and drawing. This will be changed when I have proffessional things to put here but this is a decent filler for now.</p>
+        </div>
+    </div>
+    <footer>
+        <a class='button' href="/contact.html">Contact Me</a>
+        <div class="footer-links">
+            <a href="#">linkedIn(Comming Soon)</a>
+            <a href="#">social Meadia 2</a>
+            <a href="https://github.com/madysanmiller">Github</a>
+        </div>
+    </footer>
 </body>
 </html>
diff --git a/contact.html b/contact.html
@@ -1,11 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style/index.css">
+    <link rel="stylesheet" href="./style/responsive.css">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
+    <nav>
+        <h1>Madysan Miller</h1>
+        <div class="menu">
+            <a href="/index.html">Home</a>
+            <a href="/projects.html">Projects</a>
+            <a href="/about.html">About</a>
+            <a href="/contact.html">Contact</a>
+        </div>
+    </nav>
+    <div class="HomeTitle">
     <h1> CONTACT </h1>
+    </div>
+    <div class="ContactInfo">
+        <h2></h2>
+        <h2></h2>
+        <h2></h2>
+    </div>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -1,11 +1,75 @@
 <!DOCTYPE html>
 <html lang="en">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style/index.css">
+    <link rel="stylesheet" href="./style/responsive.css">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
-
+    <nav>
+        <h1>Madysan Miller</h1>
+        <div class="menu">
+            <a href="/index.html">Home</a>
+            <a href="/projects.html">Projects</a>
+            <a href="/about.html">About</a>
+            <a href="/contact.html">Contact</a>
+        </div>
+    </nav>
+    <div class="HomeTitle">
+    <h1> HOME </h1>
+    </div>
+    <div class="photo1">
+        <img src="ProjectImages/SPsideView2.jpg" alt="Sweet Potato">
+    </div>
+    <div class="HomeHeader">
+        <div>
+            <h1 class="name">Madysan Miller</h1>
+            <a class="button" href="/projects.html">My Projects</a>
+        </div>
+
+        <div class="HomeP">
+            <p>I'm studying Fullstack Web Design at Bloomtech and here are a few of my projects. </p>
+        </div>
+
+    </div>
+
+    <div class="gallery">
+        <div class="card">
+            <img src="ProjectImages/SPlookingDownAtCamera.jpg" alt="" class="photo">
+            <h2 class="title">Project 1</h2>
+        </div>
+        <div class="card">
+            <img src="ProjectImages/SPshrimpin.jpg" alt="" class="photo">
+            <h2 class="title">Project 2</h2>
+        </div>
+        <div class="card">
+            <img src="ProjectImages/SPsleeping.jpg" alt="" class="photo">
+            <h2 class="title">Project 3</h2>
+        </div>
+        <div class="card">
+            <img src="ProjectImages/SPsittingOnDresser.jpg" alt="" class="photo">
+            <h2 class="title">Project 4</h2>
+        </div>
+        <div class="card">
+            <img src="ProjectImages/SPsittingWeird.jpg" alt="" class="photo">
+            <h2 class="title">Project 5</h2>
+        </div>
+        <div class="card">
+            <img src="ProjectImages/SPsitting.jpg" alt="" class="photo">
+            <h2 class="title">Project 6</h2>
+        </div>
+    </div>
+
+    <footer>
+        <a class='button' href="/contact.html">Contact Me</a>
+        <div class="footer-links">
+            <a href="#">linkedIn(Comming Soon)</a>
+            <a href="#">social Meadia 2</a>
+            <a href="https://github.com/madysanmiller">Github</a>
+        </div>
+    </footer>
 </body>
 </html>
diff --git a/projects.html b/projects.html
@@ -1,11 +1,77 @@
 <!DOCTYPE html>
 <html lang="en">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style/index.css">
+    <link rel="stylesheet" href="./style/responsive.css">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
+    <nav>
+        <h1>Madysan Miller</h1>
+        <div class="menu">
+            <a href="/index.html">Home</a>
+            <a href="/projects.html">Projects</a>
+            <a href="/about.html">About</a>
+            <a href="/contact.html">Contact</a>
+        </div>
+    </nav>
+    <div class="HomeTitle">
     <h1> PROJECTS </h1>
+    </div>
+    <div class="projects">
+        <div class="project">
+            <img src="ProjectImages/SPshrimpyLaying.jpg" alt="Sweet Potato" class="photo">
+            <div class="description">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!</p>
+                <button>More Info</button>
+            </div>
+        </div>
+        <div class="project">
+            <div class="description">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!</p>
+                <button>More Info</button>
+            </div>
+            <img src="ProjectImages/SPblurryBlep.jpg" alt="" class="photo">
+        </div>
+        <div class="project">
+            <img src="ProjectImages/SPburrito.jpg" alt="" class="photo">
+            <div class="description">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!</p>
+                <button>More Info</button>
+            </div>
+        </div>
+        <div class="project">
+            <div class="description">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!</p>
+                <button>More Info</button>
+            </div>
+            <img src="ProjectImages/SPlayingOnSide.jpg" alt="" class="photo">
+        </div>
+        <div class="project">
+            <img src="ProjectImages/SPlookingDumb.jpg" alt="" class="photo">
+            <div class="description">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!</p>
+                <button>More Info</button>
+            </div>
+        </div>
+        <div class="project">
+            <div class="description">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!</p>
+                <button>More Info</button>
+            </div>
+            <img src="ProjectImages/SProllinInSunBeam.jpg" alt="" class="photo">
+        </div>
+    </div>
+    <footer>
+        <a class='button' href="/contact.html">Contact Me</a>
+        <div class="footer-links">
+            <a href="#">linkedIn(Comming Soon)</a>
+            <a href="#">social Meadia 2</a>
+            <a href="https://github.com/madysanmiller">Github</a>
+        </div>
+    </footer>
 </body>
 </html>