-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathenglish.html
67 lines (64 loc) · 3.64 KB
/
english.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New year</title>
<!-- Styles -->
<link rel="stylesheet" href="Normalize.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Open+Sans:wght@300&family=Raleway:wght@600&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<main>
<article id="container-article">
<section class="section sec-content">
<!-- Container info -->
<div class="container-info">
<h1 id="title">Countdown to <span id="year"></span></h1>
<h2 class="ending-time"></h2>
<p class="desc">Traditionally, the new year began on the first day of March. However, it was in January (the eleventh month) when the consuls of Ancient Rome assumed the government, so Julius Caesar, in the year 47 a. C., modified the system, and created the Julian calendar. The Romans then dedicated January 1 to Janus, the god "of entrances, and beginnings." The month of January was named in honor of Jano, "who had two faces... one that looked forward and one that looked back".</p>
</div>
<!-- Countdown -->
<div class="countdown">
<!-- Block of days -->
<div class="block-of-time block-days">
<span class="number num-days"></span>
<span class="block-desc-time desc-days">Days</span>
</div>
<!-- Block of hours -->
<div class="block-of-time block-hours">
<span class="number num-hours"></span>
<span class="block-desc-time desc-hours">Hours</span>
</div>
<!-- Block of minutes -->
<div class="block-of-time block-minutes">
<span class="number num-minutes"></span>
<span class="block-desc-time desc-minutes">Mins</span>
</div>
<!-- Block of seconds -->
<div class="block-of-time block-seconds">
<span class="number num-seconds"></span>
<span class="block-desc-time desc-seconds">Secs</span>
</div>
</div>
</section>
<!-- Image -->
<section class="section sec-img">
<img id="image" src="https://images.unsplash.com/photo-1477738224882-4eba549a81ea?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="Person holding sparkler photo" />
</section>
</article>
</main>
<footer id="footer">
<div class="translation">
<p>English</p>
<button type="button" class="span external-span"><span class="span internal-span"></span></button>
<p>Español</p>
</div>
</footer>
<!-- JS -->
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>