-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (168 loc) · 7.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="custom.css">
<title>Frontend Mentor | Fylo landing page with two column layout</title>
</head>
<body>
<!-- navbar -->
<header>
<nav class="navbar navbar-expand p-5" id="mainnav">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo-top.svg" alt="logo">
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-reset" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link text-reset" href="#">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- top content -->
<section class="p-5 text-center text-sm-start" id="top-content">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<h1 class="fw-bold">All your files in one secure location, accessible anywhere.</h1>
<p class="my-4">
Fylo stores your most important files in one secure location.
Access them wherever you need, share and collaborate with friends,
family, and co-workers.
</p>
<form class="row g-3">
<div class="col-auto">
<input id="padding" class="form-control" type="email" placeholder="Enter your email..." required>
</div>
<div class="col-auto">
<button type="submit" id="button" class="btn btn-primary mb-3 px-sm-5 shadow">Get Started</button>
</div>
</form>
</div>
<div class="col-md">
<img class="img-fluid" src="images/illustration-1.svg" alt="">
</div>
</div>
</div>
</section>
<!-- showcase -->
<section>
<img class="img-fluid" src="images/bg-curve-desktop.svg" alt="">
<div class="showcase py-5">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<h1 class="pb-3">Stay productive, wherever you are</h1>
<p class="lh-sm">
Never let location be an issue when accessing your files. Fylo has you
covered for all of your file storage needs.
</p>
<p class="lh-sm">Securely share files and folders with friends, family and colleagues for
live collaboration. No email attachments required!
</p>
<a id="a-custom-style" href="#">See how Fylo Works <img src="images/icon-arrow.svg" alt=""></a>
<div class="card my-5 p-3 shadow" style="width: 25rem;">
<div class="card-body">
<img class="card-title" src="images/icon-quotes.svg" alt="">
<p class="card-text">Fylo has improved our team productivity by an order of magnitude. Since
making the switch our team has become a well-oiled collaboration machine.
</p>
<div class="d-flex align-items-center justify-content-start">
<img id="flex-item-1" class="img-fluid rounded-circle" src="images/avatar-testimonial.jpg" alt="">
<div id="flex-item-2">
<p class="fw-bolder">Kyle Burton</p>
<p id="p-smaller">Founder & CEO, Huddle</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md">
<img class="img-fluid" src="images/illustration-2.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- get started -->
<section class="getStarted py-5">
<div class="container text-light">
<div class="row align-items-center justify-content-between">
<div class="col-md p-5 m-2">
<h2 class="fw-bold">Get early access today</h2>
<p class="text-justify py-2">It only takes a minute to sign up and our free starter tier is extremely generous.
If you have any questions, our support team would be happy to help you.
</p>
</div>
<div class="col-md p-5 m-2">
<form>
<div class="mb-3">
<input id="padding" type="email" class="form-control shadow" placeholder="email@example.com" required>
</div>
<button type="submit" id="button" class="btn btn-primary mb-3 px-sm-3 shadow">Get Started For Free</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-light" id="footer">
<div class="container py-5">
<div class="logo pb-3 pt-5" id="vertical-sm">
<img src="images/logo-bottom.svg" alt="logo">
</div>
<div class="row">
<div class="col-3" id="vertical-sm">
<div class="p-2"><img src="images/icon-phone.svg" alt=""> Phone: +1-543-123-4567</div>
<div class="p-2"><img src="images/icon-email.svg" alt=""> example@fylo.com</div>
</div>
<div class="col-3" id="vertical-sm">
<ul class="list-unstyled">
<li class="p-1">About Us</li>
<li class="p-1">Jobs</li>
<li class="p-1">Press</li>
<li class="p-1">Blog</li>
</ul>
</div>
<div class="col-3" id="vertical-sm">
<ul class="list-unstyled">
<li class="p-1">Contact Us</li>
<li class="p-1">Terms</li>
<li class="p-1">Privacy</li>
</ul>
</div>
<div class="col-3" id="vertical-sm">
<i class="bi bi-facebook p-1"></i>
<i class="bi bi-twitter p-1"></i>
<i class="bi bi-instagram p-1"></i>
</div>
</div>
<p class="text-center mt-5 pt-5">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.frontendmentor.io/profile/rimshub">@rimshub</a>.
<a href="#" class=" bottom-0 end-0 p-5">
<i class="bi bi-arrow-up-circle h1"></i>
</a>
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>