diff --git a/index.html b/index.html
index dc73fbe..68f00a6 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,111 @@
     <title>Full Stack Portfolio</title>
   </head>
   <body>
+    <header>
+      <nav>
+        <div>
+          <ul>
+            <name>Ella Magnifica</name>
+            <a href="#aboutme">About Me</a>
+            <a href="#portfolio">Portfolio</a>
+            <a href="#experience">Experience</a>
+            <h1 class="intro">
+              <span1>Hiring A Full-Stack Developer?</span1>
+              <p>
+                I have experience with<span2> React</span2>,<span2>
+                  NodeJS
+                </span2>
+                and<span2> Typescript</span2>. I would love to work at an<span3>
+                  innovative</span3
+                >
+                and <span3> eco-friendly</span3> start-up in the
+                <span2> sustainable energy sector</span2>.
+              </p>
+            </h1>
+          </ul>
+        </div>
+      </nav>
+    </header>
 
+    <main>
+      <div>
+        <secondpage class="aboutme">
+          <h1>About Me</h1></secondpage>
+         <p><h2>Introduction</h2>          
+            <note>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam
+            placeat dignissimos rerum unde expedita atque illum a accusamus.
+            Veritatis quam voluptates aut dignissimos labore fuga mollitia
+            illum, laborum eveniet beatae! Lorem ipsum dolor sit amet
+            consectetur, adipisicing elit. Harum dolorem rerum qui itaque
+            delectus repellendus suscipit ipsam placeat ad quam tempora, tempore
+            et veniam sapiente exercitationem minima autem! Modi, quisquam?Lorem
+            ipsum dolor sit amet, consectetur adipisicing elit. Sed, velit?
+            Accusantium sit fugit incidunt tempora optio suscipit, libero
+            pariatur enim delectus unde ea ipsam eum ratione voluptatem. Sit,
+            recusandae nobis! Lorem ipsum dolor sit amet consectetur adipisicing
+            elit. Amet fuga ut dignissimos sit corrupti cupiditate quia nisi
+            officia esse. Dolores, alias minima temporibus facilis sint laborum
+            numquam nobis quasi. Quas! Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Totam placeat dignissimos rerum unde expedita
+            atque illum a accusamus. Veritatis quam voluptates aut dignissimos
+            labore fuga mollitia illum, laborum eveniet beatae! Lorem ipsum
+            dolor sit amet consectetur, adipisicing elit. Harum dolorem rerum
+            qui itaque delectus repellendus suscipit ipsam placeat ad quam
+            tempora, tempore et veniam sapiente exercitationem minima autem!
+            Modi, quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing
+            elit. Sed, velit? Accusantium sit fugit incidunt tempora optio
+            suscipit, libero pariatur enim delectus unde ea ipsam eum ratione
+            voluptatem. Sit, recusandae nobis! Lorem ipsum dolor sit amet
+            consectetur adipisicing elit. Amet fuga ut dignissimos sit corrupti
+            cupiditate quia nisi officia esse. Dolores, alias minima temporibus
+            facilis sint laborum numquam nobis quasi. Quas!</note>
+          </p>
+          <p><h2>Technical Skills</h2></p>
+          <ul><li>HTML & CSS</li>
+          <li>Javascript</li>
+        <li>Typescript</li>
+      <li>React</li>
+    <li>Redux</li>
+  <li>NodeJS</li></ul>
+      </div>      
+        <thirdpage id="portfolio"><h1>Portfolio</h1></thirdpage>
+          <block id="block">
+            <bb id="title1"><header><b>Title</b></header>Lorem ipsum dolor, 
+              sit amet consectetur adipisicing elit. In odit officia 
+              neque similique consectetur culpa quis, voluptas est iste 
+              quod eos dicta adipisci ex, quam tempora perferendis 
+              praesentium iusto velit.<footer>READ MORE</footer><git>GitHub Repo</git></bb>
+            <bbb id="title2"><header><b>Title</b></header>Lorem ipsum dolor, 
+              sit amet consectetur adipisicing elit. In odit officia 
+              neque similique consectetur culpa quis, voluptas est iste 
+              quod eos dicta adipisci ex, quam tempora perferendis 
+              praesentium iusto velit.<footer>READ MORE</footer><git>GitHub Repo</git></bbb>
+            <bbbb id="title3"><header><b>Title</b></header>Lorem ipsum dolor, 
+              sit amet consectetur adipisicing elit. In odit officia 
+              neque similique consectetur culpa quis, voluptas est iste 
+              quod eos dicta adipisci ex, quam tempora perferendis 
+              praesentium iusto velit.<footer>READ MORE</footer><git>GitHub Repo</git></bbbb></block>
+      <forthpage id="experience"><h1>Experience</h1></forthpage>
+      <jobcontent id="jobcontent"><h3>Job Title</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing 
+      elit. Dolorem itaque, temporibus ab laborum alias nihil consequuntur 
+      quaerat maiores error repudiandae dolore reiciendis ut doloremque 
+      eos magnam. Harum quisquam reprehenderit quas. Lorem ipsum dolor sit 
+      amet, consectetur adipisicing elit. Dolore ullam exercitationem vero, 
+      iure unde in est dolor minus praesentium ut atque voluptatum suscipit 
+      ipsa cupiditate soluta necessitatibus odio modi enim?</p>
+    <h3>Job Title</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing 
+      elit. Dolorem itaque, temporibus ab laborum alias nihil consequuntur 
+      quaerat maiores error repudiandae dolore reiciendis ut doloremque 
+      eos magnam. Harum quisquam reprehenderit quas. Lorem ipsum dolor 
+      sit amet consectetur adipisicing elit. Dolorem itaque, temporibus 
+      ab laborum alias nihil consequuntur quaerat maiores error repudiandae 
+      dolore reiciendis ut doloremque eos magnam. Harum quisquam 
+      reprehenderit quas.</p></jobcontent>
+      <footer>
+        <div class="container">
+            <p>&copy; Ella Magnifica</p>
+        </div>
+    </footer>      
+    </main>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bfb9d53
--- /dev/null
+++ b/style.css
@@ -0,0 +1,205 @@
+* {
+  margin: 0px 1px 1px 1px;
+  height: flex;
+  scroll-behavior: smooth;
+}
+
+head body header nav div ul {
+  display: inline-block;
+}
+
+body header nav div ul {
+  background-color: rgb(77, 196, 156);
+  border-bottom: black solid;
+}
+
+name {
+  color: beige;
+  font-size: 25px;
+  font-weight: 500;
+}
+
+a {
+  color: rgb(77, 196, 156);
+  font-weight: 500;
+  font-size: 20px;
+  padding: 10px;
+  margin-top: 100%;
+  border-style: solid;
+  background-color: beige;
+  border-radius: 10px;
+}
+
+.intro,
+span1 {
+  color: beige;
+  align-content: top;
+  padding-left: 10%;
+  margin-top: 7%;
+  margin-bottom: 5%;
+  font-weight: 50;
+  font-size: 200%;
+}
+
+.intro p {
+  font-weight: 25;
+  font-size: 75%;
+  padding-right: 10%;
+  margin-bottom: 7%;
+}
+
+.intro p span2 {
+  color: black;
+}
+
+.intro p span3 {
+  border-bottom: solid black;
+}
+
+.aboutme {
+  color: black;
+  text-align: center;
+}
+
+note {
+  font-size: 18px;
+}
+
+ul li {
+  font-size: 18px;
+}
+
+main div {
+  border-bottom: black solid;
+}
+
+#portfolio {
+  margin: 0px 19px 0px 0px;
+  display: grid;
+  background-color: lightpink;
+  text-align: center;
+}
+
+#block {
+  height: 75vh;
+  display: inline;
+  box-sizing: content-box;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repear(2, 1fr);
+  color: black;
+  margin: 0px 18px 0px 0px;
+  padding: 20px;
+  display: grid;
+  border-bottom: black solid;
+  background-color: lightpink;
+}
+
+#block #title1 {
+  display: grid;
+  border: 5px solid brown;
+  font-weight: 20;
+  font-size: 20px;
+  padding: 10px 10px;
+  margin: 30px 50px;
+  background-color: beige;
+  border-radius: 10px;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+#block #title2 {
+  display: grid;
+  border: 5px solid brown;
+  font-weight: 20;
+  font-size: 20px;
+  padding: 10px 10px;
+  margin: 30px 50px;
+  background-color: beige;
+  border-radius: 10px;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+#block #title3 {
+  display: grid;
+  border: 5px solid brown;
+  font-weight: 20;
+  font-size: 20px;
+  padding: 10px 10px;
+  margin: 30px 50px;
+  background-color: beige;
+  border-radius: 10px;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+footer {
+  color: aliceblue;
+  text-align: center;
+  margin: 25px;
+  padding-top: 10px;
+  border-radius: 10px;
+  display: grid;
+  border: solid;
+  background-color: brown;
+}
+
+git {
+  color: brown;
+  text-align: center;
+  border-bottom: solid brown;
+  margin: 0px 50px 70px 50px;
+}
+
+#experience {
+  display: block;
+  text-align: center;
+}
+
+#jobcontent {
+  border-bottom: solid;
+  font-size: 18px;
+}
+
+.container {
+  display: block;
+  background-color: rgb(14, 14, 43);
+  text-align: left;
+  padding: 1%;
+  margin: 0% 0% 0% 0%;
+  font-size: 20px;
+  font-weight: 200;
+}
+
+@media (max-width: 768px) {
+  head body header nav div ul {
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+    display: block;
+    box-sizing: content-box;
+    margin: 0px;
+  }
+
+  .secondpage {
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+    display: block;
+    box-sizing: content-box;
+    margin: 0px;
+  }
+
+  #portfolio {
+    grid-column: 1 / span 1;
+    grid-row: 1 / span 1;
+    display: grid;
+    box-sizing: content-box;
+    margin: 0px;
+  }
+
+  #block {
+    grid-column: 3 / span 1;
+    grid-row: 1 / span 1;
+    display: inline;
+    background-color: lightpink;
+  }
+}
