forked from Shaktizala/social-media-challenge
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.css
111 lines (108 loc) · 2 KB
/
index.css
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
:root {
--Very-Pale-Blue: hsl(225, 100%, 98%);
--Light-Grayish-Blue: hsl(229, 100%, 98%);
--Dark-Grayish-Blue: hsl(228, 12%, 44%);
--Very-Dark-Blue: hsl(230, 17%, 14%);
--Lime-Green: hsl(163, 72%, 41%);
--Bright-Red: hsl(356, 69%, 56%);
--Toggle: hsl(228, 41%, 86%);
--Card-Bg: hsl(227, 47%, 96%);
--Facebook: hsl(208, 92%, 53%);
--Twitter: hsl(203, 89%, 53%);
--Instagram-start: hsl(37, 97%, 70%);
--Instagram-end: hsl(329, 70%, 58%);
--YouTube: hsl(348, 97%, 39%);
--border-top-height: 5px;
}
body {
font-family: "Inter", sans-serif;
}
.fullScreen {
height: 100vh;
position: relative;
z-index: 10;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
.background-space {
background-color: var(--Light-Grayish-Blue);
height: 200px;
width: 100%;
position: absolute;
z-index: 10;
}
.common-margin-10 {
margin: 10px;
}
.followerNum {
font-size: 40px;
font-weight: 700;
margin-bottom: -10px;
font-family: "Inter-bold", sans-serif;
}
.followerText {
letter-spacing: 0.2rem;
color: var(--Dark-Grayish-Blue);
font-weight: 400;
margin-bottom: 10px;
}
.cardSocialProfile {
border-top: 5px solid blue;
}
.facebook {
border-top-color: var(--Facebook);
}
.twitter {
border-top-color: var(--Twitter);
}
.insta {
border-top: none;
}
.youtube {
border-top-color: var(--YouTube);
}
.incress-score {
color: var(--Lime-Green);
}
.decress-score {
color: var(--Bright-Red);
}
.darkerGray {
color: var(--Dark-Grayish-Blue);
}
.card {
height: 100%;
background-color: var(--Card-Bg);
}
.card:hover {
background-color: var(--Toggle);
cursor: pointer;
}
/* special css */
.upper-div {
height: 5px;
margin: 0;
padding: 0;
background-image: linear-gradient(
to right,
var(--Instagram-start),
var(--Instagram-end)
);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.field-counts {
font-size: 40px;
font-weight: 800;
}
.page-reviews {
font-weight: 600;
}
.text-bold{
font-weight: 600;
}