diff --git a/README.md b/README.md index 6dc78c7..e11b0e4 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,11 @@ This repository contains a collection of frontend projects.Each project is built Bubble Game Click Here + + 21 + digital clock + Click Here + diff --git a/project-1_landing-page/css/index.css b/project-1_landing-page/css/index.css index 0c6ec73..35c7705 100644 --- a/project-1_landing-page/css/index.css +++ b/project-1_landing-page/css/index.css @@ -249,7 +249,7 @@ header .navbar .menu-items li a { } #contact { - margin: auto; + margin:auto; width: 100%; height: max-content; display: flex; @@ -453,7 +453,7 @@ footer .socials li .bi-linkedin { padding: 10px; } #contact form { - width: 350px; + width: 320px; } footer { padding: 0; diff --git a/project-21_digital_clock/css/styles.css b/project-21_digital_clock/css/styles.css new file mode 100644 index 0000000..9c8f280 --- /dev/null +++ b/project-21_digital_clock/css/styles.css @@ -0,0 +1,84 @@ +html,body{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.hero{ + margin: 0; + padding: 0; + width:100%; + min-height:100vh; + background: linear-gradient(45deg,#08001f,#30197d); + position: relative; + color: #fff; +} +.container{ + width:200px; + height: 80px; + position: absolute; + top:50%; + left:50%; + transform: translate(-50%,-50%); +} +.clock{ + width:100%; + height: 100%; + background: rgba(135,0,245,0.11); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(15px); +} +.container::before{ + content:""; + width:90px; + height: 90px; + background: #f0f0f0; + border-radius: 5px; + position: absolute; + top:-50px; + left:-50px; + z-index:-1; + /* box-shadow: 5px 5px 10px rgb(255,255,255,0.5); */ +} +.container::after{ + content:""; + width:90px; + height: 90px; + background: #0f0f0f; + border-radius: 50%; + position: absolute; + right:-30px; + bottom:-50px; + z-index:-1; + /* box-shadow: 5px 5px 10px rgba(0,0,0,0.5); */ +} +.clock span{ + font-size: 35px; + width: 35px; + display: inline-block; + text-align: center; + position: relative; +} +.clock span::after{ + font-size: 6px; + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); +} +.clock #hours::after{ + content:"HOUR"; +} +#minutes::after{ + content: "MINUTE"; +} +#seconds::after{ + content: "SECOND"; +} +@media (min-width:1068px){ + .hero{ + transform: scale(1.3); + } +} \ No newline at end of file diff --git a/project-21_digital_clock/index.html b/project-21_digital_clock/index.html new file mode 100644 index 0000000..298b486 --- /dev/null +++ b/project-21_digital_clock/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + +
+
+
+ + : + + : + +
+
+
+ + + diff --git a/project-21_digital_clock/js/script.js b/project-21_digital_clock/js/script.js new file mode 100644 index 0000000..9fb9d4e --- /dev/null +++ b/project-21_digital_clock/js/script.js @@ -0,0 +1,26 @@ +const hour = document.querySelector("#hours") +const minute = document.querySelector("#minutes") +const second = document.querySelector("#seconds") +function handelar() { + const currentTime = new Date(); + const hrs = currentTime.getHours(); + const mins = currentTime.getMinutes(); + const secs = currentTime.getSeconds(); + if(hrs < 10){ + hour.innerHTML = "0" + hrs; + }else{ + hour.innerHTML = "" + hrs; + } + if(mins < 10){ + minute.innerHTML = "0" + mins; + }else{ + minute.innerHTML = mins; + } + if(secs < 10){ + second.innerHTML = "0" + secs; + }else{ + second.innerHTML = secs; + } +} +setTimeout(handelar,1); +setInterval(handelar, 1000); \ No newline at end of file