-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (160 loc) · 5.16 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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&family=Oswald:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="StyleSheet" href="styles.css" />
</head>
<body>
<header class="head">
<h1>BACK IN 1964</h1>
<h2>MARY STEINER WAS BORN ON AUGUST 3th!</h2>
</header>
<main class="grid-container">
<section class="item statistics">
<h3 class="black-title a">ECONOMIC STATISTICS</h3>
<table>
<colgroup>
<col />
<col style="list-style-type: none" />
</colgroup>
<tr>
<td>
<ul>
<li>Inflation Rate</li>
<li>Income per year</li>
<li>Monthly rent</li>
<li>New House</li>
<li>Cost of Gas</li>
<li>Fed. Min. Wage</li>
</ul>
</td>
<td>
<ul class="statistics-values">
<li>% 1.28</li>
<li>$ 6.000</li>
<li>$ 115.000</li>
<li>$ 13.100</li>
<li>$ .30</li>
<li>$ 1.25</li>
</ul>
</td>
</tr>
</table>
</section>
<section class="item mapa">
<p class="mapa__box-title">
<strong class="mapa__title">Time Magazine´s Man of the Year</strong>
</p>
<p class="mapa__author">Lyndon B. Johnson</p>
<figure class="mapa__mapa">
<img src="./assets/mapa.svg" alt="" width="200px" />
</figure>
<p class="mapa__name">WORLD POPULATION</p>
<p class="mapa__name">3.273 BILLION</p>
</section>
<section class="item news">
<h3 class="black-title b">IN THE NEWS...</h3>
<p>
Washington D.C. residents are able to vote in a presidential election
for the first time.
</p>
<p>*</p>
<p>
The most powerful earthquake in U.S. history at a magnitude of 9.2,
strikes south central Alaske
</p>
<p>*</p>
<p>
Star of india sapphir stolen from American Museum of Natural History
of New York.
</p>
<p>*</p>
<p>The first pirate radio station, Radio Caroline, is established.</p>
<p>*</p>
<p>
Sidney Poitier becomes the first black actor to win the "best actor"
Oscar.
</p>
<p>*</p>
<p>
The beatle have 13 singles on Billboards´s Hot 100 at the same time
</p>
</section>
<section class="item TECHNOLOGY">
<h3 class="black-title c">TECHNOLOGY</h3>
<p>
BASIC(Beginners´ All purpose Symbolic Instruction Code), an easy to
learn high level programming language is introduced.
</p>
<p>*</p>
<p>The first Ford Mustang from Ford Motor Compay is made.</p>
</section>
<section class="item born">
<p><strong>Born in 1964</strong></p>
<ul>
<li>Nicolas Cage</li>
<li>Courteney Cox</li>
<li>Brad Pitt</li>
<li>Sandra Bullock</li>
<li>Michelle Obama</li>
</ul>
<figure class="born__stars">
<img src="./assets/stars.svg" alt="" width="45px" />
</figure>
</section>
<section class="item instyle">
<h4><strong>IN</strong> <em> Style... </em></h4>
<p><strong>WOMEN</strong></p>
<em>
<p>Slender tunics</p>
<p>Bellbottom pants</p>
<p>Palazzo pants</p>
<p>Plaid and check patterns</p>
<p>Chainbelts * Fringe</p></em
>
<br />
<p><strong>MEN</strong></p>
<em>
<p>Mock turtlenecks</p>
<p>Mohair cardigans</p>
<p>Velour pullovers</p>
<p>Fared pants</p>
<p>Patterned neck scarves</p></em
>
</section>
<section class="item songs">
<h3 class="black-title d">TOP SONGS</h3>
<figure class="songs__treble-clef">
<img src="./assets/sol.svg" alt="" width="20px" />
</figure>
<figure class="songs__musicalnotes">
<img src="./assets/musicalnotes.svg" alt="" width="30px" />
</figure>
<p>"She Loves You"</p>
<p>THE BEATLES</p>
<p>"Hello Dolly!"</p>
<p>LOUIS AMSTRONG</p>
<p>"Everybody Loves Somebody"</p>
<p>THE BEACH BOYS</p>
<p>"Oh, Pretty Womas"</p>
<p>ROY ORBISON</p>
</section>
<section class="item martinlutherking">
Dr. Martin Luther King is awarted the Nobel Peace price for his
nonviolent resistance to radical prejudice in america
</section>
<section class="item uspresident">
<figure><img src="./assets/firma.svg" alt="" width="100%" /></figure>
<p>U.S. PRESIDENT</p>
<p><em>Lyndon B. Johnson</em></p>
</section>
</main>
</body>
</html>