-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (116 loc) · 7.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Workit landing page</title>
</head>
<body>
<header class="hero dark">
<nav class="hero__nav">
<a href=""><img src="images/logo-light.svg" alt="Work it" class="hero__logo" draggable="false"></a>
<a href="#" class="hero__nav-cta">Apply for access</a>
</nav>
<section class="hero__content">
<h1 class="hero__heading">Data <strong>tailored</strong> to your needs.</h1>
<a href="#" class="hero__cta">Learn more</a>
<img src="images/image-hero.webp" alt="" class="hero__illustration" draggable="false">
</section>
<svg class="hero__curve" aria-hidden="true" width="500" height="66" viewBox="0 0 500 80"
preserveAspectRatio="none">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="none" />
</svg>
</header>
<main>
<section class="features light">
<ul class="features__container">
<li class="features__item">
<p class="features__marker">1</p>
<div class="features__text">
<h2 class="features__heading">Actionable insights</h2>
<p class="features__description">
Optimize your products, improve customer satisfaction and stay ahead of the competition
with our product data analytics.
</p>
</div>
</li>
<li class="features__item">
<p class="features__marker">2</p>
<div class="features__text">
<h2 class="features__heading">Data-driven decisions</h2>
<p class="features__description">
Make data-driven decisions with our product data analytics. Our AI-generated reports help
you unlock insights hidden in your product data.
</p>
</div>
</li>
<li class="features__item">
<p class="features__marker">3</p>
<div class="features__text">
<h2 class="features__heading">Always affordable</h2>
<p class="features__description">
Always affordable pricing that scales with your business. Get top-quality product data
analytics services without hidden costs or unexpected fees.
</p>
</div>
<svg class="features__curve" aria-hidden="true" width="500" height="66" viewBox="0 0 500 80"
preserveAspectRatio="none">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="none" />
</svg>
</li>
</ul>
</section>
<section class="cta light">
<div class="cta__container">
<img src="images/image-founder.webp" alt="Louis Graham, the founder" class="cta__image"
draggable="false">
<section class="cta__content dark">
<h2 class="cta__heading">Be the first to test</h2>
<p class="cta__description">
Hi, I'm Louis Graham, the founder of the company. Book a demo call with me to become a
beta tester for our app and kickstart your company. Apply for access below and I’ll be
in touch to schedule a call.
</p>
<a href="#" class="cta__cta">Apply for access</a>
</section>
</div>
</section>
</main>
<footer class="footer light">
<a href="#top"><img src="images/logo-dark.svg" alt="Work it" class="footer__logo" draggable="false"></a>
<ul class="footer__socials">
<li class="footer__socials-link">
<a href="#" class="footer__facebook" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
aria-hidden="true">
<path fill="#584D62"
d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0Z" />
</svg>
</a>
</li>
<li class="footer__socials-link">
<a href="#" class="footer__twitter" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"
aria-hidden="true">
<path fill="#584D62"
d="M20 2.172a8.192 8.192 0 0 1-2.357.646 4.11 4.11 0 0 0 1.805-2.27 8.22 8.22 0 0 1-2.606.996A4.096 4.096 0 0 0 13.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 0 1 1.392 1a4.109 4.109 0 0 0 1.27 5.478 4.086 4.086 0 0 1-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 0 1-1.853.07 4.106 4.106 0 0 0 3.833 2.849A8.25 8.25 0 0 1 0 14.658a11.616 11.616 0 0 0 6.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0 0 20 2.172Z" />
</svg>
</a>
</li>
<li class="footer__socials-link">
<a href="#" class="footer__instagram" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
aria-hidden="true">
<path fill="#584D62"
d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.717-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058ZM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0Zm0 4.865a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27Zm0 8.468a3.333 3.333 0 1 1 0-6.666 3.333 3.333 0 0 1 0 6.666Zm5.338-9.87a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z" />
</svg>
</a>
</li>
</ul>
</footer>
</body>
</html>