carousel

DimuthuWeerathunga · DimuthuWeerathunga · commit f986f427ec24 · 2021-08-19T17:41:59.000+05:30
diff --git a/Dimuthu/06-Components/02-carousel.html b/Dimuthu/06-Components/02-carousel.html
@@ -99,6 +99,25 @@
         top: 50%;
         transform: translate(50%, -50%);
       }
+      .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--fill {
+        background-color: #087f5b;
+      }
     </style>
   </head>
   <body>
@@ -146,6 +165,12 @@
           />
         </svg>
       </button>
+      <div class="dots">
+        <button class="dot dot--fill">&nbsp;</button>
+        <button class="dot">&nbsp;</button>
+        <button class="dot">&nbsp;</button>
+        <button class="dot">&nbsp;</button>
+      </div>
     </div>
   </body>
 </html>
