10 | 
16 | ไม่พอใจ
17 | 
20 | เฉยๆ
21 | 
24 | พอใจมาก
25 | 
25 | ขอบคุณที่ใช้บริการของเรา
26 | 
14 | 
15 | 
16 | 
17 | 
16 | `;
17 | title.innerHTML=`โซฟา`;
18 | description.innerHTML=
19 | `
20 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut delectus atque similique architecto id autem.
21 | `;
22 | profile_img.innerHTML=`
`;
23 | seller_name.innerHTML=`พิมลดา`;
24 | price.innerHTML=`ราคา 20,000 บาท`;
25 | animated_bg.forEach(el=>el.classList.remove('animated_bg'));
26 | animated_text.forEach(el=>el.classList.remove('animated_text'));
27 | }
--------------------------------------------------------------------------------
/Workshop 29 - Content Loading/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | box-sizing: border-box;
3 | }
4 |
5 | body{
6 | background-color: #ecf0f1;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | height: 100vh;
11 | overflow: hidden;
12 | margin: 0;
13 | }
14 | .card{
15 | width: 350px;
16 | overflow: hidden;
17 | border-radius: 10px;
18 | box-shadow: 0 20px 10px rgba(0, 0, 0,0.2);
19 | }
20 | img{
21 | max-width: 100%;
22 | }
23 | .card-header{
24 | height: 200px;
25 | }
26 | .card-header img{
27 | object-fit: cover;
28 | width: 100%;
29 | height: 100%;
30 | }
31 | .card-content{
32 | background-color: #fff;
33 | padding: 30px;
34 | }
35 | .card-title{
36 | height: 20px;
37 | margin:0;
38 | }
39 | .card-description{
40 | color: #777;
41 | margin:10px 0 20px;
42 | }
43 | .seller{
44 | display: flex;
45 | }
46 | .profile_img{
47 | border-radius: 50%;
48 | overflow: hidden;
49 | width: 40px;
50 | height: 40px;
51 | }
52 | .seller-info{
53 | display: flex;
54 | flex-direction: column;
55 | justify-content: space-around;
56 | margin-left:10px;
57 | width: 100px;
58 | }
59 | .seller-info small{
60 | color:#999;
61 | margin-top: 5px;
62 | }
63 |
64 | /* Effect Loading Animation */
65 | .animated_bg{
66 | background-image: linear-gradient(
67 | to right,
68 | #f6f7f8 0%,
69 | #edeef1 10%,
70 | #f6f7f8 20%,
71 | #f6f7f8 100%
72 | );
73 | background-size: 200% 100%;
74 | animation: animatedPlay 1s linear infinite;
75 | }
76 | .animated_text{
77 | border-radius: 50px;
78 | display: inline-block;
79 | margin:0;
80 | height: 10px;
81 | width: 100%;
82 | }
83 |
84 | @keyframes animatedPlay{
85 | 0%{
86 | background-position: 50% 0;
87 | }
88 | 100%{
89 | background-position: -150% 0;
90 | }
91 | }
--------------------------------------------------------------------------------
/Workshop 3 - Light Dark Mode/img/undraw_Projections_dark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Workshop 3 - Light Dark Mode/img/undraw_Projections_light.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Workshop 3 - Light Dark Mode/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
38 | 
42 | 
46 | 
21 | 
13 | ธรรมชาติ
15 |Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit voluptate ipsum, magni mollitia alias ducimus facilis voluptatem ratione, modi ullam vitae, soluta ea nam quibusdam expedita inventore nisi? Quidem perferendis illo cumque autem expedita eveniet nulla magnam recusandae similique dolore sequi eligendi magni voluptatum in libero, blanditiis repellat est numquam eaque! Eum quasi sint explicabo. Aliquid velit, fugit quaerat, nam omnis commodi corporis et autem blanditiis maxime nihil asperiores optio fugiat necessitatibus! Corrupti earum repellendus, sequi quo fuga culpa? Incidunt sit sint esse cum tempora cumque rem, asperiores magni deleniti doloribus ex et ipsam beatae similique fuga repudiandae nesciunt. Commodi.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et hic voluptas, quis eius perspiciatis aspernatur atque ratione aut reiciendis, quae culpa, animi porro veritatis perferendis unde placeat magnam nulla dolorem itaque aperiam consequatur repellendus laborum. Iste placeat distinctio id ad accusantium ex eaque nam, alias saepe nihil sint adipisci maiores!
16 |
21 | 
29 |