-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (77 loc) · 4.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./stylesheets/styles.css">
<title>SASS example | Landing Page</title>
</head>
<body>
<div class="grid-container">
<nav>
<h3 class="brand">Pinned</h3>
<ul class="nav-lists" id="menu">
<li class="nav-items"><a class="link" href="#">Why Pinned</a></li>
<li class="nav-items"><a class="link" href="#">Create Content</a></li>
<li class="nav-items"><a class="link" href="#">Advertise</a></li>
<li class="nav-items"><a class="link" href="#">Insights</a></li>
<li class="nav-items"><a class="link" href="#">Resource</a></li>
</ul>
<div class="account">
<h4 class="log-in">Log In</h4>
<h4 class="sign-up">Sign Up</h4>
</div>
</nav>
<div class="mobile-menu">
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul>
<li class="nav-items"><a class="link" href="#">Why Pinned</a></li>
<li class="nav-items"><a class="link" href="#">Create Content</a></li>
<li class="nav-items"><a class="link" href="#">Advertise</a></li>
<li class="nav-items"><a class="link" href="#">Insights</a></li>
<li class="nav-items"><a class="link" href="#">Resource</a></li>
</ul>
</div>
<div class="hero">
<div class="hero-content">
<h1 class="hero-title">Pinned Predicts</h1>
<p class="hero-sub-title">Before you see it everywhere, see it here.</p>
<p>People use Pinned to find tomorrow’s ideas. That means we know what’s next. In fact, 8 out of 10 of our predictions for 2020 came true.* Pinned Predicts isn’t your typical trend report. It’s a not-yet-trending report. A window into the future from the platform where people go to plan it.</p>
<p class="cta"><a href="#">Read the foreward</a></p>
</div>
</div>
<div class="video">
<video width="840" height="512" autoplay loop muted>
<source src="./assets/video.mp4" type="video/mp4">
</video>
<div class="video-text">
<p class="video-sub-title">Filter 2021 trends by</p>
<p class="video-title">Audience Category</p>
</div>
</div>
<div class="showcase">
<div class="showcase-item item1"> <p class="title">Fashion</p><h1 class="showcase-h1">Athflow</h1><h1 class="hover-h1">Athflow is the new athleisure</h1></div>
<div class="showcase-item item2"> <p class="title">Beauty</p><h1 class="showcase-h1">Skinimalism</h1><h1 class="hover-h1">Skinimalism is the new glow up</h1></div>
<div class="showcase-item item3"> <p class="title">Travel</p><h1 class="showcase-h1">Getaway car</h1><h1 class="hover-h1">Parking space is the new personal space</h1></div>
<div class="showcase-item item4"> <p class="title">Food and Beverage</p> <h1 class="showcase-h1">Bland is banned</h1><h1 class="hover-h1">Snappy-spice is the new umamy</h1></div>
<div class="showcase-item item5"> <p class="title">Home</p> <h1 class="showcase-h1">Vibey lights</h1><h1 class="hover-h1">Neon hue is the new you</h1></div>
<div class="showcase-item item6"> <p class="title">Wellbeing</p> <h1 class="showcase-h1">Modern mystic</h1><h1 class="hover-h1">Manifesting is the new nesting</h1></div>
<div class="showcase-item item7"> <p class="title">Parenting</p> <h1 class="showcase-h1">Not-so-furry friends</h1><h1 class="hover-h1">Frogs are the new fido</h1></div>
<div class="showcase-item item8"> <p class="title">Hobbies</p> <h1 class="showcase-h1">Embracing the tactile</h1><h1 class="hover-h1">Embroidery is the new tie-die</h1></div>
<div class="showcase-item item9"> <p class="title">Finance</p> <h1 class="showcase-h1">Bet on yourself</h1><h1 class="hover-h1">CEO is the new DIY</h1></div>
<div class="showcase-item item10"> <p class="title">Celebrations</p><h1>Weddings, unplugged</h1><h1 class="hover-h1">Low-key wedding is the new high-key occasions</h1></div>
</div>
<div class="download">
<h4 class="cta-dl">Download PDF</h4>
</div>
<footer>
<p>*Source: Pinned Internal Search Data, Global, analysis period Aug 2019 to July 2020.</p>
</footer>
</div>
<script src="app.js" defer></script>
</body>
</html>