-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (126 loc) · 6.66 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
section {
padding: 2rem 0;
}
</style>
</head>
<body>
<!-- Bootstrap Basic Grid Practice -->
<!-- Bootstrap Basic Grid Practice -->
<!-- Bootstrap Basic Grid Practice -->
<!-- Navbar Here -->
<!-- Navbar Here -->
<!-- Navbar Here -->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand fw-semibold text-info fs-6 px-2 py-2" href="#header">High5_Tech</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-5">
<li class="nav-item">
<a class="nav-link active text-dark fw-semibold btn btn-outline-info me-4 px-3 border-0" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark btn btn-outline-info me-4 px-3 border-0" href="#pricing">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn btn-outline-info text-dark border-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Courses
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">JavaScript</a></li>
<li><a class="dropdown-item" href="#">Python</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Java</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- Navbar End -->
<!-- Navbar End -->
<!-- Header Section -->
<!-- Header Section -->
<!-- Header Section -->
<section id="header" class=" bg-info">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h2 class=" text-dark mb-3">Future World is Here</h2>
<h5>Join with Us today to reach your destination</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum quidem dolorem optio error? Quae, soluta!</p>
<a href="#pricing" class="btn btn-outline-dark btn-lg my-3">Join Today</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img src="images/header.webp" alt="Coding" class=" img-fluid">
</div>
</div>
</div>
<!-- Header Section End -->
<!-- Header Section End -->
<!-- Header Section End -->
<!-- Pricing Section Here -->
<!-- Pricing Section Here -->
<!-- Pricing Section Here -->
</section>
<section id="pricing" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2 class="text-dark fw-bold">Pricing</h2>
<p class="lead text-muted">Select Your Beneficial Plan Today!</p>
</div>
<div class="row justify-content-center align-items-center py-3 g-3 g-lg-0">
<div class="col-8 col-lg-4 col-xl-3 ">
<div class="card border-0">
<div class="card-body py-3 text-center px-2">
<h3 class=" card-title">Regular Plan</h3>
<p class="card-subtitle text-muted">Select this plan for your personal use.</p>
<p class="display-4 text-primary fw-bold">$39.90</p>
<p class="lead card-text text-muted d-none d-lg-block">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, iusto.</p>
<button class="btn btn-outline-primary">Buy Now</button>
</div>
</div>
</div>
<div class="col-9 col-lg-4 col-xl-3 ">
<div class="card border-2 border-primary">
<div class="card-body py-5 text-center px-2">
<h3 class=" card-title">Regular Plan</h3>
<p class="card-subtitle text-muted">Select this plan for your personal use.</p>
<p class="display-4 text-primary fw-bold">$39.90</p>
<p class="lead card-text text-muted d-none d-lg-block">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, iusto.</p>
<button class="btn btn-outline-primary">Buy Now</button>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3 ">
<div class="card border-0">
<div class="card-body py-3 text-center px-2">
<h3 class=" card-title">Regular Plan</h3>
<p class="card-subtitle text-muted">Select this plan for your personal use.</p>
<p class="display-4 text-primary fw-bold">$39.90</p>
<p class="lead card-text text-muted d-none d-lg-block">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, iusto.</p>
<button class="btn btn-outline-primary">Buy Now</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>