Hugging Face's logo

Spaces:
preview
/
IntelliChat
Running

App Files Community
ntphuc149 commited on
Commit
494f793
·
verified ·
1 Parent(s): b002689

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +221 -19
style.css CHANGED
@@ -1,28 +1,230 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
2
+
3
+ *{
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ font-family: "Poppins", sans-serif;
8
+ }
9
+
10
+ section{
11
+ position: relative;
12
+ width: 100%;
13
+ min-height: 100vh;
14
+ display: flex;
15
+ flex-direction: column;
16
+ justify-content: flex-start;
17
+ background: url(bg.jpg)no-repeat;
18
+ background-size: cover;
19
+ background-position: center;
20
+ }
21
+
22
+ header{
23
+ position: relative;
24
+ top: 0;
25
+ width: 100%;
26
+ padding: 30px 100px;
27
+ display: flex;
28
+ justify-content: space-between;
29
+ align-items: center;
30
+ }
31
+
32
+ header .logo{
33
+ position: relative;
34
+ color: #000;
35
+ font-size: 30px;
36
+ text-decoration: none;
37
+ text-transform: uppercase;
38
+ font-weight: 800;
39
+ letter-spacing: 1px;
40
+ }
41
+
42
+ header .navigation a{
43
+ color: #000;
44
+ text-decoration: none;
45
+ font-weight: 500;
46
+ letter-spacing: 1px;
47
+ padding: 2px 15px;
48
+ border-radius: 20px;
49
+ transition: 0.3s;
50
+ transition-property: background;
51
+ }
52
+
53
+ header .navigation a:not(:last-child){
54
+ margin-right: 30px;
55
+ }
56
+
57
+ header .navigation a:hover{
58
+ background: #fff;
59
+ }
60
+
61
+ .content{
62
+ max-width: 650px;
63
+ margin: 60px 100px;
64
+ }
65
+
66
+ .content .info h2{
67
+ color: #226A80;
68
+ font-size: 55px;
69
+ text-transform: uppercase;
70
+ font-weight: 800;
71
+ letter-spacing: 2px;
72
+ line-height: 60px;
73
+ margin-bottom: 30px;
74
+ }
75
+
76
+ .content .info h2 span{
77
+ color: #fff;
78
+ font-size: 50px;
79
+ font-weight: 600;
80
+ }
81
+
82
+ .content .info p{
83
+ font-size: 16px;
84
+ font-weight: 500;
85
+ margin-bottom: 40px;
86
+ }
87
+
88
+ .content .info-btn{
89
+ color: #fff;
90
+ background: #226A80;
91
+ text-decoration: none;
92
+ text-transform: uppercase;
93
+ font-weight: 500;
94
+ letter-spacing: 2px;
95
+ padding: 10px 20px;
96
+ border-radius: 5px;
97
+ transition: 0.3s;
98
+ transition-property: background;
99
+ }
100
+
101
+ .content .info-btn:hover{
102
+ background: #0C4F60;
103
+ }
104
+
105
+ .media-icons{
106
+ display: flex;
107
+ justify-content: center;
108
+ align-items: center;
109
+ margin: auto;
110
+ }
111
+
112
+ .media-icons a{
113
+ position: relative;
114
+ color: #111;
115
+ font-size: 25px;
116
+ transition: 0.3s;
117
+ transition-property: transform;
118
+ }
119
+
120
+ .media-icons a:not(:last-child){
121
+ margin-right: 60px;
122
+ }
123
+
124
+ .media-icons a:hover{
125
+ transform: scale(1.5);
126
  }
127
 
128
+ label{
129
+ display: none;
 
130
  }
131
 
132
+ #check{
133
+ z-index: 3;
134
+ display: none;
 
 
135
  }
136
 
137
+ /* Responsive styles */
138
+
139
+ @media (max-width: 960px){
140
+ header .navigation{
141
+ display: none;
142
+ }
143
+
144
+ label{
145
+ display: block;
146
+ font-size: 25px;
147
+ cursor: pointer;
148
+ transition: 0.3s;
149
+ transition-property: color;
150
+ }
151
+
152
+ label:hover{
153
+ color: #fff;
154
+ }
155
+
156
+ label .close-btn{
157
+ display: none;
158
+ }
159
+
160
+ #check:checked ~ header .navigation{
161
+ z-index: 2;
162
+ position: fixed;
163
+ background: rgba(114, 223, 255, 0.9);
164
+ top: 0;
165
+ bottom: 0;
166
+ left: 0;
167
+ right: 0;
168
+ display: flex;
169
+ flex-direction: column;
170
+ justify-content: center;
171
+ align-items: center;
172
+ }
173
+
174
+ #check:checked ~ header .navigation a{
175
+ font-weight: 700;
176
+ margin-right: 0;
177
+ margin-bottom: 50px;
178
+ letter-spacing: 2px;
179
+ }
180
+
181
+ #check:checked ~ header label .menu-btn{
182
+ display: none;
183
+ }
184
+
185
+ #check:checked ~ header label .close-btn{
186
+ z-index: 2;
187
+ display: block;
188
+ position: fixed;
189
+ }
190
+
191
+ label .menu-btn{
192
+ position: absolute;
193
+ }
194
+
195
+ header .logo{
196
+ position: absolute;
197
+ bottom: -6px;
198
+ }
199
+
200
+ .content .info h2{
201
+ font-size: 45px;
202
+ line-height: 50px;
203
+ }
204
+
205
+ .content .info h2 span{
206
+ font-size: 40px;
207
+ font-weight: 600;
208
+ }
209
+
210
+ .content .info p{
211
+ font-size: 14px;
212
+ }
213
  }
214
 
215
+ @media (max-width: 560px){
216
+ .content .info h2{
217
+ font-size: 35px;
218
+ line-height: 40px;
219
+ }
220
+
221
+ .content .info h2 span{
222
+ font-size: 30px;
223
+ font-weight: 600;
224
+ }
225
+
226
+ .content .info p{
227
+ font-size: 14px;
228
+ }
229
  }
230
+