Skip to content

Instantly share code, notes, and snippets.

@Tunji545

Tunji545/index.html Secret

Created March 7, 2021 00:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tunji545/79ff3d095bf2e244c644c67ae32e100b to your computer and use it in GitHub Desktop.
Save Tunji545/79ff3d095bf2e244c644c67ae32e100b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Fylo landing page with dark theme and features grid</title>
</head>
<body>
<nav class="navbar navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/logo.svg" class="img-fluid" alt="logo"></a>
<ul class="nav ml-auto">
<li class="nav-item"></li><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Team</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sign In</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="offset-1 col-10 text-center">
<figure class="pb-5">
<img src="images/illustration-intro.png" class="img-fluid intro-img" alt="illustration-intro">
</figure>
<h2>All your files in one secure location, accessible anywhere.</h2>
<p>Fylo stores all your most important files in one secure location. Access them wherever
you need, share and collaborate with friends family, and co-workers.</p>
<button type="button" class="btn btn-info btn-lg first-btn">Get Started</button>
</div>
</div>
<div class="row">
<div class="offset-1 col-10 offset-sm-0 col-sm-6 text-center">
<figure>
<img src="images/icon-access-anywhere.svg" alt="icon-access-anywhere">
</figure>
<p>Access your files, anywhere</p>
<p>The ability to use a smartphone, tablet, or computer to access your account means your
files follow you everywhere.</p>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-6 text-center">
<figure class="security">
<img src="images/icon-security.svg" alt="icon-security">
</figure>
<p>Security you can trust</p>
<p>2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.</p>
</div>
</div>
<div class="row row-spacing">
<div class="offset-1 col-10 offset-sm-0 col-sm-6 text-center">
<figure class="collaboration">
<img src="images/icon-collaboration.svg" alt="icon-collaboration">
</figure>
<p>Real-time collaboration</p>
<p>Securely share files and folders with friends, family and colleagues for live collaboration.
No email attachments required.</p>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-6 text-center">
<figure class="any-file">
<img src="images/icon-any-file.svg" alt="icon-any-file">
</figure>
<p>Store any type of file</p>
<p>Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all
file types to be securely stored and shared.</p>
</div>
</div>
<div class="row row-spacing">
<div class="offset-1 col-10 offset-sm-0 col-sm-6">
<figure class="productive">
<img src="images/illustration-stay-productive.png" class="img-fluid" alt="illustration-stay-productive">
</figure>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-6">
<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 livecollaboration. No email attachments required.</p>
<a href="/">See how Fylo works <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="row big-quotes">
<div class="offset-1 col-10 offset-sm-0 col-sm-4">
<figure class="">
<img src="images/bg-quotes.png" class="quotes mb-5" alt="bg-quotes">
</figure>
<div class="testimonials mb-5 py-4 px-4">
<p class="profile-1">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/profile-1.jpg" alt="profile-1">
<div>
<p>Satish Patel</p>
<p>Founder & CEO, Huddle</p>
</div>
</div>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-4 mt-3">
<div class="testimonials mb-5 py-4 px-4">
<p class="profile-1">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/profile-2.jpg" alt="profile-2">
<div>
<p>Bruce McKenzie</p>
<p>Founder & CEO, Huddle</p>
</div>
</div>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-4 mt-3">
<div class="testimonials mb-5 py-4 px-4">
<p class="profile-1">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/profile-3.jpg" alt="profile-3">
<div>
<p>Iva Boyd</p>
<p>Founder & CEO, Huddle</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class=" offset-1 col-10 col-sm-10 intro">
<div class="px-3 py-5">
<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>
<form class="text-center">
<input type="email" name="email" placeholder="email@example.com">
<button type="submit">get started for free</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="offset-1 col-10 offset-sm-0 col-sm-6 col-lg-3">
<figure class="logo2 pb-5">
<img src="images/logo.svg" alt="logo">
</figure>
<div class="row pb-2">
<i class="fa fa-map-marker col-2"></i>
<p class="col-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-6 col-lg-3">
<div class="row">
<div class="footer">
<i class="fa fa-phone col-2"></i>
<p class="col-10 pb-2 inline">+1-543-123-4567</p>
<div class="relate">
<i class="fa fa-envelope-o col-2"></i>
<p class="col-10 pb-5 inline">example@fylo.com</p>
</div>
</div>
</div>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-3 col-lg-2 pb-5">
<div class="footer2">
<p class="pb-2">About Us</p>
<p class="pb-2">Jobs</p>
<p class="pb-2">Press</p>
<p>Blog</p>
</div>
</div>
<div class="offset-1 col-10 col-sm-3 col-lg-2 pb-5">
<div class="footer2">
<p class="pb-2">Contact Us</p>
<p class="pb-2">Terms</p>
<p>Privacy</p>
</div>
</div>
<div class="offset-1 col-10 offset-sm-0 col-sm-3 col-lg-1 pb-5">
<div class="footer2">
<p class="text-center">
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="">Olatunji Omisakin</a>.
</p>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
Raw
styles.css
html {
font-size: 62.5%;
}
body {
background-color: hsl(218, 28%, 13%);
color: hsl(0, 0%, 100%);
font-size: 1.4rem;
font-family: 'Open Sans', sans-serif;
line-height: 1.48;
}
h2 {
font-size: 2.1rem;
margin-bottom: 10px;
text-align: center;
line-height: 1.48;
}
h2 ~ p {
text-align: center;
line-height: 1.48;
color: #cdcdcd;
}
.first-btn {
text-align: center;
width: 60%;
padding: 10px;
border-radius: 20px;
}
nav {
background-color: hsl(218, 28%, 13%);
}
h1, h2, button, header nav {
font-family: 'Raleway', sans-serif;
}
a {
color: #bcbcbc;
}
#id {
color: white;
}
.big-quotes {
margin-top: 150px;
padding-top: -20px;
}
.quotes {
width: 20px;
float: left;
position: relative;
bottom: 10px;
}
.diff {
clear: left;
}
.profile-1 + img {
width: 30px;
height: 30px;
border-radius: 15px;
float: left;
margin-right: 10px;
}
.profile-1 ~ div :first-child {
font-weight: bold;
margin-bottom: 2px;
}
.profile-1 ~ div :last-child {
font-size: 1.0rem;
}
.testimonial3 {
margin-bottom: 70px;
}
.testimonials {
background-color: hsl(219, 30%, 18%);
}
.intro {
background-color: hsl(217, 28%, 15%);
}
input {
text-align: center;
width: 40%;
margin-left: 10%;
margin-right: 5%;
padding: 10px;
border-radius: 20px;
}
button {
text-align: center;
width: 20%;
margin-left: 5%;
margin-right: 10%;
padding: 10px;
border-radius: 20px;
background-color: hsl(176, 68%, 64%);
}
footer {
background-color: hsl(216, 53%, 9%);
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
@media (max-width: 576px) {
nav {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.navbar-brand img:first-child {
max-width: 70px;
}
ul.nav {
font-size: 1.0rem;
}
.nav-link {
padding-right: 2px;
}
.intro-img {
margin-top: 100px;
}
.first-btn {
margin-top: 10px;
margin-bottom: 70px;
}
.security {
margin-top: 50px;
}
.security, .security + p {
text-align: center;
}
.collaboration {
margin-top: 50px;
}
.any-file {
margin-top: 50px;
}
.productive {
margin-top: 100px;
margin-bottom: 30px;
}
.intro {
margin-top: 100px;
}
.py-5 h2:first-child {
padding-bottom: 10px;
}
.py-5 h2:first-child + p {
padding-bottom: 10px;
}
form {
text-align: center;
}
form :first-child {
margin-bottom: 20px;
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding: 10px;
border-radius: 20px;
font-size: 1.0rem;
}
form :last-child {
color: white;
margin-bottom: 20px;
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding: 10px;
border-radius: 20px;
text-align: center;
text-transform: capitalize;
}
.logo2 {
margin-top: 70px;
}
.inline {
display: inline;
}
.relate {
margin-top: 10px;
margin-bottom: 40px;
}
}
@media (min-width: 577px) and (max-width: 767px) {
nav {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.intro-img {
margin-top: 100px;
}
.first-btn {
width: 40%;
margin-bottom: 100px;
margin-top: 20px;
}
form :first-child {
margin-top: 20px;
margin-bottom: 20px;
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding: 10px;
border-radius: 20px;
font-size: 1.0rem;
}
form :last-child {
margin-bottom: 20px;
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding: 10px;
border-radius: 20px;
font-size: 1.0rem;
}
.row-spacing {
margin-top: 100px;
}
.logo2 {
margin-top: 70px;
}
.footer {
position: relative;
top: 155px;
}
.footer2 {
position: relative;
top: 30px;
}
.inline {
display: inline;
}
}
@media (min-width: 768px) and (max-width: 991px) {
nav {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.intro-img {
margin-top: 100px;
}
.first-btn {
width: 40%;
margin-bottom: 100px;
margin-top: 20px;
}
.row-spacing {
margin-top: 100px;
}
form :first-child {
margin-top: 20px;
margin-bottom: 20px;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding: 10px;
border-radius: 20px;
font-size: 1.0rem;
}
form :last-child {
margin-bottom: 20px;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding: 10px;
border-radius: 20px;
font-size: 1.0rem;
}
.logo2 {
margin-top: 70px;
}
.footer {
position: relative;
top: 155px;
}
.footer2 {
position: relative;
top: 30px;
}
.inline {
display: inline;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
nav {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.intro-img {
margin-top: 100px;
}
.first-btn {
width: 40%;
margin-bottom: 100px;
margin-top: 20px;
}
.row-spacing {
margin-top: 100px;
}
.logo2 {
margin-top: 70px;
}
.footer {
position: relative;
top: 155px;
}
.footer2 {
position: relative;
top: 150px;
}
.inline {
display: inline;
}
}
@media (min-width: 1200px) {
nav {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.intro-img {
margin-top: 100px;
}
.first-btn {
width: 40%;
margin-bottom: 100px;
margin-top: 20px;
}
.row-spacing {
margin-top: 100px;
}
.logo2 {
margin-top: 70px;
}
.footer {
position: relative;
top: 170px;
margin-left: 50px;
}
.footer2 {
position: relative;
top: 150px;
margin-left: 20px;
}
.inline {
display: inline;
}
p.attribution {
margin-top: 40px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment