-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (212 loc) · 11.8 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>Bootstrap</title>
<!-- bootstrap link -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- stylesheet link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--------------------------------------------------------------------------------------------------
navbar start
---------------------------------------------------------------------------------------------------->
<header class="py-5 navigation">
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg navbar-expand-md navbar-light bg-light">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Bootstrap</a>
<button class="navbar-toggler" type="button" 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>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item px-2">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link btn background-gradient text-white rounded-pill px-3" href="#"><svg
xmlns="http://www.w3.org/2000/svg" width="20px" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
Send
Feedback</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- banner section -->
</div>
</header>
<!-----------------------------------------------------------------------------------------------
navbar end
------------------------------------------------------------------------------------------------>
<!-- main section start -->
<main>
<div class="container ">
<div class="row">
<!-- leftside -->
<div class="col-md-6">
<div class="">
<h1 class="display-2 fw-bold text-color w-100 ">Showcase your app <span
class="t-color">beautifully</span></h1>
<p class="fs-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum, beatae?Lorem
ipsum dolor sitl
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
amet.</p>
<div class="my-5">
<img src="./img/app-store.png" alt="">
<img src="./img/google-play.png" alt="" srcset="">
</div>
</div>
</div>
<!-- right side -->
<div class="col-md-6">
<div class="d-flex align-items-center justify-content-center ms-3">
<img src="./img/phone.png" alt="" srcset="">
</div>
</div>
</div>
</div>
<!-- Banner section start -->
<section class="background-gradient my-5">
<div class=" d-flex flex-column justify-content-center align-items-center py-5">
<h2 class="text-white text-center w-50">"An intuitive solution to a common problem that we all face,
wrapped
up in a
single app!"</h2>
<img src="./img/tnw-logo.svg" class="my-3" height="50" alt="" srcset="">
</div>
</section>
<!-- Feature section start -->
<section>
<div class="container">
<div class="row">
<!-- leftside -->
<div class="col-md-6">
<div>
<img src="./img/phone.png" height="" alt="" srcset="">
</div>
</div>
<!-- leftside end -->
<!-- right side start -->
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="text-center border border-primary p-3 my-3">
<svg xmlns="http://www.w3.org/2000/svg"
class=" background-gradient text-white broder rounded-circle py-2 px-2"
width="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<h2>Device Mockups</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quisquam!</p>
</div>
</div>
<div class="col-md-6">
<div class="text-center border border-primary p-3 my-3">
<svg xmlns="http://www.w3.org/2000/svg"
class=" background-gradient text-white broder rounded-circle py-2 px-2"
width="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<h2>Device Mockups</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quisquam!</p>
</div>
</div>
<div class="col-md-6">
<div class="text-center border border-primary p-3 my-3">
<svg xmlns="http://www.w3.org/2000/svg"
class=" background-gradient text-white broder rounded-circle py-2 px-2"
width="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<h2>Device Mockups</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quisquam!</p>
</div>
</div>
<div class="col-md-6">
<div class="text-center border border-primary p-3 my-3">
<svg xmlns="http://www.w3.org/2000/svg"
class=" background-gradient text-white broder rounded-circle py-2 px-2"
width="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<h2>Device Mockups</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quisquam!</p>
</div>
</div>
</div>
</div>
<!-- right side end -->
</div>
</div>
</section>
<!-- Feature section end -->
<section class="hight-add my-5">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class=" pt-5 flex-column d-flex justify-content-center align-items-center">
<h1 class="display-3 text-color fw-bold">Enter a new age of web design</h1>
<p class="fs-5 text-mute">This section is perfect for featuring some information about your
application, why it was
built, the problem it solves,
or anything else! There's plenty of space for text here, so don't worry about writing
too much.</p>
</div>
</div>
<div class="col-md-6">
<div class="border rounded-circle ">
<img src="./img/web-design.png" class="rounded-circle" alt="" srcset="">
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------end--------------------------------------------------- -->
<!----------------------------- Stop writing section: start ------------------------------- -->
<section class="stop-witing">
<div class="container d-flex flex-column justify-content-center align-items-start h-100">
<h1 class="display-2 text-white fw-bold w-75">Stop waiting. Start building.</h1>
<button type="button" class="btn btn-outline-light rounded-pill px-3 py-2">Download Free</button>
</div>
</section>
<!----------------------------- Stop writing section: end------------------------------- -->
<!-- Get the app setcion: start -->
<section class="background-gradient ">
<div class=" d-flex flex-column justify-content-center align-items-center py-5">
<h2 class="text-white text-center py-2 ">Get the app now!</h2>
<div>
<img src="./img/google-play.png" alt="" srcset="">
<img src="./img/app-store.png" alt="" srcset="">
</div>
</section>
<!-- Get the app setcion: end-->
</main>
<!-- main section end -->
<!-- footer section :start -->
<footer class="bg-dark p-3">
<div class="text-center">
<small class=" text-white">©Your Website 2021. All Rights Reserved.</small>
</div>
</footer>
<!-- footer section :end-->
<!-- js link -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>