add reviews and icons

Author: solygambas

ebook-landing-page/index.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
+    />
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -22,6 +26,7 @@
     <nav class="navbar navbar-expand-md navbar-light pt-5 pb-4">
       <div class="container-xxl">
         <a href="#intro" class="navbar-brand">
+          <i class="bi bi-book-half"></i>
           <span class="text-secondary fw-bold">Net Ninja Pro - the Book</span>
         </a>
         <button
@@ -356,6 +361,105 @@ <h2 class="accordion-header" id="heading-5">
     </section>
 
     <!-- reviews list -->
+    <section id="reviews" class="bg-light">
+      <div class="container-lg">
+        <div class="text-center">
+          <h2><i class="bi bi-stars"></i> Book Reviews</h2>
+          <p class="lead">What my students have said about the book...</p>
+        </div>
+        <div class="row justify-content-center my-5">
+          <div class="col-lg-8">
+            <div class="list-group">
+              <div class="list-group-item py-3">
+                <div class="pb-2">
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                </div>
+                <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
+                <p class="mb-1">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Tenetur error veniam sit expedita est illo maiores neque quos
+                  nesciunt, reprehenderit autem odio commodi labore praesentium
+                  voluptate repellat in id quisquam.
+                </p>
+                <small>Review by Mario</small>
+              </div>
+              <div class="list-group-item py-3">
+                <div class="pb-2">
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-half"></i>
+                </div>
+                <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
+                <p class="mb-1">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Tenetur error veniam sit expedita est illo maiores neque quos
+                  nesciunt, reprehenderit autem odio commodi labore praesentium
+                  voluptate repellat in id quisquam.
+                </p>
+                <small>Review by Mario</small>
+              </div>
+              <div class="list-group-item py-3">
+                <div class="pb-2">
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                </div>
+                <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
+                <p class="mb-1">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Tenetur error veniam sit expedita est illo maiores neque quos
+                  nesciunt, reprehenderit autem odio commodi labore praesentium
+                  voluptate repellat in id quisquam.
+                </p>
+                <small>Review by Mario</small>
+              </div>
+              <div class="list-group-item py-3">
+                <div class="pb-2">
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                </div>
+                <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
+                <p class="mb-1">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Tenetur error veniam sit expedita est illo maiores neque quos
+                  nesciunt, reprehenderit autem odio commodi labore praesentium
+                  voluptate repellat in id quisquam.
+                </p>
+                <small>Review by Mario</small>
+              </div>
+              <div class="list-group-item py-3">
+                <div class="pb-2">
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star-fill"></i>
+                  <i class="bi bi-star"></i>
+                </div>
+                <h5 class="mb-1">A must-buy for every aspiring web dev</h5>
+                <p class="mb-1">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Tenetur error veniam sit expedita est illo maiores neque quos
+                  nesciunt, reprehenderit autem odio commodi labore praesentium
+                  voluptate repellat in id quisquam.
+                </p>
+                <small>Review by Mario</small>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
 
     <!-- contact form -->