diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/.DS_Store differ
diff --git a/Atropos.jpg b/Atropos.jpg
new file mode 100644
index 0000000..278152e
Binary files /dev/null and b/Atropos.jpg differ
diff --git a/BackgroundBody.png b/BackgroundBody.png
new file mode 100755
index 0000000..bc2b48b
Binary files /dev/null and b/BackgroundBody.png differ
diff --git a/Buru profile pick.png b/Buru profile pick.png
new file mode 100644
index 0000000..f391779
Binary files /dev/null and b/Buru profile pick.png differ
diff --git a/Buru.JPG b/Buru.JPG
new file mode 100755
index 0000000..71652fd
Binary files /dev/null and b/Buru.JPG differ
diff --git a/CssAbout.Css b/CssAbout.Css
new file mode 100644
index 0000000..6afc157
--- /dev/null
+++ b/CssAbout.Css
@@ -0,0 +1,183 @@
+body {
+  background-color: #f0f0f0;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 15vh;
+  background-color: bisque;
+  padding: 0%;
+  margin: 0px;
+  box-shadow: 0 0 12px -2px rgb(166, 102, 102);
+  border-radius: 1%;
+  margin-bottom: 10px;
+  background-image: url("h1Picture.jpg");
+}
+
+h1 {
+  margin: 0;
+  padding: 12px;
+  color: rgb(241, 247, 205);;
+  border-radius: 1%;
+  transition: transform .6s;
+}
+
+h1:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+#links > a {
+  text-decoration: none;
+  color: rgb(10, 1, 1);
+  padding: 10px;
+  font-weight: 70;
+  font-size: 24px;
+  animation-name: example;
+  animation-duration: 50s;
+  background-color: rgb(241, 247, 205);
+border-radius: 10%;
+}
+
+
+
+
+#links {
+  display: flex;
+  gap: 25px;
+}
+
+
+
+main {
+  min-height: 100vh;
+  padding: 85px 24px 96px;
+  box-shadow: 0 0 12px -2px black;
+  color: rgb(241, 247, 205);
+  font-family: "Open Sans", sans-serif;
+  font-size: 25px;
+  background-image: url("buru2.jpg");
+}
+
+footer {
+  text-align: center;
+  padding: 10px;
+  background-color: #a85555;
+  color: #3bc9aa;
+  position: fixed;
+  width: 96.4%;
+  bottom: 0;
+}
+
+footer > a {
+  color: #c9b83b;
+  text-decoration: none;
+}
+
+h2 {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 2em;
+  transition: transform .6s;
+}
+h2:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+p {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 1em;
+  transition: transform .6s;
+}
+
+
+
+h3 {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 2em;
+  transition: transform .6s;
+}
+
+h3:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+.text {
+  color: rgb(241, 247, 205);
+  font-size: 40px;
+  position: absolute;
+  top: 50%;
+  left: 89%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+footer a:hover {
+  color: #c9b83b;
+  text-decoration: underline;
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+  transition: transform .6s;
+}
+
+.imgRecording {
+  float: left;
+  clip-path: circle(50%);
+  shape-outside: circle(50%);
+  margin-top: -17px;
+  transition: transform .6s;
+  
+}
+
+.imgComposing {
+  float: right;
+  clip-path: circle(50%);
+  shape-outside: circle(50%);
+  margin-right: rem;
+  transition: transform .6s;
+  
+}
+
+.imgComposing:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+  .imgRecording:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+  #home:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+#about:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+#portfolio:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+   a:visited {
+    color: rgb(241, 247, 205);
+    
+  }
+
+  h1 a {
+    color: rgb(241, 247, 205);
+    text-decoration: none;
+  }
+
+
+
diff --git a/CssHome.css b/CssHome.css
new file mode 100644
index 0000000..50d4ca4
--- /dev/null
+++ b/CssHome.css
@@ -0,0 +1,236 @@
+/* * {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid: template rows 5px;
+} */
+
+header {
+  background-image: url("3.png");
+  height: 70px;
+  width: 110%;
+  margin: -10px;
+}
+body {
+  background-color: #f0f0f0;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 15vh;
+  background-color: bisque;
+  padding: 0%;
+  margin: 0px;
+  box-shadow: 0 0 12px -2px rgb(166, 102, 102);
+  border-radius: 1%;
+  margin-bottom: 10px;
+  background-image: url("h1Picture.jpg");
+}
+
+h1 {
+  color: rgb(26, 27, 24);
+  margin: 0;
+  padding: 12px;
+  color: rgb(241, 247, 205);
+  border-radius: 10%;
+  transition: transform 0.6s;
+}
+
+h1:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+#links > a {
+  text-decoration: none;
+  color: rgb(10, 1, 1);
+  padding: 10px;
+  font-weight: 70;
+  font-size: 24px;
+  background-color: rgb(241, 247, 205);
+  border-radius: 10%;
+  transition: transform 0.6s;
+}
+#home:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+#about:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+#portfolio:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+@keyframes example {
+  from {
+    background-color: rgb(185, 204, 148);
+    border-radius: 10%;
+  }
+  to {
+    background-color: bisque;
+    border-radius: 50%;
+  }
+}
+
+#links {
+  display: flex;
+  gap: 25px;
+}
+
+h1 {
+  display: block;
+  font-size: 2em;
+  margin-block-start: 0.67em;
+  margin-block-end: 0.67em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-weight: bold;
+  unicode-bidi: isolate;
+}
+
+#buru {
+  border-radius: 2%;
+  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.2);
+  margin: -50px 0px 0px auto;
+  display: block;
+  transition: transform 0.6s;
+}
+
+#buru:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+main {
+  min-height: 100vh;
+  padding: 85px 24px 96px;
+  box-shadow: 0 0 12px -2px black;
+  color: rgb(241, 247, 205);
+  font-family: "Open Sans", sans-serif;
+  font-size: 25px;
+  background-image: url("BackgroundBody.png");
+}
+
+footer {
+  text-align: center;
+  padding: 10px;
+  background-color: #a85555;
+  color: #3bc9aa;
+  position: fixed;
+  width: 96.4%;
+  bottom: 0;
+}
+
+footer > a {
+  color: #c9b83b;
+  text-decoration: none;
+}
+
+h2 {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 2em;
+  transition: transform 0.6s;
+}
+h2:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+p {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 1em;
+  transition: transform 0.6s;
+}
+
+p:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+h3 {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 2em;
+  transition: transform 0.6s;
+}
+
+h3:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+.text {
+  color: rgb(223, 223, 150);
+  font-size: 40px;
+  position: absolute;
+  top: 50%;
+  left: 89%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  margin: -70px 0 0 0;
+}
+
+.container:hover .overlay {
+  opacity: 1;
+}
+
+.overlay {
+  transition: 0.5s ease;
+  background-color: #008cba;
+}
+
+footer a:hover {
+  color: #c9b83b;
+  text-decoration: underline;
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+.favicon {
+  width: 50px;
+  height: 50px;
+  border-radius: 80%;
+  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.2);
+}
+
+.img-wrapper {
+  position: relative;
+  display: inline-block;
+  padding-top: 50px;
+}
+
+.img-wrapper > .content {
+  position: absolute;
+  inset: 0;
+  background: rgba(46, 39, 39, 0.4);
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+}
+
+.img-wrapper > .content {
+  transition: 500ms ease-in-out;
+  opacity: 0;
+}
+.img-wrapper:hover > .content {
+  opacity: 1;
+}
+
+.maindiv {
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/CssPortfolio.css b/CssPortfolio.css
new file mode 100644
index 0000000..26a41a2
--- /dev/null
+++ b/CssPortfolio.css
@@ -0,0 +1,195 @@
+body {
+  background-color: #f0f0f0;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 15vh;
+  background-color: bisque;
+  padding: 0%;
+  margin: 0px;
+  box-shadow: 0 0 12px -2px rgb(166, 102, 102);
+  border-radius: 1%;
+  margin-bottom: 10px;
+  background-image: url("h1Picture.jpg");
+}
+
+h1 {
+  
+  margin: 0;
+  padding: 12px;
+  color: rgb(241, 247, 205);
+  border-radius: 10%;
+  transition: transform .6s;
+}
+
+h1:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+#links > a {
+  text-decoration: none;
+  color: rgb(10, 1, 1);
+  padding: 10px;
+  font-weight: 70;
+  font-size: 24px;
+  background-color: rgb(241, 247, 205);
+  border-radius: 10%;
+}
+
+#links {
+  display: flex;
+  gap: 25px;
+   border-radius: 10%;
+}
+
+h1 {
+  display: block;
+  font-size: 2em;
+  margin-block-start: 0.67em;
+  margin-block-end: 0.67em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-weight: bold;
+  unicode-bidi: isolate;
+  text-decoration: none;
+}
+
+#buru {
+  border-radius: 2%;
+  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.2);
+  margin: 20px 0px 0px auto;
+  display: block;
+}
+
+#buru:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+main {
+  min-height: 100vh;
+  padding: 85px 24px 96px;
+  box-shadow: 0 0 12px -2px black;
+  color: rgb(241, 247, 205);
+  font-family: "Open Sans", sans-serif;
+  font-size: 25px;
+  background-image: url("BackgroundBody.png");
+}
+
+footer {
+  text-align: center;
+  padding: 10px;
+  background-color: #a85555;
+  color: #3bc9aa;
+  position: fixed;
+  width: 96.4%;
+  bottom: 0;
+}
+
+footer > a {
+  color: #c9b83b;
+  text-decoration: none;
+}
+
+h2 {
+  display: flex;
+  justify-content: left;
+  text-align: center;
+  font-size: 2em;
+  transition: transform .6s;
+}
+h2:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+p {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 1em;
+  color: rgb(241, 247, 205);
+  transition: transform .6s;
+}
+
+p:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+h3 {
+  display: flex;
+  justify-content: left;
+  text-align: right;
+  font-size: 2em;
+  color: rgb(241, 247, 205);
+  transition: transform .6s;
+}
+
+h3:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+  
+}
+
+.text {
+  color: rgb(223, 223, 150);
+  font-size: 40px;
+  position: absolute;
+  top: 50%;
+  left: 89%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+footer a:hover {
+  color: #c9b83b;
+  text-decoration: underline;
+  transform: scale(1.05);
+  transition: transform 1.3s ease;
+}
+
+.firstSection {
+    background-color: rgb(241, 247, 205);
+    border-radius: 2%;
+    background-image: url("guernica3.jpg");
+}
+
+.secondSection {
+    background-image: url("Atropos.jpg");
+    border-radius: 2%;
+}
+
+.thirdSection {
+    background-image: url("duelo-garrotazos.jpg");
+    background-size: cover;
+    border-radius: 2%;
+}
+
+#home:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+#about:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+#portfolio:hover {
+  transform: scale(1.05);
+  transition: transform 1.3s ease;}
+
+  a:visited {
+    color: rgb(241, 247, 205);
+    
+  }
+
+   h1 a {
+    color: rgb(241, 247, 205);
+    text-decoration: none;
+  }
\ No newline at end of file
diff --git a/IMG.jpg b/IMG.jpg
new file mode 100755
index 0000000..cb60b47
Binary files /dev/null and b/IMG.jpg differ
diff --git a/README.md b/README.md
index b9c5e37..6901875 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,7 @@
 # Personal Website
 
+ 
+
 If you have any notes, questions, or other general comments for us to read, please put
-them in this README! Good luck and have fun :)
+
+them in this README! Good luck and have fun :)
\ No newline at end of file
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..b279952
--- /dev/null
+++ b/about.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link  class="favicon"rel="icon" type="image/x-icon" href="favicon/favicon.ico" >
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <link rel="stylesheet" href="CssAbout.Css">
+    <title>About</title>
+</head>
+<body>
+     <nav>
+      <div id="logo">
+        <h1><a href="index.html">Santiago Aramburu</a></h1>
+      </div>
+      <div id="links">
+         <a id="home" href="index.html">Home</a>
+        <a id="about" href="about.html">About</a>
+        <a id="portfolio" href="portfolio.html">Portfolio</a>
+      </div>
+      </nav>
+    <main>
+        <h1>Field Recording</h1>
+<hr>
+<div>
+  <img class="imgRecording" src="fieldrecording.webp" alt="Field Recording" width="300" height="300">
+  <p class="textrecording">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.</p>
+       
+       <hr>
+             <h1>Music Production</h1>
+<hr>
+<div>
+  <img class="imgComposing"src="snow.png" alt="Field Recording" width="300" height="300">
+  <p>Lorem ipsum dolor sit amet, consejctetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.</p>
+       
+       <hr>
+    </main>
+</body>
+ <footer>
+      <a href="https://www.google.com/search?q=facebok&oq=facebok&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTINCAEQABiRAhiABBiKBTIVCAIQLhgKGIMBGMcBGLEDGNEDGIAEMg0IAxAAGJECGIAEGIoFMg0IBBAAGJECGIAEGIoFMg0IBRAAGJECGIAEGIoFMgYIBhAFGEAyBggHEEUYPNIBCDI4OTNqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8"
+        ><img class="media-link" target="_blank" src="" alt="" />Facebook</a
+      >
+      <a href="https://www.linkedin.com/in/santiago-aramburu-9847b3194/" target="_blank"
+        ><img class="media-link" targer="_blank" src="" alt="" />Linkedin</a
+      >
+      <a href="https://www.instagram.com/buru_98/" target="_blank"
+        ><img class="media-link" targer="_blank" src="" alt="" />Instagram</a
+      >
+    </footer>
+</html>
\ No newline at end of file
diff --git a/buru2.jpg b/buru2.jpg
new file mode 100644
index 0000000..d2ce7ee
Binary files /dev/null and b/buru2.jpg differ
diff --git a/duelo-garrotazos.jpg b/duelo-garrotazos.jpg
new file mode 100644
index 0000000..d96d3af
Binary files /dev/null and b/duelo-garrotazos.jpg differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..475d0d4
Binary files /dev/null and b/favicon.ico differ
diff --git a/fieldrecording.webp b/fieldrecording.webp
new file mode 100644
index 0000000..e7c536c
Binary files /dev/null and b/fieldrecording.webp differ
diff --git a/guernica3.jpg b/guernica3.jpg
new file mode 100644
index 0000000..87e8d96
Binary files /dev/null and b/guernica3.jpg differ
diff --git a/h1Picture.jpg b/h1Picture.jpg
new file mode 100755
index 0000000..6fd43f8
Binary files /dev/null and b/h1Picture.jpg differ
diff --git a/home.html b/home.html
new file mode 100644
index 0000000..5a2c594
--- /dev/null
+++ b/home.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      class="favicon"
+      rel="icon"
+      type="image/x-icon"
+      href="favicon/favicon.ico"
+    />
+    <script defer src="index.js"></script>
+    <link rel="stylesheet" href="CssHome.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Santiago Aramburu</title>
+  </head>
+  <body>
+    <nav>
+      <div id="logo">
+        <h1>Santiago Aramburu</h1>
+      </div>
+      <div id="links">
+        <a id="home" href="index.html">Home</a>
+        <a id="about" href="about.html">About</a>
+        <a id="portfolio" href="portfolio.html">Portfolio</a>
+      </div>
+    </nav>
+    <main>
+      <div class="maindiv">
+        <div class="img-wrapper">
+          <img id="buru" src="Buru.JPG" height="300" width="300" />
+          <div class="content">Welcome!</div>
+        </div>
+      </div>
+      <h2>Developer, Artist, Sound Designer</h2>
+      <p>
+        Interested in improving development processes for teams big and small,
+        and helping new developers find their way.
+      </p>
+      <h3>
+        "I don't know how to put this, but I'm kind of a big deal."
+        <br />
+        Ron Burgundy
+      </h3>
+
+      <header></header>
+    </main>
+    <footer>
+      <a
+        href="https://www.google.com/search?q=facebok&oq=facebok&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTINCAEQABiRAhiABBiKBTIVCAIQLhgKGIMBGMcBGLEDGNEDGIAEMg0IAxAAGJECGIAEGIoFMg0IBBAAGJECGIAEGIoFMg0IBRAAGJECGIAEGIoFMgYIBhAFGEAyBggHEEUYPNIBCDI4OTNqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8"
+        target="_blank"
+        ><img class="media-link" target="_blank" src="" alt="" />Facebook</a
+      >
+
+      <a
+        href="https://www.linkedin.com/in/santiago-aramburu-9847b3194/"
+        target="_blank"
+        ><img class="media-link" target="_blank" src="" alt="" />Linkedin</a
+      >
+      <a href="https://www.instagram.com/buru_98/" target="_blank"
+        ><img class="media-link" target="_blank" src="" alt="" />Instagram</a
+      >
+    </footer>
+  </body>
+</html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..dcf6abe
--- /dev/null
+++ b/index.js
@@ -0,0 +1 @@
+console.log("Santiago Aramburu");
diff --git a/portfolio.html b/portfolio.html
new file mode 100644
index 0000000..41cf529
--- /dev/null
+++ b/portfolio.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link  class="favicon"rel="icon" type="image/x-icon" href="favicon/favicon.ico" >
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <link rel="stylesheet" href="CssPortfolio.css" />
+    <title>Portfolio</title>
+</head>
+<body>
+     <nav>
+      <div id="logo">
+      <h1><a href="index.html">Santiago Aramburu</a></h1>
+      </div>
+      <div id="links">
+        <a id="home" href="index.html">Home</a>
+        <a id="about" href="about.html">About</a>
+        <a id="portfolio" href="portfolio.html">Portfolio</a>
+      </div>
+      </nav>
+     
+      <main>
+        <h2>Things i've created in no particular order</h2>
+         
+         <section class="firstSection">
+            <!--<img src="guernica3.jpg" alt="Guernica">-->
+        <h3>Guernica</h3>>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque sint consequuntur cum sequi beatae deleniti, ratione unde repudiandae voluptates ad nisi at iste eveniet, distinctio quod in ipsum molestias saepe dolore quae. Repellendus, omnis minima? Tenetur, possimus animi! Vel deleniti, reprehenderit exercitationem quod adipisci, quis blanditiis fugit sed laudantium alias fugiat nobis. Ipsa possimus cumque maxime mollitia nobis atque voluptates. Reiciendis delectus, cumque quidem itaque deleniti fugit dicta commodi quos voluptatibus nihil ex, pariatur praesentium rerum ipsa similique quasi, quod cum quia sit animi blanditiis ipsum veritatis voluptas eius. Facere impedit aut sed, dolores sit obcaecati aliquid voluptas quam incidunt, sequi consequatur fugiat itaque quis earum. Magnam, dolorem eum porro tempore ea tempora, id recusandae, libero autem provident nulla perferendis cupiditate atque voluptatum deserunt velit in? Corporis rem praesentium debitis officia libero quam numquam, amet quidem rerum quae, dolorum expedita iure similique, consequatur quas maxime iusto dolores natus! Harum, cupiditate!</p>
+        <hr>
+        </section>
+        <section class="secondSection">
+            
+         <h3>Las Parcas</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque sint consequuntur cum sequi beatae deleniti, ratione unde repudiandae voluptates ad nisi at iste eveniet, distinctio quod in ipsum molestias saepe dolore quae. Repellendus, omnis minima? Tenetur, possimus animi! Vel deleniti, reprehenderit exercitationem quod adipisci, quis blanditiis fugit sed laudantium alias fugiat nobis. Ipsa possimus cumque maxime mollitia nobis atque voluptates. Reiciendis delectus, cumque quidem itaque deleniti fugit dicta commodi quos voluptatibus nihil ex, pariatur praesentium rerum ipsa similique quasi, quod cum quia sit animi blanditiis ipsum veritatis voluptas eius. Facere impedit aut sed, dolores sit obcaecati aliquid voluptas quam incidunt, sequi consequatur fugiat itaque quis earum. Magnam, dolorem eum porro tempore ea tempora, id recusandae, libero autem provident nulla perferendis cupiditate atque voluptatum deserunt velit in? Corporis rem praesentium debitis officia libero quam numquam, amet quidem rerum quae, dolorum expedita iure similique, consequatur quas maxime iusto dolores natus! Harum, cupiditate!</p>
+       </section> 
+       
+        <section class="thirdSection">
+            
+         <h3>Duelo a garrotazos</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque sint consequuntur cum sequi beatae deleniti, ratione unde repudiandae voluptates ad nisi at iste eveniet, distinctio quod in ipsum molestias saepe dolore quae. Repellendus, omnis minima? Tenetur, possimus animi! Vel deleniti, reprehenderit exercitationem quod adipisci, quis blanditiis fugit sed laudantium alias fugiat nobis. Ipsa possimus cumque maxime mollitia nobis atque voluptates. Reiciendis delectus, cumque quidem itaque deleniti fugit dicta commodi quos voluptatibus nihil ex, pariatur praesentium rerum ipsa similique quasi, quod cum quia sit animi blanditiis ipsum veritatis voluptas eius. Facere impedit aut sed, dolores sit obcaecati aliquid voluptas quam incidunt, sequi consequatur fugiat itaque quis earum. Magnam, dolorem eum porro tempore ea tempora, id recusandae, libero autem provident nulla perferendis cupiditate atque voluptatum deserunt velit in? Corporis rem praesentium debitis officia libero quam numquam, amet quidem rerum quae, dolorum expedita iure similique, consequatur quas maxime iusto dolores natus! Harum, cupiditate!</p>
+       </section> 
+       
+    </main>
+</body>
+  <footer>
+      <a href="https://www.google.com/search?q=facebok&oq=facebok&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTINCAEQABiRAhiABBiKBTIVCAIQLhgKGIMBGMcBGLEDGNEDGIAEMg0IAxAAGJECGIAEGIoFMg0IBBAAGJECGIAEGIoFMg0IBRAAGJECGIAEGIoFMgYIBhAFGEAyBggHEEUYPNIBCDI4OTNqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8"
+        ><img class="media-link" target="_blank" src="" alt="" />Facebook</a
+      >
+      <a href="https://www.linkedin.com/in/santiago-aramburu-9847b3194/" target="_blank"
+        ><img class="media-link" targer="_blank" src="" alt="" />Linkedin</a
+      >
+      <a href="https://www.instagram.com/buru_98/" target="_blank"
+        ><img class="media-link" targer="_blank" src="" alt="" />Instagram</a
+      >
+    </footer>
+</html>
\ No newline at end of file
diff --git a/snow.png b/snow.png
new file mode 100644
index 0000000..14d50e0
Binary files /dev/null and b/snow.png differ