-
Notifications
You must be signed in to change notification settings - Fork 0
/
0-pricing.html
199 lines (197 loc) · 12.8 KB
/
0-pricing.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>SmileSchool</title>
</head>
<body>
<div class="pricing">
<!-- HEADER -->
<header class="container d-flex justify-content-between pt-4 flex-sm-row flex-column">
<h1 class="d-flex col-xl-9 col-md-7 col-sm-6 col-12 align-items-center mt-0 justify-content-center justify-content-sm-start flex-sm-row flex-column">
<a href="" class="smileOff mr-3"></a>
<a href="" class="smileSchool mt-sm-0 mt-2"></a>
</h1>
<!-- Responsive menu for all screen sizes -->
<a class="iconMenu float-left position-absolute d-sm-none text-decoration-none" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true"aria-controls="collapseExample"></a>
<div class="navMenu text-decoration-none">
<nav class="nav text-white col-xl-3 col-sm-6 col-12 col-md-5 d-sm-flex collapse px-0 " id="collapseExample">
<ul class="d-flex justify-content-sm-between align-items-center px-0 w-100 flex-column flex-sm-row ">
<li class="nav-link"><a><b>COURSES</b></a></li>
<li class="nav-link"><a><b>PRICING</b></a></li>
<li class="nav-link"><a><b>LOGIN</b></a></li>
</ul>
</nav>
</div>
</header>
<div class="text-center text-white position-absolute pricing-section w-100">
<div class="d-flex align-items-center justify-content-center m-auto">
<h2 class="mb-0">What is</h2>
<img src="images/smile_off.png" class="logo-pricing ml-3">
<p class="s-title text-white ml-2 mt-4">SmileSchool</p>
<h2 class="ml-2 mb-0">?</h2>
</div>
<h1 class="p-title font-weight-bold">Go pro!</h1>
<!-- PRICES GRID -->
<div class="p-container text-center align-content-end d-flex justify-content-end m-auto pt-5">
<div class="col-sm-4 col-6 pt-3">
<button class="btn btn-primary border-0 rounded mb-3 text-center btn-color shadow-lg">BUY 3 MONTHS</button>
<h2 class="total text-white font-weight-bold">$3.60</h2>
<p class="text-white text-muted">$1.20/month</p>
</div>
<div class="col-sm-4 col-6 pt-3">
<button class="btn btn-primary border-0 rounded mb-3 text-center btn-color shadow-lg">BUY 1 YEAR</button>
<h2 class="total text-white font-weight-bold">$12.99</h2>
<p class="text-white text-muted">$1.20/month</p>
</div>
</div>
<div class="d-flex col-12 m-auto">
<table class="table table-dark table-hover bg-transparent text-white">
<tbody>
<tr class="row m-auto">
<th class="col-4 text-left font-weight-light" scope="row">Unlimitted access to all tutorials</th>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
</tr>
<tr class="row m-auto">
<th class="col-4 text-left font-weight-light" scope="row">Access SmileSchool private forum</th>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
</tr>
<tr class="row m-auto">
<th class="col-4 text-left font-weight-light" scope="row">Access Smiles contests & Smiles Analysis</th>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
</tr>
<tr class="row m-auto">
<th class="col-4 text-left font-weight-light" scope="row">Get a free toothbrush</th>
<td class="col-4 text-center"></td>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
</tr>
<tr class="row m-auto">
<th class="col-4 text-left" scope="row">
<div class="row d-flex flex-column mx-auto ">
<img src="./images/signal.png" width="82" height="35">
<p class="font-weight-light mt-2">Exclusive discount on all Signal products</p>
</div>
</th>
<td class="col-4 text-center"></td>
<td class="col-4 text-center"><span class="iconCheck"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<main>
<section class="carousel_piece py-5 text-white">
<div id="my_carousel" class="carousel slide my-5" data-ride="carouse">
<a class="carousel-control-prev d-flex align-items-start align-items-sm-center pt-5 pt-sm-0" href="#my_carousel" role="button" data-slide="prev">
<img class="p-arrow" src="./images/arrow_white_left.png" aria-hidden="true">
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next d-flex align-items-start align-items-sm-center pt-5 pt-sm-0" href="#my_carousel" role="button" data-slide="next">
<img class="n-arrow" src="./images/arrow_white_right.png" aria-hidden="true">
<span class="sr-only">Next</span>
</a>
<div class="carousel-inner">
<div class="carousel-item active px-5">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12 col-sm-4 d-flex justify-content-sm-end">
<img src="./images/profile_5.jpg" class="rounded-circle profileCarousel mx-auto">
</div>
<div class="col mr-3 pt-5 pt-sm-0">
<p class="font-weight-light mb-3"> « Those tutorials are concise and go straight to the point. I can’t think of a
better place to learn smiling. And it’s so fun!</p>
<h6 class="font-weight-bold m-0 mb-1">Person Name</h6>
<p class="font-italic m-0">weather presenter</p>
</div>
</div>
</div>
<div class="carousel-item px-5">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12 col-sm-4 d-flex justify-content-sm-end">
<img src="./images/profile_5.jpg" class="rounded-circle profileCarousel mx-auto">
</div>
<div class="col mr-3 pt-5 pt-sm-0">
<p class="font-weight-light mb-3"> « Those tutorials are concise and go straight to the point. I can’t think of a
better place to learn smiling. And it’s so fun!</p>
<h6 class="font-weight-bold m-0 mb-1">Person Name</h6>
<p class="font-italic m-0">weather presenter</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="m-auto p-auto text-dark bg-white">
<div class="container">
<div class="row m-auto">
<div class="col-12 my-3">
<h1 class="text-center display-4">F.A.Q.</h1>
</div>
<div class="row py-4 d-flex justify-content-around">
<div class="col-11 col-sm-6 my-2">
<h5 class="font-weight-bold">How does this work?</h5>
<p class="mt-4 mb-5 text-secondary font-weight-light">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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-11 col-sm-6 my-2">
<h5 class="font-weight-bold">How does this work?</h5>
<p class="mt-4 mb-5 text-secondary font-weight-light">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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-11 col-sm-6 my-2">
<h5 class="font-weight-bold">How does this work?</h5>
<p class="mt-4 mb-5 text-secondary font-weight-light">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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-11 col-sm-6 my-2">
<h5 class="font-weight-bold">How does this work?</h5>
<p class="mt-4 mb-5 text-secondary font-weight-light">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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
<!-- FOOTER -->
<footer class="footer_piece">
<div class="d-flex justify-content-md-around justify-content-sm-between align-items-center flex-sm-row flex-column py-sm-5 pt-5 text-white">
<div>
<a href="" class="col-12 col-sm-1 pr-2">
<img src="images/smile_off.png" width="30" height="30">
</a>
<a href="" class="col-12 col-sm-1">
<img src="images/logo.png" width="120" height="30">
</a>
</div>
<div class="mt-3 mt-sm-0 pr-sm-3 pr-md-0">
<a href="https://www.facebook.com/HolbertonSchoolTulsa/"><i class="icon-facebook mx-2"></i></a>
<a href="https://twitter.com/holbertonschool"><i class="icon-twitter mx-auto "></i></a>
<a href="https://www.instagram.com/holbertonschool"><i class="icon-instagram mx-2"></i></a>
</div>
</div>
<div class=" d-flex justify-content-center pt-5 pt-sm-0 pb-5">
<p class="copyright font-weight-light text-secondary">©smileschool 2020</p>
</div>
</footer>
</html>