LEARNING AND SHARING

index.html <! DOCTYPE html > < html >   < head >     < script src = "https://cdn.jsdelivr.net/npm/sweetalert2@10" ></ script >     < link       rel = "stylesheet"       href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />       < script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" ></ script >       < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" ></ script >       < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></ script >       < style >         /* membuat form berada di tengah halaman */         body {         display : flex;         justify-content : center;         align-items : center;       }       form {         display : flex;         flex-direction : column;         gap : 1rem ;         padding : 2rem ;      

<! DOCTYPE html > < html >   < head >       < title > Jam Digital </ title >   < style >     .clock {   display : flex;   align-items : center;   justify-content : center;   font-size : 4rem ;   font-family : 'Roboto' , sans-serif;   font-weight : bold;   color : #fff;   background-color : #333;   padding : 2rem ;   border-radius : 1px ;   box-shadow : 0 5px 15px rgba( 0 , 0 , 0 , 0.3 ); } .number {   width : 6rem ;   height : 6rem ;   display : flex;   align-items : center;   justify-content : center;   background-color : #111;   border-radius : 10px ;   box-shadow : inset 05px 15px rgba( 0 , 0 , 0 , 0 ); } .divider {   font-size : 4rem ;   margin : 0 1rem ;   color : #888; } .number::before {   content : '' ;   position : absolute;   top : -5px ;   left : -5px ;   right : -5px ;   bottom : -5px ;   z-index : -1 ;   background : linear-gradient(to top, rgba( 255 , 255 , 255 , 0.2 ), rgba( 0 , 0 , 0 , 0.2 ));   border-radius