Adding Display time on website

3 years ago · 2066f9ac29
parent e0d4be1f47
commit 2066f9ac29
2 changed files with 74 additions and 0 deletions
--- a/website/index.html
+++ b/website/index.html
@ -0,0 +1,27 @@
 <!DOCTYPE html>
 <html>
    <head>
        <meta name="viewport" content="width=device-width, intial-scale=1.0">
        <title>Display Time On Website</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
        <!-- <img src="sunset-2501729_1280.png"> -->
        <h1 id="current-time"></h1>
        <div class="quotes">
            <p>TODAY'S QUOTES</p>
            <h2>Success doesn’t come to you, you go to it.</h2>
        </div>
    </div>
    <script>
        let time = document.getElementById("current-time");
        setInterval(() =>{    
        let d = new Date();
        time.innerHTML = d.toLocaleTimeString();
    },1000 )
    </script>
    </body>
 </html>
--- a/website/style.css
+++ b/website/style.css
@ -0,0 +1,47 @@
 *{
    margin: 0;
    padding: 0;
    font-family: cursive, sans-serif;
    box-sizing: border-box;
 }
 .container{
    width: 100%0;
    height: 100vh;
    background: #0e6c91;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: 'Courier New', Courier, monospace;
 }
 /* .container img{
    width: 60%; */
 /* 
 } */
 .container h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px #040404;
    text-decoration-color: blue;
    font-size: 90px;
    font-weight: 600;
    letter-spacing: 3px;
 }
 .quotes{
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 15%;
    color: rgb(255, 0, 0);
    font-size: 20px;
    font-weight: 500;
 }
 .quotes h2{
    font-size: 45px;
    margin-top: 10px;
    font-weight: 500;
    color: #040404;
 }