-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
218 lines (218 loc) · 15.1 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/favicon-32x32.png"
/>
<link rel="stylesheet" href="./styles.css" />
<link href="./main.min.css" rel="stylesheet" />
<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=Epilogue:wght@400;700&display=swap"
rel="stylesheet"
/>
<title>Frontend Mentor | Suite landing page</title>
</head>
<body>
<header class="container mx-auto px-xl-92">
<nav class="d-flex justify-content-between align-items-center pt-50">
<svg width="79" height="26" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.008 25.384c-1.013 0-1.99-.117-2.928-.352a8.821 8.821 0 0 1-2.52-1.04 5.379 5.379 0 0 1-1.76-1.72c-.432-.688-.648-1.49-.648-2.408V19.576H5.08V19.8c0 .619.275 1.072.824 1.36.55.288 1.293.432 2.232.432.49 0 .963-.05 1.416-.152.453-.101.827-.267 1.12-.496.293-.23.44-.52.44-.872 0-.565-.312-.965-.936-1.2-.624-.235-1.624-.47-3-.704a19.855 19.855 0 0 1-2.368-.544 10 10 0 0 1-2.208-.936A4.827 4.827 0 0 1 .984 15.2C.579 14.597.376 13.864.376 13c0-1.152.35-2.123 1.048-2.912.699-.79 1.63-1.387 2.792-1.792 1.163-.405 2.443-.608 3.84-.608 1.333 0 2.576.221 3.728.664 1.152.443 2.085 1.077 2.8 1.904.715.827 1.072 1.821 1.072 2.984v.224h-4.88v-.192c0-.427-.136-.773-.408-1.04a2.563 2.563 0 0 0-1.032-.6 4.22 4.22 0 0 0-1.296-.2 6.11 6.11 0 0 0-1.256.136 2.96 2.96 0 0 0-1.096.448 1.003 1.003 0 0 0-.448.872c0 .363.16.659.48.888.32.23.768.416 1.344.56.576.144 1.243.28 2 .408a24.9 24.9 0 0 1 2.264.488 9.99 9.99 0 0 1 2.24.88 4.882 4.882 0 0 1 1.696 1.488c.432.613.648 1.39.648 2.328 0 .97-.224 1.803-.672 2.496a5.126 5.126 0 0 1-1.816 1.688 9.18 9.18 0 0 1-2.544.96c-.933.208-1.89.312-2.872.312Zm16.58-.064c-1.206 0-2.198-.195-2.976-.584-.78-.39-1.392-.915-1.84-1.576a6.381 6.381 0 0 1-.944-2.208 11.254 11.254 0 0 1-.272-2.464V8.008h4.96v9.168c0 .715.08 1.37.24 1.968.16.597.456 1.077.888 1.44s1.048.544 1.848.544c.778 0 1.44-.221 1.984-.664.544-.443.96-1.01 1.248-1.704a5.538 5.538 0 0 0 .432-2.144l1.392 1.136a8.842 8.842 0 0 1-.488 2.976 7.408 7.408 0 0 1-1.384 2.408 6.208 6.208 0 0 1-2.184 1.608c-.86.384-1.827.576-2.904.576Zm5.568-.32V8.008h4.96V25h-4.96Zm8.035 0V8.008h4.912V25h-4.912ZM40.64 5.24c-.768 0-1.437-.203-2.008-.608-.57-.405-.856-.976-.856-1.712 0-.747.285-1.323.856-1.728.57-.405 1.24-.608 2.008-.608.779 0 1.453.203 2.024.608.57.405.856.981.856 1.728s-.285 1.32-.856 1.72c-.57.4-1.245.6-2.024.6Zm14.036 20.112c-.651 0-1.32-.056-2.008-.168a5.718 5.718 0 0 1-1.92-.672c-.592-.336-1.07-.83-1.432-1.48-.363-.65-.544-1.51-.544-2.576v-8.608h-3.92v-3.84h1.104c.64 0 1.149-.027 1.528-.08.378-.053.661-.19.848-.408.186-.219.306-.563.36-1.032.053-.47.08-1.115.08-1.936V2.408h4.976v5.6h4.944v3.84h-4.944V19.048c0 .736.088 1.333.264 1.792.176.459.616.688 1.32.688a5.01 5.01 0 0 0 1-.096c.314-.064.552-.128.712-.192v3.728a4.913 4.913 0 0 1-.944.264c-.406.08-.88.12-1.424.12Zm8.051-7.36v-3.28H73.99l-.48.832v-.48c0-.608-.144-1.192-.432-1.752-.288-.56-.733-1.019-1.336-1.376-.602-.357-1.373-.536-2.312-.536-.938 0-1.746.2-2.424.6-.677.4-1.194.973-1.552 1.72-.357.747-.536 1.648-.536 2.704 0 1.088.174 2.019.52 2.792.347.773.864 1.368 1.552 1.784.688.416 1.544.624 2.568.624.662 0 1.232-.061 1.712-.184s.872-.28 1.176-.472c.304-.192.536-.405.696-.64.16-.235.256-.464.288-.688h4.896c-.064.715-.31 1.416-.736 2.104-.426.688-1.018 1.307-1.776 1.856-.757.55-1.677.984-2.76 1.304-1.082.32-2.317.48-3.704.48-1.877 0-3.514-.376-4.912-1.128-1.397-.752-2.48-1.792-3.248-3.12-.768-1.328-1.152-2.861-1.152-4.6 0-1.76.392-3.304 1.176-4.632.784-1.328 1.878-2.363 3.28-3.104 1.403-.741 3.027-1.112 4.872-1.112 1.888 0 3.52.376 4.896 1.128a7.878 7.878 0 0 1 3.184 3.152c.747 1.35 1.12 2.92 1.12 4.712 0 .267-.005.523-.016.768-.01.245-.026.427-.048.544H62.726Z"
fill="#172339"
/>
</svg>
<button class="button-top px-sm-24 py-sm-15 px-15 py-12">
Request Beta Access
</button>
</nav>
</header>
<main class="container mx-auto px-xl-92 px-0">
<section
class="d-flex justify-content-center mt-lg-67 mt-md-80 mt-56 position-relative"
>
<div class="row justify-content-center w-100">
<div class="col d-flex px-3 p-md-0">
<div>
<svg
class="img-fluid position-absolute mt-lg-50 mt-md-42 ms-lg-289 ms-154 w-25"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 289 39"
>
<path
d="M1 37.676c92.173-48 187.84-48 287 0"
stroke="#172339"
stroke-width="2"
fill="none"
/>
</svg>
<h1
class="position-absolute top-0 mt-lg-103 mt-md-88 mt-27 mb-0"
style="letter-spacing: -1px; max-width: 630px"
>
A <strong>super</strong> <strong>solution</strong> for your
<strong>business</strong>.
</h1>
<p
class="mt-lg-289 mt-md-257 mt-sm-180 mt-146 mb-0 section-first-p"
>
Our marketing and sales automations help you scale your outreach
to get more leads for your company.
</p>
<button class="button mt-lg-52 mt-40 px-32 py-15">
Request Beta Access
</button>
</div>
</div>
<div
class="col-md d-flex justify-content-lg-start justify-content-center mt-md-0 mt-55 p-0"
>
<picture>
<source
media="(max-width: 768px)"
srcset="./assets/image-hero-landscape.png"
/>
<img
class="img-fluid-lg ms-xl-124 ms-md-58"
src="./assets/image-hero-portrait.png"
alt="Phone image on a gradient background"
/>
</picture>
</div>
<div class="col-lg d-flex justify-content-center p-0">
<aside class="text-right">
<div class="d-flex flex-column">
<p>2K+</p>
<span>Companies</span>
</div>
<div class="d-flex flex-column">
<p>8</p>
<span>Languages</span>
</div>
<div class="d-flex flex-column">
<p>1.2M</p>
<span>Leads</span>
</div>
</aside>
</div>
</div>
</section>
<section>
<div
class="d-flex flex-xl-row flex-column mt-xl-199 mt-md-131 mt-257 bg-dark-blue rounded-4 p-0 position-relative"
>
<div class="position-relative mx-auto">
<picture>
<source
media="(max-width: 768px)"
srcset="./assets/image-jeremy-small.png"
/>
<img
class="position-absolute ms-md-124 ms-0 bottom-0"
src="./assets/image-jeremy-large.png"
alt="Jeremy Robinson photo"
/>
</picture>
<svg
class="hide-svg"
width="538"
height="538"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter
x="-51%"
y="-51%"
width="202%"
height="202%"
filterUnits="objectBoundingBox"
id="a"
>
<feGaussianBlur stdDeviation="50" in="SourceGraphic" />
</filter>
</defs>
<circle
filter="url(#a)"
cx="320"
cy="480"
r="147"
transform="translate(-20 -143)"
fill="#DB65E2"
fill-rule="evenodd"
opacity=".476"
/>
</svg>
</div>
<div class="mt-xl-161 mt-40 mx-auto">
<svg width="66" height="54" xmlns="http://www.w3.org/2000/svg">
<path
d="M64.25.153C59.995 27.67 38.646 45.003.2 52.153"
stroke="#FAF8F6"
stroke-width="2"
fill="none"
/>
</svg>
</div>
<div
class="d-flex flex-column text-center text-xl-start mt-36 mb-64 mt-xl-88 mb-xl-88 ms-lg-52 me-xl-125 mx-md-58 mx-4"
>
<h2 class="heading-l">It just <strong>works</strong>.</h2>
<blockquote class="text-quote my-40">
“I really like how it is an all-in-one solution that handle many
of the tasks that you would normally need separate tools to do the
same job. This thing is a miracle worker.”
</blockquote>
<div class="d-flex flex-column">
<p class="text-jeremy-p">Jeremy Robinson</p>
<span class="text-jeremy-span">CMO, Fylo</span>
</div>
</div>
</div>
</section>
</main>
<footer class="mt-lg--210 bg-cream">
<div
class="container d-flex flex-md-row flex-column gap-33 justify-content-between align-items-center pt-lg-360 my-auto py-56 px-lg-92 px-md-40 py-md-72"
>
<svg width="79" height="26" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.008 25.384c-1.013 0-1.99-.117-2.928-.352a8.821 8.821 0 0 1-2.52-1.04 5.379 5.379 0 0 1-1.76-1.72c-.432-.688-.648-1.49-.648-2.408V19.576H5.08V19.8c0 .619.275 1.072.824 1.36.55.288 1.293.432 2.232.432.49 0 .963-.05 1.416-.152.453-.101.827-.267 1.12-.496.293-.23.44-.52.44-.872 0-.565-.312-.965-.936-1.2-.624-.235-1.624-.47-3-.704a19.855 19.855 0 0 1-2.368-.544 10 10 0 0 1-2.208-.936A4.827 4.827 0 0 1 .984 15.2C.579 14.597.376 13.864.376 13c0-1.152.35-2.123 1.048-2.912.699-.79 1.63-1.387 2.792-1.792 1.163-.405 2.443-.608 3.84-.608 1.333 0 2.576.221 3.728.664 1.152.443 2.085 1.077 2.8 1.904.715.827 1.072 1.821 1.072 2.984v.224h-4.88v-.192c0-.427-.136-.773-.408-1.04a2.563 2.563 0 0 0-1.032-.6 4.22 4.22 0 0 0-1.296-.2 6.11 6.11 0 0 0-1.256.136 2.96 2.96 0 0 0-1.096.448 1.003 1.003 0 0 0-.448.872c0 .363.16.659.48.888.32.23.768.416 1.344.56.576.144 1.243.28 2 .408a24.9 24.9 0 0 1 2.264.488 9.99 9.99 0 0 1 2.24.88 4.882 4.882 0 0 1 1.696 1.488c.432.613.648 1.39.648 2.328 0 .97-.224 1.803-.672 2.496a5.126 5.126 0 0 1-1.816 1.688 9.18 9.18 0 0 1-2.544.96c-.933.208-1.89.312-2.872.312Zm16.58-.064c-1.206 0-2.198-.195-2.976-.584-.78-.39-1.392-.915-1.84-1.576a6.381 6.381 0 0 1-.944-2.208 11.254 11.254 0 0 1-.272-2.464V8.008h4.96v9.168c0 .715.08 1.37.24 1.968.16.597.456 1.077.888 1.44s1.048.544 1.848.544c.778 0 1.44-.221 1.984-.664.544-.443.96-1.01 1.248-1.704a5.538 5.538 0 0 0 .432-2.144l1.392 1.136a8.842 8.842 0 0 1-.488 2.976 7.408 7.408 0 0 1-1.384 2.408 6.208 6.208 0 0 1-2.184 1.608c-.86.384-1.827.576-2.904.576Zm5.568-.32V8.008h4.96V25h-4.96Zm8.035 0V8.008h4.912V25h-4.912ZM40.64 5.24c-.768 0-1.437-.203-2.008-.608-.57-.405-.856-.976-.856-1.712 0-.747.285-1.323.856-1.728.57-.405 1.24-.608 2.008-.608.779 0 1.453.203 2.024.608.57.405.856.981.856 1.728s-.285 1.32-.856 1.72c-.57.4-1.245.6-2.024.6Zm14.036 20.112c-.651 0-1.32-.056-2.008-.168a5.718 5.718 0 0 1-1.92-.672c-.592-.336-1.07-.83-1.432-1.48-.363-.65-.544-1.51-.544-2.576v-8.608h-3.92v-3.84h1.104c.64 0 1.149-.027 1.528-.08.378-.053.661-.19.848-.408.186-.219.306-.563.36-1.032.053-.47.08-1.115.08-1.936V2.408h4.976v5.6h4.944v3.84h-4.944V19.048c0 .736.088 1.333.264 1.792.176.459.616.688 1.32.688a5.01 5.01 0 0 0 1-.096c.314-.064.552-.128.712-.192v3.728a4.913 4.913 0 0 1-.944.264c-.406.08-.88.12-1.424.12Zm8.051-7.36v-3.28H73.99l-.48.832v-.48c0-.608-.144-1.192-.432-1.752-.288-.56-.733-1.019-1.336-1.376-.602-.357-1.373-.536-2.312-.536-.938 0-1.746.2-2.424.6-.677.4-1.194.973-1.552 1.72-.357.747-.536 1.648-.536 2.704 0 1.088.174 2.019.52 2.792.347.773.864 1.368 1.552 1.784.688.416 1.544.624 2.568.624.662 0 1.232-.061 1.712-.184s.872-.28 1.176-.472c.304-.192.536-.405.696-.64.16-.235.256-.464.288-.688h4.896c-.064.715-.31 1.416-.736 2.104-.426.688-1.018 1.307-1.776 1.856-.757.55-1.677.984-2.76 1.304-1.082.32-2.317.48-3.704.48-1.877 0-3.514-.376-4.912-1.128-1.397-.752-2.48-1.792-3.248-3.12-.768-1.328-1.152-2.861-1.152-4.6 0-1.76.392-3.304 1.176-4.632.784-1.328 1.878-2.363 3.28-3.104 1.403-.741 3.027-1.112 4.872-1.112 1.888 0 3.52.376 4.896 1.128a7.878 7.878 0 0 1 3.184 3.152c.747 1.35 1.12 2.92 1.12 4.712 0 .267-.005.523-.016.768-.01.245-.026.427-.048.544H62.726Z"
fill="#172339"
/>
</svg>
<p class="footer-text">Copyright - Suite</p>
<div class="media-icons d-flex gap-4">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#172339"
/>
</svg>
<svg width="20" height="17" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#172339"
/>
</svg>
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#172339"
/>
</svg>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>