bloominstituteoftechnology · artemasver3-2 · Jun 26, 2023 · Jul 18, 2023 · Jul 28, 2023
diff --git a/about.html b/about.html
@@ -3,9 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="./style/index.css">
+    <link href="https://fonts.googleapis.com/css2?family=Agdasima&family=Gudea&family=Staatliches&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
+    <title>ABOUT</title>
 </head>
 <body>
-    <h1> ABOUT </h1>
+    <header>
+        <div class="titlename">
+        <h1> ABOUT ME </h1>
+        </div>
+
+        <nav>
+            <a href="index.html">HOME</a>
+            <a>ABOUT</a>
+            <a href="contact.html">CONTACT</a>
+            <a href="projects.html">PROJECTS</a>
+        </nav>
+    </header>
+
+
+    <div class="aboutsection"><span>Oh, so this is the part where I introduce myself, yeah? Right. Well, to start, my name is Heidi Gunter, which is lucky because if my father had had it his way, I'd be named Olga Gunter, and well, high-school sure would have been fun. That's not really what you are here to learn about me, but hey, it's a funny way to start. I am a thirty year old single mother residing in the south of the US. I work full time as a dispatcher for a private ambulance company, while also being enrolled at BloomTech. I took on this adventure as an opportunity to better myself for my family. The thing I enjoy most about coding is seeing my hard work come to life. Mostly, I prefer designing things, but find Javascript to be interesting, so far at least. </span></div>
+
+    <div class="freesection"><span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></div>
+
+    <div class="footer">
+        <a class="footercontact" href="contact.html">CONTACT ME</a>
+     </div>
+
 </body>
 </html>
diff --git a/contact.html b/contact.html
@@ -2,10 +2,40 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
-    <title>Document</title>
+    <meta name="viewport" content="width=initial-scale=1.0">
+    <link rel="stylesheet" href="./style/index.css">
+    <link href="https://fonts.googleapis.com/css2?family=Agdasima&family=Gudea&family=Staatliches&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
+    <title>CONTACT</title>
 </head>
 <body>
-    <h1> CONTACT </h1>
+    <header>
+        <div class="titlename">
+        <h1> CONTACT </h1>
+        </div>
+
+        <nav>
+            <a href="index.html">HOME</a>
+            <a href="about.html">ABOUT</a>
+            <a>CONTACT</a>
+            <a href="projects.html">PROJECTS</a>
+        </nav>
+    </header>
+
+    <div class="contactinfo"><span class="contact">
+        <img src="https://creazilla-store.fra1.digitaloceanspaces.com/icons/7916033/email-icon-md.png"> 
+        <a class="contact" href=mailto:"[email protected]">[email protected]</a>
+        <img src="https://cdn-icons-png.flaticon.com/512/455/455705.png">
+        256-453-2848
+        <img src="https://cdn.iconscout.com/icon/free/png-256/free-slack-1464545-1239456.png">
+        heidi_gunter
+    </span></div>
+
+<div class="freesection"><span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></div>
+
+<div class="footer">
+    <a class="footercontact" href="contact.html">CONTACT ME</a>
+ </div>
+
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -3,9 +3,57 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="./style/index.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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=Agdasima&family=Gudea&family=Staatliches&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
+    <title>Heidi's Site</title>
 </head>
 <body>
+    <div class="titlename">
+         <h1>Heidi Gunter</h1>
+    </div>
+
+
+        <nav>
+            <a>HOME</a>
+            <a href="about.html">ABOUT</a>
+            <a href="contact.html">CONTACT</a>
+            <a href="projects.html">PROJECTS</a>
+        </nav>
+
+        <h2>INTRODUCING MY SITE</h2>
+
 
+    <div class="aboutsection">
+        <span>
+            Hi! My name's Heidi, and this is a thing I made to highlight certain projects and introduce myself, as well as leave my contact info. I'm not the best at introducing myself, but there's a whiole page dedicated to that, so I'll leave it there and you can take a look if you like! I assume I'll be using this as a resume of sorts later on, but even if that's not true, I learned a lot while making this and I'm pretty proud of how it turned out. So, if you're seeing this, thanks for looking! 
+        </span>
+    </div>
+
+    <h2>MY PROJECTS</h2>
+
+    <div class="highlightedproject">
+        <img src="https://e0.pxfuel.com/wallpapers/524/967/desktop-wallpaper-beautifull-cityscape-in-the-world-dark-aesthetic-landscape.jpg" alt="greyscaleforest picture taken from up high">
+    </div>
+
+    <div class="projectimages">
+        <img class="projects" src="https://w0.peakpx.com/wallpaper/597/65/HD-wallpaper-blackmarble-aesthetic-black-black-and-white-marble-simple-tumblr-white-thumbnail.jpg" alt="black and white marble with gold accents">
+        <img class="projects" src="https://wallpapercave.com/wp/wp5500381.jpg" alt="hands in cloudy water">
+        <img class="projects" src="https://e0.pxfuel.com/wallpapers/269/917/desktop-wallpaper-tumblr-goth-grunge-emo-aesthetic.jpg" alt="tarot card the lovers">
+        <img class="projects" src="https://i.pinimg.com/originals/02/43/89/024389c58915a3a7796209f5f11159dd.png" alt="severed hand holding a rose">
+
+        <div class="projectdescriptions">
+            <span class="projectdescptext">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
+        </div>
+    </div>
+
+    <div class="footerhome">
+       <a class="footercontact" href="contact.html">CONTACT ME</a>
+    </div>
 </body>
 </html>
diff --git a/projects.html b/projects.html
@@ -3,9 +3,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="./style/index.css">
+    <link href="https://fonts.googleapis.com/css2?family=Agdasima&family=Gudea&family=Staatliches&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
+    <title>projects</title>
 </head>
 <body>
-    <h1> PROJECTS </h1>
+    <header>
+        <div class="titlename">
+        <h1> PROJECTS </h1>
+        </div>
+
+        <nav>
+            <a href="index.html">HOME</a>
+            <a href="about.html">ABOUT</a>
+            <a HREF="contact.html">CONTACT</a>
+            <a>PROJECTS</a>
+        </nav>
+    </header>
+
+    <div class="freesection"><span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></div>
+
+<div class="freesection"><span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></div>
+
+<div class="footer">
+    <a class="footercontact" href="contact.html">CONTACT ME</a>
+ </div>
 </body>
 </html>