Conception de l'interface utilisateur de la carte produit

2072 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Conception de l'interface utilisateur de la carte produit

Recommandé

30 November 2024

Erreur de mot de passe rebondissant

11 May 2025

Bonne fête des mères

25 March 2025

Un code par andrej.social.network

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;
}

Recommandé

Erreur de mot de passe rebondissant

Bonne fête des mères

Un code par andrej.social.network

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS