forked from emmabostian/fem-css-foundations
-
Notifications
You must be signed in to change notification settings - Fork 0
/
speakers.html
136 lines (131 loc) · 7.26 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
127
128
129
130
131
132
133
134
135
136
<!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>CSS Day Speakers</title>
<link href="./styles/speakers.css" rel="stylesheet" />
</head>
<body class="body body--secondary speakers">
<header class="header">
<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>
<li class="nav__list-item"><a href="speakers.html">Speakers</a></li>
<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>
<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-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>
<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-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>
<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-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>
</body>
</html>