forked from emmabostian/fem-css-foundations
-
Notifications
You must be signed in to change notification settings - Fork 0
/
speakers.html
126 lines (118 loc) · 9.12 KB
/
speakers.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
<!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="stylesheet" href="./styles/speakers.css">
<title>CSS Day Speakers</title>
</head>
<body class="body body--secondary speakers">
<header class="header">
<svg class="menu" width="33" height="36" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 4.5C0 3.67031 0.670312 3 1.5 3H19.5C20.3297 3 21 3.67031 21 4.5C21 5.32969 20.3297 6 19.5 6H1.5C0.670312 6 0 5.32969 0 4.5ZM0 12C0 11.1703 0.670312 10.5 1.5 10.5H19.5C20.3297 10.5 21 11.1703 21 12C21 12.8297 20.3297 13.5 19.5 13.5H1.5C0.670312 13.5 0 12.8297 0 12ZM21 19.5C21 20.3297 20.3297 21 19.5 21H1.5C0.670312 21 0 20.3297 0 19.5C0 18.6703 0.670312 18 1.5 18H19.5C20.3297 18 21 18.6703 21 19.5Z"
fill="#FF7B54" />
</svg>
<svg class="close" width="30" height="34" viewBox="0 0 19 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2_236)">
<path
d="M18.2424 3.79587C18.7897 3.18493 18.7025 2.27751 18.0438 1.76989C17.385 1.26227 16.4065 1.34313 15.8591 1.95407L9.30048 9.25387L2.74181 1.95407C2.19445 1.34313 1.21598 1.26227 0.557204 1.76989C-0.101569 2.27751 -0.188759 3.18493 0.358604 3.79587L7.28056 11.5L0.358604 19.2041C-0.188759 19.815 -0.101569 20.7224 0.557204 21.23C1.21598 21.7377 2.19445 21.6568 2.74181 21.0459L9.30048 13.7461L15.8591 21.0459C16.4065 21.6568 17.385 21.7377 18.0438 21.23C18.7025 20.7224 18.7897 19.815 18.2424 19.2041L11.3204 11.5L18.2424 3.79587Z"
fill="#FF7B54" />
</g>
<defs>
<clipPath id="clip0_2_236">
<rect width="18.6006" height="23" fill="white" />
</clipPath>
</defs>
</svg>
<a class="header_link" href="/">CSS Day</a>
<nav class="nav">
<ul class="nav_list">
<li class="nav_list_item"><a href="#">About</a></li class="nav_list_item">
<li class="nav_list_item"><a href="speakers.html">Speakers</a></li class="nav_list_item">
<li class="nav_list_item"><a href="#">Contact</a></li>
</ul>
</nav>
<svg class="shopping-cart-icon--primary" width="34" height="30" viewBox="0 0 34 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_286)">
<path
d="M0 1.40625C0 0.626953 0.631597 0 1.41667 0H4.10243C5.40104 0 6.55208 0.75 7.08924 1.875H31.3497C32.9021 1.875 34.0354 3.33984 33.6281 4.82813L31.208 13.752C30.7062 15.5918 29.024 16.875 27.1056 16.875H10.076L10.3948 18.5449C10.5247 19.207 11.109 19.6875 11.7878 19.6875H28.8056C29.5906 19.6875 30.2222 20.3145 30.2222 21.0938C30.2222 21.873 29.5906 22.5 28.8056 22.5H11.7878C9.74549 22.5 7.99236 21.0586 7.61458 19.0723L4.56875 3.19336C4.52743 2.9707 4.33264 2.8125 4.10243 2.8125H1.41667C0.631597 2.8125 0 2.18555 0 1.40625ZM7.55556 27.1875C7.55556 26.8182 7.62884 26.4524 7.77123 26.1112C7.91362 25.77 8.12232 25.4599 8.38542 25.1988C8.64852 24.9376 8.96086 24.7304 9.30462 24.5891C9.64837 24.4477 10.0168 24.375 10.3889 24.375C10.761 24.375 11.1294 24.4477 11.4732 24.5891C11.8169 24.7304 12.1293 24.9376 12.3924 25.1988C12.6555 25.4599 12.8642 25.77 13.0065 26.1112C13.1489 26.4524 13.2222 26.8182 13.2222 27.1875C13.2222 27.5568 13.1489 27.9226 13.0065 28.2638C12.8642 28.605 12.6555 28.9151 12.3924 29.1762C12.1293 29.4374 11.8169 29.6446 11.4732 29.7859C11.1294 29.9273 10.761 30 10.3889 30C10.0168 30 9.64837 29.9273 9.30462 29.7859C8.96086 29.6446 8.64852 29.4374 8.38542 29.1762C8.12232 28.9151 7.91362 28.605 7.77123 28.2638C7.62884 27.9226 7.55556 27.5568 7.55556 27.1875ZM27.3889 24.375C28.1403 24.375 28.861 24.6713 29.3924 25.1988C29.9237 25.7262 30.2222 26.4416 30.2222 27.1875C30.2222 27.9334 29.9237 28.6488 29.3924 29.1762C28.861 29.7037 28.1403 30 27.3889 30C26.6374 30 25.9168 29.7037 25.3854 29.1762C24.8541 28.6488 24.5556 27.9334 24.5556 27.1875C24.5556 26.4416 24.8541 25.7262 25.3854 25.1988C25.9168 24.6713 26.6374 24.375 27.3889 24.375Z"
fill="white" />
</g>
<defs>
<clipPath id="clip0_5_286">
<rect width="34" height="30" fill="white" />
</clipPath>
</defs>
</svg>
</header>
<main class="main">
<h1 class="main_title">Speakers.</h1>
<div class="speakers_wrapper">
<div class="speaker_wrapper">
<img class="speaker_photo"
src="https://images.unsplash.com/photo-1611432579699-484f7990b127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
alt="Young woman in a white shirt smiling">
<h2 class="speaker_name">Lila Lucero</h2 class="speaker_name">
<p class="speaker_company">Company</p>
<p class="speaker_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Amet aliquam id diam maecenas ultricies mi eget mauris.</p>
</div class="speaker_wrapper">
<div class="speaker_wrapper">
<img class="speaker_photo"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80"
alt="Young man in a black shirt smiling">
<h2 class="speaker_name">Julius Yates</h2 class="speaker_name">
<p class="speaker_company">Company</p>
<p class="speaker_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Amet aliquam id diam maecenas ultricies mi eget mauris.</p>
</div class="speaker_wrapper">
<div class="speaker_wrapper">
<img class="speaker_photo speaker_photo--top"
src="https://images.unsplash.com/photo-1627161683077-e34782c24d81?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=806&q=80"
alt="Young woman in a white shirt and purple sweater smiling">
<h2 class="speaker_name">April Dean</h2 class="speaker_name">
<p class="speaker_company">Company</p>
<p class="speaker_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Amet aliquam id diam maecenas ultricies mi eget mauris.</p>
</div class="speaker_wrapper">
<div class="speaker_wrapper">
<img class="speaker_photo"
src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="Woman in a black shirt and stiped blazer smiling">
<h2 class="speaker_name">Carys Sharpe</h2>
<p class="speaker_company">Company</p>
<p class="speaker_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Amet aliquam id diam maecenas ultricies mi eget mauris.</p>
</div>
<div class="speaker_wrapper">
<img class="speaker_photo"
src="https://images.unsplash.com/photo-1540569014015-19a7be504e3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80"
alt="Young man in a blue shirt with glasses">
<h2 class="speaker_name">Jayden Nguyen</h2>
<p class="speaker_company">Company</p>
<p class="speaker_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Amet aliquam id diam maecenas ultricies mi eget mauris.</p>
</div>
<div class="speaker_wrapper">
<img class="speaker_photo speaker_photo--top"
src="https://images.unsplash.com/photo-1629425733761-caae3b5f2e50?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="Man in a white shirt and blue sweater smiling">
<h2 class="speaker_name">Abdullah Steele</h2>
<p class="speaker_company">Company</p>
<p class="speaker_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Amet aliquam id diam maecenas ultricies mi eget mauris.</p>
</div>
</div>
</main>
<script src="./index.js"></script>
</body>
</html>