-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (143 loc) · 5.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="headers">
<header class="primary-header">
<nav class="primary-nav">
<ul>
<!--Mobile Order: Actual Order. Desktop Order: Class Names. Bless you Flexbox-->
<li class="order-1"><a href="insidex.html" class="home active">Home</a></li>
<li class="order-2"><a href="#" class="case-study">Case Study Conference</a></li>
<li class="order-3"><a href="product-bootcamp.html" class="bootcamp">Product Bootcamp</a></li>
<li class="order-4"><a href="custom-training.html" class="custom-training">Custom Onsite Training</a></li>
<li class="order-5"><a href="#" class="magazine">Magazine</a></li>
</ul>
</nav>
<nav class="social-nav">
<ul>
<li><a class="twitter" href="https://twitter.com/front">Twitter</a></li>
<li><a class="linkedin" href="https://www.linkedin.com/company-beta/4873375/?pathWildcard=4873375">LinkedIn</a></li>
<li><a class="instagram" href="https://www.instagram.com/frontutah/">Instagram</a></li>
</ul>
</nav>
</header>
</div>
<main class="home">
<section class="hero">
<h1 class="logo">Front</h1>
<p>Inspiration and training for UX designers and product managers</p>
<h2>UX + PM</h2>
</section>
<section class="spotlight">
<ul>
<li>
<h3>Case Study Conference</h3>
<p class="date-location">Salt Lake City, 9-10 May 2017</p>
<div class="thumnail video-thumbnail">
<img src="images/conf-scene001.jpg" alt="">
</div>
<p class="description">A two-day, in-depth series
of from-the-trenches case studies by innovative user experience designers and product managers.</p>
<p><a href="#" class="button">Learn More</a></p>
</li>
<li>
<h3>Product Bootcamp</h3>
<p class="date-location">Park City, 4-5 January 2018</p>
<div class="thumnail video-thumbnail">
<img src="images/conf-scene002.jpg" alt="">
</div>
<p class="description">A two-day, hands-on training bootcamp to learn how to create amazing products and work like the teams.</p>
<p><a href="#" class="button">Learn More</a></p>
</li>
<li>
<h3>Custom Onsite Training</h3>
<p class="date-location">Name your date</p>
<div class="thumnail">
<img src="images/conf-scene003.jpg" alt="">
</div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<p><a href="#" class="button">Learn More</a></p>
</li>
</ul>
</section>
<section class="about">
<h2>Building amazing product teams</h2>
<p>Front is the product conference for UX designers and product managers. It's a practitioner’s conference. Attendees come for an education, real world, from-the-trenches case studies, and hands-on training from their peers. It's four total days of learning and growth, providing answers to deep organizational questions and insights into how to validate and solve the right problems in the right way.</p>
</section>
<section class="personal-stories">
<h2>Personal stories from innovative teams</h2>
<ul class="story-cards">
<li>
<div class="card-image"><img src="images/front-speaker-sian-townsend.jpg" alt=""></div>
<h3>Sian Townsend</h3>
<p>Jobs to be Done: from Doubter to Believer</p>
</li>
<li>
<div class="card-image"><img src="images/front-speaker-sam-vanessa.jpg" alt=""></div>
<h3>Sam Goertler & Vanessa Koch</h3>
<p>Last things first: A redesign strategy that…</p>
</li>
<li>
<div class="card-image"><img src="images/front-speaker-tracey-varnell.jpg" alt=""></div>
<h3>Tracey Varnell</h3>
<p>Collaborative techniques for product leaders</p>
</li>
<li>
<div class="card-image"><img src="images/front-speaker-bob-baxley.jpg" alt=""></div>
<h3>Bob Baxley</h3>
<p>Designing the machine that designs the designs</p>
</li>
<li>
<div class="card-image"><img src="images/front-speaker-keenan-cummings.jpg" alt=""></div>
<h3>Keenan Cummings</h3>
<p>Product vision and storytelling</p>
</li>
<li>
<div class="card-image"><img src="images/front-speaker-kyle-jacobsen.jpg" alt=""></div>
<h3>Kyle Jacobson</h3>
<p>Where did the Duke Boys go?</p>
</li>
</ul>
<p>
<a href="#" class="button">Watch More</a>
</p>
</section>
<section class="attendee-stats">
<p>In 2017, Front Salt Lake City sold out with
<strong>650 attendees from 4 countries and 29 states</strong> across the US. Join us at the Front to share, learn, and be inspired to create amazing products.</p>
</section>
</main>
<footer>
<nav class="social-nav">
<ul>
<li><a class="twitter" href="https://twitter.com/front">Twitter</a></li>
<li><a class="linkedin" href="https://www.linkedin.com/company-beta/4873375/?pathWildcard=4873375">LinkedIn</a></li>
<li><a class="instagram" href="https://www.instagram.com/frontutah/">Instagram</a></li>
</ul>
</nav>
<nav class="main-footer-nav">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Code of Conduct</a></li>
<li><a href="#">Speaker Guide</a></li>
</ul>
</nav>
<p>Join us at the</p>
<h3 class="logo">Front</h3>
<p>© Front, LLC. All rights reserved.</p>
</footer>
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/ui.js"></script>
<script>
$(function() {
var imageNumber = Math.floor( Math.random() * 7 ) + 1;
$( '.hero' ).addClass( 'image-' + imageNumber );
});
</script>
</body>
</html>