-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (114 loc) · 5.32 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
<!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/style.css">
</head>
<body>
<header>
<img src="./assets/pics/useless-grey-line.png" alt="grey line">
<article>
<h2>Elephant presents</h2>
<h1>CALIFORNIA</h1>
<h1>CALLING</h1>
<h2>Dedicated to the communities affected by the 2018 wildfires</h2>
</article>
<div>
<img src="./assets/pics/bear.svg" alt="bear logo">
<a href="#">RSVP</a>
</div>
</header>
<main>
<section class="intro">
<h3>Last year, nearly 2 million acres were devastated by the deadliest, most destructive wildfires in California history.</h3>
<h2>Wildfires</h2>
<h4>8,527</h4>
<h2>Insurance Claim Damages</h2>
<h4>$12B</h4>
<h2>Acres Burned</h2>
<h4>1,893,913</h4>
</section>
<section class="introcrossing">
<img src="./assets/pics/action1.jpeg" alt="working dude">
</section>
<section class="stuckinthemiddle">
<img src="./assets/pics/action2.jpeg" alt="working dude">
</section>
<section class="stuckinthemiddle2">
<div>
<h3>Stuck in the middle.</h3>
<h2>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.</h2>
</div>
</section>
<section class="stuckinthemiddle3">
<img src="./assets/pics/action4.jpeg" alt="bear logo on shirt">
<img src="./assets/pics/action5.jpeg" alt="printing machine">
</section>
<section class="stuckinthemiddle4">
<h2>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.</h2>
</section>
<section class="sitmcrossing">
<img src="./assets/pics/action7.jpeg" alt="working dude">
</section>
<section class="goldenbear">
<div>
<h2>001</h2>
<h3>The Golden Bear</h3>
</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>
<h2>- Kevin Lam, Artist</h2>
</div>
</section>
<section class="bearart">
<img src="./assets/pics/goldenbear.png" alt="bear with flower">
<img src="./assets/pics/gb2.png" alt="bear pin">
</section>
<section class="spinninglogo">
<img src="./assets/pics/cc-circle-2.png" alt="spinning logo" class="rotate-center">
</section>
<section class="poppybear">
<div>
<h2>002</h2>
<h3>The Poppy Bear</h3>
</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>
<h2>- Alyssa Wigant, Artist</h2>
</div>
</section>
<section class="bearart2">
<img src="./assets/pics/rosebear.png" alt="rose bear logo">
<img src="./assets/pics/pb3.png" alt="bear poster print">
</section>
</main>
<footer>
<div class="join">
<h2>Join us</h2>
<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>
</div>
<div class="socialm">
<a href="#"><img src="./assets/pics/fb.png" alt="facebook logo" class="fblogo"></a>
<a href="#"><img src="./assets/pics/ig.png" alt="instagram logo"></a>
<a href="#"><img src="./assets/pics/li.png" alt="in logo"></a>
</div>
<div class="copyright">
<div>
<h2>A SF Design Week project</h2>
<h2>2019</h2>
</div>
<div class="DW-RC">
<img src="./assets/pics/design-week.png" alt="design week logo">
<img src="./assets/pics/ngo-logo.png" alt="red cross logo">
</div>
</div>
<div class="slider">
<marquee class="sampleMarquee" direction="left" scrollamount="13" behavior="scroll">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, <span>2019</span> JUNE 21, <span>2019</span> JUNE 21, <span>2019</span> JUNE 21, <span>2019</span> </marquee>
</div>
</footer>
</body>
</html>