diff --git a/index.html b/index.html
index dc73fbe..007b512 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,176 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="styles.css" />
     <title>Full Stack Portfolio</title>
   </head>
   <body>
+    <header>
+      <h1>Ella Magnifico</h1>
+      <nav>
+        <ul>
+          <li><a href="#about_me">About Me</a></li>
+          <li><a href="#portfolio">Portfolio</a></li>
+          <li><a href="#experience">Experience</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="mainpage">
+      <h1>
+        Hiring a <br />
+        Full-Stack <br />
+        developer?
+      </h1>
 
+      <p>
+        I have experience with
+        <span class="bold">React</span>,
+        <br />
+        <span class="bold"> NodeJs</span>
+        and
+        <span class="bold">Typescript</span>. I would love to work on an
+        <span class="underline">innovative</span> and
+        <span class="underline">eco-friendly</span>
+        start-up in the
+        <span class="bold">sustainable energy sector</span>.
+      </p>
+    </main>
+
+    <main class="secondpage">
+      <h1>About Me</h1>
+
+      <h2>Introduction</h2>
+      <p>
+        Lorem ipsum dolor sit amet, cu est laudem postea disputando. No novum
+        mollis mei, putent accusata nominati ne ius. Noster sapientem ne per.
+        Cum eu tota propriae. Nulla salutatus pro te, quando molestie prodesset
+        per ut, eum te nihil omnesque.
+      </p>
+
+      <p class="tech_skills">Technical Skills</p>
+
+      <div>
+        <ul>
+          <li>HTML & CSS</li>
+          <li>Javascript</li>
+          <li>Typescript</li>
+          <li>NodeJs</li>
+          <li>React</li>
+        </ul>
+      </div>
+    </main>
+
+    <section id="portfolio">
+      <main class="portfolio">
+        <h1>Portfolio</h1>
+
+        <div class="container">
+          <div class="card">
+            <h4>Title</h4>
+
+            <p>
+              Lorem ipsum dolor sit amet, cu est laudem postea disputando. No
+              novum mollis mei, putent accusata nominati ne ius.
+            </p>
+
+            <div class="more_button">
+              <a href="/boolean-uk-html-full-stack-portfolio/experience1.html"
+                >Read More</a
+              >
+            </div>
+
+            <div class="git_link">
+              <a
+                target="_blank"
+                href="https://noemi890.github.io/boolean-uk-html-tribute/"
+                >GitHub Repo</a
+              >
+            </div>
+          </div>
+
+          <div class="card">
+            <h4>Title</h4>
+
+            <p>
+              Lorem ipsum dolor sit amet, cu est laudem postea disputando. No
+              novum mollis mei, putent accusata nominati ne ius. Noster
+              sapientem ne per.
+            </p>
+
+            <div class="more_button">
+              <a href="/boolean-uk-html-full-stack-portfolio/experience1.html"
+                >Read More</a
+              >
+            </div>
+
+            <div class="git_link">
+              <a
+                target="_blank"
+                href="https://noemi890.github.io/boolean-uk-grid-components/"
+                >GitHub Repo</a
+              >
+            </div>
+          </div>
+
+          <div class="card">
+            <h4>Title</h4>
+
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad,
+              dolor. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Quod, nisi.
+            </p>
+
+            <div class="more_button">
+              <a href="/boolean-uk-html-full-stack-portfolio/experience1.html"
+                >Read More</a
+              >
+            </div>
+
+            <div class="git_link">
+              <a
+                target="_blank"
+                href="https://noemi890.github.io/boolean-uk-html-gymtastic/"
+                >GitHub Repo</a
+              >
+            </div>
+          </div>
+        </div>
+      </main>
+    </section>
+
+    <section id="experience">
+      <main class="experience">
+        <h1>Experience</h1>
+
+        <h2>Job Title</h2>
+        <p>
+          Lorem ipsum dolor sit amet, cu est laudem postea disputando. No novum
+          mollis mei, putent accusata nominati ne ius. Noster sapientem ne per.
+          Cum eu tota propriae.Lorem ipsum dolor sit amet, cu est laudem postea
+          disputando. No novum mollis mei, putent accusata nominati ne ius.
+          Noster sapientem ne per. Cum eu tota propriae. Nulla salutatus pro te,
+          quando molestie prodesset per ut, eum te nihil omnesque.
+        </p>
+
+        <h2>Job Title</h2>
+        <p>
+          Lorem ipsum dolor sit amet, cu est laudem postea disputando. No novum
+          mollis mei, putent accusata nominati ne ius. Noster sapientem ne per.
+          Cum eu tota propriae. Nulla salutatus pro te, quando molestie
+          prodesset per ut, eum te nihil omnesque.Lorem ipsum dolor sit amet, cu
+          est laudem postea disputando. No novum mollis mei, putent accusata
+          nominati ne ius. Noster sapientem ne per. Cum eu tota propriae. Nulla
+          salutatus pro te, quando molestie prodesset per ut, eum te nihil
+          omnesque.
+        </p>
+      </main>
+    </section>
+
+    <section>
+      <footer>
+        <h5>Ella Magnifico</h5>
+      </footer>
+    </section>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..0b5215b
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,291 @@
+/* * {
+    margin: 0;
+}
+
+.container {display: block;
+    height: 100vh;
+    grid-template-columns: repeat(2, minmax(200px, 1fr))
+        background-color:white;}
+
+header{
+    background-color: blue;}
+
+second{background-color: yellow;}
+
+third{background-color: red;}
+
+footer{background-color: green;} */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+    background-color: #4A4E69;
+}
+
+
+
+header {
+    display:grid;
+    grid-template-columns: repeat(2,1fr);
+    background-color: aqua;
+  
+}
+
+ul li {
+  
+    margin: 10px;
+    padding: 5px;
+    text-align:  center;
+    background-color: white;
+ padding-left: 15px;
+    margin-bottom:10px;
+    grid-auto-columns: auto;
+    
+}
+
+ul {
+    display: grid;
+    grid-auto-flow: column;
+    list-style: none;
+}
+
+ul li a {
+    text-align: left;
+    text-decoration: none;
+    color: #22223B;
+    
+}
+
+.name {
+  
+    font-size: 20px;
+}
+
+
+
+.mainpage {
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    background-color:aqua;
+    border-bottom: 10px solid black;
+}
+
+.mainpage h1 {
+    font-size: 60px;
+    margin-top: 40px;
+    margin-bottom: 30px;
+    text-align: center;
+    color: #22333b;
+}
+
+.mainpage p {
+    margin: auto;
+    padding: 5px;
+    max-width: 70vh;
+    text-align: center;
+    font-size: 25px;
+    margin-bottom: 30px;
+    color: #22223B;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.underline {
+    text-decoration: underline;
+    color: #C9ADA7;
+    text-decoration-color: #22223B;
+    font-style: italic;
+}
+
+
+
+.secondpage {
+    display: grid;
+    grid-template-rows: repeat(4, auto);
+    background-color: white;
+    box-shadow: 11px 10px 17px 0px navy;
+}
+
+.secondpage h1 {
+    font-size: 50px;
+    margin-top: 40px;
+    margin-bottom: 30px;
+    text-align: center;
+    color: #22223B;
+}
+
+.secondpage h2 {
+    font-size: 30px;
+    color: #22223B;
+    margin: auto;
+}
+
+.secondpage p {
+    font-size: 25px;
+    margin: auto;
+    margin-top: 40px;
+    max-width: 60%;
+}
+
+.tech_skills {
+    margin: auto;
+    font-size: 20px;
+}
+
+.secondpage div {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 40px;
+    margin-top: 40px;
+}
+
+.secondpage ul {
+    list-style-type: circle;
+    line-height: 50px;
+}
+
+
+
+.portfolio {
+    display: grid;
+    background-color: #F2E9E4;
+    border-top: 10px solid black;
+    border-bottom: 10px solid black;
+
+}
+
+.portfolio h1 {
+    font-size: 50px;
+    margin-top: 40px;
+    margin-bottom: 30px;
+    text-align: center;
+    color: #22223B;
+}
+
+.portfolio .container {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: repeat(3, minmax(250px, 350px));
+    gap: 50px;
+    padding: 50px;
+  margin-left: 125px;
+}
+
+.portfolio .card {
+    display: grid;
+    grid-auto-flow: row;
+    gap: 50px;
+    border: 10px solid pink;
+    border-radius: 10px;
+    padding: 30px;
+}
+ .card h4 {
+     text-align: center;
+     font-size: 25px;
+ }
+
+ .card p {
+     text-align: center;
+     font-size: 15px;
+     padding: 15px;
+     line-height: 25px;
+ }
+
+ .more_button {
+    text-align: center;
+    background-color: #c9ada7b0;
+    border: 1px solid #22223B;
+    box-shadow: 11px 10px 17px 0px rgba(34, 34, 59, 0.083);
+    border-radius: 10px;
+    margin: auto;
+    padding: 10px;
+ }
+
+.experience {
+    display: grid;
+    gap: 30px;
+    background-color:white;
+   border-top: 10px solid black;
+   border-bottom: 10px solid black;
+}
+
+.experience h1 {
+    font-size: 50px;
+    margin-top: 40px;
+    margin-bottom: 70px;
+    text-align: center;
+    color: #22223B;
+}
+
+.experience h2 {
+    text-align: center;
+    color: #22223B;
+}
+
+.experience p {
+    margin: auto;
+    line-height: 25px;
+    padding: 40px;
+}
+
+
+footer {
+    display: grid;
+    background-color:rgb(21, 21, 90);
+    padding: 20px;
+    
+}
+h5{
+    font-size: 20px;
+    color: white;
+}
+
+@media screen and (max-width: 500px) {
+
+    header {
+        display: grid;
+        grid-template-rows: repeat(2,auto);    
+    }
+
+     ul li {
+        margin-left: 20px;
+    }
+
+    .name {
+        margin-top: 10px;
+        text-align: center;
+    }
+}
+
+@media screen and (max-width: 870px) {
+
+    .portfolio .container {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: 1fr auto;
+        justify-content: space-evenly;
+        gap: 20px;
+        margin: auto;
+    }
+    
+}
+
+@media screen and (max-width: 200px) {
+
+    .portfolio .container {
+        display: grid;
+        grid-auto-flow: row;
+        grid-template-columns: none;
+        gap: 20px;
+        max-width: 350px;
+        margin: 20px auto;
+    }
+    
+}
+
