-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (155 loc) · 8.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>SmashingConf SF 2020</title>
<script src="https://kit.fontawesome.com/feec7411d6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/styles/reset.css">
<link rel="stylesheet" href="assets/styles/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:900&display=swap" rel="stylesheet">
<meta name="description" content="An implementation of a new design for https://smashingconf.com/sf-2020/">
<meta property="og:title" content="SmashingConf SF 2020">
<meta property="og:description" content="An implementation of a new design for https://smashingconf.com/sf-2020/">
<meta property="og:image" content="smashing_conf.png">
<meta property="og:image:alt" content="A screenshot of the page on multiple screens">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta property="og:url" content="https://cliftondavies.github.io/SmashingConf/">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!--Page Wrapper-->
<div class="page-wrapper">
<!--Header-->
<header class="header">
<h1 class="hidden">Smashing Magazine Conference Index Page</h1>
<ul class="container">
<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="#">Contact</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Terms</a></li>
</ul>
<nav>
<h2 class="hidden">Site Navigation</h2>
<div class="container">
<a href="index.html"></a>
<ul class="main-menu">
<li><a href="about.html">About</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#speakers">Speakers</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="#">Locations</a></li>
<li><a href="tickets.html">Buy Tickets</a></li>
</ul>
</div>
</nav>
</header>
<!--Main Page Wrapper-->
<main class="main">
<h2 class="hidden">Tickets Page Wrapper</h2>
<button type="button"><i class="fas fa-bars"></i></button>
<!--Intro-->
<section class="intro">
<div class="container">
<span>"Welcome! Desz and Devz"</span>
<h3>SMASHING MAGAZINE <br> SF CONFERENCE <br> 2020</h3>
<p>Let's rock'n'roll! For SmashingConf SF 2020, <br> we're bringing back two full days packed with front-end, UX and all that jazz!</p>
<p><span>2020.04.21(TUE) ~ 22(WED)</span> <br> @ Fort Mason Center, San Francisco, U.S.A</p>
</div>
</section>
<!--Schedule-->
<section id="schedule" class="schedule">
<div class="container">
<h3 class="index-h-three">Main Schedule</h3>
<ul>
<li><i class="fas fa-business-time"></i><span>Expo</span><span>Diverse and environment. Inclusive and fully accessible space.</span></li>
<li><i class="fas fa-users"></i><span>Talks</span><span>Lightning talks by attendees. Smashing time with people who care about their craft.</span></li>
<li><i class="fas fa-chalkboard-teacher"></i><span>Keynote</span><span>Practical, actionable insights. Focus on real work & pain points.</span></li>
<li><i class="fas fa-users-cog"></i><span>Workshop</span><span>Hands-on workshops. Live designing and coding sessions. Collaborative note-taking.</span></li>
<li><i class="far fa-handshake"></i><span>Networking</span><span>Meet and Greet. Job & hiring opportunities. Approachable speakers.</span></li>
</ul>
<a href="#">GET THE FULL AGENDA</a>
<a href="tickets.html">SmashingConf SF 2020</a>
</div>
</section>
<!--Speakers-->
<section id="speakers" class="speakers container">
<h3 class="index-h-three">Speakers</h3>
<div>
<article>
<img src="https://d33wubrfki0l68.cloudfront.net/ed619878a72d086fef28c393fcbef985d9f0225b/9a9ff/images/speakers/chris-coyier.jpg" alt="Chris Coyier">
<div>
<h4>Chris Coyier <br> <span>Chris is a web designer and developer</span></h4>
<p>A Front-end ninja. He created and runs CSS-Tricks, a website all about building websites, now going strong for 10 years.</p>
</div>
</article>
<article>
<img src="https://d33wubrfki0l68.cloudfront.net/eb8f2292998adc841060f9139bcc05f14cae15ba/2afd6/images/speakers/whitney-homans.jpg" alt="whitney homans">
<div>
<h4>Whitney Homans <br> <span>Whitney is a Senior Design Manager at Mailchimp</span></h4>
<p>She started the UX Content Strategy discipline at Mailchimp in 2017 and has grown it into a team of 7 that works cross-functionally among Mailchimp's product areas.</p>
</div>
</article>
<article>
<img src="https://d33wubrfki0l68.cloudfront.net/1267e40e21e92b8950fc41ef9c173d37b5e72c16/77ec1/images/speakers/phil-hawksworth.jpg" alt="phil hawksworth">
<div>
<h4>Phil Hawksworth <br> <span>Phil is Principal Developer Experience Engineer at Netlify.</span></h4>
<p>With a passion for browser technologies, and the empowering properties of the web, he loves seeking out ingenuity and simplicity, especially in places where over-engineering is common.</p>
</div>
</article>
<article>
<img src="https://d33wubrfki0l68.cloudfront.net/3c8cc2c2d722d693cb3df63f67053fe8390fc7f8/f9b1f/images/speakers/eva-ferreira.jpg" alt="evaferraira">
<div>
<h4>Eva Ferraira <br> <span>Evangelina Ferreira is a Front-end developer and teacher.</span></h4>
<p>She currently works as a UI Developer and has been teaching web technologies at the National Technological University of Argentina for more than five years.</p>
</div>
</article>
<article>
<img src="https://d33wubrfki0l68.cloudfront.net/346eb539774acb2594af41b257203d1a292e5e16/2d5d4/images/speakers/aarron-walter.jpg" alt="aaron walter">
<div>
<h4>Aaron Walter <br> <span>VP of Design Education at InVision</span></h4>
<p>Aarron Walter draws upon 15 years of experience running product teams and teaching design to help companies enact design best practices.</p>
</div>
</article>
<article>
<img src="https://d33wubrfki0l68.cloudfront.net/9d5e8ffda6f4086cb4825d019a78389447a479d1/fa9dc/images/speakers/cassidy-williams.jpg" alt="cassidy williams">
<div>
<h4>Cassidy Williams <br> <span>Cassidy is an instructor and developer with React Training</span></h4>
<p>She's worked for CodePen, Amazon, L4 Digital, Clarifai, and Venmo, and she's had the honor of working with various organizations, including cKeys and Hacker Fund as their Director of Outreach. </p>
</div>
</article>
</div>
<button type="button">MORE <i class="fas fa-chevron-down"></i></button>
</section>
<!--Partners-->
<section id="partners" class="partners">
<div class="container">
<h3 class="index-h-three">Partners</h3>
<ul>
<li><a href="#"><img src="assets/images/edge.svg" alt="edge"></a></li>
<li><a href="#"><img src="assets/images/coil.svg" alt="coil"></a></li>
<li><a href="#"><img src="assets/images/hp.svg" alt="hp"></a></li>
<li><a href="#"><img src="assets/images/moz.svg" alt="moz"></a></li>
</ul>
</div>
</section>
</main>
<!--Footer-->
<footer class="footer index-footer">
<h2 class="hidden">Index Page Footer</h2>
<div class="container">
<a href="#"></a>
<div>
<span>2020 Smashing Magazine. Some Rights Reserved.</span>
<p>With a commitment to quality content for the design community. <a href="#">Smashing Media AG</a> 2011-2019. <br> Hosted on <a href="#">Netlify</a>.</p>
</div>
</div>
</footer>
</div>
</body>
</html>