Skip to content

Commit b70ac3b

Browse files
httt-devhttt-dev
committed
Bài học và bài tập 1
1 parent 06c5c29 commit b70ac3b

File tree

5 files changed

+566
-0
lines changed

5 files changed

+566
-0
lines changed

‎css/excercise_1.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
html {
2+
font-size: 62.5%;
3+
}
4+
5+
*,
6+
*:before,
7+
*::after {
8+
box-sizing: border-box;
9+
-webkit-box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: "Roboto", sans-serif;
14+
}
15+
16+
.box {
17+
width: 20rem;
18+
height: 30rem;
19+
background-color: #ffa400;
20+
color: black;
21+
border-color: yellow;
22+
border-radius: 4px;
23+
padding: 10px;
24+
margin: 15px;
25+
text-align: center;
26+
}
27+
28+
.box--three--line--and--truncated {
29+
margin: 20px;
30+
max-width: 50rem;
31+
overflow: hidden;
32+
text-overflow: ellipsis;
33+
display: -webkit-box;
34+
-webkit-box-orient: vertical;
35+
-webkit-line-clamp: 3;
36+
}
37+
38+
.box--one--line--and--truncated {
39+
margin: 20px;
40+
white-space: nowrap;
41+
max-width: 10rem;
42+
overflow: hidden;
43+
text-overflow: ellipsis;
44+
}
45+
46+
.box-img {
47+
width: 100vw;
48+
height: 100vh;
49+
background-image: url("https://images.unsplash.com/photo-1525979371491-8bfc501b8612?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
50+
background-repeat: no-repeat;
51+
background-position: right;
52+
}
53+
54+
.box-circle {
55+
margin: 20px;
56+
width: 40rem;
57+
height: 40rem;
58+
overflow: hidden;
59+
background-image: url("https://images.unsplash.com/photo-1525979371491-8bfc501b8612?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
60+
background-size: contain;
61+
border-radius: 50%;
62+
63+
}

‎css/style.css

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/* div{
2+
3+
}
4+
5+
6+
.class {
7+
8+
9+
}
10+
11+
#id {
12+
13+
} */
14+
15+
html {
16+
font-size: 62.5%;
17+
}
18+
19+
*,
20+
*:before,
21+
*:after {
22+
box-sizing: border-box;
23+
-webkit-box-sizing: border-box;
24+
}
25+
26+
body{
27+
font-family: 'Roboto', sans-serif;
28+
}
29+
30+
img{
31+
display: block;
32+
max-width: 100%;
33+
}
34+
.color {
35+
color: blue;
36+
color: #ffdd33;
37+
color: rgb(234, 20, 4);
38+
color: rgba(222, 22, 44, 0.4);
39+
}
40+
41+
.unit {
42+
background-color: #ffdd33;
43+
width: 100px;
44+
height: 200px;
45+
46+
width: 100%;
47+
48+
width: 100vw;
49+
50+
height: 20vh;
51+
}
52+
53+
/* default of browser 100% = 16px
54+
1em = 1 rem = 160px
55+
56+
*/
57+
58+
/* em : Phu thuoc vao font size của nó hoặc cha chứa nó */
59+
.em {
60+
font-size: 32px;
61+
width: 10em;
62+
height: 10em;
63+
background-color: aqua;
64+
}
65+
66+
/* rem : phụ thuộc vào thẻ html */
67+
.rem {
68+
min-width: 60rem;
69+
max-width: 50rem;
70+
width: 50rem;
71+
height: 45.6rem;
72+
background-color: greenyellow;
73+
font-size: 32px;
74+
}
75+
76+
.background{
77+
width: 100%;
78+
height: 20rem;
79+
background-image: url("https://images.unsplash.com/photo-1542091607-f2c384a6af13?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60");
80+
background-position: center center;
81+
background-repeat: no-repeat;
82+
background-size: cover;
83+
background-attachment: fixed;
84+
}
85+
/* Width of element = width + border left + border right + padding left + padding right
86+
*/
87+
.boxsizing{
88+
89+
width: 10rem;
90+
height: 10rem;
91+
92+
border-width: 2px;
93+
border-style: dotted;
94+
border-color: blueviolet;
95+
/* Width of element = width + border left + border right + padding left + padding right */
96+
box-sizing: content-box;
97+
/* Width of element = width + border left + border right + padding left + padding right => tự động tính cả phần margin/padding vào size of element*/
98+
box-sizing: border-box;
99+
100+
border-radius: 4px;
101+
102+
border-top-left-radius: 4px;
103+
border-top-right-radius: 6px;
104+
border-bottom-left-radius: 4px;
105+
border-bottom-right-radius: 10px;
106+
}
107+
108+
.box1{
109+
margin-top: 70px;
110+
margin-left: 80px;
111+
margin-bottom: 40px;
112+
}
113+
/* top right bottom left */
114+
.box2{
115+
padding: 10px 20px 30px 40px;
116+
}
117+
118+
a{
119+
font-size: 5rem;
120+
text-decoration: none;
121+
width: 200px;
122+
height: 200px;
123+
background-color: rebeccapurple;
124+
padding: 20px;
125+
margin: 30px;
126+
display: inline-block;
127+
}
128+
129+
130+
.font{
131+
font-family: "Roboto" , sans-serif;
132+
font-size: 2rem;
133+
font-weight: 200;
134+
font-style: italic;
135+
max-width: 50%;
136+
text-align: left;
137+
letter-spacing: 0.10rem;
138+
word-spacing: 0.5rem;
139+
line-height: 3rem;
140+
white-space: nowrap;
141+
overflow: hidden;
142+
text-overflow: ellipsis;
143+
144+
/* display: -webkit-box;
145+
-webkit-box-orient: vertical;
146+
-webkit-line-clamp: 2 ; */
147+
/* ssssssssssssssssssssssssss */
148+
/* word-break: break-all; */
149+
}
150+
151+
.font-word-break{
152+
font-family: "Roboto" , sans-serif;
153+
font-size: 2rem;
154+
font-weight: 500;
155+
font-style: italic;
156+
max-width: 50%;
157+
text-align: left;
158+
letter-spacing: 0.10rem;
159+
word-spacing: 0.5rem;
160+
line-height: 3rem;
161+
/* white-space: nowrap; */
162+
overflow: hidden;
163+
text-overflow: clip;
164+
165+
display: -webkit-box;
166+
-webkit-box-orient: vertical;
167+
-webkit-line-clamp: 2 ;
168+
/* ssssssssssssssssssssssssss */
169+
word-break: break-all;
170+
}
171+
172+
.box{
173+
width: 30rem;
174+
height: 14rem;
175+
margin-left: auto;
176+
margin-right: auto;
177+
178+
179+
}
180+
181+
.box img {
182+
width: 100%;
183+
height: 100%;
184+
object-fit: cover;
185+
}
186+

‎excercise_1.html

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA_Compatible" content="ie=edge" />
7+
<title>Bài tập 1</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">
9+
10+
<link rel="stylesheet" href="./reset.css" />
11+
<link rel="stylesheet" href="./css/excercise_1.css" />
12+
</head>
13+
<body>
14+
<!-- 1. Cho một hình thiết kế như này với tên gọi trong tiếng Anh là `card` áp dụng BEM để kể ra block, elements, và modifier nếu có: https://static.collectui.com/shots/2451336/daily-ui-challenge-011-large -->
15+
<div class="card">
16+
<div class="card__image--blue"></div>
17+
<div class="card__title--blue"></div>
18+
19+
<div class="card__description"></div>
20+
<div class="card__button--blue"></div>
21+
</div>
22+
23+
<div class="card">
24+
<div class="card__image--red"></div>
25+
<div class="card__title--red"></div>
26+
27+
<div class="card__description"></div>
28+
<div class="card__button--red"></div>
29+
</div>
30+
31+
<!-- 2. Tạo một khối có class là `box` có độ rộng và chiều cao lần lượt là `200x300` có màu nền là `#ffa400` và chữ bất kỳ màu đen, border màu vàng, padding 10px, margin 15px bo góc 4px, chữ canh giữa. Lưu ý sử dụng đơn vị `rem` -->
32+
33+
<div class="box">
34+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore, autem.
35+
Eius ipsum corrupti numquam optio, delectus accusantium placeat totam
36+
facere quae, culpa ut obcaecati expedita, voluptates asperiores fugit.
37+
Quisquam, eveniet. Lorem ipsum dolor sit amet consectetur adipisicing
38+
elit. Rerum earum sequi assumenda, quia magni delectus. Nobis at animi
39+
harum mollitia ut eius ullam iure amet rem consequatur, et aut vero!
40+
</div>
41+
<!-- 3. Tạo một khối có đoạn chữ rất dài bât kỳ, có độ rộng tối đa là `500px` hiển thị 3 hàng kết hợp dấu 3 chấm -->
42+
<div class="box--three--line--and--truncated">
43+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore, autem.
44+
Eius ipsum corrupti numquam optio, delectus accusantium placeat totam
45+
facere quae, culpa ut obcaecati expedita, voluptates asperiores fugit.
46+
Quisquam, eveniet. Lorem ipsum dolor sit amet consectetur adipisicing
47+
elit. Rerum earum sequi assumenda, quia magni delectus. Nobis at animi
48+
harum mollitia ut eius ullam iure amet rem consequatur, et aut vero!
49+
</div>
50+
51+
<!-- 4. Tạo một khối có đoạn chữ rất dài bât kỳ, có độ rộng tối đa là `100px` hiển thị 1 hàng kết hợp dấu 3 chấm -->
52+
<div class="box--one--line--and--truncated">
53+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore, autem.
54+
Eius ipsum corrupti numquam optio, delectus accusantium placeat totam
55+
facere quae, culpa ut obcaecati expedita, voluptates asperiores fugit.
56+
Quisquam, eveniet.
57+
</div>
58+
<!-- 5. Cho một hình thiết kế như này, gọi là `product` hiểu về BEM và liệt kê ra các class về block, elements, modifer nếu có: https://static.collectui.com/shots/2414184/travel-bag-detail-spare-time-fun-large -->
59+
<div class="product__container">
60+
<div class="product__container__carousel">
61+
<div class="product__container__carousel--image"></div>
62+
<div class="product__container__carousel--indicators"></div>
63+
</div>
64+
65+
<div class="product__container__info">
66+
<div class="product__container__info__title--large"></div>
67+
<div class="product__container__info__price">
68+
<div class="product__container__info__price--discount"></div>
69+
<div class="product__container__info__price--original"></div>
70+
</div>
71+
72+
<div class="product__container__info__description"></div>
73+
74+
<div class="product__container__info__size">
75+
<div class="product__container__info__size--title"></div>
76+
<div class="product__container__info__size--s"></div>
77+
<div class="product__container__info__size--m"></div>
78+
<div class="product__container__info__size--l"></div>
79+
<div class="product__container__info__size--xl"></div>
80+
<div class="product__container__info__size--xxl"></div>
81+
</div>
82+
83+
<div class="product__container__info__color">
84+
<div class="product__container__info__color--red"></div>
85+
<div class="product__container__info__color--blue"></div>
86+
<div class="product__container__info__color--orange"></div>
87+
</div>
88+
89+
<div class="product__container__info__total">
90+
<div class="product__container__info__total--title"></div>
91+
<div class="product__container__info__total--quanlity"></div>
92+
</div>
93+
94+
<div class="product__container__info__buy">
95+
<div class="product__container__info__buy--button"></div>
96+
</div>
97+
</div>
98+
</div>
99+
<!-- 6. Tạo một khối có độ rộng và chiều cao lần lượt là `100vw` `100vh` cho hình nền bất kỳ, yêu cầu phủ toàn khối, canh góc bên phải, không có lặp lại -->
100+
<div class="box-img">
101+
102+
</div>
103+
<!-- 7. Tạo một khối có độ rộng và chiêu cao tương ứng là `400x400` và cho hình ảnh hiển thị bên trong, yêu cầu khối này là hình tròn, và hình ảnh nằm trọn bên trong, không được méo, không được tràn ra ngoài, gợi ý dùng `border-radius` và `overflow:hidden` -->
104+
<div class="box-circle">
105+
106+
</div>
107+
<!-- 8. Chèn font từ Google vào bài tập sử dụng Fonts `Roboto` với các độ đậm là `400` và `600` -->
108+
<!-- 9. Chỉ là yêu cầu: phải sử dụng đơn vị `rem` cho hợp lý, không sử dụng `px`, sử dụng `box-sizing` để hiển thị cho đúng kích thước -->
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)