-
Notifications
You must be signed in to change notification settings - Fork 48
/
Copy pathWinter.html
136 lines (115 loc) · 7.14 KB
/
Winter.html
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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" />
<!--
CSS
-->
<link rel="stylesheet" href="summer.css" />
<link rel="stylesheet" href="Winter.css" />
<!--
-----
-->
<script src="Winter.js"></script>
<title>Winter Season</title>
</head>
<body style="background-color: rgb(237, 239, 243);">
<div class='snow-flakes'> <div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div></div>
<div class="main">
<h1 id="greeting">Winter Season</h1>
<div class="container">
<div class="radio-container">
<button id="summer">
<h4>Winter 2022 in Northern Hemisphere began on</h4>
<h2>Thursday, December 22</h2>
<h4>and ends on</h4>
<h2>Tuesday, March 21, 2023</h2>
</button>
</div>
</div>
<div class="wrapper">
<div class="zoom-effect-container">
<div class="image-card">
<img src="Winter.jpg" alt="Smiley face" width="100%" height="100%"
>
</div>
<div class="bottom-left">
<p>Winter is the coldest season of the year in polar and temperate climates. It occurs after autumn and
before spring. The tilt of Earth's axis causes seasons; winter occurs when a hemisphere is oriented
away from the Sun. Different cultures define different dates as the start of winter, and some use a
definition based on weather.
</p>
<p>
When it is winter in the Northern Hemisphere, it is summer in the Southern Hemisphere, and vice
versa. In many regions, winter brings snow and freezing temperatures. The moment of winter solstice
is when the Sun's elevation with respect to the North or South Pole is at its most negative value;
that is, the Sun is at its farthest below the horizon as measured from the pole. The day on which
this occurs has the shortest day and the longest night, with day length increasing and night length
decreasing as the season progresses after the solstice.
</p>
</div>
<style>
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
#greeting{position: relative;
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
h1 span {
display: block;
font-size: 0.5em;
line-height: 1.3;
}
h1 em {
font-style: normal;
font-weight: 600;
}
/* === HEADING STYLE #1 === */
#greeting {
text-align: center;
text-transform: uppercase;
padding-bottom: 5px;
}
#greeting:before {
width: 28px;
height: 5px;
display: block;
content: "";
position: absolute;
bottom: 3px;
left: 50%;
margin-left: -14px;
background-color: #1f52c8;
}
#greeting:after {
width: 100px;
height: 1px;
display: block;
content: "";
position: relative;
margin-top: 25px;
left: 50%;
margin-left: -50px;
background-color: #1f52c8;
}
.container{
margin-left: 600px;
}
p{
font-size: larger;
}
</style>
</body>
</html>