ch. 90: Building a Carousel - Part 2

Author: FrankGecko

starter/06-Components/02-carousel.html

@@ -11,7 +11,7 @@
     <style>
         /*
 			SPACING SYSTEM (px)
-			2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+			2 / 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128
 
 			FONT SIZE SYSTEM (px)
 			10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
@@ -41,9 +41,10 @@
             width: 800px;
             margin: 100px auto;
             background-color: #087f5b;
-            padding: 32px;
-            padding-left: 86px;
+            padding: 32px 48px 32px 86px;
             border-radius: 8px;
+            position: relative;
+
             display: flex;
             align-items: center;
             gap: 86px;
@@ -75,9 +76,62 @@
             color: #c3fae8;
         }
 
-        .btn {}
+        /* Controls */
+
+        .btn {
+            background-color: #fff;
+            border: none;
+            height: 40px;
+            width: 40px;
+            border-radius: 50%;
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+            position: absolute;
+            top: 50%;
+            cursor: pointer;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
-        .btn-icon {}
+        .btn--left {
+            left: 0;
+            transform: translate(-50%, -50%);
+        }
+
+        .btn--right {
+            right: 0;
+            transform: translate(50%, -50%);
+        }
+
+        .btn-icon {
+            height: 24px;
+            width: 24px;
+            stroke: #087f5b;
+        }
+
+        .dots {
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translate(-50%, 32px);
+
+            display: flex;
+            gap: 12px;
+        }
+
+        .dot {
+            height: 12px;
+            width: 12px;
+            background-color: #fff;
+            border: 2px solid #087f5b;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        .dot--filled {
+            background-color: #087f5b;
+        }
     </style>
 </head>
 
@@ -87,26 +141,31 @@
         <img src="maria.jpg" alt="Maria de Almeida">
         <blockquote class="testimonial">
             <p class="testimonial-text">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptatum cumque, aspernatur iusto
-                mollitia sunt magnam. Pariatur alias esse aperiam non magnam! Ratione voluptatibus voluptates
-                perspiciatis delectus vel veritatis quas?
+                "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptatum cumque, aspernatur iusto
+                mollitia sunt magnam."
             </p>
             <p class="testimonial-author">Maria de Almeida</p>
             <p class="testimonial-job">Senior Product Manager at EDP Comercial</p>
         </blockquote>
-        <button class="btn">
-            <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
+        <button class="btn btn--left">
+            <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
             </svg>
         </button>
 
-        <button class="btn">
+        <button class="btn btn--right">
             <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
             </svg>
         </button>
+        <div class="dots">
+            <button class="dot dot--filled">&nbsp;</button>
+            <button class="dot">&nbsp;</button>
+            <button class="dot">&nbsp;</button>
+            <button class="dot">&nbsp;</button>
+        </div>
     </div>
 </body>