microhass · hassanShakur · May 9, 2023 · May 9, 2023 · May 9, 2023 · May 9, 2023
diff --git a/images/FACEBOOK.svg b/images/FACEBOOK.svg
diff --git a/images/Linkedin icon.png b/images/Linkedin icon.png
diff --git a/images/M.png b/images/M.png
diff --git a/images/Multi.svg b/images/Multi.svg
diff --git a/images/Portfolio.svg b/images/Portfolio.svg
diff --git a/images/Twietter.png b/images/Twietter.png
diff --git a/images/Uber.svg b/images/Uber.svg
diff --git a/images/V.png b/images/V.png
diff --git a/images/github.png b/images/github.png
diff --git a/images/header-bg.svg b/images/header-bg.svg
diff --git a/images/ttonic.png b/images/ttonic.png
diff --git a/index.html b/index.html
@@ -7,7 +7,126 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+      crossorigin="anonymous"
+    ></script>
     <title>Bootsrap Portfolio | Microverse</title>
   </head>
-  <body></body>
+  <body>
+    <nav>
+      <div class="container">
+        <a class="navbar-brand" href="index.html"> My Logo </a>
+      </div>
+      <ul class="nav justify-content-end">
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" href="#"
+            >Portfolio</a
+          >
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Contact</a>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="card bg-white text-black">
+      <img
+        src="./images/header-bg.svg"
+        class="card-img"
+        alt="Header background"
+      />
+      <div class="card-img-overlay">
+        <h1 class="card-title">I’m Alexandra. Glad to see you!</h1>
+        <p class="card-text">
+          I’m a software developer! I can help you build a product ,
+          feature or website Look through some of my work and
+          experience! If you like what you see and have a project you
+          need coded, don’t hesitate to contact me.
+        </p>
+        <p class="card-text">LET’S CONNECT</p>
+      </div>
+
+      <ul class="list-group list-group-horizontal">
+        <li class="list-group-item"><a href="#"><img src="images/Twietter.png" alt="#"></a>></li>
+        <li class="list-group-item"><a href="#"><img src="images/Linkedin icon.png" alt="#"></a>></li>
+        <li class="list-group-item"><a href="#"><img src="images/M.png" alt="#"></a>></li>
+        <li class="list-group-item"><a href="#"><img src="images/github.png" alt="#"></a>></li>
+        <li class="list-group-item"><a href="#"><img src="images/V.png" alt="#"></a>></li>
+      </ul>      
+    </div>
+
+    <div class="container">
+
+        <div class="row g-0">
+          <div class="col-md-4">
+            <img src="images/Portfolio.svg" class="img-fluid rounded-start" alt="project 1">
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">Tonic</h5>
+              <p class="card-text"></p>
+              <p class="card-text"><small class="text-body-secondary">A daily selection of privately personalized reads; no accounts or sign-ups required.</small></p>
+            </div>
+            <button type="button" class="btn btn-primary"
+              style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">see project
+            </button>
+          </div>
+        </div>
+
+        <div class="row g-0">
+          <div class="col-md-4">
+            <img src="images/Multi.svg" class="img-fluid rounded-start" alt="project 2">
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">Tonic</h5>
+              <p class="card-text"></p>
+              <p class="card-text"><small class="text-body-secondary">A daily selection of privately personalized reads; no accounts or sign-ups required.</small></p>
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-0">
+          <div class="col-md-4">
+            <img src="images/FACEBOOK.svg" class="img-fluid rounded-start" alt="project 3">
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">Tonic</h5>
+              <p class="card-text"></p>
+              <p class="card-text"><small class="text-body-secondary">A daily selection of privately personalized reads; no accounts or sign-ups required.</small></p>
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-0">
+          <div class="col-md-4">
+            <img src="images/Uber.svg" class="img-fluid rounded-start" alt="project 4">
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">Tonic</h5>
+              <p class="card-text"></p>
+              <p class="card-text"><small class="text-body-secondary">A daily selection of privately personalized reads; no accounts or sign-ups required.</small></p>
+            </div>
+          </div>
+        </div>
+
+    </div>
+
+
+
+
+  </body>
 </html>