-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
217 lines (201 loc) · 8.12 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!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>Frontend Mentor | Fylo landing page with dark theme and features grid</title>
<!-- Font Awesome Library -->
<link rel="stylesheet" href="style/all.min.css" />
<!-- Render All Elements Normaly -->
<link rel="stylesheet" href="css/normalize.css" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<!-- Main Template css Files -->
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<header>
<div class="container">
<a href="#" class="logo">
<img src="images/logo.svg" alt="logo-img">
</a>
<nav>
<ul class="lists">
<li><a href="#">Features</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</nav>
</div>
</header>
<!-- intro -->
<section class="intro padding-section">
<div class="container">
<img src="./images/illustration-intro.png" alt="" class="space-img">
</div>
</div>
</section>
<!-- get-started Section -->
<section class="get-started ">
<div class="container">
<h2>
All your files in one secure location, accesible anywhere.
</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque mollitia perferendis repellat commodi quam, sequi, porro doloremque rerum possimus quae impedit optio nulla, veniam doloribus. Ex eveniet perspiciatis fugit iusto.</p>
<a href="#" >Get Started</a>
</div>
</section>
<!-- boxes Section-->
<section class="boxes-info ">
<div class="container">
<div class="boxes-container">
<div class="box">
<img src="images/icon-access-anywhere.svg" alt="icon-access-anywhere">
<h3>Acces your files, anywhere</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci et quisquam nam accusantium, ullam cum laboriosam.</p>
</div>
<div class="box">
<img src="images/icon-security.svg" alt="icon-security">
<h3>Security you can trust</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum temporibus voluptate, quis facilis ipsa voluptatibus nesciunt.</p>
</div>
<div class="box">
<img src="images/icon-collaboration.svg" alt="icon-collaboration">
<h3>Real time collaboration</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eaque laboriosam autem ratione, mollitia nobis reiciendis iste!</p>
</div>
<div class="box">
<img src="images/icon-any-file.svg" alt="icon-any-file">
<h3>Store any type of files </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi consequuntur possimus molestiae earum eaque veritatis recusandae voluptatum.</p>
</div>
</div>
</div>
</section>
<!-- Stay-productive Section -->
<section class="stay-productive padding-section">
<div class="container">
<div class="informations-container">
<div class="image-info">
<img src="images/illustration-stay-productive.png" alt="illustration-stay-productive">
</div>
<div class="text-info">
<h2>Stay productive wherever,you are </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit architecto porro itaque natus velit molestias error in incidunt vero maxime.
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dolore inventore laborum quae ut praesentium, officia a iste voluptates ab.
</p>
<a href="#" class="fylo-works">See how fylo works <img src="images/icon-arrow.svg" class="arrow-img" alt=""></a>
</div>
</div>
</div>
</section>
<!-- card boxes -->
<section class="card-boxes padding-section">
<div class="container">
<div class="boxes-container">
<div class="quote-image">
<img src="images/bg-quotes.png" alt="">
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla rerum excepturi reprehenderit eum iusto hic aliquid. Excepturi reprehenderit sed officia?</p>
<div class="men-profile">
<img src="images/profile-1.jpg" alt="">
<div class="profile-text">
<h6>Satish Patel</h6>
<span>Founder & Ceo,Huddle</span>
</div>
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi beatae nam fugit voluptates blanditiis veritatis id facilis exercitationem harum eius.</p>
<div class="men-profile">
<img src="images/profile-2.jpg" alt="">
<div class="profile-text">
<h6>Bruce Mckenzele</h6>
<span>Founder & Ceo,Huddle</span>
</div>
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore ad sint quis ea totam natus consequuntur eos sapiente dolore nulla.</p>
<div class="men-profile">
<img src="images/profile-3.jpg" alt="">
<div class="profile-text">
<h6>Iva Boyd</h6>
<span>Founder & Ceo,Huddle</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- get-access section -->
<section class="get-access padding-section">
<div class="container">
<div class="access-space">
<div class="text">
<h2>Get early access today</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, repellendus dicta earum tenetur placeat quis! Dolorum, rerum porro inventore commodi fugit voluptate dignissimos, optio temporibus repellat sed alias, veritatis dolor!</p>
</div>
<form action="">
<input type="email" name="email-field" id="" placeholder="[email protected]">
<input type="submit" value="Get started for free">
<span class="message-text">Please enter a valid email address</span>
</form>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="box-container">
<div class="logo-adresse">
<a href="#">
<img src="images/logo.svg" alt="logo-image">
</a>
<div class="adresse">
<img src="images/icon-location.svg" alt="icon-location" class="adresse-img">
<p>Lorem ipsum dolor sit amet adipisicing elit. Fugit voluptate incidunt rem pariatur</p>
</div>
</div>
<div class="contact-info">
<div class="phone-numbre">
<img src="images/icon-phone.svg" alt="icon-phone" class="phone-icon">
<p >+1-542-123-4567</p>
</div>
<div class="email">
<img src="images/icon-email.svg" alt="icon-email" class="email-icon">
<p >[email protected]</p>
</div>
</div>
<div class="list-one">
<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="list-two">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
<div class="icons">
<a href="https://web.facebook.com/profile.php?id=100012959018207"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/akram_djidel"><i class="fab fa-twitter"></i></a>
<a><i class="fab fa-instagram"></i></a>
</div>
</div>
<br>
<p>© Copyright <a href="https://github.com/akram19-setif" > akram19-setif</a> 2021 all right reserved </p>
</div>
<!
</body>
</html>