-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (109 loc) · 5.89 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
<!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 -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700&display=swap" rel="stylesheet">
<!-- Link To Css File Location -->
<link rel="stylesheet" href="Css/Style.css">
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- Boostrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Fylo landing page with two column layout</title>
</head>
<body>
<section id="title">
<nav class="navbar navbar-expand-md navbar-light">
<img class="navbar-brand nav-logo" src="images/logo.svg" alt="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">Features</li>
<li class="nav-item">Team</li>
<li class="nav-item">Sign In</li>
</ul>
</div>
</nav>
<div class="title-container">
<img src="images/illustration-1.svg" class="title-img" alt="img">
<h1 class="big-heading">All your files in one secure location, accessible anywhere.</h1>
<p class="general-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-inline my-2 my-lg-0">
<input class="form-control mr-sm-2 input-field" type="email" placeholder="Enter Your Email" aria-label="Email">
<button type="submit" class="btn btn-primary my-2 my-sm-0 submit-btn">Get Started</button>
</form>
</div>
</section>
<section id="feature">
<div class="title-container">
<img src="images/illustration-2.svg" alt="" class="feature-img">
<h1 class="big-heading">Stay productive, wherever you are</h1>
<p class="general-p">Never let location be an issue when accessing your files. Fylo has you
covered for all of your file storage needs.</p>
<p class="general-p">Securely share files and folders with friends, family and colleagues for
live collaboration. No email attachments required!</p>
<p class="feature-cta">See how Fylo works</a> <img src="images/icon-arrow.svg" alt=""> </p>
<div class="carde">
<img src="images/icon-quotes.svg" alt="">
<p class="general-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>
<img src="images/avatar-testimonial.jpg" alt="" class="avatar-img">
<div class="testimonial">
<p class="general-p avater-name">Kyle Burton</p>
<p class="general-p avatar-job">Founder & CEO, Huddle</p>
</div>
</div>
</div>
</section>
<section id="cta">
<div class="row">
<div class="col-lg-6">
<h1 class="cta-h1">Get early access today</h1>
<p class="cta-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="col-lg-6 cta-seconde-col">
<form class="form-inline">
<input class="form-control input-field" type="email" placeholder="Enter Your Email" aria-label="Email">
</form>
<button type="submit" class="btn btn-primary cta-btn">Get Started For Free</button>
</div>
</div>
</section>
<section id="footer">
<img src="images/white-logo.svg" alt="" class="white-logo-img">
<div class="row">
<div class="col-lg-3 col-md-6 footer-col">
<p class="footer-p"> <img src="images/icon-phone.svg" alt="" class="footer-icon">Phone: +1-543-123-4567</p>
<p class="footer-p"> <img src="images/icon-email.svg" alt="" class="footer-icon">[email protected]</p>
</div>
<div class="col-lg-3 col-md-6 footer-col">
<p class="footer-p">About Us</p>
<p class="footer-p">Jobs</p>
<p class="footer-p">Press</p>
<p class="footer-p">Blog</p>
</div>
<div class="col-lg-3 col-md-6 footer-col">
<p class="footer-p">Contact Us</p>
<p class="footer-p">Terms</p>
<p class="footer-p">Privacy</p>
</div>
<div class="col-lg-3 col-md-6 footer-col">
<i class="fab fa-facebook fa-2x footer-icon"></i>
<i class="fab fa-instagram fa-2x footer-icon"></i>
<i class="fab fa-twitter-square fa-2x footer-icon"></i>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>