Skip to content

Commit a4f5d0c

Browse files
AmolShelke2AmolShelke2
committed
Added index.html & style.css upto footer
1 parent 23a8b17 commit a4f5d0c

File tree

2 files changed

+374
-0
lines changed

2 files changed

+374
-0
lines changed

‎FyloLandingPage/index.html

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Fylo Landing page.</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
12+
/>
13+
<link
14+
rel="icon"
15+
href="/FyloLandingPage/images/favicon-32x32.png"
16+
sizes="32x32"
17+
type="image/png"
18+
/>
19+
</head>
20+
<body>
21+
<header>
22+
<div class="container">
23+
<nav>
24+
<img src="./images/logo.svg" alt="" />
25+
<ul>
26+
<li>
27+
<a href="#">Features</a>
28+
</li>
29+
<li>
30+
<a href="#">Sign in</a>
31+
</li>
32+
<li>
33+
<a href="#">Team</a>
34+
</li>
35+
</ul>
36+
</nav>
37+
38+
<div class="flex">
39+
<div>
40+
<h1>All your files in one secure location, accessible anywhere</h1>
41+
<p>
42+
Fylo stores your most important files in one secure location.
43+
Access them wherever you need, share and collaborate with friends,
44+
family, and co-workers.
45+
</p>
46+
<form>
47+
<input type="email" placeholder="Enter your emial.." />
48+
<button>get started</button>
49+
</form>
50+
</div>
51+
<div>
52+
<img
53+
src="./images/illustration-1.svg"
54+
alt="header-img"
55+
class="illustration"
56+
/>
57+
</div>
58+
</div>
59+
</div>
60+
</header>
61+
62+
<section class="light-blueish">
63+
<div class="container">
64+
<div class="flex">
65+
<div>
66+
<h2>Stay productive, wherever you are</h2>
67+
<p>
68+
never let location be an issue when accessing your files. You
69+
covered for all of yur file storage needs.
70+
</p>
71+
<p>
72+
Securely share files and folders with friends, family and
73+
collegues for live collabaration. No email attachments required!
74+
</p>
75+
<a href="#" class="green">
76+
see how fylo works <img src="./images/icon-arrow.svg" alt="" />
77+
</a>
78+
<div class="testimonal-box">
79+
<img src="./images/icon-quotes.svg" alt="" />
80+
<p>
81+
Fylo has improved our team productivity by an order of
82+
magnitude. Since making the switch our team has become a
83+
well-oiled collaboration machine.
84+
</p>
85+
<div class="user-info">
86+
<div>
87+
<img src="./images/avatar-testimonial.jpg" alt="" />
88+
</div>
89+
<div>
90+
<h4>Kyle Burton</h4>
91+
<small>Founder & CEO, Huddle</small>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
<div>
97+
<img
98+
src="./images/illustration-2.svg"
99+
alt=""
100+
class="illustration"
101+
/>
102+
</div>
103+
</div>
104+
</div>
105+
</section>
106+
107+
<section class="blueish">
108+
<div class="container">
109+
<div class="flex">
110+
<div>
111+
<h2>Get early access today.</h2>
112+
<p>
113+
It only takes a minute to sign up and our free starter tier is
114+
extremely generous. if you have any question, our support Team
115+
would be happy to help
116+
</p>
117+
</div>
118+
<div>
119+
<form>
120+
<input type="email" placeholder="[email protected]" />
121+
<button>Get started for free</button>
122+
</form>
123+
</div>
124+
</div>
125+
</div>
126+
</section>
127+
128+
<footer>
129+
<div class="container">
130+
<img src="./images/logo.svg" alt="" />
131+
<div class="flex align-start">
132+
<ul>
133+
<li>+91-200-200-2022</li>
134+
<li>[email protected]</li>
135+
</ul>
136+
137+
<ul>
138+
<li>about us</li>
139+
<li>Jobs</li>
140+
<li>Press</li>
141+
<li>Blog</li>
142+
</ul>
143+
144+
<ul>
145+
<li>Career</li>
146+
<li>Terms</li>
147+
<li>Privacy</li>
148+
</ul>
149+
150+
<ul class="social-media">
151+
<li>
152+
<a href="#" class="circle">
153+
<i class="fab fa-facebook-f"></i>
154+
</a>
155+
</li>
156+
157+
<li>
158+
<a href="#" class="circle">
159+
<i class="fab fa-twitter"></i>
160+
</a>
161+
</li>
162+
<li>
163+
<a href="#" class="circle">
164+
<i class="fab fa-instagram"></i>
165+
</a>
166+
</li>
167+
</ul>
168+
</div>
169+
</div>
170+
</footer>
171+
</body>
172+
</html>

‎FyloLandingPage/style.css

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
color: hsl(243, 87%, 12%);
9+
font-family: "Open Sans", sans-serif;
10+
font-size: 1.1em;
11+
margin: 0;
12+
}
13+
14+
a {
15+
color: #3da08f;
16+
}
17+
18+
img {
19+
max-width: 100%;
20+
}
21+
22+
h1,
23+
h2,
24+
h4 {
25+
font-family: "Raleway", sans-serif;
26+
}
27+
28+
h2 {
29+
font-size: 1.8rem;
30+
margin-top: 0;
31+
}
32+
33+
.container {
34+
padding: 30px;
35+
margin: 0 auto;
36+
max-width: 100%;
37+
width: 1200px;
38+
}
39+
40+
.flex {
41+
display: flex;
42+
align-items: center;
43+
flex-wrap: wrap;
44+
}
45+
46+
.align-start {
47+
align-items: flex-start;
48+
}
49+
50+
.flex > div,
51+
.flex > ul {
52+
flex: 1;
53+
}
54+
55+
.flex > div:first-child {
56+
margin-right: 20px;
57+
}
58+
59+
.flex > div:last-child {
60+
margin-left: 20px;
61+
}
62+
63+
/* Nav styling */
64+
65+
nav {
66+
display: flex;
67+
align-items: center;
68+
justify-content: space-between;
69+
margin: 30px 0;
70+
}
71+
72+
nav ul {
73+
display: flex;
74+
padding: 0;
75+
list-style-type: none;
76+
}
77+
78+
nav ul li {
79+
margin-left: 50px;
80+
}
81+
82+
nav ul a {
83+
color: hsl(243, 87%, 12%);
84+
font-family: "Raleway", sans-serif;
85+
text-decoration: none;
86+
}
87+
88+
nav ul a:hover {
89+
color: gray;
90+
}
91+
92+
/* form section */
93+
94+
form {
95+
display: flex;
96+
}
97+
98+
input {
99+
border: 1px solid hsl(243, 87%, 12%);
100+
border-radius: 2px;
101+
font-family: "Raleway", sans-serif;
102+
font-size: 15px;
103+
flex: 0.7;
104+
padding: 15px;
105+
}
106+
107+
input::placeholder {
108+
color: hsl(0%, 0%, 75%);
109+
}
110+
111+
button {
112+
border: 1px solid hsl(224, 93%, 58%);
113+
background-color: hsl(224, 93%, 58%);
114+
border-radius: 2pz;
115+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
116+
color: #fff;
117+
font-family: "Raleway", sans-serif;
118+
font-weight: 700;
119+
font-size: 14px;
120+
flex: 0.3;
121+
padding: 15px;
122+
margin-left: 10px;
123+
cursor: pointer;
124+
}
125+
126+
.light-blueish {
127+
background-color: hsl(240, 75%, 98%);
128+
margin-top: 100px;
129+
position: relative;
130+
padding: 50px 0;
131+
}
132+
133+
.light-blueish::before {
134+
content: "";
135+
background-image: url("./images/bg-curve-desktop.svg");
136+
background-size: cover;
137+
background-position: center center;
138+
position: absolute;
139+
top: -60px;
140+
left: 0;
141+
height: 60px;
142+
width: 100%;
143+
}
144+
145+
/* Testimonials */
146+
147+
.testimonal-box {
148+
background-color: #fff;
149+
box-sizing: 0 0 10px rgba(0, 0, 0, 0.1);
150+
border-radius: 5px;
151+
padding: 25px;
152+
margin-bottom: 40px;
153+
width: 80%;
154+
}
155+
156+
.testimonal-box p {
157+
font-size: 14px;
158+
letter-spacing: 1px;
159+
line-height: 1.7;
160+
}
161+
162+
.user-info {
163+
display: flex;
164+
margin-top: 20px;
165+
}
166+
167+
.user-info img {
168+
border-radius: 50%;
169+
height: 50px;
170+
margin-right: 10px;
171+
width: 50px;
172+
}
173+
174+
.user-info h4 {
175+
font-weight: 700;
176+
margin: 0;
177+
}
178+
179+
/* blueish */
180+
181+
.blueish {
182+
background-color: hsl(238, 22%, 44%);
183+
color: #fff;
184+
padding: 20px 0;
185+
}
186+
187+
.blueish form {
188+
flex-direction: column;
189+
}
190+
191+
.blueish form input {
192+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
193+
border: none;
194+
flex: 1;
195+
}
196+
197+
.blueish form button {
198+
margin: 20px 0 0;
199+
width: 50%;
200+
}
201+
202+
/* Footer */

0 commit comments

Comments
 (0)