generated from microverseinc/readme-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
283 lines (283 loc) · 17.8 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/0e87feccf7.js" crossorigin="anonymous"></script>
<title>Capstone Project: Conference</title>
</head>
<body>
<header>
<!-- Navigation bar 768px and above -->
<nav class="container-fluid p-0 font-lato position-fixed top-0 z-index">
<div class="top-nav d-none d-md-block bg-navy">
<ul class="nav align-items-center justify-content-end me-5">
<li><a href="#" class="px-2 nav-link">
<i class="fab fa-facebook-f text-white"></i>
</a></li>
<li><a href="#" class="px-2 nav-link">
<i class="fab fa-twitter text-white"></i>
</a></li>
<li><a href="#" class="px-2 nav-link text-white">My Page</a></li>
<li><a href="#" class="px-2 nav-link text-white">Logout</a></li>
<li><a href="#" class="px-2 nav-link text-white">English</a></li>
</ul>
</div>
<div class="bottom-nav d-none d-md-block shadow bg-white ps-5 py-2">
<div class="container-md row">
<div class="col-5 d-flex px-md-5">
<a href="#" class="brand">
<img src="assets/sre-logo.png" alt="workshop logo" class="workshop-logo border-navy">
</a>
</div>
<ul class="col-7 nav flex-nowrap align-items-center justify-content-end justify-content-xl-around pe-5 pe-xl-0">
<li><a href="./about.html" class="nav-link text-secondary effect">About</a></li>
<li><a href="#program" class="nav-link text-secondary effect">Program</a></li>
<li><a href="#highlights" class="nav-link text-secondary effect">Highlights</a></li>
<li><a href="#partners" class="nav-link text-secondary effect">Partners</a></li>
<li>
<a href="./tickets.html" class="ticket border-red p-1 color-navy text-decoration-none">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navigation Toggle 768px and below -->
<div class="navbar navbar-expand-md">
<div class="container-fluid bg-transparent">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#smallscreen" aria-controls="smallscreen" aria-expanded="false" aria-label="Toggle navigation">
<span><img src="https://img.icons8.com/material-outlined/24/000000/menu--v1.png" alt="menu icon"></span>
</button>
<div class="collapse navbar-collapse" id="smallscreen">
<ul class="navbar-nav d-md-none">
<li class="nav-item"><a href="#home" class="nav-link text-secondary">Home</a></li>
<li class="nav-item"><a href="./about.html" class="nav-link text-secondary">About</a></li>
<li class="nav-item"><a href="./tickets.html" class="nav-link text-secondary">Tickets</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="mt-3 mt-md-5 pt-2 font-lato">
<!-- Section: 2021 SRE Conference theme and date -->
<section class="mt-0 mt-md-4 py-3 px-3 px-md-5 color-red" id="home">
<div class="wrap-home ps-0 ps-md-5 pt-0 pt-md-5">
<p class="theme mb-1">Engineering for resilience</p>
<h1 class="event mx-width font-goose text-uppercase">SRE and Cloud Infrastructure Conference 2021</h1>
<div class="bg-white border border-2 mx-width text-dark my-3 py-3 px-3">
<p class="mb-0 font-small">
The annual grassroot-led conference is packed with talks, sessions and practical workshops aimed to help developers, software architects,
site reliability engineers, and other tech roles in getting a grasp on the latest trends in order to drive innovation forward. Six exciting
speakers at the conference will be sharing strategies and practical tools to implement technical and architectural improvements in achieving
operational excellence across complex distributed systems.
</p>
</div>
<p class="date mt-2 mb-0 text-secondary font-goose">2021.02.04(THU) ~ 05(FRI)</p>
<p class="text-secondary">@ The Eko Convention Centre, Lagos Nigeria</p>
</div>
</section>
<!-- Main Program Section -->
<section class="my-3 py-4 px-1 px-md-4 text-center text-white" id="program">
<div class="container-md">
<h2 class="intro section-header">Main Program</h2>
<div class="my-3 row row-cols-1 row-cols-md-5">
<div class="col wrap py-3 d-flex align-items-center d-md-block">
<div class="theme">
<i class="icon fas fa-sitemap mt-4 mb-1"></i>
<h3 class="subject fw-bold my-2 color-red">Website Architecture</h3>
</div>
<p class="my-2">
Interactive session covering strategies that focus on architectural principles necessary to test, automate
and deliver software with modern processes.
</p>
</div>
<div class="col wrap py-3 d-flex align-items-center d-md-block">
<div class="theme">
<i class="icon fas fa-cloud-download-alt mt-4 mb-1"></i>
<h3 class="subject fw-bold my-2 color-red">Cloud Infrastructure</h3>
</div>
<p class="my-2">
Join us to connect with engineers who will be sharing new approaches to coding and modernizing for cloud.
Learn to optimize cloud natuve technologies.
</p>
</div>
<div class="col wrap py-3 d-flex align-items-center d-md-block">
<div class="theme">
<i class="icon fas fa-archive mt-4 mb-1"></i>
<h3 class="subject fw-bold my-2 color-red">Continuous Delivery</h3>
</div>
<p class="my-2">
Forum to discuss important issues around building complex systems, how to engineer for resilience, achieving
predictability and how to automate for scale.
</p>
</div>
<div class="col wrap py-3 d-flex align-items-center d-md-block">
<div class="theme">
<i class="icon fas fa-laptop-code mt-4 mb-1"></i>
<h3 class="subject fw-bold my-2 color-red">Process Automation</h3>
</div>
<p class="my-2">
This event helps to bridge the gap between devs and ops by exploring topics and practical workshops around
testing, process automation, and reliability.
</p>
</div>
<div class="col wrap py-3 d-flex align-items-center d-md-block">
<div class="theme me-2 me-md-0">
<i class="icon fas fa-digital-tachograph mt-4 mb-1"></i>
<h3 class="subject fw-bold my-2 color-red">Operation Strategies</h3>
</div>
<p class="my-2">
Stay up-to-date on what's happening in the industry as the event unpacks the best practices and how to use
the latest tools in today's complex IT landscape.
</p>
</div>
</div>
<h3 class="d-none d-md-block"><a href="./tickets.html" class="text-white font-small">JOIN THE PROGRAM</a></h3>
<div class="ticket d-flex d-md-none align-items-center justify-content-center my-3">
<a href="./tickets.html" class="bg-red p-3 text-decoration-none text-white">Register</a>
</div>
</div>
</section>
<!-- Featured Speakers Section -->
<section class="mt-3 p-md-3 text-center" id="highlights">
<div class="container-lg">
<h2 class="intro section-header">Featured Speakers</h2>
<div class="row row-cols-1 row-cols-md-2 px-2 px-xl-4 text-start">
<div class="speakers col p-2 row flex-nowrap">
<div class="portrait col-4 col-lg-3 p-0 position-relative me-1 me-xl-0">
<img src="assets/chess_board.svg" alt="chess board">
<div class="photo featured-heather"></div>
</div>
<div class="about col-8 col-lg-9 ps-1 ps-lg-0">
<h3 class="mb-0 intro fw-bold">Heather Adkins</h3>
<p class="role fst-italic color-red my-1"><small>Senior Director of Information Security, Google</small></p>
<p class="mb-0">
Heather Adkins is a 16-year Google veteran and founding member of the Google Security Team. As Sr Director
of Information Security, she has built a global team responsible for maintaining the safety and security
of Google’s networks, systems and applications.
</p>
</div>
</div>
<div class="speakers col p-2 d-none d-md-flex row flex-nowrap">
<div class="portrait col-4 col-lg-3 p-0 position-relative me-1 me-xl-0">
<img src="assets/chess_board.svg" alt="chess board">
<div class="photo featured-ana"></div>
</div>
<div class="about col-8 col-lg-9 ps-1 ps-lg-0">
<h3 class="mb-0 intro fw-bold">Ana Oprea</h3>
<p class="role fst-italic color-red my-1"><small>Security, SRE, TPM, Google</small></p>
<p class="mb-0">
Ana Oprea specializes in site reliability engineering, security, and planning and strategy for Google’s
technical infrastructure—a role that follows naturally from her previous experience as a software developer,
technical consultant, and network admin.
</p>
</div>
</div>
<div class="speakers col p-2 d-none d-md-flex row flex-nowrap">
<div class="portrait col-4 col-lg-3 p-0 position-relative me-1 me-xl-0">
<img src="assets/chess_board.svg" alt="chess board">
<div class="photo featured-stephen"></div>
</div>
<div class="about col-8 col-lg-9 ps-1 ps-lg-0">
<h3 class="mb-0 intro fw-bold">Stephen Thorne</h3>
<p class="role fst-italic color-red my-1"><small>Senior Site Reliability Engineer at Google</small></p>
<p class="mb-0">
Stephen currently works in Customer Reliability Engineering, helping to integrate Google's Cloud customers'
operations with Google SRE.
</p>
</div>
</div>
<div class="speakers col p-2 d-none d-md-flex row flex-nowrap">
<div class="portrait col-4 col-lg-3 p-0 position-relative me-1 me-xl-0">
<img src="assets/chess_board.svg" alt="chess board">
<div class="photo featured-betsy"></div>
</div>
<div class="about col-8 col-lg-9 ps-1 ps-lg-0">
<h3 class="mb-0 intro fw-bold">Betsy Beyer</h3>
<p class="role fst-italic color-red my-1"><small>Technical Writer for Google Site Reliability Engineering in NYC</small></p>
<p class="mb-0">
Betsy Beyer is the editor of Site Reliability Engineering: How Google Runs Production Systems
and The Site Reliability Workbook.
</p>
</div>
</div>
<div class="speakers col p-2 row flex-nowrap">
<div class="portrait col-4 col-lg-3 p-0 position-relative me-1 me-xl-0">
<img src="assets/chess_board.svg" alt="chess board">
<div class="photo featured-jennifer"></div>
</div>
<div class="about col-8 col-lg-9 ps-1 ps-lg-0">
<h3 class="mb-0 intro fw-bold">Jennifer Petoff</h3>
<p class="role fst-italic color-red my-1"><small>Senior Program Manager for Google's Site Reliability Engineering team</small></p>
<p class="mb-0">
She currently leads the global SRE Education program and is one of the co-editors of the bestselling book:
Site Reliability Engineering: How Google Runs Production Systems.
</p>
</div>
</div>
<div class="speakers col p-2 d-none d-md-flex row flex-nowrap">
<div class="portrait col-4 col-lg-3 p-0 position-relative me-1 me-xl-0">
<img src="assets/chess_board.svg" alt="chess board">
<div class="photo featured-mac"></div>
</div>
<div class="about col-8 col-lg-9 ps-1 ps-lg-0">
<h3 class="mb-0 intro fw-bold">Mac Slocum</h3>
<p class="role fst-italic color-red my-1"><small>Director of Online Content at O'Reilly</small></p>
<p class="mb-0">
Mac specializes in content marketing, thought leadership, web strategy, and website management.
</p>
</div>
</div>
</div>
<div class="d-md-none border py-2">
<a href="#" class="more fw-bold text-dark text-decoration-none">MORE</a>
</div>
</div>
</section>
<!-- Partners Section -->
<section style="min-height: 25vh;" class="my-3 py-4 px-1 px-md-4 text-center bg-grey" id="partners">
<div class="container-md">
<h2 class="section-header intro text-white">Partners</h2>
<div style="min-height: 15vh;" class="d-flex wrap flex-wrap justify-content-center align-items-center">
<div class="partner">
<img src="assets/Google-logo.wine.svg" alt="google logo">
</div>
<div class="partner">
<img src="assets/accenture-logo.svg" alt="accenture logo">
</div>
<div class="partner">
<img src="assets/Amazon-logo.wine.svg" alt="Amazon logo">
</div>
<div class="partner">
<img src="assets/dropbox-logo.svg" alt="dropbox logo">
</div>
<div class="partner">
<img src="assets/netflix-logo.svg" alt="netflix logo">
</div>
</div>
</div>
</section>
</main>
<footer class="my-3 py-2 px-3 text-white font-lato">
<div class="d-flex align-items-center justify-content-center py-3">
<div class="mx-3 mx-md-5">
<a href="#" class="brand">
<img src="assets/sre-logo.png" alt="workshop logo" class="workshop-logo border border-2">
</a>
</div>
<div class="color-navy font-small">
<p class="m-0 d-md-none">2021 Html Capstone Project<br>Some rights reserved</p>
<p class="m-0 d-none d-md-block">2021 Html Capstone Project • Some rights reserved</p>
<p class="m-0 d-none d-md-block">
<small>Acknowledgements: To GUI and Graphics designer Cindy Shin for design layout.</small>
</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>