forked from JaydaJ1/KAJJ
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprice.html
138 lines (124 loc) · 5.11 KB
/
price.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KAJJ Tutoring Center</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/1245c478a4.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<!-- create nav-bar by create the nav tag. -->
<nav class="menu container-fluid navbar navbar-style sticky-top">
<a href="index.html"><img class="logo" src="logo.png" alt="logo"></a>
<h2>KAJJ Academy</h2>
<div class=" menubar">
<div class="nav">
<ul class="nav justify-content-center ms-auto ">
<li class="nav-item">
<a class="nav-link active" href="./Aboutus.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./course.html">Course</a>
</li>
<li class="nav-item">
<a class="nav-link" href="price.html">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portalindex.html">Sign In </a>
</li>
</ul>
</div>
</div>
</nav>
<section class="price">
<div class="price-title">
<h1>Choose the best plan for you</h1>
</div>
<div class="price-card row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100 ">
<img src="afterclass.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">$20/hour</h1>
<p class="card-text"><span class= " class-type">One on One classes:</span> A tutor is waiting to see you soon.</p>
<button class="btn btn-lg btn-block btn-outline-dark">Sign Up</button>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="smalgr.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">$18/hour</h1>
<p class="card-text"><span class= " class-type">Small Group Classes:</span> Learning from friends is the fastest way to learn.</p>
<button class="btn btn-lg btn-block btn-outline-dark">Sign Up</button>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card-1 card h-100 ">
<img src="biggr.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title">$15/hour</h1>
<p class="card-text"><span class= " class-type">Group classes:</span> Build your confident in front of a big group. Here is your chance to be you.</p>
<button class="btn btn-lg btn-block btn-outline-dark">Sign Up</button>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
</body>
<footer class="footer">
<div class="container-fluid p-0">
<div class="row text-left">
<div class="col-md-5 col-md-5">
<h1>KAJJ Academy</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="pt-4 text-mute">Copyright @2022
<span>Rowdyhackers-Hackathon</span>
</p>
</div>
<div class="col-md-5">
<h4>Any Questions:</h4>
<p>Send us an email:</p>
<form class= "form-inline">
<div class="col-pl">
<div class="input-group pr-5">
<input type="text" class= "form-control bg-dark text-white" placeholder="Email">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-2 col-sm-12">
<h4>Follow us</h4>
<p>Help us go viral</p>
<!-- use collum class to keep all the icon stay in a row -->
<div class="collumn">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>