-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
66 lines (63 loc) · 3.65 KB
/
index.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Año nuevo</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">Cuenta regresiva para <span id="year"></span></h1>
<p class="desc">Tradicionalmente, el año nuevo comenzaba el primer día de marzo. Sin embargo, fue en enero (el undécimo mes) cuando los cónsules de la Antigua Roma asumieron el gobierno, así Julio César, en el año 47 a. C., modificó el sistema y creó el calendario juliano. Luego, los romanos dedicaron el 1 de enero a Jano, el dios "de las entradas y los comienzos". El mes de enero fue nombrado en honor a Jano, "que tenía dos caras... una que miraba hacia adelante y otra que miraba hacia atrás".</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">Días</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">Horas</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">Segs</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="Foto de persona sosteniendo una bengala" />
</section>
</article>
</main>
<footer id="footer">
<div class="translation">
<p>English</p>
<button type="button" class="span external-span"><span class="span internal-span internal-slide"></span></button>
<p>Español</p>
</div>
</footer>
<!-- JS -->
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>