Skip to main content

Digital clock CSS script

body{
    margin: 0;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: center;
    background: url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80");
    background-size: cover;
    overflow: hidden;
}

h2{
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 14px;
    text-align: center;
    color: white;
}

.clock{
    display: flex;
}

.clock div{
    margin: 5px;
    position: relative;
}

.clock span{
    width: 100px;
    height: 80px;
    background: sandybrown;
    opacity: 8;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.clock .text{
    height: 30px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: darkorange;
    opacity: 0.8;
}

.clock #ampm{
    bottom: 0;
    position: absolute;
    width: 60px;
    height: 30px;
    font-size: 20px;
    background: greenyellow;
}





Labels:

Comments

Post a Comment

Popular posts from this blog

Programming Languages

     A programming language is a formal language that is used to communicate instructions to a computer. It is a set of rules, syntax, and structures that programmers use to create software, scripts, and other forms of computer programs. Different programming languages are designed for different purposes, such as web development, mobile app development, game development, artificial intelligence, and more. Some popular programming languages include: Python Java C++ JavaScript C# Ruby Swift Go Kotlin Each programming language has its own set of features and capabilities, and some are better suited to certain types of tasks than others. For example, Python is a popular language for scientific computing, data analysis, and machine learning. JavaScript is mainly used for creating interactive web applications. C++ is commonly used for developing large and complex systems, or for performance-critical applications like video games. As new technologies emerge, new programming lang...
Post a Comment
Read more

JAVA FULL NOTES

  JAVA Written By G. Ravi Kumar Sarma where we use java Java is a versatile programming language that can be used in a variety of different contexts and for a wide range of applications. Some common areas where Java is used include: Web development: Java is a popular choice for developing web applications, both on the server side (using technologies such as Java Servlets and JavaServer Faces) and on the client side (using technologies such as Java applets and JavaFX). Enterprise applications: Java is widely used for developing enterprise-level applications, such as business systems and e-commerce platforms. The Java Enterprise Edition (Java EE) provides a set of libraries and components for building such applications. Mobile development: Java is the primary language used for developing Android mobile applications. The Java Micro Edition (Java ME) can be used for developing applications for other mobile platforms as well. Embedded systems: Java can be used for developing application...
Post a Comment
Read more

Digital Clock JAVA script

const hourEl = document.getElementById("hour") const minuteEl = document.getElementById("minutes") const secondEl = document.getElementById("seconds") const ampmEl = document.getElementById("ampm") function updateClock(){     let h = new Date().getHours()     let m = new Date().getMinutes()     let s = new Date().getSeconds()     let ampm = "AMPM"     if(h > 12){         h = h- 12         ampm = "PM"     }     h = h<10 ? "0" + h : h;     m = m<10 ? "0" + m : m;     s = s<10 ? "0" + s : s;     hourEl.innerText = h;     minuteEl.innerText = m;     secondEl.innerText = s;     ampmEl, (innerText = ampm);     setTimeout(()=> {         updateClock()     }, 1000) } updateClock();
Post a Comment
Read more