Skip to content

Commit a3ef319

Browse files
AmolShelke2AmolShelke2
committed
Added index.html & style.css and fixed the DEMO in README.md
1 parent 002442e commit a3ef319

File tree

3 files changed

+139
-1
lines changed

3 files changed

+139
-1
lines changed

‎Feedback-Popups/Feedback-UI/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
### Preview
77

88
<h3>Preview</h3>
9-
<img src="/Feedback-Popups/Feedback-UI/feedback.png.png" alt="Demo">
9+
<img src="/Feedback-Popups/Feedback-UI/feedback.png" alt="Demo">

‎Feedback-Popups/Feedback-UI/index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Feedback UI</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
12+
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
13+
crossorigin="anonymous"
14+
/>
15+
</head>
16+
<body>
17+
<div class="panel-container" id="panel">
18+
<strong
19+
>How statisfied are you with our <br />
20+
customer service</strong
21+
>
22+
<div class="ratings-container">
23+
<div class="rating">
24+
<img
25+
src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png"
26+
alt=""
27+
/>
28+
<small>Unhappy</small>
29+
</div>
30+
31+
<div class="rating">
32+
<img
33+
src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png"
34+
alt=""
35+
/>
36+
<small>Neutral</small>
37+
</div>
38+
39+
<div class="rating">
40+
<img
41+
src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png"
42+
alt=""
43+
/>
44+
<small>statisfied</small>
45+
</div>
46+
</div>
47+
<button class="btn" id="send">Send review</button>
48+
</div>
49+
<script defer src="script.js"></script>
50+
</body>
51+
</html>

‎Feedback-Popups/Feedback-UI/style.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #fef9f2;
9+
font-family: "Montserrat", sans-serif;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
}
17+
18+
.panel-container {
19+
background-color: #fff;
20+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
21+
border-radius: 4px;
22+
font-size: 90%;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
text-align: center;
28+
padding: 30px;
29+
max-width: 400px;
30+
}
31+
32+
.panel-container strong {
33+
line-height: 20px;
34+
}
35+
36+
.ratings-container {
37+
display: flex;
38+
margin: 20px 0;
39+
}
40+
41+
.rating {
42+
flex: 1;
43+
cursor: pointer;
44+
padding: 20px;
45+
margin: 10px 5px;
46+
}
47+
48+
.rating:hover,
49+
.rating:active {
50+
border-radius: 4px;
51+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
52+
}
53+
54+
.rating img {
55+
width: 40px;
56+
}
57+
58+
.rating small {
59+
color: #555;
60+
display: inline-block;
61+
margin: 10px 0 0;
62+
}
63+
64+
.rating:hover small,
65+
.rating:active small {
66+
color: #111;
67+
}
68+
69+
.btn {
70+
background-color: #302d2d;
71+
color: #fff;
72+
border: none;
73+
outline: none;
74+
border-radius: 5px;
75+
padding: 12px 30px;
76+
cursor: pointer;
77+
}
78+
79+
.btn:active {
80+
transform: scale(0.98);
81+
}
82+
83+
.fa-heart {
84+
color: red;
85+
font-size: 30px;
86+
margin-bottom: 10px;
87+
}

0 commit comments

Comments
 (0)