Skip to content

Commit fe209b0

Browse files
AmanDeep9925AmanDeep9925
committed
Added the Styling to app
1 parent ebd7d27 commit fe209b0

3 files changed

Lines changed: 123 additions & 0 deletions

File tree

‎NewYearCountDown/assets/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-image: url("https://images.unsplash.com/photo-1467810563316-b5476525c0f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQi0jEyMDd9&auto=format&fit=crop&w=1349&q=80");
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
background-position: center center;
12+
13+
height: 100vh;
14+
15+
color: white;
16+
font-family: "Lato", sans-serif;
17+
text-align: center;
18+
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
24+
margin: 0;
25+
overflow: hidden;
26+
}
27+
28+
body::after {
29+
content: "";
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
34+
width: 100%;
35+
height: 100%;
36+
37+
background-color: rgba(0, 0, 0, 0.6);
38+
}
39+
40+
body * {
41+
z-index: 1;
42+
}
43+
44+
h1 {
45+
font-size: 4rem;
46+
}
47+
48+
.countdown {
49+
display: flex;
50+
transform: scale(2);
51+
}
52+
53+
.time {
54+
display: flex;
55+
flex-direction: column;
56+
align-items: center;
57+
justify-content: center;
58+
margin: 15px;
59+
}
60+
61+
.time h2 {
62+
margin: 0 0 5px;
63+
}
64+
65+
@media (max-width: 500px) {
66+
h1 {
67+
font-size: 1.5rem;
68+
}
69+
70+
.time {
71+
margin: 5px;
72+
}
73+
74+
.time h2 {
75+
font-size: 12px;
76+
margin: 0;
77+
}
78+
79+
.time small {
80+
font-size: 10px;
81+
}
82+
}

‎NewYearCountDown/images/spinner.gif‎

4.81 KB
Loading

‎NewYearCountDown/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>New Year Countdown</title>
8+
<link rel="stylesheet" href="assets/style.css" />
9+
</head>
10+
<body>
11+
<div id="year" class="class"></div>
12+
<h1>New Year Countdown</h1>
13+
14+
<div id="countdown" class="countdown">
15+
<div class="time">
16+
<h2 id="days">00</h2>
17+
<small>days</small>
18+
</div>
19+
<div class="time">
20+
<h2 id="hours">00</h2>
21+
<small>hours</small>
22+
</div>
23+
<div class="time">
24+
<h2 id="minutes">00</h2>
25+
<small>minutes</small>
26+
</div>
27+
<div class="time">
28+
<h2 id="seconds">00</h2>
29+
<small>seconds</small>
30+
</div>
31+
</div>
32+
33+
<!-- <img
34+
src="./images/spinner.gif"
35+
alt="loading..."
36+
id="loading"
37+
class="loading"
38+
/> -->
39+
<script src="assets/script.js"></script>
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)