├── img ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png └── 8.png ├── README.md ├── index.html ├── detail.html ├── style.css └── products.json /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/1.png -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/2.png -------------------------------------------------------------------------------- /img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/3.png -------------------------------------------------------------------------------- /img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/4.png -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/6.png -------------------------------------------------------------------------------- /img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/7.png -------------------------------------------------------------------------------- /img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/detailpage/HEAD/img/8.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How to make page detail product page using HTML CSS and Javascript Only 2 | 3 | ```http 4 | Important note: If you have downloaded the code 5 | but still encounter errors when running the program, 6 | please watch the video at this link because 7 | I have shown you how to run the project properly. 8 | ``` 9 | - [https://www.youtube.com/watch?v=okyfcpZfPAU&t=142s](https://www.youtube.com/watch?v=okyfcpZfPAU&t=142s) 10 | 11 | ![Logo](https://i.ytimg.com/vi/okyfcpZfPAU/maxresdefault.jpg) 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
PRODUCT LIST
12 |
13 | 14 |
15 |
16 | 17 | 18 | 19 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
PRODUCT DETAIL
12 |
13 |
14 | 15 |
16 |
17 |

18 |
19 |
20 | 21 | 28 |
29 |
30 |
31 |
32 | 33 |
Similar product
34 |
35 |
36 | 37 | 38 | 39 | 79 | 80 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | font-family: Poppins; 4 | } 5 | a{ 6 | color: unset; 7 | text-decoration: none; 8 | } 9 | .container{ 10 | width: 900px; 11 | margin: auto; 12 | max-width: 90vw; 13 | text-align: center; 14 | padding-top: 10px; 15 | } 16 | .title{ 17 | font-size: xx-large; 18 | padding: 20px 0; 19 | } 20 | .listProduct .item img{ 21 | width: 90%; 22 | filter: drop-shadow(0 50px 20px #0009); 23 | } 24 | .listProduct{ 25 | display: grid; 26 | grid-template-columns: repeat(4, 1fr); 27 | gap: 20px; 28 | } 29 | .listProduct .item{ 30 | background-color: #EEEEE6; 31 | padding: 20px; 32 | border-radius: 20px; 33 | } 34 | .listProduct .item h2{ 35 | font-weight: 500; 36 | font-size: large; 37 | } 38 | .listProduct .item .price{ 39 | letter-spacing: 7px; 40 | font-size: small; 41 | } 42 | /* detail page */ 43 | 44 | .detail{ 45 | display: grid; 46 | grid-template-columns: repeat(2, 1fr); 47 | gap: 50px; 48 | text-align: left; 49 | } 50 | .detail .image img{ 51 | width: 100%; 52 | } 53 | .detail .image{ 54 | position: relative; 55 | } 56 | .detail .image::before{ 57 | position: absolute; 58 | width: 300px; 59 | height: 300px; 60 | content: ''; 61 | background-color: #94817733; 62 | z-index: -1; 63 | border-radius: 190px 100px 170px 180px; 64 | left: calc(50% - 150px); 65 | top: 50px; 66 | 67 | } 68 | .detail .name{ 69 | font-size: xxx-large; 70 | padding: 40px 0 0 0; 71 | margin: 0 0 10px 0; 72 | } 73 | .detail .price{ 74 | font-weight: bold; 75 | font-size: x-large; 76 | letter-spacing: 7px; 77 | margin-bottom: 20px; 78 | } 79 | .detail .buttons{ 80 | display: flex; 81 | gap: 20px; 82 | margin-bottom: 20px; 83 | } 84 | .detail .buttons button{ 85 | background-color: #eee; 86 | border: none; 87 | padding: 15px 20px; 88 | border-radius: 20px; 89 | font-family: Poppins; 90 | font-size: large; 91 | } 92 | .detail .buttons svg{ 93 | width: 15px; 94 | } 95 | .detail .buttons span{ 96 | background-color: #555454; 97 | width: 30px; 98 | height: 30px; 99 | display: flex; 100 | justify-content: center; 101 | align-items: center; 102 | border-radius: 50%; 103 | margin-left: 20px; 104 | } 105 | .detail .buttons button:nth-child(2){ 106 | background-color: #2F2F2F; 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | color: #eee; 111 | box-shadow: 0 10px 20px #2F2F2F77; 112 | } 113 | .detail .description{ 114 | font-weight: 300; 115 | } 116 | /* // ipad */ 117 | @media only screen and (max-width: 992px) { 118 | .listProduct{ 119 | grid-template-columns: repeat(3, 1fr); 120 | } 121 | .detail{ 122 | grid-template-columns: 40% 1fr; 123 | } 124 | } 125 | 126 | 127 | /* mobile */ 128 | @media only screen and (max-width: 768px) { 129 | .listProduct{ 130 | grid-template-columns: repeat(2, 1fr); 131 | } 132 | .detail{ 133 | text-align: center; 134 | grid-template-columns: 1fr; 135 | } 136 | .detail .image img{ 137 | width: unset; 138 | height: 40vh; 139 | } 140 | .detail .name{ 141 | font-size: x-large; 142 | margin: 0; 143 | 144 | } 145 | .detail .buttons button{ 146 | font-size: small; 147 | } 148 | .detail .buttons{ 149 | justify-content: center; 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "name":" LD01 LOUNGE CHAIR", 5 | "price": 200, 6 | "image": "img/1.png", 7 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 8 | }, 9 | { 10 | "id": 2, 11 | "name":" LD02 LOUNGE CHAIR", 12 | "price": 250, 13 | "image": "img/2.png", 14 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 15 | }, 16 | { 17 | "id": 3, 18 | "name":" LD03 LOUNGE CHAIR", 19 | "price": 290, 20 | "image": "img/3.png", 21 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 22 | }, 23 | { 24 | "id": 4, 25 | "name":" LD04 LOUNGE CHAIR", 26 | "price": 200, 27 | "image": "img/4.png", 28 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 29 | }, 30 | { 31 | "id": 5, 32 | "name":" LD05 LOUNGE CHAIR", 33 | "price": 300, 34 | "image": "img/5.png", 35 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 36 | }, 37 | { 38 | "id": 6, 39 | "name":" LD06 LOUNGE CHAIR", 40 | "price": 200, 41 | "image": "img/6.png", 42 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 43 | }, 44 | { 45 | "id": 7, 46 | "name":" LD07 LOUNGE CHAIR", 47 | "price": 200, 48 | "image": "img/7.png", 49 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 50 | }, 51 | { 52 | "id": 8, 53 | "name":" LD08 LOUNGE CHAIR", 54 | "price": 200, 55 | "image": "img/8.png", 56 | "description": "Expertly rendered by Carl Hansen & Søn, the lounge chair—first introduced in 1951 and enduring ever since—is available in oak or as a combination of oak and walnut, sourced from sustainable forestry. Choose from seat and back upholstery in a selection of leather options or in a custom fabric." 57 | } 58 | 59 | ] --------------------------------------------------------------------------------