tdsills · tdsills · Jan 25, 2021 · Jan 25, 2021
diff --git a/Images/300.jpg b/Images/300.jpg
diff --git a/Images/anime.jpeg b/Images/anime.jpeg
diff --git a/Images/cake.jpg b/Images/cake.jpg
diff --git a/Images/creme.jpg b/Images/creme.jpg
diff --git a/Images/mac.jpg b/Images/mac.jpg
diff --git a/Images/rent.jpg b/Images/rent.jpg
diff --git a/Images/space.jpg b/Images/space.jpg
diff --git a/Images/sushi.jpg b/Images/sushi.jpg
diff --git a/Images/taylor.jpg b/Images/taylor.jpg
diff --git a/aboutme.css b/aboutme.css
@@ -0,0 +1,143 @@
+@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Oswald", sans-serif;
+}
+/*Why isn't my font working on all pages?*/
+html {
+  text-align: center;
+  background-image: linear-gradient(
+    to right bottom,
+    #520248,
+    #543579,
+    #2683c4,
+    #00a9da,
+    #00edc4,
+    #5ffb66
+  );
+  background-repeat: no-repeat;
+  height: 100%;
+  font-size: 2.5vh;
+  line-height: 2em;
+  margin: 0;
+  background-attachment: fixed;
+}
+.topDivider {
+  fill: rgb(0, 0, 0);
+}
+.thanks {
+  font-size: x-large;
+  padding: 2vh;
+}
+div.navIndex {
+  margin: 0;
+  margin-bottom: 2vh;
+  padding: 0;
+  border: 1vh solid rgb(0, 0, 0);
+  border-radius: 2vh;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+a {
+  text-decoration: none;
+}
+.title {
+  font-size: xx-large;
+}
+h1 {
+  text-decoration: underline;
+  margin-top: 1vh;
+}
+h5 {
+  margin: 5vh;
+  text-decoration: none;
+}
+header {
+  display: flexbox;
+  justify-content: space-between;
+}
+button {
+  margin: 2vh;
+  padding: 1vh;
+  border-radius: 1em;
+  background-origin: padding-box;
+  border: none;
+  background-color: rgb(0, 0, 0);
+  color: rgb(52, 248, 255);
+  font-size: 3vh;
+  position: relative;
+}
+button :hover {
+  color: turquoise;
+}
+button :visited {
+  color: rgb(186, 0, 192);
+}
+.overview {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.container {
+  width: 90%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.form {
+  padding: 5vh;
+}
+input {
+  margin: 2vh;
+  font-size: 3vh;
+  background-color: rgb(255, 255, 255);
+}
+textarea {
+  font-size: 3vh;
+}
+ul {
+  list-style: square;
+  list-style-position: inside;
+}
+
+.photos {
+  width: 100%;
+}
+.image {
+  margin: 2%;
+  padding-top: 5%;
+}
+
+.homePic {
+  width: 40%;
+  height: auto;
+  border-radius: 50%;
+}
+.myName {
+  padding: 2vh;
+  font-size: 5vh;
+  font-weight: bolder;
+  text-align: center;
+}
+footer {
+  font-size: 2vh;
+  margin: 3vh;
+}
+
+/*phone*/
+@media screen and (max-width: 780px) {
+  button {
+    font-size: 2vh;
+  }
+  .myName {
+    font-size: 3.2vh;
+  }
+  .homePic {
+    width: 250px;
+  }
+}
diff --git a/contact.html b/contact.html
@@ -1,11 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact</title>
-</head>
-<body>
-
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="aboutme.css" rel="stylesheet" type="text/css" />
+    <title>Contact Me</title>
+  </head>
+
+  <body>
+    <div class="topDivider">
+        <svg
+          data-name="Layer 1"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1200 120"
+          preserveAspectRatio="none"
+        >
+          <path
+            d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
+            opacity=".25"
+            class="shape-fill"
+          ></path>
+          <path
+            d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
+            opacity=".5"
+            class="shape-fill"
+          ></path>
+          <path
+            d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
+            class="shape-fill"
+          ></path>
+        </svg>
+    </div>
+    <div class="headerHome">
+        <header>
+          <div class="navIndex">
+            <div>
+              <button><a href="index.html">Home</a></button>
+            </div>
+            <div>
+              <button><a href="me.html">About</a></button>
+            </div>
+            <div>
+              <button><a href="gallery.html">Gallery</a></button>
+            </div>
+            <div>
+              <button><a href="contact.html">Contact</a></button>
+            </div>
+        </header>
+    </div>
+    <div class="container">       
+        <div class="title">
+            <h1>Contact Me</h1>
+        </div>
+        <div class="form">
+            <form action="_blank"></form>
+                <div>
+                    <input type="text" value="Name:" />
+                </div>
+                <div>
+                    <input type="text" value="Email:" />
+                </div>
+                <div>
+                <!--How do I make a message box without the content inside? Not sure why it's happening.-->
+                    <textarea
+                    id="message"
+                    name="message"
+                    >Message:</textarea
+                    >
+                </div>
+                    <div class="submit">
+                    <button><a href="_blank">Submit</a></button>
+                </div>
+            </form>
+        </div>
+    </div>
+  </body>
+  <footer>Go be awesome today!</footer>
+</html>
diff --git a/gallery.html b/gallery.html
@@ -1,11 +1,113 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="aboutme.css" rel="stylesheet" type="text/css" />
     <title>Gallery</title>
-</head>
-<body>
-
-</body>
-</html>
+  </head>
+
+  <body>
+    <div class="topDivider">
+      <svg
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1200 120"
+        preserveAspectRatio="none"
+      >
+        <path
+          d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
+          opacity=".25"
+          class="shape-fill"
+        ></path>
+        <path
+          d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
+          opacity=".5"
+          class="shape-fill"
+        ></path>
+        <path
+          d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
+          class="shape-fill"
+        ></path>
+      </svg>
+    </div>
+    <div class="headerHome">
+      <header>
+        <div class="navIndex">
+          <div>
+            <button><a href="index.html">Home</a></button>
+          </div>
+          <div>
+            <button><a href="me.html">About</a></button>
+          </div>
+          <div>
+            <button><a href="gallery.html">Gallery</a></button>
+          </div>
+          <div>
+            <button><a href="contact.html">Contact</a></button>
+          </div>
+        </div>
+      </header>
+    </div>
+    <div class="container">
+      <div class="title">
+        <h1>Gallery</h1>
+        <h5>These are a few of my favorite things...</h5>
+      </div>
+      <div class="photos">
+        <div class="image">
+          <a href="Images/cake.jpg" target="_blank">
+            <img
+              src="Images/cake.jpg"
+              width="300px"
+              alt="White Chocolate Raspberry Cake"
+          /></a>
+          <h4>Baking</h4>
+        </div>
+        <div class="image">
+          <a href="Images/anime.jpeg" target="_blank">
+            <img src="Images/anime.jpeg" width="300px" alt="Anime Collage"
+          /></a>
+          <h4>Watching Anime</h4>
+        </div>
+        <div class="image">
+          <a href="Images/mac.jpg" target="_blank">
+            <img src="Images/mac.jpg" width="320px" alt="Baked Mac & Cheese"
+          /></a>
+          <h4>Baked Mac & Cheese</h4>
+        </div>
+        <div class="image">
+          <a href="Images/300.jpg" target="_blank">
+            <img src="Images/300.jpg" width="300px" alt="300 Movie Poster"
+          /></a>
+          <h4>The Film: 300</h4>
+        </div>
+        <div class="image">
+          <a href="Images/sushi.jpg" target="_blank">
+            <img src="Images/sushi.jpg" width="300px" alt="Sushi Platter"
+          /></a>
+          <h4>Eating and Making Sushi</h4>
+        </div>
+        <div class="image">
+          <a href="Images/rent.jpg" target="_blank">
+            <img src="Images/rent.jpg" width="300px" alt="RENT Movie Poster"
+          /></a>
+          <h4>The Film: RENT</h4>
+        </div>
+        <div class="image">
+          <a href="Images/creme.jpg" target="_blank">
+            <img src="Images/creme.jpg" width="300px" alt="Creme Brulee"
+          /></a>
+          <h4>Creme Brulee</h4>
+        </div>
+        <div class="image">
+          <a href="Images/space.jpg" target="_blank">
+            <img src="Images/space.jpg" width="300px" alt="The planets"
+          /></a>
+          <h4>Facts About Space</h4>
+        </div>
+      </div>
+    </div>
+  </body>
+  <footer>Go be awesome today!</footer>
+</html>