9sumit.github.io-RatingComponent/style.css at main · 9sumit/9sumit.github.io-RatingComponent · GitHub

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
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;900&display=swap');
body{
	margin:0;
	padding:0;
	background-color:hsl(213, 19%, 18%);
	font-family: 'Outfit', sans-serif;

}
.ReactComp{

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height:100vh;


}
.maincomp{
	background-color:hsl(216, 12%, 8%);
	width:300px;
	padding:28px;
border-radius:22px;
}
.maincomp svg{
	border-radius:50%;
	padding:15px;
	background-color:hsl(213, 19%, 18%);

}
.thankyou{
	background-color:hsl(216, 12%, 8%);
	width:300px;
	padding:28px;
border-radius:22px;
}
h1{
	color:hsl(0, 0%, 100%);
	margin:20px 0;
}
p{
	color:hsl(217, 12%, 63%);
	line-height:1.5;
	font-size:15px;

}
ul{
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	padding-left:0;
	margin:45px 0;


}
li{
color:hsl(217, 12%, 63%);
width:18px;
height:18px;
list-style-type:none;
text-align:center;
padding:18px;
border-radius:50%;
background-color:hsl(213, 19%, 18%);
}
button{
	width:100%;
	border-radius:40px;
	background-color:hsl(25, 97%, 53%);
	border:none;
	height:45px;
	color:hsl(0, 0%, 100%);
	font-size:14px;
	letter-spacing: 2px;
	margin-bottom:10px;
    font-weight:bold;
}
.thankyou svg{
	display:block;
	margin:auto;
}
#rating{
	border:none;
	border-radius:20px;
	color:hsl(25, 97%, 53%);
	word-spacing:1.5px;
	background-color:hsl(213, 19%, 18%);
	text-align:center;
	padding:4px;
	width:180px;
   font-size:15px;
   font-weight:normal;
	margin:20px auto;
}
.thanks{
	text-align:center;
}
.thanksp{
	text-align:center;
}
.attribution { font-size: 11px; text-align: center;color:white;position:absolute;left:50%;top:100%;transform: translate(-50%, -100%);;}
    .attribution a { color: hsl(228, 45%, 44%); }