-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
152 lines (135 loc) · 6.48 KB
/
about.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
<!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">
<title>About</title>
<!-- Styles -->
<link rel="stylesheet" href="./build/styles.css">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
<!-- Google icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
<!-- FA icons -->
<script src="https://kit.fontawesome.com/6ce384dd4f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="mobile-menu mobile">
<i class="fa-solid fa-xmark mobile"></i>
</div>
<!-- Top section -->
<div class="top-section desktop">
<img class="top-icon" src="./src/img/icons/fb-icon.svg" alt="facebook icon" height="10px" width="10px">
<img class="top-icon" src="./src/img/icons/twitter-icon.svg" alt="twitter icon" height="10px" width="10px">
<ul>
<li>English</li>
<li>My page</li>
<li>Logout</li>
</ul>
</div>
<!-- Top section -->
<nav class="nav-container">
<span class="material-symbols-rounded hamburger">menu</span>
<a href="index.html">
<img class="logo" src="./src/img/project-logo/logo_tango_194x54.png" alt="tango festival logo">
</a>
<div class="right-side">
<ul class="desktop-menu">
<li><a href="./about.html">About</a></li>
<li class="past-conferences"><a class="past-conferences" href="#past">Past festivals</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sponsors</a></li>
</ul>
</div>
</nav>
<section id="header">
<p class="blockquote hdcl-about">"Put on your dancing shoes!!!"</p>
<h1 class="header-class hdcl-about">INTERNATIONAL <br> TANGO FEST 2022</h1>
<div class="white-box">
<p>The most important Tango event in South America and on the World.
The Internatiuonal Tango Festival will be held in Bogota, Colombia.
The most famous milongueros from Colombia will present in this event.
The most important Tango event in South America and on the World.
The Internatiuonal Tango Festival will be held in Bogota, Colombia.
The most famous milongueros from Colombia will present in this event.
The most important Tango event in South America and on the World.
The Internatiuonal Tango Festival will be held in Bogota, Colombia.
The most famous milongueros from Colombia will present in this event.
The most important Tango event in South America and on the World.
The Internatiuonal Tango Festival will be held in Bogota, Colombia.
The most famous milongueros from Colombia will present in this event.
The most important Tango event in South America and on the World.
The Internatiuonal Tango Festival will be held in Bogota, Colombia.
The most famous milongueros from Colombia will present in this event.
</p>
</div>
</section>
<main>
<div class="contact-box">
<p class="contact-about">Please contact us per email for any further questions about International Tango Festival 2022! </p>
<p class="email">[email protected]</p>
</div>
<section id="about-body">
<h2 class="program-heading">International Tango Festival 2022 Logo</h2>
<div class="line"></div>
<div class="white-box scale-2">
<img src="./src/img/project-logo/logo_tango_194x54.png" alt="tango festival logo">
</div>
<div class="section-divider mobile"></div>
<div class="past-conferences" id="past">
<h2 class="program-heading">See the past International Tango Festival</h2>
<div class="line"></div>
<p>Take a look to the last two International Tango Festivals which took place in Buenos Aires and Montevideo </p>
<div class="conferences-container">
<div class="container">
<div class="text-container">
<h3 class="img-text img-header">2021</h3>
<p class="img-text img-place">International Tango Fest Mexico</p>
</div>
<div class="bg">
<img src="./src/img/conferences/conference-1.jpg" alt="tango festival image" width="350" height="250">
</div>
</div>
<div class="container">
<div class="text-container">
<h3 class="img-text img-header">2020</h3>
<p class="img-text img-place">International Tango Fest Montevideo</p>
</div>
<div class="bg">
<img src="./src/img/conferences/conference-2.jpg" alt="tango festival image" width="350" height="250">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- sponsors section -->
<section class="about-sponsors mobile" id="sponsors">
<h3 class="sponsors-heading">Sponsors</h3>
<div class="line"></div>
<div class="sponsors-logos">
<img class="google-logo" src="./src/img/sponsors/sponsor-1.png" alt="Google logo" width="200" height="200">
<img src="./src/img/sponsors/sponsor-2.png" alt="Airbnb logo" width="200" height="100">
<img src="./src/img/sponsors/sponsor-3.png" alt="GitHub logo" width="100" height="100">
<img src="./src/img/sponsors/sponsor-4.png" alt="Firefox logo" width="100" height="100">
<img src="./src/img/sponsors/sponsor-5.png" alt="Micorvese Logo" width="400" height="100">
</div>
</section>
<!-- sponsors section -->
</main>
<footer id="black">
<img src="./src/img/project-logo/logo_tango_194x54.png" alt="Project logo">
<div class="footer-text">
<p>Lorem ipsum dolor sit amet consectetur</p>
<h6>© International Tango Festival</h6>
</div>
</footer>
<script src="./src/js/main.js"></script>
</body>
</html>