Skip to content

Commit e1aeefe

Browse files
caocuongccccaocuongccc
authored
Add files via upload
1 parent fcfde80 commit e1aeefe

14 files changed

+535
-2
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
# example-html-css
2-
A real project port figma to html css
1+
# example-html-css
2+
A real project port figma to html css

‎css/style.css

+299
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
.title {
2+
font-family: 'Inter';
3+
font-style: normal;
4+
font-weight: 500;
5+
font-size: 50px;
6+
margin: auto;
7+
line-height: 48px;
8+
text-align: center;
9+
color: #0A0531;
10+
}
11+
.content {
12+
font-family: 'Inter';
13+
font-style: normal;
14+
font-weight: 400;
15+
font-size: 20px;
16+
line-height: 133.34%;
17+
text-align: center;
18+
color: #9D9BA0;
19+
}
20+
21+
.footer-menu ul {
22+
text-align: center;
23+
width: max-content;
24+
margin: auto;
25+
}
26+
.footer-menu >ul > li {
27+
list-style: none;
28+
display: flex;
29+
margin: auto;
30+
width: max-content;
31+
}
32+
.footer-menu > ul > li .privacy-menu {
33+
font-family: 'Inter';
34+
font-style: normal;
35+
font-weight: 400;
36+
font-size: 20px;
37+
line-height: 17px;
38+
color: #030305;
39+
}
40+
.footer-menu ul.Policy > li {
41+
margin: 12px;
42+
list-style: disc;
43+
}.footer-menu ul.Policy > li:first-child {
44+
list-style: none;
45+
}
46+
.main-content{
47+
display: block;
48+
padding: 20px;
49+
width: 100%;box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.05);
50+
}
51+
.left-title-header{
52+
display: flex;
53+
align-items: center;
54+
} .left-title-header img{
55+
margin-right: 12px;
56+
}
57+
.footer-menu ul.Policy {
58+
display: contents;
59+
}
60+
.footer-menu ul.Policy a {
61+
color: #030305;
62+
text-decoration: none;
63+
}.navbar-light .navbar-nav .nav-link {
64+
color: black;
65+
}
66+
.iputgroup{
67+
position: relative;
68+
69+
}
70+
.tableAudioheader{
71+
width: 100%;margin-bottom:0;
72+
padding-left: 0;
73+
padding: 0px 20px;background: #F5F7F9;
74+
padding-right: 40px
75+
}
76+
.tableAudioheader li span{
77+
padding-left: 0px;
78+
}
79+
.tableAudioheader li{
80+
padding-left: 0;background: #F5F7F9;
81+
display: grid;
82+
grid-template-columns: 20% 20% 20% 20% 20%;
83+
font-weight: 500;
84+
padding: 14px 16px;
85+
font-size: 14px;
86+
text-align: left;
87+
line-height: 133.34%;
88+
/* background: #F5F7F9; */
89+
border-radius: 5px 5px 0px 0px;
90+
color: #868F9C;
91+
92+
}
93+
94+
.right-content-listaudio .body{
95+
96+
padding: 0px;
97+
padding-top: 20px;border: 0.5px solid #BABBBC;
98+
border-radius: 0px 0px 5px 5px; border-top: none;
99+
padding-right: 15px; padding-bottom: 20px;
100+
}
101+
102+
/* width */
103+
.right-content-listaudio .scrollbar{
104+
height: 310px;
105+
overflow: auto;
106+
}
107+
.left-content-play{
108+
display: flex;
109+
width: 241px;
110+
height: 220px;
111+
flex-direction: column;
112+
align-items: center;
113+
}
114+
.left-content-play img.img-main{
115+
width: 241px;
116+
height: 220px;
117+
border-radius: 6px;
118+
object-fit: cover;
119+
margin-bottom: 10px;
120+
} .left-content-play span{
121+
font-weight: 500;
122+
font-size: 14px;
123+
line-height: 133.34%;
124+
/* or 19px */
125+
126+
127+
color: #000000;
128+
129+
margin-bottom: 10px;
130+
}.left-content-play .iputgroup .icon-style {
131+
left: auto;
132+
right: 10px;
133+
top: 0;
134+
bottom: 0;
135+
margin: auto;
136+
display: flex;
137+
align-items: center;
138+
139+
}.left-content-play .iputgroup input.form-control {
140+
padding-right: 30px;
141+
padding-left: 10px;
142+
}
143+
.right-content-listaudio .scrollbar::-webkit-scrollbar {
144+
width: 4px;
145+
border-radius: 5px;
146+
margin-right: 8px;
147+
}
148+
149+
/* Track */
150+
.right-content-listaudio .scrollbar::-webkit-scrollbar-track {
151+
background: #fff; border-radius: 5px; margin-right: 8px;
152+
}
153+
154+
/* Handle */
155+
.right-content-listaudio .scrollbar::-webkit-scrollbar-thumb {
156+
background: rgba(0, 0, 0, 0.3); border-radius: 5px; margin-right: 8px;
157+
}
158+
159+
/* Handle on hover */
160+
.right-content-listaudio .scrollbar::-webkit-scrollbar-thumb:hover {
161+
background: rgba(0, 0, 0, 0.3); border-radius: 5px;
162+
}
163+
164+
165+
166+
.tableAudio{
167+
width: 100%;
168+
padding-left: 0; padding: 0px 20px;
169+
170+
} .tableAudio li p{ margin-bottom: 0px;}
171+
.tableAudio li{
172+
display: grid;
173+
grid-template-columns: 20% 20% 20% 20% 20%;
174+
background: #F4F4F4;
175+
list-style: none;
176+
padding: 14px 16px;
177+
margin-bottom: 10px;
178+
font-style: normal;
179+
font-weight: 400;
180+
font-size: 14px;align-items: center;
181+
line-height: 17px;
182+
color: #434343;
183+
184+
}
185+
186+
.iputgroup .icon-style{
187+
position: absolute;
188+
left: 23px;
189+
top: 0;
190+
bottom: 0;
191+
margin: auto;
192+
display: flex;
193+
align-items: center;
194+
}
195+
.iputgroup .icon-style img{
196+
margin-right: 10px;
197+
}
198+
.title {
199+
margin-top: 116px;
200+
}
201+
.iputgroup input.form-control{
202+
padding-left: 60px;
203+
}
204+
.footer {
205+
background: #FFFFFF;
206+
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.05);
207+
position: absolute;
208+
bottom: 0; width: 100%;
209+
padding: 15px;
210+
}
211+
.copyright {
212+
font-family: 'Inter';
213+
font-style: normal;
214+
font-weight: 400;
215+
font-size: 20px;
216+
line-height: 17px;
217+
/* identical to box height */
218+
219+
220+
color: rgba(3, 3, 5, 0.5);
221+
}
222+
.btn-download {
223+
display: flex;
224+
flex-direction: row;
225+
justify-content: center;
226+
align-items: center;
227+
padding: 10px;
228+
gap: 10px;
229+
230+
width: 156px;
231+
height: 55px;
232+
left: 1064px;
233+
top: 323px;
234+
235+
background: #6D59F6;
236+
border-radius: 4px;
237+
}
238+
.btn-apple {
239+
left: 0%;
240+
right: 53.93%;
241+
top: 2.36%;
242+
bottom: 0%;
243+
width: 93.7px;
244+
height: 34.1px;
245+
/* Background/White */
246+
margin-right: 10px;
247+
background: #FFFFFF;
248+
/* Background/Black Background */
249+
250+
border-radius: 3px;
251+
}
252+
.btn-google {
253+
left: 53.93%;
254+
right: 0%;
255+
top: 0%;
256+
bottom: 0%;
257+
width: 93.7px;
258+
height: 34.1px;
259+
/* Background/White */
260+
261+
background: #FFFFFF;
262+
/* Background/Black Background */
263+
264+
border-radius: 3px;
265+
}
266+
ul.navbar-nav.mr-auto.float-right {
267+
align-items: center;
268+
}
269+
270+
.name-rs {
271+
display: flex;
272+
}
273+
.img-rs {
274+
margin-right: 5px;height: max-content;
275+
}
276+
.type-rs {
277+
margin-right: 5px;
278+
}
279+
.audio-rs {
280+
281+
}
282+
.download-rs {
283+
color: #6D59F6;
284+
width: 73px;
285+
height: 24px;
286+
background: rgba(109, 89, 246, 0.1);
287+
border-radius: 4px;
288+
display: flex;
289+
flex-direction: row;
290+
justify-content: center;
291+
align-items: center;
292+
padding: 5px 6px 5px 5px;
293+
gap: 4px;
294+
295+
}
296+
.download-rs a{
297+
color: #6D59F6;
298+
}
299+

‎images/Line 4.png

137 Bytes
Loading

‎images/applestore.png

6.97 KB
Loading

‎images/audio.png

535 Bytes
Loading

‎images/call.png

1.88 KB
Loading

‎images/camera.png

685 Bytes
Loading

‎images/contact.png

1.88 KB
Loading

‎images/copy.png

347 Bytes
Loading

‎images/googleplay.png

1.89 KB
Loading

‎images/linking-icon.png

402 Bytes
Loading

‎images/result_image.png

55.1 KB
Loading

‎images/video.png

465 Bytes
Loading

0 commit comments

Comments
 (0)