-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (125 loc) · 4.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- -->
<meta
property="og:title"
content="Interactive rating component | Frontend Mentor | Alamin"
/>
<meta
name="description"
content="Interactive rating component built as part of the Frontend Mentor challenge, allowing users to rate and provide feedback on a product or service."
/>
<meta
property="og:description"
content="Interactive rating component built as part of the Frontend Mentor challenge, allowing users to rate and provide feedback on a product or service."
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/CodeWithAlamin/Interactive-rating-component/main/screenshots/Screenshot%20Interactive%20rating%20component%20Frontend%20Mentor%20Alamin.png"
/>
<meta
property="og:url"
content="https://interactive-rating-alamin.netlify.app/"
/>
<meta name="author" content="Alamin | codpapa360" />
<meta
name="keywords"
content="FrontendMentor, Interactive Rating Component, Responsive web design, HTML, CSS, JavaScript, Sass, Front-end development, User experience, Accessibility"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Interactive rating component | Frontend Mentor | Alamin"
/>
<meta
name="twitter:site"
content="@https://interactive-rating-alamin.netlify.app/"
/>
<meta
name="twitter:description"
content="Interactive rating component built as part of the Frontend Mentor challenge, allowing users to rate and provide feedback on a product or service."
/>
<meta
name="twitter:image"
content="https://raw.githubusercontent.com/CodeWithAlamin/Interactive-rating-component/main/screenshots/Screenshot%20Interactive%20rating%20component%20Frontend%20Mentor%20Alamin.png"
/>
<meta
name="twitter:image:alt"
content="Interactive rating component | Frontend Mentor | Alamin"
/>
<!-- -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./sass/main.scss" />
<script type="module" src="./script.js"></script>
<title>Interactive rating component | Frontend Mentor | Alamin</title>
</head>
<body>
<div class="top-container">
<main class="main-contents">
<div class="rating-state">
<div class="rating-state__icon-star">
<img src="./images/icon-star.svg" alt="Star icon" />
</div>
<h1 class="rating-state__header">How did we do?</h1>
<p class="rating-state__description">
Please let us know how we did with your support request. All
feedback is appreciated to help us improve our offering!
</p>
<form action="">
<ul class="rating-numbers">
<li class="rating-number" data-ratingValue="1">1</li>
<li class="rating-number" data-ratingValue="2">2</li>
<li class="rating-number" data-ratingValue="3">3</li>
<li class="rating-number" data-ratingValue="4">4</li>
<li class="rating-number" data-ratingValue="5">5</li>
</ul>
<button class="btn-submit" type="submit">Submit</button>
</form>
</div>
<!-- <div class="thanking-state">
<span class="back-arrow">◄</span>
<img
class="thanking-state__illustration"
src="./images/illustration-thank-you.svg"
alt="Thank you illustration"
/>
<p class="thanking-state__rating-output">You selected 3 out of 5</p>
<h1 class="thanking-state__header">Thank you!</h1>
<p class="thanking-state__description">
We appreciate you taking the time to give a rating. If you ever need
more support, don’t hesitate to get in touch!
</p>
</div> -->
</main>
</div>
<footer>
<div class="attribution-wrapper">
<p class="attribution">
Coded by
<a
class="attb-link"
href="https://twitter.com/CodeWithAlamin"
target="_blank"
>Alamin</a
>
<br />
Challenge by
<a
class="attb-link attb-fem"
href="https://www.frontendmentor.io/profile/CodeWithAlamin"
target="_blank"
>Frontend Mentor</a
>
</p>
</div>
</footer>
</body>
</html>