Conception de l'interface utilisateur de la carte produit

3,240 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Conception de l'interface utilisateur de la carte produit

Recommandé

23 September 2025

Extrait HTML d'animation de chargement CSS

16 April 2025

Un code par anhtuanle2004yst

11 January 2024

Écran de chargement avec points

HTML

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(#4ba9e9 0, #4ba9e9 50%, #fff 50%, #fff 100%);
	min-height: 100vh;
}
.card {
	position: relative;
	width: 300px;
	height: 380px;
	background: #0000;
	display: flex;
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: 0.5s ease-in-out;
}
.card:hover {
	width: 600px;
}
.card .imgBx {
	position: relative;
	min-width: 300px;
	height: 100%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.card .imgBx img {
	max-width: 250px;
	transition: 0.5s ease-in-out;
}
.card:hover .imgBx img {
	transform: rotate(-35deg) translateX(-20px);
}
.card .details {
	position: absolute;
	left: 0;
	width: 300px;
	height: 100%;
	background: #4ba9e9;
	display: flex;
	justify-content: center;
	padding: 20px;
	flex-direction: column;
	transition: 0.5s ease-in-out;
}
.card:hover .details {
	left: 300px;
}
.card .details::before {
	content: '';
	position: absolute;
	left: 0px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #fff;
	z-index: 1;
}
.card .details h3 {
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.5em;
	line-height: 1em;
}
.card .details h3 span {
	font-size: 0.65em;
	font-weight: 300;
	opacity: 0.85;
	text-transform: none;
}
.card .details h4 {
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1em;
	margin-top: 20px;
	margin-bottom: 10px;
}
p {
	color: #fff;
	font-size: 0.8em;
	opacity: 0.85;
}
.size {
	display: flex;
	gap: 10px;
}
.size li {
	list-style: none;
	color: #fff;
	font-size: 0.9em;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #fff;
	cursor: pointer;
	font-weight: 500;
	opacity: 0.5;
}
.size li:hover {
	background: #fff;
	color: #4ba9e9;
	opacity: 1;
}
.group {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	align-items: center;
}
.card .details h2 {
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 2em;
}
.card .details h2 sup {
	font-weight: 300;
}
.card .details h2 small {
	font-size: 0.75em;
}
.card .details a {
	display: inline-flex;
	padding: 10px 25px;
	background: #fff;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
	color: #4ba9e9;
}