-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·138 lines (134 loc) · 5.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<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>Fylo landing page with two column layout</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/375210e8b0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- Header nav -->
<header class="content">
<div class="header-nav flex">
<div class="img-nav">
<img src="images/logo.svg" alt="logo to fylo">
</div>
<nav class="nav">
<ul class="flex">
<li><a href="#">Features</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</nav>
</div>
<!-- header section -->
<div class="section-header flex">
<section class="info-header">
<h1> All your files in one secure location, accessible anywhere.</h1>
<p>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="form-header" action="#">
<input type="email" name="email" aria-label="Enter your email" placeholder=" Enter your email...">
<button class="btn" type="submit" name="button">Get Started</button>
</form>
</section>
<div class="img-header content">
<img src="images/illustration-1.svg" alt="image header Fylo">
</div>
</div>
</header>
<img class="img-curve" class="img-mobile " src="images/bg-curve-mobile.svg" alt="Media pagina">
<!-- Main section -->
<main>
<div class="main flex content">
<section>
<h2>Stay productive, wherever you are</h2>
<p>Never let location be an issue when accessing your files. Fylo has you
covered for all of your file storage needs.</p>
<p>Securely share files and folders with friends, family and colleagues for
live collaboration. No email attachments required!</p>
<div class="icon-arrow">
<a href="#">See how Fylo works<img src="images/icon-arrow.svg" alt="icon arrow"></a>
</div>
<blockquote>
<img src="images/icon-quotes.svg" alt="icon quotes">
<p>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="person">
<img src="images/avatar-testimonial.jpg" alt="image testimonial">
<div>
<h4>Kyle Burton</h4>
<small> Founder & CEO, Huddle</small>
</div>
</div>
</blockquote>
</section>
<div class="img-main">
<img src="images/illustration-2.svg" alt="image main">
</div>
</div>
</main>
<!-- Section blue -->
<div class="section-blue">
<div class="content">
<div class="head-blue">
<h2>Get early access today</h2>
<p>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="footer-blue">
<form class="form-header form-blue flex" action="#">
<input type="email" name="email" aria-label="Enter your email" placeholder=" email@example.com">
<button class="btn" type="submit" name="button">Get Started For Free</button>
</form>
</div>
</div>
</div>
<!-- Section footer -->
<footer>
<div class="content div-footer">
<img src="images/logo-white.svg" alt="logo Flyo"> <br>
<div class="flex address-flex">
<div class="address">
<a href="#"><img src="images/icon-phone.svg" alt="icon Phone">Phone: +1-543-123-4567</a> <br>
<a href="#"> <img src="images/icon-email.svg" alt="icon email">example@fylo.com</a>
</div>
<div class="about">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="about">
<ul>
<li><a href="#">Contact Us</a>
<li><a href="#">Terms</a>
<li><a href="#">Privacy</a>
</ul>
</div>
<div class="social">
<a class="circle-social" href="#" aria-label="Link social Facebook"><i class="fab fa-facebook-f"></i></a>
<a class="circle-social" href="#" aria-label="Link social Twitter"><i class="fab fa-twitter"></i></a>
<a class="circle-social" href="#" aria-label="Link social Instagram"><i class="fab fa-instagram"></i></a>
</div>
</div>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
rel="noopener noreferrer">Frontend Mentor</a>
Coded by <a href="https://github.com/Alexsanchez-WP" target="_blank"
rel="noopener noreferrer">Alexsanchez-WP</a>.
</p>
</div>
</footer>
</body>
</html>