-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (159 loc) · 5.46 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
<!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" />
<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=Lato:ital,wght@0,300;0,400;0,700;1,300&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/ab2d2d26a1.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./css/index.css" />
<title>International Youth Week</title>
</head>
<body>
<div class="container">
<header>
<nav class="mobile-menu">
<h2>
<a href="index.html" class="logo">Youth<span>WEEK</span></a>
</h2>
<ul class="links txt-center">
<li><a href="about.html">About</a></li>
<li><a href="#program">Program</a></li>
<li><a href="#speakers">Speakers</a></li>
<li><a href="#partners">Partners</a></li>
</ul>
</nav>
<nav class="top-nav">
<ul>
<li>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li><a href="#">English</a></li>
<li><a href="#">My Page</a></li>
<li><a href="#">Logout</a></li>
</ul>
</nav>
<nav class="navbar">
<h2>
<a href="index.html" class="logo">Youth<span>WEEK</span></a>
</h2>
<ul class="links">
<li><a href="about.html">About</a></li>
<li><a href="#program">Program</a></li>
<li><a href="#speakers">Speakers</a></li>
<li><a href="#partners">Partners</a></li>
</ul>
<div class="menu"><span></span><span></span><span></span></div>
</nav>
<section class="hero">
<h1>Youth WEEK</h1>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro,
voluptates dolor. Iure dolorum totam debitis natus aspernatur
necessitatibus exercitationem numquam at nesciunt ullam ut optio
consequatur quo laborum, laboriosam eum.
</p>
<h2>2022.02.02(WED) ~ 09(WED)</h2>
<p>@ Oakland Convention Center</p>
</section>
</header>
<section class="program" id="program">
<h3>Main Program</h3>
<hr />
<div class="list">
<div class="card">
<i class="fa fa-school fa-3x"></i>
<h4>Learn</h4>
<p>
Attend 250+ workshops, bootcamps, panel talks, and keynotes
covering all new dev technologies.
</p>
</div>
<div class="card">
<i class="fas fa-clipboard-list fa-3x"></i>
<h4>Hire</h4>
<p>
Get in front of 1,000+ hirabel developers, engineers and designers
at the largest dev tech hiring expo.
</p>
</div>
<div class="card">
<i class="fas fa-keyboard fa-3x"></i>
<h4>Hack</h4>
<p>
Join a team or sponsor the hackathon where hundreds of developers
will build web and mobile apps that solve
</p>
</div>
<div class="card">
<i class="fab fa-slideshare fa-3x"></i>
<h4>Exhibit</h4>
<p>
We sold out of Exhibit space in 2021. Contact us about exhibiting
in 2022 before we sell out!
</p>
</div>
<div class="card">
<i class="fas fa-bullhorn fa-3x"></i>
<h4>Sponsor</h4>
<p>
Many of sponsor packages include exhibiting, hosting an event,
participating in our hackathon and
</p>
</div>
<div class="card">
<i class="fas fa-calendar-alt fa-3x"></i>
<h4>Host</h4>
<p>
Contact us to learn how you can host a half day of full day
workshop/semiar as part of
</p>
</div>
</div>
<button type="button">Join Youth Week 2022</button>
<a href="#">SEE THE WHOLE PROGRAM</a>
</section>
<section class="speakers" id="speakers">
<h3>Featured Speakers</h3>
<hr />
<div class="list"></div>
<div class="more-btn">
<span>MORE</span>
<i class="fas fa-chevron-down"></i>
</div>
</section>
<section class="partner" id="partners">
<h3>Featured Speakers</h3>
<hr />
<div class="logos">
<i class="fab fa-aws fa-4x"></i>
<i class="fab fa-ebay fa-4x"></i>
<i class="fab fa-ember fa-4x"></i>
<i class="fab fa-lyft fa-4x"></i>
<i class="fab fa-node fa-4x"></i>
</div>
</section>
<footer class="footer">
<div class="logo">Youth<span>WEEK</span></div>
<p>2022 YouthWeek. Some Rights Reserved.</p>
</footer>
<script src="./scripts/menu.js"></script>
<script src="./scripts/speakers.js"></script>
</div>
</body>
</html>