-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (155 loc) · 7.61 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
171
172
173
174
175
176
177
178
179
180
181
182
183
<!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>Main Page</title>
<link rel="icon" href = "assets/Icons/favicon.ico" type = "image/x-icon">
<!-- Style.css -->
<link rel="stylesheet" href="./style.css">
<!-- COCOGOOSE & LATO FONT -->
<link href="http://fonts.cdnfonts.com/css/cocogoose" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/lato" rel="stylesheet">
<!-- Link to FontAwesome page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"/>
</head>
<body>
<header>
<nav class="nav-bar">
<section class="nav-bar-section1">
<div><i onclick='openWindow("erik-fb")' class="fab fa-facebook-f"></i></div>
<div><i onclick='openWindow("lore-ig")' class="fab fa-instagram"></i></div>
<div>English</div>
<div>My Page</div>
<div>Logout</div>
</section>
<section class="nav-bar-section2">
<div class="nav-bar-logo">
<img src="assets/Logo1.png" alt="">
</div>
<ul class="nav-bar-options">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Sponsor</a></li>
<li><a href="#">News</a></li>
</ul>
<div class="nav-bar-button">IG Campaign</div>
</section>
<!-- Hamburguer icon -->
<section class="hamburguer-button">
<i id="burguer-icon" class="fas fa-bars"></i>
</section>
</nav>
</header>
<main>
<section class="intro-container">
<div class="main-background">
<div class="mainbg-1"></div>
<div class="mainbg-2"><img src="assets/Icons/no_money.png" alt=""></div>
<div class="mainbg-3"></div>
<div class="mainbg-4"><img src="assets/Icons/hitmark_gray.png" alt=""></div>
<div class="mainbg-5"><img src="assets/bgi/chess_black5.png" alt=""></div>
<div class="mainbg-6"><img src="assets/Icons/no_yen.png" alt=""></div>
<div class="mainbg-7"><img src="assets/Icons/zero.png" alt=""></div>
<div class="mainbg-8"><img src="assets/Icons/zero.png" alt=""></div>
<div class="mainbg-9"><img src="assets/Icons/reverse.png" alt=""></div>
</div>
<h2>"¡Hola! Digital Universe"</h2>
<h1>INTERCULTURAL EXCHANGE MEXICO-CANADA 2023</h1>
<p class="intro-paragraph1">A small but meaningful merge between two countries known for their warmth. This creative celebration will allow us to understand the similarities and differences behind the success of using social media as a tool in diverging cultures. It is taking place in July, in Canada.</p>
<p class="intro-paragraph2">2023.07.01(SAT) ~ 02(SUN)</p>
<p class="intro-paragraph3">@ CN Tower, Toronto</p>
</section>
<section class="main-program-section">
<div class="container-main-program">
<h3>Main Program</h3>
<hr class="mainprogram-hr">
<div class="cards">
<!-- Card1 -->
<div class="card-main-program">
<div class="card-logo"><img src="assets/Icons/lecture.png" alt=""></div>
<div class="card-title">Lecture</div>
<div class="card-text">This year is our turn, listen from some renowned Mexican speakers who are prepared to share with you their experiences.
</div>
</div>
<!-- Card2 -->
<div class="card-main-program">
<div class="card-logo"><img src="assets/Icons/exhibition.png" alt=""></div>
<div class="card-title">IG Exbihition</div>
<div class="card-text">Let’s build each other up, observing from everyone’s work we are able to learn and improve.</div>
</div>
<!-- Card3 -->
<div class="card-main-program">
<div class="card-logo"><img src="assets/Icons/forum.png" alt=""></div>
<div class="card-title">Forum</div>
<div class="card-text">Time to start conversations, this is a safe space to discover an develop new ideas
accompanied by our experts.</div>
</div>
<!-- Card4 -->
<div class="card-main-program">
<div class="card-logo"><img src="assets/Icons/workshop.png" alt=""></div>
<div class="card-title">Workshop</div>
<div class="card-text">Now is your moment to shine, the best moment to start is now, we will take the first step with you.</div>
</div>
<!-- Card5 -->
<div class="card-main-program">
<div class="card-logo"><img src="assets/Icons/networking.png" alt=""></div>
<div class="card-title">Networking</div>
<div class="card-text">Ignite new friendships, their worth is invaluable, opportunities come from everywhere.</div>
</div>
</div>
<!-- Main Program button -->
<div class="card-button display-mobil">Join IE Mexico-Canada 2023</div>
<div class="card-button display-desktop">SEE THE WHOLE PROGRAM</div>
</div>
</section>
<section class="features-speakerSection">
<h3 class="fs-title">Featured Speakers</h3>
<hr class="speakerfeatures-hr">
<div id="speakers" class="contaier-speakers"></div>
<div id="open-Btn" onclick="showSpeakers('open')" class="fs-buttonMore"> <span>MORE</span><i class="fas fa-angle-down"></i> </div>
<div id="close-Btn" onclick="showSpeakers('close')" class="fs-buttonMore close-Btn"> <span>LESS</span><i class="fas fa-angle-up"></i> </div>
</section>
</main>
<footer class="mobil">
<section class="about-footer">
<h3>Partner</h3>
<hr>
<div class="partner-section">
<a href="https://www.instagram.com/guilu_spanishroom/" class="partner1"><img src="assets/Guilulogo_1.png" alt=""></a>
<a href="https://www.instagram.com/belmarnovedades/" class="partner2"><img src="assets/beltmar_logo.jpeg" alt=""></a>
<a href="https://www.instagram.com/roca.amatista/" class="partner3"><img src="assets/rocaAmatista_logo.jpeg" alt=""></a>
<a href="https://www.instagram.com/mictlanmex.ver/" class="partner4"><img src="assets/MictlanMex-logo.jpeg" alt=""></a>
<a href="https://www.instagram.com/bellezaconbren/" class="partner5"><img src="assets/Logo_bcb.png" alt=""></a>
</div>
</section>
<section class="bottom-partner">
<span class="bottom-logo"><img src="assets/Logo1.png" alt=""></span>
<span class="rights-reserved">2019 IE Teacher LoreSF. Some Right Reserved.</span>
</section>
</footer>
<!-- Modal for hambuguer menu // Modal zone --------------------------------------------------------------------------------------------------------->
<div id="modal-menu" class="modal-menu modal-menuAbout">
<i id="x-icon" class="fas fa-times dont-show"></i>
<!-- Options menu -->
<ul id="list-menu" class="modal-hamburguer">
<li><a href="#">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Sponsor</a></li>
<li><a href="#">News</a></li>
<li><a href="#">IG Campaign</a></li>
</ul>
<div class="Modal-background">
<div class="modal-bg1"></div>
<div class="modal-bg2"></div>
<div class="modal-bg3"></div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>