-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (132 loc) · 5.37 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
<!DOCTYPE html>
<html lang="de">
<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/style.css">
</head>
<body>
<header>
<section>
<div class="line"></div>
<p>Elephant presents</p>
<h1>CALIFORNIA <span>CALLING</span></h1>
<p>Dedicated to the communities affected by the 2018 wildfires.</p>
</section>
<section>
<img src="./assets/img/bear.svg" alt="bear">
<a href="">RSVP</a>
</section>
</header>
<Section class="last-year">
<article>
<p>Last year, nearly 2 million acres were devastated by the deadliest, most destructive wildfires in California history.</p>
</article>
<article>
<div class="california-text">
<p>Wildfires</p>
<h2>8,527</h2>
</div>
<div class="california-text">
<p>Insurance Claim Damages</p>
<h2>$12B</h2>
</div>
<div class="california-text">
<p>Acres Burned</p>
<h2>1,893,913</h2>
</div>
</article>
<article>
<img src="./assets/img/map.svg" alt="map">
</article>
</Section>
<section class="stuck">
<article>
<img src="./assets/img/action1.jpeg" alt="action1">
</article>
<article>
<img class="action2" src="./assets/img/action2.jpeg" alt="action2">
<div class="text-middle">
<h1>Stuck in the middle.</h1>
<p>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>
</div>
<img class="action3" src="./assets/img/action3.jpeg" alt="action3">
</article>
<article>
<img src="./assets/img/action4.jpeg" alt="action4">
<img src="./assets/img/action5.jpeg" alt="action5">
</article>
<article>
<img src="./assets/img/action6.jpeg" alt="action6">
<div>
<p>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>
</div>
</article>
<article>
<img src="./assets/img/action7.jpeg" alt="action7">
</article>
</section>
<section class="golden-bear">
<article>
<div>
<h5>001</h5>
<h1>The Golden Bear</h1>
</div>
<div>
<p>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>
<h5>– Kevin Lam, Artist</h5>
</div>
</article>
<article>
<img class="bear1" src="./assets/img/goldenbear.png" alt="goldenbear">
<img class="bear2" src="./assets/img/gb2.png" alt="goldenbear2">
</article>
</section>
<section class="poppy-bear">
<article>
<img src="./assets/img/cc-circle-2.png" alt="circle">
</article>
<article>
<div>
<h5>002</h5>
<h1>The Poppy Bear</h1>
</div>
<div>
<p>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>
<h5>– Alyssa Wigant, Artist</h5>
</div>
</article>
<article>
<img class="rose-bear1" src="./assets/img/pb3.png" alt="rose-bear">
<img class="rose-bear2" src="./assets/img/rosebear.png" alt="rose-bear">
</article>
</section>
<footer>
<div class="stripe">
<h1><span> 2019 </span> JUNE 21,<span> 2019 </span> JUNE 21,<span> 2019 </span> JUNE 21,<span> 2019 </span> JUNE 21,<span> 2019 </span> JUNE 21,<span> 2019 </span> JUNE 21,<span> 2019 </span> JUNE 21,<span> 2019 </span> JUNE 21,</h1>
</div>
<section>
<article>
<h5>Join us</h5>
<p>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>
<a href="#">RSVP</a>
</article>
<article>
<div>
<img src="./assets/img/fb.png" alt="fb">
<img src="./assets/img/ig.png" alt="ig">
<img src="./assets/img/li.png" alt="li">
<h5>A SF Design Week project</h5>
<h5>2019</h5>
</div>
<div>
<img src="./assets/img/sfdw-logo.png" alt="logo">
<img src="./assets/img/ngo-logo.png" alt="logo">
</div>
</article>
</section>
</footer>
</body>
</html>