-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (122 loc) · 7.16 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
<!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>Fylo landing page with two column layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
</style>
</head>
<body>
<header>
<ul class="navbar">
<li class="topLogo"><img id="topLg" src="images/logo.svg" alt="logo"></li>
<li><a href="#">Sign In</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Features</a></li>
</ul>
</header>
<main>
<div class="mainTop">
<div class="textSection">
<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>
<input type="text" id="email" placeholder="Enter your email..">
<button>Get Started</button>
</div>
<div class="imageSection">
<img class="illustrationImage" src="images/illustration-1.svg" alt="illustration image1">
</div>
</div>
<div class="designCurve"></div>
<div class="mainMiddle">
<div class="textSection">
<h1>Stay productive, wherever you are</h1>
<p class="pText">Never let location be an issue when accessing your files. Fylo has you
covered for all of your file storage needs.</p>
<p class="pText">Securely share files and folders with friends, family and colleagues for
live collaboration. No email attachments required!</p>
<a href="#">See how Fylo works <img class="iconArrow" src="images/icon-arrow.svg"></a>
<div class="reviewBox">
<div id="quoteIcon">
<img src="images/icon-quotes.svg" alt="quote">
</div>
<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">
<div>
<img id="avatar" src="/images/avatar-testimonial.jpg" alt="avatar">
</div>
<div class="avatarText">
<p><strong>Kyle Burton</strong></p>
<p>Founder & CEO, Huddle</p>
</div>
</div>
</div>
</div>
<div class="imageSection">
<img class="illustrationImage" src="images/illustration-2.svg" alt="illustration image2">
</div>
</div>
<div class="mainBottom">
<div class="mainBottomText">
<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="mainBottomInput">
<input type="text" id="bottominput" placeholder="email@example.com">
<button id="bottomButton">Get Started For Free</button>
</div>
</div>
</main>
<footer>
<!-- <img class="footerLogo" src="/images/logo.svg" alt="logo"> -->
<div class="footerLogo">
<svg width="166" height="49" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M.014.03h93.96v48.29H.015z"/></defs><g fill="none" fill-rule="evenodd"><path d="M0 14.13v.123l27.95 13.13L56 14.209v-.033L27.95 1 0 14.13zm10.077.062L27.95 5.795l17.877 8.397-17.877 8.396-17.874-8.396zM27.95 32.483L0 19.55v4.784l27.95 12.964L56 24.289v-4.784L27.95 32.483zm0 9.703L0 29.25v4.783L27.95 47 56 33.99v-4.784l-28.05 12.98z" fill="#fff"/><g transform="translate(72)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M87.56 24.152a8.1 8.1 0 0 0-2.161-5.573 7.259 7.259 0 0 0-2.34-1.673 6.864 6.864 0 0 0-2.85-.601c-1.01 0-1.961.2-2.852.601a7.257 7.257 0 0 0-2.34 1.673 8.102 8.102 0 0 0-2.16 5.574 8.102 8.102 0 0 0 2.16 5.573 7.257 7.257 0 0 0 2.34 1.672 6.864 6.864 0 0 0 2.851.602c1.01 0 1.96-.2 2.852-.602a7.259 7.259 0 0 0 2.339-1.672 8.1 8.1 0 0 0 2.16-5.574zm6.415 0c0 1.932-.357 3.723-1.07 5.373a13.098 13.098 0 0 1-2.94 4.28c-1.247 1.205-2.71 2.156-4.388 2.854-1.678.699-3.468 1.048-5.369 1.048-1.9 0-3.683-.349-5.346-1.048a13.863 13.863 0 0 1-4.366-2.876 13.351 13.351 0 0 1-2.94-4.302c-.713-1.65-1.07-3.426-1.07-5.329 0-1.873.364-3.634 1.092-5.284a13.92 13.92 0 0 1 2.962-4.325 13.671 13.671 0 0 1 4.367-2.898 13.552 13.552 0 0 1 5.301-1.048c1.901 0 3.69.35 5.369 1.048 1.678.698 3.14 1.65 4.388 2.854 1.248 1.204 2.228 2.638 2.94 4.302.713 1.665 1.07 3.449 1.07 5.351zM64.258 36.905a8.6 8.6 0 0 1-1.715.58c-.638.148-1.3.222-1.982.222a9.84 9.84 0 0 1-2.74-.379 6.003 6.003 0 0 1-2.295-1.226c-.653-.565-1.173-1.3-1.56-2.207-.385-.907-.578-2-.578-3.277V.029h6.549v29.474c0 1.07.215 1.806.646 2.207.43.401.943.602 1.537.602.742 0 1.455-.223 2.138-.669v5.262zM50.492 11.22L38.908 41.854c-.861 2.289-1.99 3.939-3.386 4.95-1.396 1.01-3.06 1.515-4.99 1.515-.297 0-.623-.022-.98-.066a7.352 7.352 0 0 1-1.025-.201l-2.138-5.975a8.486 8.486 0 0 0 1.56.557c.534.134 1.039.201 1.514.201 1.01 0 1.93-.23 2.762-.691.832-.46 1.47-1.315 1.916-2.564l.891-2.586-9.935-25.773h6.995l5.925 16.588 5.57-16.588h6.905zM23.538 7.342H6.786v8.294h16.529v5.618H6.785v15.784H.015V1.412h23.524v5.93z" fill="#fff" mask="url(#b)"/></g></g></svg>
</div>
<div class="row">
<div class="column">
<ul>
<li><img class="icon" src="/images/icon-phone.svg">Phone: +1-543-123-4567</li>
<li><img class="icon" src="/images/icon-email.svg">example@fylo.com</li>
</ul>
</div>
<div class="column">
<ul>
<li>About Us</li>
<li>Jobs</li>
<li>Press</li>
<li>Blog</li>
</ul>
</div>
<div class="column">
<ul>
<li>Contact Us</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
<div class="column" id="columnsocial">
<div class="social">
<a href="https://twitter.com/hmnthRavula" class="fa fa-twitter" target="_blank"></a>
<a href="https://github.com/hmnth07/fylo-landing-page" class="fa fa-github" target="_blank"></a>
<a href="https://www.linkedin.com/in/hemanthravula/" class="fa fa-linkedin" target="_blank"></a>
</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="https://twitter.com/hmnthRavula">Hemanth Ravula</a>.
</p>
</footer>
</body>
</html>