Diseño de interfaz de usuario de tarjeta de producto

2907 Andev.web

Abrir en el editor Video Publica tu código

Diseño de interfaz de usuario de tarjeta de producto

Recomendado

10 August 2024

Código HTML del formulario de inicio de sesión

29 July 2024

Clasificación de emojis

24 August 2025

InspireX: Tema web moderno (Tailwind, vídeo, galería)

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

Recomendado

Código HTML del formulario de inicio de sesión

Clasificación de emojis

InspireX: Tema web moderno (Tailwind, vídeo, galería)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS