-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (84 loc) · 5.71 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
<!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">
<link rel="stylesheet" href="styles1.css">
<title>Document</title>
</head>
<body>
<div class="section" style="margin:80px 60px; display: flex;">
<div class="main2">
<h2 style="margin:20px 0px;font-size: 16px;font-weight:600;">
Summary</h2>
<p style="margin:20px 0px;">Number of bedrooms: <span1 id="valueD">0</span> </p>
<p style="margin:20px 0px;">Number of bathrooms: <span2 id="valueD2">0</span> </p>
<div class="optional-ele"></div>
<div>
<h1
style="margin:70px 10px 0 0;font-size: 18px;font-weight: 600;text-decoration-line: overline; color:rgb(226, 193, 6, 0.9);width:100%;">
Total
Price:<span style="color:#111;"> $</span>
<span3 id="total" style="color: #111;">0</span>
</h1>
</div>
</div>
<div class="main1">
<h2 style="text-align:center;font-size:22px;color: rgb(5, 31, 40);">Get started by choosing our
exclusive</h2>
<h2 style="text-align:center;font-size:22px;color: rgb(5, 31, 40);">cleaning package</h2>
<div class="pack" style="align-items: center; text-align:center; margin:40px 0;">
<button class="package" id="package"
style="text-align:center;background:rgb(201,174,17);color:rgb(5,31,40); cursor: pointer; font-weight: 700; outline:none; border-radius:4px;border:0px solid; justify-content:center; align-items:center; padding:10px 10px; margin: 40px px;">SEE
CLEANING PACKAGE</button>
<div class="hidden show" id="show">
<div class="shown" id="rooms">
<p class="ped">Bedroom</p>
<div class="minus"
style="padding:7px 12px;border-radius:50%; outline:none; border:0px solid;margin: 0 -10px; font-weight: 700;font-size: 14px;cursor: pointer; background:rgb(201, 174, 17);">
-</div>
<div style="margin:0 -20px;">0</div>
<div class="plus"
style="padding:7px 10px;border-radius:50%; outline:none; border:0px solid;margin: 0 -10px; font-weight: 700;font-size: 14px;cursor: pointer; background:rgb(201, 174, 17);">
+</div>
<p class="path" style="margin-left:40px;">Bathroom</p>
<div class="minus"
style="padding:7px 12px;border-radius:50%; outline:none; border:0px solid;margin: 0 -10px; font-weight: 700;font-size: 14px;cursor: pointer; background:rgb(201, 174, 17);">
-</div>
<div style="margin:0 -20px;">0</div>
<div class="plus"
style="padding:7px 10px;border-radius:50%; outline:none; border:0px solid;margin: 0 -10px; font-weight: 700;font-size: 14px;cursor: pointer; background:rgb(201, 174, 17);">
+</div>
</div>
<h2 class="show-options"
style="text-align:center;transition: 0.6s ease; font-weight:600; font-size: medium; color:rgb(5,31,40); cursor: pointer;">
OPTIONAL EXTRAS</h2>
<div class="options"
style="margin: 50px 0; align-items:center;text-align:center; display: none;">
<div
style="display:flex; margin:40px 15px;font-weight: 600; align-items: center; text-align: center;justify-content: center;">
<input style="margin: 0 5px 0 5px; padding:0 10px; cursor: pointer;" type="checkbox"
value="80" name="carpet steam cleaning">Carpet
Steam Cleaning
<input style="margin: 0 5px 0 85px; cursor: pointer;" type="checkbox" value="40"
name="additional carpet">Additional
Carpet
</div>
<div
style="display:flex; margin:40px 15px;font-weight: 600;align-items: center; text-align: center;justify-content: center;">
<input style="margin: 0 5px 0 5px; padding:0 10px; cursor: pointer;" type="checkbox"
value="-60" name="without carpet">Without Carpet
<input style="margin: 0 5px 0 85px; cursor: pointer;" type="checkbox" value="80"
name="additional bathroom">Additional Bathroom
</div>
<button id="btn"
style="padding: 8px 8px; outline:none;background:rgba(1, 23, 30);border:0px solid; color:#fff;border-radius:6px; font-weight:600;cursor:pointer;">Add
Extra</button>
</div>
</div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>