Add files via upload

SpantaAlizadeh10 · Feb 12, 2024 · 0b9ce6e · 0b9ce6e
1 parent b155230
commit 0b9ce6e
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 0 deletions.
diff --git a/digital clock/index.html b/digital clock/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="hero">
+      <div class="container">
+        <h1 class="txt" id="txt">
+          <b>S</b><b>E</b><b>P</b><b>A</b><b>N</b><b>A</b> <b>:</b><b>T</b> <b>I</b
+          ><b>M</b><b>E</b>
+        </h1>
+        <div class="clock">
+          <span id="hrs">00</span>
+          <span>:</span>
+          <span id="min">00</span>
+          <span>:</span>
+          <span id="sec">00</span>
+        </div>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/digital clock/script.js b/digital clock/script.js
@@ -0,0 +1,11 @@
+let hrs = document.getElementById("hrs");
+let min = document.getElementById("min");
+let sec = document.getElementById("sec");
+
+setInterval(() => {
+  let currentTime = new Date();
+
+  hrs.innerHTML = currentTime.getHours();
+  min.innerHTML = currentTime.getMinutes();
+  sec.innerHTML = currentTime.getSeconds();
+}, 1000);
diff --git a/digital clock/style.css b/digital clock/style.css
@@ -0,0 +1,156 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Courier New", Courier, monospace;
+  box-sizing: border-box;
+}
+
+.hero {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(45deg, #b2ca64, #ca7171);
+  color: #fff;
+  position: relative;
+}
+
+.container {
+  width: 800px;
+  height: 180px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.clock {
+  width: 100%;
+  height: 100%;
+  background: rgba(23, 10, 29, 0.31);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(40px);
+}
+
+.container::before {
+  content: "";
+  width: 180px;
+  height: 180px;
+  background: #865066;
+  border-radius: 50px;
+  position: absolute;
+  left: -50px;
+  top: -50px;
+  z-index: -1;
+}
+
+.container::after {
+  content: "";
+  width: 180px;
+  height: 180px;
+  background: #50866c;
+  border-radius: 50%;
+  position: absolute;
+  right: -30px;
+  bottom: -50px;
+  z-index: -1;
+}
+
+.clock span {
+  font-size: 80px;
+  width: 110px;
+  display: inline-block;
+  text-align: center;
+  position: relative;
+}
+
+.clock span::after {
+  font-size: 16px;
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#hrs::after {
+  content: "HOURS";
+}
+
+#min::after {
+  content: "MINS";
+}
+
+#sec::after {
+  content: "SEC";
+}
+
+
+
+
+#txt{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    flex:1;
+    font-family:sans-serif;
+    letter-spacing:3.5px;
+    font-size:3.5rem;
+    font-weight:700;
+    position:relative;
+    transform-style:preserve-3d;
+    perspective:100px;
+    -webkit-transform-style:preserve-3d;
+    -webkit-perspective:100px;
+ }
+
+
+
+
+
+ #txt>b{
+    height:3.5rem;
+    box-shadow:0 .4rem .3rem -.3rem #e3dede;
+    color:#c6dfbf;
+    background:linear-gradient(rgb(222, 225, 223),rgb(157, 188, 158),#afc);
+    background-clip:text;
+    /* text-fill-color:transparent; */
+    -webkit-background-clip:text;
+    -webkit-text-fill-color:transparent;
+    transform-origin:bottom;
+    transform:rotateX(-85deg);
+    -webkit-transform-origin:bottom;
+    -webkit-transform:rotateX(-85deg);
+    animation:getUp 7s infinite;
+ }
+ #txt>b:nth-child(2){
+    animation-delay:.25s;
+ }
+ #txt>b:nth-child(3){
+    animation-delay:.5s;
+ }
+ #txt>b:nth-child(4){
+    animation-delay:.75s;
+ }
+ #txt>b:nth-child(5){
+    animation-delay:1s;
+ }
+ #txt>b:nth-child(6){
+    animation-delay:1.25s;
+ }
+ #txt>b:nth-child(7){
+    animation-delay:1.5s;
+ }
+ #txt>b:nth-child(8){
+    animation-delay:1.75s;
+ }
+ @keyframes getUp{
+    10%,50%{
+       transform:rotateX(0);
+    }
+    0%,60%,100%{
+       transform:rotateX(-85deg);
+    }
+ }
+
+