DEV Community: vikramsu

Dark Theme Clock

vikramsu — Thu, 27 May 2021 18:48:18 +0000

FONT


  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">

DATE TIME FOMART LIBRARY

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.5/dayjs.min.js">   </script>

HTML

  <div class="card">
        <div class="mobile_header">
            <h4 class="dateDisplay"></h4>
            <div class="battery_status">
                <span>48%</span>
                <img src="battery-status.png" />
            </div>
        </div>
        <div class="clock">

            <div class="wrap">
                <span class="twelve">12</span>
                <span class="six">6</span>
                <span class="nine">9</span>
                <span class="three">3</span>
                <span class="hour"></span>
                <span class="minute"></span>
                <span class="second"></span>
                <span class="dot"></span>
            </div>
        </div>
        <div class="timing">
            <span>
                <span class="hours"></span>:<span class="mins"></span>
            </span>
            <p class="dateDisplay"></p>
        </div>
    </div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width:100%;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#212B36;
    font-family: 'Poppins', sans-serif;
}
.card{
 width:300px;
 height:500px;
 border-radius:20px;
 position: relative;
 display:flex;
 flex-direction: column;
 background: #212B36;
box-shadow:  20px 20px 60px #1c252e,
             -20px -20px 60px #26313e;

}
.mobile_header{
 display:flex;
 align-items: center;
 justify-content:space-between;
 padding:10px 30px;
}
.mobile_header h4{
    font-size:12px;
    font-weight:400;
    /* margin-bottom:15px; */
    color:#C4CDD5;
    text-transform: uppercase;
   }
.battery_status{
    display:flex;
    align-items: center;
    justify-content:center;
}
.battery_status span{
   font-size:12px;
   font-weight: 600;
   margin-right: 3px;
   color:#C4CDD5;
}
.battery_status img{
    width:20px;
}
.clock{
    width:300px;
    height: 350px;
    display:flex;
    align-items: center;
    justify-content:center;
}
.wrap{
    width:200px;
    height:200px;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    background: #212B36;
    box-shadow:  20px 20px 60px #1c252e,
                 -20px -20px 60px #26313e;

}
.twelve,.six,.nine,.three{
    font-size:18px;
    font-weight: 400;
    color:#C4CDD5;;
}
.twelve{
    position:absolute;
    top:20px;  
    left: 50%;
    transform:translate(-50%,-50%)
}
.six{
    position:absolute;
    bottom: -5px;  
    left: 50%;
    transform:translate(-50%,-50%)
}
.three{
    position:absolute;
    right: 10px;  
    top: 50%;
    transform:translate(-50%,-50%)
}
.nine{
    position:absolute;
    left: 20px;  
    top: 50%;
    transform:translate(-50%,-50%)
}
.hour,.minute{
    position:absolute;
    height:50px;
    width:6px;
    margin: auto;
    top:-25%;
    left: 0;
    bottom:0;
    right: 0;
    background:rgb(79, 255, 132);
    transform-origin: bottom center;
    transform: rotate(0deg);
    box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7);
    z-index: 1;
    border-radius: 100%;
}
.minute{
    position:absolute;
    height:60px;
    width:4px;
    top:-30%;
    left:0;

    transform: rotate(90deg);
}
.second{
    position:absolute;
    height:70px;
    width:2px;
    margin: auto;
    top:-36%;
    left: 0;
    bottom:0;
    right: 0;
    background:#ff4B3E;
    border-radius: 100%;
    transform-origin: bottom center;
    transform: rotate(180deg);
    z-index: 1;
    left:0;
    box-shadow: 0 0 10px rgb(255, 75,62 ,0.6), 0 0 20px rgb(255, 75, 62 , 0.7);
}
.dot{
    position:absolute;
    height:12px;
    width:12px;
    margin: auto;
    top:0;
    left: 0;
    bottom:0;
    right: 0;
    background:#ffffff;
    border-radius:100px;
   border: 2px solid #1b1b1b;
   z-index: 1;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.timing{
   text-align:center;
}
.timing span{
   font-size:24px;
   font-weight: 500;
   color:rgb(79, 255 ,132);
   filter:  drop-shadow(0 0 5px rgb(79, 255 ,132 , 0.6));
   /* box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7), 0 0 30px rgb(79, 255 ,132 , 0.8), 0 0 40px rgb(79, 255 ,132 , 0.9); */
 }
 .timing p{
    font-size:14px;
   text-transform: uppercase;
   color:#C4CDD5;
  }

JAVAACRIPT


var inc=1000;
clock()
function clock(){
    const date=new Date();

    const hours = ((date.getHours()+11)%12+1);
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    const hour=hours*30;
    const minute=minutes*6;
    const second=seconds*6;
    const h=(hours < 10) ? "0"+hours : hours;
    const m=(minutes < 10) ? "0"+minutes : minutes;

    document.querySelector('.hours').innerHTML=h;
    document.querySelector('.mins').innerHTML=m;
    document.querySelector('.hour').style.transform=`rotate(${hour}deg)`;
    document.querySelector('.minute').style.transform=`rotate(${minute}deg)`;
    document.querySelector('.second').style.transform=`rotate(${second}deg)`;
}

document.querySelector('.timing >p').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")
document.querySelector('.mobile_header >h4').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")

setInterval(clock,inc);

View Demo

https://darkthemeclock.netlify.app/

Download Source Code

https://github.com/vikramsu/dark_clock

Playing card hover effect

vikramsu — Sat, 06 Mar 2021 05:52:31 +0000

FONT

<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">

CSS

 *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        height:100vh;
        background-color:#36ba59;
        font-family: 'Poppins', sans-serif;
        position: relative;
        display:flex;
        align-items: center;
        justify-content:center;
    }
    .card1{
        width:300px;
        height:400px;
        background-color:#fff;
        border-radius:10px;
        padding:10px;
        position:absolute; 
        box-shadow:  -10px 10px 60px rgba(0,0,0,0.2);
        z-index: 0;

    }
    .card2{
        width:300px;
        height:400px;
        background-color:#fff;
        border-radius:10px;
        padding:10px;
        position:absolute; 

        box-shadow:  -10px 10px 60px rgba(0,0,0,0.2);
        z-index: 1;

        cursor: pointer;
        transition: transform 2s ease-in-out;
    }
    .card2:hover{
        transform:translateX(10%) rotate(10deg);
        transition: transform 2s ease-in-out;
    }
    .card span{
        font-size:30px;
        font-weight:bold;
        color:#ff3019;
        position:absolute;
    }


    .card1 span.number4{
        bottom:10px;
        right:10px; 
        transform:rotate(180deg) 
    }
    .card2 span.number4{
        bottom:10px;
        right:10px; 
        transform:rotate(180deg) 
    }

    svg{
        fill:#ff3019;

    }
    .heart1{
        position:absolute;
        top:70px;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .heart2{
        position:absolute;
        bottom:10px;
        left:50%;
        transform: translate(-50%,-50%) rotate(180deg);

    }
    .heart3{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%) rotate(180deg);

    }

HTML

 <div class=" card card1">
        <span class="number1">2</span>
        <span class="number4">2</span>
        <div class="heart1">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
            <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
        </svg>
        </div>
        <div class="heart2">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
    </div>
    <div class="card card2">
        <span class="number1">3</span>
        <span class="number4">3</span>
        <div class="heart1">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
        <div class="heart2">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
        <div class="heart3">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24">
                <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>
            </svg>
        </div>
    </div>

Playing card design in css

vikramsu — Sat, 06 Feb 2021 08:11:07 +0000

Font Family

https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet"

CSS

 *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
        background-color:#36ba59;
        font-family: 'Poppins', sans-serif;
    }
    .card{
        width:300px;
        height:400px;
        background-color:#fff;
        border-radius:10px;
        padding:10px;
        position:relative; 
        box-shadow:  -10px 10px 60px rgba(0,0,0,0.2);

    }
    .card span{
        font-size:30px;
        font-weight:bold;
        color:#ff3019;
        position:absolute;
    }
   
    .card span.number4{
        bottom:10px;
        right:10px; 
        transform:rotate(180deg) 
    }
   
    svg{
        fill:#ff3019;
         
    }
    .heart1{
        position:absolute;
        top:70px;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .heart2{
        position:absolute;
        bottom:10px;
        left:50%;
        transform: translate(-50%,-50%) rotate(180deg);

    }

Html

<div class="card">
    <span class="number1">2</span>

    <span class="number4">2</span>
    <div class="heart1">
        <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
    </div>
    <div class="heart2">
        <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
    </div>
</div>