added timer to homepg

bhat-shubham · Sep 10, 2024 · dfcc5d0 · dfcc5d0
1 parent fa13cc7
commit dfcc5d0
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -105,6 +105,25 @@ <H1 class="sec-txt">2024</H1>
                     <p> PDEA's College of Engineering,Pune</p>
 
                 </div>
+                <div class="launchtime">
+                    <div>
+                        <span id="days">00</span>
+                        <p>Days</p>
+                    </div>
+                    <div>
+                        <span id="hours">00</span>
+                        <p>Hours</p>
+                    </div>
+                    <div>
+                        <span id="minutes">00</span>
+                        <p>Minutes</p>
+                    </div>
+                    <div>
+                        <span id="seconds">00</span>
+                        <p>Seconds</p>
+                    </div>
+
+                </div>
 
 
                 <div class="btns sec-margin">
@@ -708,6 +727,26 @@ <h1 class="">
     </footer>
 
     <script src="script.js"></script>
+    <script>
+        var countDownDate = new Date("Oct 19, 2024 00:00:00").getTime();
+        var x =setInterval(function(){
+            var now= new Date().getTime();
+            var distance = countDownDate - now;  
+            var days = Math.floor(distance / (1000 * 60  * 60 * 24));
+            var hours = Math.floor((distance % (1000 * 60  * 60 * 24)) / (1000 * 60 * 60));
+            var minutes = Math.floor((distance % (1000 * 60  * 60)) / (1000 * 60));
+            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+            document.getElementById("days").innerHTML= days;
+            document.getElementById("hours").innerHTML= hours;
+            document.getElementById("minutes").innerHTML= minutes;
+            document.getElementById("seconds").innerHTML= seconds;
+
+
+
+
+        },1000);
+    </script>
 
 </body>
 

diff --git a/style.css b/style.css
@@ -240,7 +240,20 @@ body {
     color: #fff;
     font-size: 20px;
 }
-
+.launchtime div span{
+    padding: 20px;
+    /* background-color: #0e3742; */
+    border-radius: 20px;
+    font-family: poppins;
+    font-size: 50px;
+    color: #00D8ED;
+}
+.launchtime div{
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 7px;
+    box-shadow: 0 1px 10px #08CBFF;
+    /* background-color: #1f1313; */
+}
 .hero .row .left-sec .location {
     margin-top: 15px;
     display: flex;
@@ -269,7 +282,12 @@ body {
     display: flex;
     align-items: center;
 }
-
+.launchtime{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 15px;
+    /* flex-basis: 100px; */
+}
 
 .hero .row .left-sec .btns {
     gap: 55px;