-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
203 lines (187 loc) · 14.2 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
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
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="https://i.ibb.co/kJPR38Y/favicon-32x32.png">
<title>Frontend Mentor | Interactive rating component</title>
<link rel="stylesheet" href="style.css">
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
transform: translateY(2rem);
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<a class="reload" href="#" style="width: max-content; height: 15%; margin-bottom: 30px;">
<div class="fav ">
<div class="icon"><svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
fill="#FC7614" />
</svg></div>
</div>
</a>
<h1 class="heading">How did we do?</h1>
<p class="para">Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering!</p>
<div class="number ">
<!--number-->
<button class="numbers">1</button>
<!--numbers-->
<button class="numbers">2</button>
<!--numbers-->
<button class="numbers">3</button>
<!--numbers-->
<button class="numbers">4</button>
<!--numbers-->
<button class="numbers">5</button>
<!--numbers-->
<!-- <button class="test active">6</button> -->
</div>
<button class="btn">Submit</button>
<main class="fornone">
<a class="reload" href="#" style="width: max-content; height: 0; transform: translateY(-50px);">
<div class="fav ">
<div class="icon"><svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
fill="#FC7614" />
</svg></div>
</div>
</a>
<div class="logo">
<svg width="162" height="108" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path
d="M30 93.744h-.044a23.456 23.456 0 0 1-1.61-.189.543.543 0 0 1 .155-1.076c.52.076 1.04.135 1.563.178a.538.538 0 0 1-.043 1.076l-.022.01Zm5.37-.205a.538.538 0 0 1-.08-1.076 19.51 19.51 0 0 0 1.54-.306.536.536 0 0 1 .645.403.538.538 0 0 1-.397.646c-.537.129-1.074.236-1.611.323l-.097.01Zm-12.137-1.312a.536.536 0 0 1-.183-.033 24.346 24.346 0 0 1-1.525-.608.539.539 0 0 1 .424-.99c.483.21.983.404 1.472.587a.538.538 0 0 1-.188 1.044Zm18.759-.829a.538.538 0 0 1-.242-1.022c.467-.226.934-.479 1.39-.742a.536.536 0 1 1 .538.93c-.478.275-.967.538-1.45.78a.536.536 0 0 1-.258.054h.022Zm-24.994-2.292a.536.536 0 0 1-.29-.08c-.457-.29-.913-.597-1.36-.91a.536.536 0 1 1 .612-.882c.436.307.876.597 1.322.883a.538.538 0 0 1-.284.99Zm30.772-1.544a.537.537 0 0 1-.408-.193.539.539 0 0 1 .06-.759l.117-.124c.355-.306.715-.624 1.074-.957a.537.537 0 1 1 .73.79c-.375.345-.74.673-1.106.985l-.123.102a.537.537 0 0 1-.344.156Zm-36.326-2.69a.537.537 0 0 1-.36-.14c-.402-.37-.8-.747-1.18-1.124a.539.539 0 0 1 .751-.769c.376.371.763.737 1.155 1.076a.538.538 0 0 1 .032.764.537.537 0 0 1-.398.194Zm41.305-2.21a.537.537 0 0 1-.398-.899c.355-.393.715-.79 1.074-1.2a.537.537 0 1 1 .806.71c-.365.415-.725.818-1.074 1.21a.537.537 0 0 1-.408.152v.026ZM6.724 79.723a.537.537 0 0 1-.424-.204 41.79 41.79 0 0 1-.989-1.308.539.539 0 0 1 .124-.753.536.536 0 0 1 .746.124c.312.425.629.85.962 1.27a.539.539 0 0 1-.42.871Zm50.579-2.383a.539.539 0 0 1-.419-.877c.338-.414.677-.828 1.015-1.253a.537.537 0 1 1 .838.672l-1.02 1.259a.537.537 0 0 1-.414.199ZM2.9 73.887a.537.537 0 0 1-.473-.312c-.257-.5-.499-1-.714-1.485a.539.539 0 0 1 .685-.72c.133.052.24.154.298.285.21.462.44.946.687 1.425a.539.539 0 0 1-.483.786v.021Zm58.753-2.028a.537.537 0 0 1-.424-.866l.988-1.275a.537.537 0 1 1 .848.656l-.988 1.275a.537.537 0 0 1-.424.188v.022ZM.682 67.286a.537.537 0 0 1-.537-.462A17.06 17.06 0 0 1 0 65.16a.538.538 0 1 1 1.074 0c.018.519.063 1.036.134 1.55a.539.539 0 0 1-.462.607l-.064-.032Zm65.24-.973a.537.537 0 0 1-.43-.867l.984-1.28a.536.536 0 0 1 .853.65l-.993 1.265a.537.537 0 0 1-.414.21v.022Zm88.49-2.96a.724.724 0 0 1-.15 0 .537.537 0 0 1-.366-.666c.134-.474.28-.99.424-1.544a.538.538 0 0 1 .655-.388.537.537 0 0 1 .382.662c-.145.538-.29 1.076-.43 1.565a.537.537 0 0 1-.515.372Zm-84.247-2.592a.536.536 0 0 1-.424-.867l.983-1.28a.54.54 0 1 1 .854.662l-.989 1.275a.537.537 0 0 1-.413.183l-.01.027Zm-68.924-.382a.536.536 0 0 1-.156 0 .538.538 0 0 1-.355-.673 21.47 21.47 0 0 1 .537-1.565.537.537 0 1 1 .994.403c-.193.49-.37.985-.537 1.474a.537.537 0 0 1-.473.334l-.01.027Zm154.782-3.863a.311.311 0 0 1-.102 0 .538.538 0 0 1-.43-.624c.097-.538.188-1.044.28-1.582a.545.545 0 1 1 1.073.178c-.09.538-.182 1.076-.279 1.614a.537.537 0 0 1-.542.414ZM74.46 55.209a.537.537 0 0 1-.424-.872l1.004-1.27a.537.537 0 1 1 .838.673l-.999 1.264a.537.537 0 0 1-.408.205h-.01ZM4.436 54.165a.539.539 0 0 1-.43-.855c.323-.436.666-.872 1.02-1.297a.537.537 0 1 1 .822.694 22.92 22.92 0 0 0-.977 1.237.537.537 0 0 1-.435.221Zm74.408-4.417a.539.539 0 0 1-.414-.877l1.026-1.248a.537.537 0 1 1 .843.667l-1.02 1.243a.537.537 0 0 1-.435.215Zm78.124-.161h-.043a.538.538 0 0 1-.494-.576c.043-.538.075-1.076.107-1.614a.538.538 0 0 1 .564-.538c.295.018.52.27.505.565a54.253 54.253 0 0 1-.107 1.614.538.538 0 0 1-.532.549ZM9.28 49.13a.537.537 0 0 1-.338-.958c.8-.646 1.316-.99 1.337-1.006a.536.536 0 0 1 .59.898s-.499.334-1.25.942a.536.536 0 0 1-.35.124h.011Zm74.075-4.74a.537.537 0 0 1-.403-.888c.35-.408.704-.817 1.074-1.22a.537.537 0 1 1 .806.71c-.355.403-.71.806-1.074 1.215a.537.537 0 0 1-.414.183h.01Zm73.742-1.797a.537.537 0 0 1-.537-.505 54.325 54.325 0 0 0-.118-1.614.54.54 0 1 1 1.074-.097c.048.538.091 1.076.118 1.614 0 .285-.221.52-.505.538l-.032.064Zm-69.064-3.416a.537.537 0 0 1-.392-.904c.365-.398.735-.79 1.106-1.178a.536.536 0 0 1 .779.737l-1.074 1.173a.537.537 0 0 1-.44.172h.02Zm68.092-3.502a.537.537 0 0 1-.537-.409 22.668 22.668 0 0 0-.408-1.533.539.539 0 0 1 1.03-.307c.151.538.296 1.05.425 1.587a.539.539 0 0 1-.398.651l-.112.01Zm-63.221-1.512a.537.537 0 0 1-.376-.92l1.165-1.13a.537.537 0 1 1 .763.76c-.387.365-.768.741-1.155 1.118a.537.537 0 0 1-.419.172h.022Zm5.14-4.745a.537.537 0 0 1-.355-.941l1.235-1.076a.539.539 0 1 1 .693.828c-.408.34-.817.689-1.225 1.039a.537.537 0 0 1-.37.15h.021Zm55.197-.575c-.247-.468-.505-.931-.779-1.378a.537.537 0 1 1 .918-.554c.285.463.537.947.811 1.431a.539.539 0 0 1-.478.791.537.537 0 0 1-.472-.29ZM103.5 25.055a.539.539 0 0 1-.322-.974c.44-.322.88-.634 1.32-.946a.537.537 0 0 1 .845.394.54.54 0 0 1-.227.488l-1.3.93a.536.536 0 0 1-.338.108h.022Zm46.132-1.56a.537.537 0 0 1-.381-.161c-.359-.359-.74-.717-1.144-1.076a.536.536 0 1 1 .709-.807c.408.36.81.742 1.197 1.135a.539.539 0 0 1 0 .759.537.537 0 0 1-.403.15h.022Zm-40.279-2.28a.537.537 0 0 1-.274-1.001c.473-.275.946-.538 1.418-.797a.54.54 0 0 1 .81.474.542.542 0 0 1-.273.468c-.467.253-.929.538-1.39.785a.536.536 0 0 1-.344.07h.053Zm34.737-1.894a.504.504 0 0 1-.258-.07c-.451-.248-.924-.49-1.407-.716a.539.539 0 0 1 .462-.974c.499.237.988.49 1.46.748a.538.538 0 0 1-.257 1.012Zm-28.49-1.195a.537.537 0 0 1-.2-1.038c.505-.204 1.01-.398 1.52-.581a.537.537 0 0 1 .366 1.011c-.495.178-.989.366-1.483.57a.536.536 0 0 1-.247.038h.043Zm22.045-1.452a.777.777 0 0 1-.156 0c-.505-.15-1.02-.29-1.53-.41a.553.553 0 0 1 .252-1.075c.537.129 1.074.269 1.611.425a.542.542 0 0 1-.15 1.076l-.027-.016Zm-15.456-.597a.537.537 0 0 1-.118-1.066c.537-.107 1.074-.21 1.61-.29a.543.543 0 0 1 .59.735.544.544 0 0 1-.423.34c-.537.082-1.036.178-1.557.286a.365.365 0 0 1-.102-.005Zm8.555-.603h-.038a32.41 32.41 0 0 0-1.579-.06.538.538 0 0 1 0-1.075c.537 0 1.074.027 1.638.06a.538.538 0 0 1-.032 1.075h.01Z"
fill="#E6E6E6" />
<path fill="#39475F" d="M119.847 100.221H58.146L70.332.793h55.025l5.747 7.601z" />
<path fill="#61728D" d="M113.172 100.221H51.465L63.651.793h61.706z" />
<path fill="#181F27" d="M110.132 81.354H58.576l8.791-71.695h51.557z" />
<path fill="#1E252E" d="m92.743 50.055 14.897.177-.29 2.308-14.607-.252z" />
<path fill="#39475F" d="m51.465 100.221 7.422 6.864 60.037.915.923-7.779z" />
<path
d="M99.096 29.058s2.572.183 3.888 5.03c1.316 4.847.865 18.377.865 18.377l-11.096-.177s-5.537-20.137 6.343-23.23Z"
fill="#2D394B" />
<path fill="#FC7614" d="M5.42 32.843 45.778 0l21.18 26.119L26.603 58.96z" />
<path fill="#FFF" d="M27.49 21.931 45.56 7.226l3.497 4.313-18.07 14.706z" />
<path
d="m25.272 45.175 5.338-4.345a2.772 2.772 0 0 1 3.902.404 2.781 2.781 0 0 1-.404 3.91l-5.338 4.344a2.772 2.772 0 0 1-3.903-.404 2.781 2.781 0 0 1 .405-3.91ZM37.33 35.365l16.89-13.743a2.772 2.772 0 0 1 3.902.404 2.781 2.781 0 0 1-.405 3.909L40.83 39.679a2.772 2.772 0 0 1-3.903-.404 2.781 2.781 0 0 1 .405-3.91Z"
fill="#FFF" opacity=".46" />
<ellipse fill="#FFF" opacity=".3" cx="17.937" cy="33.636" rx="3.673" ry="3.68" />
<ellipse fill="#FFF" opacity=".3" cx="21.664" cy="30.284" rx="3.673" ry="3.68" />
<path
d="M99.096 29.058s-5.838 2.103-3.803 18.581c1.493 12.073-3.55 28.056-11.004 28.25-7.454.193-21.202-.463-21.202-.463s7.159-18.56 5.676-34.145a14.786 14.786 0 0 1 .763-6.456c.87-2.373 2.487-4.842 5.494-5.245 6.004-.818 24.076-.522 24.076-.522Z"
fill="#BAD6FA" />
<path
d="m58.957 76.63 26.342-.537s-4.017-3.992-4.27-14.154l-36.234.538a31.494 31.494 0 0 0 2.841 7.531 12.547 12.547 0 0 0 11.32 6.623Z"
fill="#546F8D" />
<path fill="#2D394B" d="m78.21 14.834-.918 6.041h26.621l.806-6.041z" />
<path
d="M85.54 86.19c-2.872-2.517-7.416-2.022-9.446 1.222a4.955 4.955 0 0 0-.8 2.647c0 3.98 2.744 6.59 8.227 5.492 4.184-.839 5.779-6.073 2.02-9.36Z"
fill="#FFF" opacity=".48" />
<ellipse fill="#FC7614" cx="147.188" cy="81.542" rx="14.812" ry="14.837" />
<path
d="M73.731 35.75a.537.537 0 0 1-.038-1.076c.113 0 11.343-.828 17.363-.29a.54.54 0 0 1-.096 1.076c-5.908-.538-17.079.274-17.186.285l-.043.005Zm-.891 7.279a.538.538 0 0 1-.038-1.076c.113 0 11.342-.828 17.363-.29a.54.54 0 0 1-.097 1.076c-5.907-.538-17.073.28-17.185.285l-.043.005Zm-.102 7.564a.538.538 0 0 1-.043-1.076c.112 0 11.347-.829 17.362-.29a.54.54 0 0 1-.096 1.075c-5.908-.538-17.073.28-17.186.286l-.037.005Zm-.715 7.564a.537.537 0 0 1-.037-1.076c.112 0 11.342-.829 17.362-.285a.54.54 0 0 1-.096 1.076c-5.908-.538-17.073.28-17.186.285h-.043Z"
fill="#FFF" />
</g>
</svg>
</div>
<div class="submit-adder">
<!-- Selected rating submit Here -->
<p>You Stared <span class="add"></span> out of 5</p>
</div>
<article>
<h1>Thank you!</h1>
<p>We appreciate you taking the time to give a rating. If you ever need more support, don’t hesitate to get in
touch!</p>
</article>
</main>
</div>
<div class="attribution">
<span style="color: #777;">Challenge by</span><a href="https://www.frontendmentor.io?ref=challenge"
target="_blank">Frontend Mentor</a>.
<span style="color: #777;">Coded by</span><a href="#">Gourab Chatterjee</a>
</div>
<script>
// for select all content
const fav = document.querySelector(".fav")
const heading = document.querySelector(".heading")
const para = document.querySelector(".para")
const number = document.querySelector(".number")
const isShow = document.querySelector("main")
const add = document.querySelector(".add")
const container = document.querySelector(".container")
const reload = document.querySelectorAll(".reload")
// for Btns
const buttonColorChange = Array.from(document.querySelectorAll(".numbers"))
const btn = document.querySelector(".btn")
function forNoneAdder() {
fav.classList.add("fornone")
heading.classList.add("fornone")
para.classList.add("fornone")
number.classList.add("fornone")
btn.classList.add("fornone")
}
buttonColorChange.forEach((e) => {
e.addEventListener("click", () => {
buttonColorChange.forEach((e) => {
btn.classList.remove("ani")
e.classList.remove("active")
})
e.classList.add("active")
})
})
btn.addEventListener("click", (e) => {
buttonColorChange.forEach((e) => {
if (e.classList.length === 2) {
setTimeout(() => {
forNoneAdder()
isShow.classList.remove("fornone")
add.innerHTML = e.innerHTML
}, 250);
container.classList.add("isShow")
} else {
btn.classList.add("ani")
setTimeout(() => {
btn.classList.remove("ani")
}, 500)
}
})
})
reload.forEach((e) => {
e.addEventListener("click", () => {
if (container.classList.length === 2) {
isShow.classList.add("main-ani3")
setTimeout(() => {
window.location.reload()
}, 1000);
} else {
window.location.reload()
}
})
})
console.log("%cTEST %cONE",
`color:#ccc;
background: linear-gradient(to left top, #e66465 10%, transparent 50%, #9198e5);
padding: 1rem;
font-size: 1rem;
font-weight: 700;
border-radius: 0.5em;`, `color:#ccc;
background: linear-gradient(to left top, transparent 40%, rgb(218, 57, 57), rgb(155, 218, 8));
font-size: 1rem;
font-weight: 700;
padding: 1rem;
border-radius: 0.5em;`)
</script>
</body>
</html>