work section

Author: RinatValiullov

portfolio-grid/index.html

@@ -86,7 +86,7 @@ <h1 class="display-4">Mia Smith</h1>
     <!-- Home -->
     <section id="home" class="collapse show">
       <div class="card card-body bg-primary text-white py-5">
-        <h2>Welcome to my page</h2>
+        <h2>Welcome To My Page</h2>
         <p class="lead">
           Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur, quam!
         </p>
@@ -125,7 +125,7 @@ <h4>Python</h4>
     <!-- Resume -->
     <section id="resume" class="collapse">
       <div class="card card-body bg-success text-white py-5">
-        <h2>My resume</h2>
+        <h2>My Resume</h2>
         <p class="lead">
           Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur, quam!
         </p>
@@ -200,6 +200,83 @@ <h6 class="text-muted">Dates: 2011 - 2015</h6>
       </div>
     </section>
 
+    <!-- Work -->
+    <section id="work" class="collapse">
+      <div class="card card-body bg-warning text-white py-5">
+        <h2>My Work</h2>
+        <p class="lead">
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur, quam!
+        </p>
+      </div>
+
+      <div class="card card-body py-5">
+        <h3>What Habe I built?</h3>
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam soluta nesciunt similique
+          eaque reiciendis libero?</p>
+        <div class="row row-cols-4 g-0">
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=250" alt="image-lightbox-1"
+                class="img-fluid">
+            </a>
+          </div>
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=249" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=249" alt="image-lightbox-2"
+                class="img-fluid">
+            </a>
+          </div>
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=248" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=248" alt="image-lightbox-3"
+                class="img-fluid">
+            </a>
+          </div>
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=247" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=247" alt="image-lightbox-4"
+                class="img-fluid">
+            </a>
+          </div>
+        </div>
+
+        <div class="row row-cols-4 g-0">
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=232" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=232" alt="image-lightbox-5"
+                class="img-fluid">
+            </a>
+          </div>
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=233" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=233" alt="image-lightbox-6"
+                class="img-fluid">
+            </a>
+          </div>
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=234" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=234" alt="image-lightbox-7"
+                class="img-fluid">
+            </a>
+          </div>
+          <div class="col">
+            <a href="https://unsplash.it/1200/768.jpg?image=235" data-toggle="lightbox"
+              data-gallery="example-gallery">
+              <img src="https://unsplash.it/600.jpg?image=235" alt="image-lightbox-8"
+                class="img-fluid">
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <footer id="footer" class="p-5 bg-dark text-white">
       <div class="row">
         <div class="col-md-6">
@@ -218,6 +295,7 @@ <h6 class="text-muted">Dates: 2011 - 2015</h6>
     integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
     crossorigin="anonymous">
   </script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.bundle.min.js"></script>
   <script>
     $('.port-item').click(function () {
       $('.collapse').collapse('hide')

portfolio-grid/styles/portfolio.css

@@ -5,7 +5,7 @@
 }
 
 #header .port-item {
-  width: 30%;
+  width: 25%;
 }
 
 #header .port-item:hover {