-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (142 loc) · 6.45 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
<!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>California Calling</title>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<!-- Header Line -->
<img src="assets/img/line.svg" alt="line">
<section>
<p>Elephant presents</p>
<h1 class="lineheightHeadlines">CALIFORNIA</h1>
<h1 class="lineheightHeadlines hollowFont">CALLING</h1>
<p>Dedicated to the communities affected by the 2018 wildfires.</p>
</section>
<!-- Header Navigation -->
<nav>
<img src="assets/img/bear.svg" alt="bear logo">
<button class="RSVPButton">RSVP</button>
</nav>
</header>
<main>
<!-- Intro -->
<section class="introSectionBlack">
<article class="introText">
<h2>Last year, nearly 2 million acres were devastated by the deadliest, most destructive wildfires in
California history.</h2>
</article>
<section class="introOverview">
<article>
<h3>Wildfires</h3>
<h2>8,527</h2>
<h3>Insurance Claim Damages</h3>
<h2>$12B</h2>
<h3>Acres Burned</h3>
<h2>1,893,913</h2>
</article>
<img src="assets/img/map.svg" alt="map of california">
</section>
</section>
<!-- Main Image Section -->
<section class="imageSection">
<img class="imgSectionImg1" src="assets/img/action1.jpeg" alt="man working">
<img <img class="imgSectionImg2" src="assets/img/action2.jpeg" alt="working hands">
<article class="imgSectionText1">
<h2 class="lineheightHeadlines">Stuck in the middle.</h2>
<p class="lineheightText">Surrounded by smoke and inspired by the communities’ resilience, our design
team reimagined the
California Grizzly and used it to create custom tees, pins and posters.</p>
</article>
<img class="imgSectionImg3" src="assets/img/action3.jpeg" alt="tshirt print">
<img class="imgSectionImg4" src="assets/img/action4.jpeg" alt="bear print tshirts">
<img class="imgSectionImg5" src="assets/img/action5.jpeg" alt="printing machine">
<img class="imgSectionImg6" src="assets/img/action6.jpeg" alt="printing tools">
<p class="lineheightText imgSectionText2">Our t-shirts (kids and adult sizes), pins, and posters will be
available for
purchase at our exclusive
pop-up shop during our SF Design Week Studio Crawl this Friday, June 21. You can choose what amount to
donate. All proceeds will go to the American Red Cross to help the communities that are still displaced.
</p>
<img class="imgSectionImg7" src="assets/img/action7.jpeg" alt="men working">
</section>
<!-- Golden Bear Section -->
<section class="theGoldenBearSection">
<article class="backgroundBlackGoldenBear">
<article>
<div>
<h3>001</h3>
<h2 class="lineheightHeadlines">The Golden Bear</h2>
</div>
<div>
<p class="smallFontLarishNeue">This design is all about the resilience of California to overcome
difficult situations and
come out stronger than before. It’s a flip of the UNC Tarheel mascot with added elements
like the California poppy.</p>
<p>— Kevin Lam, Artist</p>
</div>
</article>
</article>
</section>
<section class="goldenBearImageSection">
<img src="assets/img/goldenbear.png" alt="bear with flower">
<img src="assets/img/gb2.png" alt="bear images">
</section>
<!-- Poppy Bear Section -->
<section class="poppyBearSection">
<img src="assets/img/cc-circle-2.png" alt="text in circle">
<article>
<div>
<h3>002</h3>
<h2 class="lineheightHeadlines">The Poppy Bear</h2>
</div>
<div>
<p class="smallFontLarishNeue">This design is inspired by the quote ‘grow through what you go
through’ and represents the
strength of Californians and how we will continue to thrive, regardless of what knocks us down.
</p>
<p>— Alyssa Wigant, Artist</p>
</div>
</article>
</section>
<section class="poppyBearImageSection">
<img src="assets/img/pb3.png" alt="woman holding print">
<img src="assets/img/rosebear.png" alt="bear print">
</section>
</main>
<footer>
<!-- Footer Banner -->
<div class="footerBanner">
<p class="footerBannerAnimation">JUNE 21, <span>2019</span> JUNE 21, <span>2019</span> JUNE 21,</p>
</div>
<!-- Footer Text Block -->
<article class="footerTextBlock">
<h3>Join us</h3>
<p class="smallFontLarishNeue">Mark your calendar for our SF Design Week Studio Crawl. In addition to custom
swag, we’ll also have a DJ,
a mixologist, and other cool surprises we can’t tell you about yet.</p>
<button class="RSVPButton">RSVP</button>
</article>
<!-- Footer Navigation -->
<nav>
<article class="socialMediaLogo">
<div>
<img src="assets/img/fb.png" alt="facebook logo">
<img src="assets/img/ig.png" alt="instagram logo">
<img src="assets/img/li.png" alt="linkedin logo">
</div>
<p>A SF Design Week project.</p>
<p>2019</p>
</article>
<article class="ngoLogo">
<img src="assets/img/sfdw-logo.png" alt="sfdw logo">
<img src="assets/img/ngo-logo.png" alt="ngo logo">
</article>
</nav>
</footer>
</body>
</html>