-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (138 loc) · 7.53 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Play App</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.css">
<link rel="stylesheet" href="css/font.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary" aria-label="Fourth navbar example">
<div class="container-lg">
<a class="navbar-brand px-5 text-uppercase fw-bold display-1" href="#"><i class="bi bi-bootstrap px-2"></i>Play</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mx-auto mb-2 mb-md-0">
<li class="nav-item px-3">
<a class="nav-link" >Home</a>
</li>
<li class="nav-item px-3">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item px-3">
<a class="nav-link active" href="#">Pricing</a>
</li>
<li class="nav-item px-3">
<a class="nav-link active">Team</a>
</li>
<li class="nav-item">
<a class="nav-link active">Contact</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-md-0">
<li class="nav-item px-3">
<a class="nav-link active" aria-current="page" href="#">Sign in</a>
</li>
<li class="nav-item text-light">
<a class="nav-link btn px-3 text-light" style="background-color: lightgrey opacity-75;" href="#">Sign up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="bg-primary">
<div class="container-lg text-light">
<div class="row justify-content-center align-items-center">
<div class="col-md-9 col-xl-8">
<div class="h1 fw-bold mb-3 text-center pt-5">Open-Source Web Template for SaaS, Startup, Apps, and More</div>
<div class="mb-4 fw-light text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, dolor asperiores. Facilis quaerat sit, officiis natus fuga qui, nemo ipsum ducimus alias excepturi voluptatibus vero?.</div>
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-light text-dark px-4 py-2 mb-5 ">Download Now</a>
<a href="#" class="btn text-light px-4 mb-5 ">Learn more <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="d-flex justify-content-center text-light h2 opacity-50 mb-4">
<i class="bi bi bi-bootstrap px-3"></i>
<i class="bi bi-bootstrap-reboot px-3"></i>
<i class="bi bi bi-bag-plus px-3"></i>
<i class="bi bi-book px-3"></i>
</div>
<div class="text-center m-0">
<img src="img/Replyco-website-with-simple-style-illustrations.jpg" alt="" class="img-fluid rounded">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-lg p-5">
<div class="row text-start">
<div class="col-md-7 col-xl-6">
<div class="text-primary h4 fw-bold">Features</div>
<div class="h1 fw-bold mb-3">Main Features Of Play</div>
<div class="text-secondary mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi suscipit cupiditate ea soluta aspernatur facilis laudantium a, natus error rem?</div>
</div>
</div>
<div class="row py-3 gy-sm-5">
<div class="col-6 col-lg-3">
<div class="mb-5 my-4"><i class="bi bi-gift h3 text-white bg-primary p-3 rounded-4"></i></div>
<div class="h5 fw-bold">High-quality Design
</div>
<div class=" text-secondary fw-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, sunt qui.</div>
<div class="my-5">
<a href="#" class="text-decoration-none text-secondary">Learn more <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mb-5 my-4"><i class="bi bi-gift h3 text-white bg-primary p-3 rounded-4"></i></div>
<div class="h5 fw-bold">All Essential Elements
</div>
<div class=" text-secondary fw-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, sunt qui.</div>
<div class="my-5">
<a href="#" class="text-decoration-none text-secondary">Learn more <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mb-5 my-4"><i class="bi bi-gift h3 text-white bg-primary p-3 rounded-4"></i></div>
<div class="h5 fw-bold">Free and Open Source
</div>
<div class=" text-secondary fw-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, sunt qui.</div>
<div class="my-5">
<a href="#" class="text-decoration-none text-secondary">Learn more <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mb-5 my-4"><i class="bi bi-gift h3 text-white bg-primary p-3 rounded-4"></i></div>
<div class="h5 fw-bold">Multipurpose Template
</div>
<div class=" text-secondary fw-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, sunt qui.</div>
<div class="my-5">
<a href="#" class="text-decoration-none text-secondary">Learn more <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<div class="px-5 pt-5" style="background-color: whitesmoke;">
<div class="container-lg p-5 bg-white mt-5">
<div class="row">
<div class="col-md-6 col-xl-5 text-start">
<div class="d-flex justify-content-start mt-3">
<a href="#" class="btn btn-primary text-light px-4 py-2 mb-3 rounded-0 ">About us</a>
</div>
<div class="h1 fw-bold mb-3">Brilliant Toolkit Nextgen Website Faster</div>
<div class="text-secondary mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nulla velit dignissimos culpa illo reiciendis dicta reprehenderit odit error iusto harum quibusdam ipsa, placeat voluptates qui. Dolores dolore ipsam, repudiandae illum mollitia, impedit commodi cumque velit.</div>
<div class="text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate at aspernatur iusto aliquid. Minima, illo repellat aliquid blanditiis dolores iste cupiditate vitae corrupti deleniti numquam.</div>
</div>
<div class="col-md-6 col-xl-7">
<img src="img/web.jpg" alt="" class="img-fluid px-0">
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>