-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
205 lines (199 loc) · 8.21 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">
<title>Frontend Mentor | Fylo landing page with two column layout</title>
<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=Raleway:wght@400;700&display=swap" 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=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./public/css/styles.css">
</head>
<body>
<nav class="navbar pt-400" aria-label="primary-nav">
<div class="container">
<img width="136" height="50" src="./images/logo.svg" class="navbar-brand p-0" alt="logo">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"> Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Sign In</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid p-0">
<section class="container py-500 full-height">
<div class="row">
<div class="col-sm-6 pt-500 second">
<h1 class="ff-raleway primary-header">All your files in one secure location, accessible anywhere.</h1>
<p class="text-primary fw-400 intro">
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 action="javascript:void(0)">
<div class="row">
<div class="col-sm-7 mb-3">
<input class="form-control border-primary rounded-1 py-2" type="email" name="email" id="email"
placeholder="Enter your email...">
</div>
<div class="col-sm-4">
<button class="btn btn-block btn-bright-blue rounded-1 py-2" type="submit">Get Started</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6 px-3 first">
<img class="responsive" height="500" width="600" src="./images/illustration-1.svg" alt="">
</div>
</div>
</section>
<div class="row">
<section class="container-fluid full-height bg-img py-650">
<div class="container">
<div class="row">
<div class="col-sm-6 second">
<h2 class="ff-raleway secondary-header">Stay productive, wherever you are</h2>
<p class="desc">Never let location be an issue when accessing your files. Fylo has you
covered for all of your file storage needs.
</p>
<p class="desc">
Securely share files and folders with friends, family and colleagues for
live collaboration. No email attachments required!
</p>
<a class="fantasy-link text-moderate-cyan py-1" href="javascript:void(0)">
See how Fylo works
<span><img src="./images/icon-arrow.svg" alt=""></span>
</a>
<div class="col-md-8 bg-white p-300 mt-5 quote">
<img src="./images/icon-quotes.svg" alt="icon-quotes">
<blockquote>
Fylo has improved our team productivity by an order of magnitude. Since
making the switch our team has become a well-oiled collaboration machine.
</blockquote>
<div>
<div class="cite">
<img width="40" height="40" class="avatar rounded-circle" src="./images/avatar-testimonial.jpg"
alt="user avatar-testimonial">
<div class="mt-4">
<p class="title">Kyle Burton</p>
<p class="position">Founder & CEO, Huddle</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 first">
<img class="responsive" width="600" height="400" src="./images/illustration-2.svg" alt="illustration-2">
</div>
</div>
</div>
</section>
</div>
<div class="row">
<section class="container-fluid bg-secondary py-500">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class="ff-raleway secondary-header text-light-grayish-blue">Get early access today</h2>
<p class="text-light-grayish-blue trial">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-6">
<form action="javascript:void(0)">
<div class="row">
<div class="col-sm-12 mb-3">
<input class="form-control rounded-1 py-2" type="email" name="user-email" id="user-email"
placeholder="Enter your email...">
</div>
<div class="col-sm-5">
<button class="btn btn-block btn-bright-blue rounded-1 py-2" type="submit">Get Started For
Free</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="container-fluid bg-primary py-500">
<div class="container">
<div class="row">
<div class="col-md-4">
<img width="146" height="45" class="logo mb-4" src="./images/white-logo.svg" alt="website logo">
<div>
<p class="text-white">
<img src="./images/icon-phone.svg" alt="phone icon">
<span class="px-3">Phone: +1-543-123-4567</span>
</p>
<p class="text-white">
<img src="./images/icon-email.svg" alt="email icon">
<span class="px-3">[email protected]</span>
</p>
</div>
</div>
<div class="col-md-4 pt-400">
<nav class="navbar" aria-label="footer-nav">
<ul class=" footer-nav" data-columns="2">
<li class="nav-item">
<a class="text-white" href="javascript:void(0)">About Us</a>
</li>
<li class="nav-item">
<a class="text-white" href="javascript:void(0)">Jobs</a>
</li>
<li class="nav-item">
<a class="text-white" href="javascript:void(0)">Press</a>
</li>
<li class="nav-item">
<a class="text-white" href="javascript:void(0)">Blog</a>
</li>
<li class="nav-item">
<a class="text-white" href="javascript:void(0)">Contact Us</a>
</li>
<li class="nav-item">
<a class="text-white" href="javascript:void(0)">Terms</a>
</li>
<li class="nav-item">
<a class="text-white" href="javascript:void(0)">Policy</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-4 pt-400">
<ul class="social-media justify-content-center">
<li>
<a href="javascript:void(0)">
<img src="./images/twitter.svg" alt="twitter">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="./images/Linkedin.svg" alt="Linkedin">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="./images/twitter.svg" alt="twitter">
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>