Countdown-Timer/index.html at main · SandeepKumar1997/Countdown-Timer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Countdown Timer</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Readex+Pro&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-box">
      <img src="books.jpg" alt="Book's Image" />

      <div class="content-column">
        <h1 class="timer-heading">Countdown Timer</h1>
        <!-- <h3 class="timer-subHeading">Book's giveaway on this Holiday Season</h3> -->
        <h3 class="timer-subHeading">The Giveaway will begin from Saturday, 25 December 2021, 10:30 am</h3>
        <p class="timer-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
        <div class="flex-box-timer">
          <div class="countdown-area">
            <h2 class="h2-design days">02</h2>
            <span class="h2-design">DAYS</span>
          </div>
          <div class="countdown-area">
            <h2 class="h2-design hours">02</h2>
            <span class="h2-design">HOURS</span>
          </div>
          <div class="countdown-area">
            <h2 class="h2-design minutes">02</h2>
            <span class="h2-design">MINS</span>
          </div>
          <div class="countdown-area">
            <h2 class="h2-design seconds">02</h2>
            <span class="h2-design">SECS</span>
          </div>
        </div>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>