├── README.md ├── assets ├── css │ └── styles.css ├── img │ └── img.png └── scss │ └── styles.scss └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Product Card Ui Design 2 | ## [Watch it on youtube](https://youtu.be/vfo31QNQRg0) 3 | ### Product Card Ui Design 4 | Beautiful product card using html and css, contains an image, title, price, description and a buy button. When doing hover effects the content unfolds upwards, creating a beautiful movement. 5 | 6 | Don't forget to join the channel for more videos like this. 7 | [Bedimcode](https://www.youtube.com/c/Bedimcode) 8 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | /*===== VARIABLES CSS =====*/ 4 | :root { 5 | /*===== Colores =====*/ 6 | --first-color: #F2A20C; 7 | --white-color: #E9EAEC; 8 | --dark-color: #272D40; 9 | --dark-color-lighten: #F2F5FF; 10 | /*===== Fuente y tipografia =====*/ 11 | --body-font: 'Poppins', sans-serif; 12 | --h1-font-size: 1.5rem; 13 | --h2-font-size: 1.25rem; 14 | --normal-font-size: 1rem; 15 | --small-font-size: .875rem; 16 | } 17 | 18 | /*===== BASE =====*/ 19 | *, ::before, ::after { 20 | box-sizing: border-box; 21 | } 22 | 23 | body { 24 | margin: 0; 25 | padding: 0; 26 | font-family: var(--body-font); 27 | font-size: var(--normal-font-size); 28 | } 29 | 30 | h1, p { 31 | margin: 0; 32 | } 33 | 34 | a { 35 | text-decoration: none; 36 | } 37 | 38 | img { 39 | max-width: 100%; 40 | height: auto; 41 | } 42 | 43 | /*===== CARD =====*/ 44 | .container { 45 | height: 100vh; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | background-color: var(--dark-color-lighten); 50 | } 51 | 52 | .card { 53 | width: 320px; 54 | height: 400px; 55 | background-color: var(--dark-color); 56 | border-radius: 1rem; 57 | padding: 4rem 2rem 0; 58 | color: var(--white-color); 59 | overflow-y: hidden; 60 | } 61 | 62 | .card__img { 63 | position: absolute; 64 | width: 260px; 65 | filter: drop-shadow(5px 10px 15px rgba(8,9,13,.4)); 66 | } 67 | 68 | .card__data { 69 | transform: translateY(13.2rem); 70 | text-align: center; 71 | } 72 | 73 | .card__title { 74 | font-size: var(--h1-font-size); 75 | color: var(--first-color); 76 | margin-bottom: .5rem; 77 | } 78 | 79 | .card__preci { 80 | display: inline-block; 81 | font-size: var(--h2-font-size); 82 | font-weight: 500; 83 | margin-bottom: 1.25rem; 84 | } 85 | 86 | .card__description { 87 | font-size: var(--small-font-size); 88 | text-align: initial; 89 | margin-bottom: 1.25rem; 90 | opacity: 0; 91 | } 92 | 93 | .card__button { 94 | display: block; 95 | width: max-content; 96 | padding: 1.125rem 2rem; 97 | background-color: var(--first-color); 98 | color: var(--white-color); 99 | border-radius: .5rem; 100 | font-weight: 600; 101 | transition: .2s; 102 | opacity: 0; 103 | } 104 | 105 | .card__button:hover { 106 | box-shadow: 0 18px 40px -12px rgba(242,162,12,.35); 107 | } 108 | 109 | .card__img, 110 | .card__data, 111 | .card__title, 112 | .card__preci, 113 | .card__description { 114 | transition: .5s; 115 | } 116 | 117 | /* Hover card effect */ 118 | .card:hover .card__img { 119 | transform: translate(-1.5rem, -9.5rem) rotate(-20deg); 120 | } 121 | 122 | .card:hover .card__data { 123 | transform: translateY(4.8rem); 124 | } 125 | 126 | .card:hover .card__title { 127 | transform: translateX(-2.3rem); 128 | margin-bottom: 0; 129 | } 130 | 131 | .card:hover .card__preci { 132 | transform: translateX(-6.8rem); 133 | } 134 | 135 | .card:hover .card__description, 136 | .card:hover .card__button { 137 | transition-delay: .2s; 138 | opacity: 1; 139 | } 140 | -------------------------------------------------------------------------------- /assets/img/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/product-card-ui-design/62e77b8ef567c878ff2e624eb24656b2e3f5dadd/assets/img/img.png -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | 4 | /*===== VARIABLES CSS =====*/ 5 | :root{ 6 | /*===== Colores =====*/ 7 | --first-color: #F2A20C; 8 | --white-color: #E9EAEC; 9 | --dark-color: #272D40; 10 | --dark-color-lighten: #F2F5FF; 11 | 12 | /*===== Fuente y tipografia =====*/ 13 | --body-font: 'Poppins', sans-serif; 14 | --h1-font-size: 1.5rem; 15 | --h2-font-size: 1.25rem; 16 | --normal-font-size: 1rem; 17 | --small-font-size: .875rem; 18 | 19 | } 20 | 21 | 22 | /*===== BASE =====*/ 23 | *,::before,::after{ 24 | box-sizing: border-box; 25 | } 26 | 27 | body{ 28 | margin: 0; 29 | padding: 0; 30 | font-family: var(--body-font); 31 | font-size: var(--normal-font-size); 32 | } 33 | 34 | h1,p{ 35 | margin: 0; 36 | } 37 | 38 | a{ 39 | text-decoration: none; 40 | } 41 | 42 | img{ 43 | max-width: 100%; 44 | height: auto; 45 | } 46 | 47 | /*===== CARD =====*/ 48 | .container{ 49 | height: 100vh; 50 | display: flex; 51 | justify-content: center; 52 | align-items: center; 53 | background-color: var(--dark-color-lighten); 54 | } 55 | 56 | .card{ 57 | width: 320px; 58 | height: 400px; 59 | background-color: var(--dark-color); 60 | border-radius: 1rem; 61 | padding: 4rem 2rem 0; 62 | color: var(--white-color); 63 | overflow-y: hidden; 64 | 65 | &__img{ 66 | position: absolute; 67 | width: 260px; 68 | filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, .4)); 69 | } 70 | 71 | &__data{ 72 | transform: translateY(13.2rem); 73 | text-align: center; 74 | } 75 | 76 | &__title{ 77 | font-size: var(--h1-font-size); 78 | color: var(--first-color); 79 | margin-bottom: .5rem; 80 | } 81 | &__preci{ 82 | display: inline-block; 83 | font-size: var(--h2-font-size); 84 | font-weight: 500; 85 | margin-bottom: 1.25rem; 86 | } 87 | &__description{ 88 | font-size: var(--small-font-size); 89 | text-align: initial; 90 | margin-bottom: 1.25rem; 91 | opacity: 0; 92 | } 93 | &__button{ 94 | display: block; 95 | width: max-content; 96 | padding: 1.125rem 2rem; 97 | background-color: var(--first-color); 98 | color: var(--white-color); 99 | border-radius: .5rem; 100 | font-weight: 600; 101 | transition: .2s; 102 | opacity: 0; 103 | 104 | &:hover{ 105 | box-shadow: 0 18px 40px -12px rgba(242, 162, 12, .35); 106 | } 107 | } 108 | 109 | &__img, 110 | &__data, 111 | &__title, 112 | &__preci, 113 | &__description { 114 | transition: .5s; 115 | } 116 | } 117 | 118 | /* Hover card effect */ 119 | .card:hover{ 120 | .card__img{ 121 | transform: translate(-1.5rem, -9.5rem) rotate(-20deg); 122 | } 123 | .card__data{ 124 | transform: translateY(4.8rem); 125 | } 126 | .card__title{ 127 | transform: translateX(-2.3rem); 128 | margin-bottom: 0; 129 | } 130 | .card__preci{ 131 | transform: translateX(-6.8rem); 132 | } 133 | .card__description, 134 | .card__button{ 135 | transition-delay: .2s; 136 | opacity: 1; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Responsive product card 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 |
19 |

Nike Air Jordan

20 | $99 21 |

Nike Air Jordan Footwear basketball sneakers.

22 | Buy Now 23 |
24 | 25 |
26 |
27 | 28 | --------------------------------------------------------------------------------