-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
236 lines (230 loc) · 10.4 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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CoWorking Space</title>
<meta property="og:title" content="CoWorking Space" />
<meta property="og:site_name" content="CoWorking Space" />
<meta property="og:url" content="https://aimalamiri.github.io/CoWorking-Space/" />
<meta
property="og:description"
content="Coworking Space is a two-page HTML template developed with HTML, CSS, Bootstrap 5, and JavaScript."
/>
<meta property="og:type" content="business.business" />
<meta property="og:image" content="https://i.postimg.cc/sDwDHV4S/coworking-space.png" />
<link href="./fonts/cocogoose/style.css" rel="stylesheet" />
<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=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400&family=Nanum+Gothic&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" />
<link href="./css/styles.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="bg-gray p-1 d-none d-md-block">
<div class="container d-flex flex-row-reverse align-items-center">
<a href="#" class="fs-7 text-white hover:text-light-gray ms-4">English</a>
<a href="#" class="fs-7 text-white hover:text-light-gray ms-4">My Page</a>
<a href="#" class="fs-7 text-white hover:text-light-gray ms-4">Logout</a>
<a href="#" class="text-white hover:text-light-gray ms-4">
<span class="bi bi-twitter"></span>
</a>
<a href="#" class="text-white hover:text-light-gray">
<span class="bi bi-facebook"></span>
</a>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow py-2" id="top-navbar">
<div class="container">
<button
class="navbar-toggler border-0"
type="button"
id="navbar-btn"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand d-none d-md-block" href="./">
<img src="./images/logo.png" alt="" height="51" />
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto fw-bold">
<li class="nav-item me-5">
<a class="nav-link" aria-current="page" href="./about.html">About</a>
</li>
<li class="nav-item me-5">
<a class="nav-link" href="#">Program</a>
</li>
<li class="nav-item me-5">
<a class="nav-link" href="#">Join</a>
</li>
<li class="nav-item me-5">
<a class="nav-link" href="#">Sponser</a>
</li>
<li class="nav-item me-5">
<a class="nav-link">News</a>
</li>
<li class="nav-item">
<button class="nav-link btn btn-outline-primary rounded-0 text-orange hover:text-light-gray px-3">
Join Now
</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<section class="hero">
<div class="container py-5">
<div class="hero-content">
<div class="py-2 py-md-5"></div>
<h3 class="text-orange font-cg-light h2">"Hello, Working World!"</h3>
<h1 class="text-gradient font-cg-regular hero-title">COWORKING SPACE THE NEW WORLD CLASS OFFICE</h1>
<div class="hero-text font-cg-light">
A fun and modern office where people from different countries who believe in the value of development and
possitivity comes together to build and develop their thoughts.
</div>
<div class="hero-time h1 fw-bold text-sm-start text-center">
Sun - Mon 8am - 5pm (GMT+4:30)
<div class="clearfix"></div>
<span class="fw-lighter">@ Shahr-e-Naw Ansari Square, Kabul, Afghanistan</span>
</div>
</div>
</div>
</section>
<section class="facilities">
<div class="container py-5 text-center">
<h2 class="h2 text-white mt-4">Our Facilities</h2>
<div class="small-border mx-auto"></div>
<div class="row justify-content-between gap-1 mt-5">
<div class="col-md col-12 card facility-card text-center py-4 px-3 rounded-0">
<div class="row align-items-center">
<span class="col-2 col-md-12 bi bi-wifi text-white h1"></span>
<h5 class="col-4 col-md-12 text-orange my-3">Fast Internet</h5>
<p class="col-6 col-md-12 text-white fs-7 my-auto">
Use fast and dedicated internet on your working space.
</p>
</div>
</div>
<div class="col-md col-12 card facility-card text-center py-4 px-3 rounded-0">
<div class="row align-items-center">
<span class="col-2 col-md-12 bi bi-cup-straw text-white h1"></span>
<h5 class="col-4 col-md-12 text-orange my-3">Refreshment</h5>
<p class="col-6 col-md-12 text-white fs-7 my-auto">
Get yourself refreshed with our basic refreshments: tea, coffee, water.
</p>
</div>
</div>
<div class="col-md col-12 card facility-card text-center py-4 px-3 rounded-0">
<div class="row align-items-center">
<span class="col-2 col-md-12 bi bi-playstation text-white h1"></span>
<h5 class="col-4 col-md-12 text-orange my-3">Games</h5>
<p class="col-6 col-md-12 text-white fs-7 my-auto">
Enjoy from video games to with other co working space friends.
</p>
</div>
</div>
<div class="col-md col-12 card facility-card text-center py-4 px-3 rounded-0">
<div class="row align-items-center">
<span class="col-2 col-md-12 bi bi-people text-white h1"></span>
<h5 class="col-4 col-md-12 text-orange my-3">Meeting Room</h5>
<p class="col-6 col-md-12 text-white fs-7 my-auto">
Fully furnished and up to 10 people accommodable space for your training sessions, events, and
meetings.
</p>
</div>
</div>
<div class="col-md col-12 card facility-card text-center py-4 px-3 rounded-0">
<div class="row align-items-center">
<span class="col-2 col-md-12 bi bi-printer text-white h1"></span>
<h5 class="col-4 col-md-12 text-orange my-3">Access to Printer</h5>
<p class="col-6 col-md-12 text-white fs-7 my-auto">
Every item you need for your work: binders, paper, tape, erasers, markers, and a printing machine.
</p>
</div>
</div>
</div>
<a href="#" class="text-white d-none d-sm-block my-5 text-decoration-underline"
>SEE THE WHOLE FACILITY LIST</a
>
<button class="btn btn-primary rounded-0 py-4 px-4 my-4 d-sm-none">Join CoWorking Space Now</button>
</div>
</section>
<section class="team mb-3">
<div class="container py-5">
<div class="text-center">
<h2 class="h3 mt-4">Our Team Members</h2>
<div class="small-border mx-auto"></div>
</div>
<div class="row mt-4" id="team-members"></div>
<button class="btn btn-outline-dark w-100 py-2 mt-4 d-sm-none">
More <span class="bi bi-chevron-down text-orange ms-2"></span>
</button>
</div>
</section>
<section class="partners py-5 bg-gray">
<div class="container">
<div class="text-center">
<h2 class="h3 mt-4 text-light-gray">Partners</h2>
<div class="small-border mx-auto"></div>
</div>
<div class="partners-logo d-flex flex-wrap gap-4 justify-content-around my-5">
<img src="./images/amazon.png" alt="" />
<img src="./images/google.png" alt="" />
<img src="./images/paypal.png" alt="" />
<img src="./images/netflix.png" alt="" />
<img src="./images/airbnb.png" alt="" />
</div>
</div>
</section>
</main>
<footer class="container py-5">
<div class="row align-items-center my-4">
<div class="col-6 col-md-3 mb-4 mb-sm-0">
<img src="./images/logo.png" class="w-100" alt="" />
</div>
<div class="col-6 col-md-9 px-0 px-sm-5 text-gray">
<h6 class="fw-bold footer-text">2022 CoWorking Space Afghanistan, Some Rights Reserved.</h6>
<p class="d-none d-md-block">
All content on the website, unless otherwise specified, is available under a Creative Commons Attribution
2.0 Afghanistan license.
</p>
</div>
</div>
</footer>
<div class="popup" id="popup">
<div class="popup-content">
<h2>10% Off!</h2>
<p>Get 10% off on your first month!</p>
<button id="close-popup">Close</button>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"
></script>
<script src="./js/scripts.js"></script>
</body>
</html>