-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
125 lines (106 loc) · 2.92 KB
/
style.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
html{
box-sizing: border-box;
}
body{
margin:0;
min-height: 100vh;
font-family: Montserrat, sans-serif;
font-weight: 700;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
background-color: #010101;
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23ffffff' fill-opacity='0.14' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E"); */
background-image: url("./images/thiruvalluvar_Bg_02.jpg");
background-repeat: no-repeat;
background-position: center;
color:#fff;
}
.quote-container{
width:auto;
max-width: 900px;
padding: 20px 30px;
border-radius: 10px;
background-color:rgba(0 , 0 , 0, 0.4);
box-shadow: 0 2px 3px 4px rgba(255, 255, 255, 0.2);
}
.quote-text-tamil{
font-size: 2rem;
}
.long-quote{
font-size: 1rem;
}
.fa-affiliatetheme{
font-size: 2.75rem;
color:#e1eb34;
}
.quote-text-trn{
margin-top:15px;
font-size: 1.5rem;
font-weight: 400;
font-style: italic;
color:rgba(255 , 255 , 255, 0.6)
}
.button-cont{
margin-top:15px;
display: flex;
justify-content: space-between;
}
button{
cursor: pointer;
font-size: 1.2rem;
height:2.5rem;
border:none;
outline:none;
color:#333;
background:#fff;
border-radius:10px;
padding: 0.5rem 1.8rem;
box-shadow: 0 0.3rem rgba(143, 142, 142, 0.65);
}
button:hover{
filter: brightness(150%);
}
button:active{
transform: translate(0, 0.3rem);
box-shadow: 0 0.1rem rgba(255 , 255 , 255, 0.65);
}
.twitter-button:hover{
color:#38a1f3;
}
.next-kural:hover{
color: #dc143a;
}
.next-kural{
font-weight: 600;
}
.fa-twitter{
font-size: 1.5rem;
}
/* Loader styling */
.loader {
border: 16px solid #333;
border-top: 16px solid #f3f3f3;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin{
0% { transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
/* Media Queries */
@media screen and (max-width:1000px) {
.quote-container{
margin: auto 10px;
}
.quote-text-tamil{
font-size: 2.25rem;
}
.fa-affiliatetheme{
font-size: 3rem;
}
}