WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Boutique de fiches produits
3240
Andev.web
Ouvrir dans l'éditeur
Video
Publiez votre code
12
Recommandé
25 July 2025
Boîte d'inscription de connexion 3D HTML CSS
26 January 2026
Code d'intégration HTML5 du jeu Escape Road
12 December 2025
Simulation physique 3D de type ragdoll avec Three.js et Cannon.js
HTML
Copy
Andev Web
SHOP
AIR ZOOM PEGASUS
$990.00
$749.00
AIR ZOOM PEGASUS
$990.00
$749.00
AIR ZOOM PEGASUS
$990.00
$749.00
AIR ZOOM PEGASUS
$990.00
$749.00
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap'); /*-- VARIABLES CSS--*/ /*Colores*/ :root{ --first-color: #E3F8FF; --second-color: #DCFAFB; --third-color: #FFE8DF; --accent-color: #FF5151; --dark-color: #161616; } /*Tipografia responsive*/ :root{ --body-font: 'Open Sans'; --h1-font-size: 1.5rem; --h3-font-size: 1rem; --normal-font-size: 0.938rem; --smaller-font-size: 0.75rem; } @media screen and (min-width: 768px){ :root{ --h1-font-size: 2rem; --normal-font-size: 1rem; --smaller-font-size: 0.813rem; } } /*-- BASE --*/ *,::after,::before{ box-sizing: border-box; } body{ margin: 2rem 0 0 0; background-color: #fff; color: var(--dark-color); font-family: var(--body-font); } h1{ font-size: var(--h1-font-size); } img{ max-width: 100%; height: auto; } a{ text-decoration: none; } /*-- LAYAOUT --*/ .main { padding: 2rem 0; } .bd-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 1200px; margin-left: 2.5rem; margin-right: 2.5rem; align-items: center; gap: 2rem; } /*-- PAGES --*/ .title-shop{ position: relative; margin: 0 2.5rem; } .title-shop::after{ content: ''; position: absolute; top: 50%; width: 72px; height: 2px; background-color: var(--dark-color); margin-left: .25rem; } /*-- COMPONENT --*/ .card{ position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 2rem; border-radius: 1rem; overflow: hidden; } article:nth-child(1){ background-color: var(--first-color); } article:nth-child(2){ background-color: var(--second-color); } article:nth-child(3){ background-color: var(--third-color); } article:nth-child(4){ background-color: var(--second-color); } .card__img{ width: 180px; height: auto; padding: 3rem 0; transition: .5s; } .card__name{ position: absolute; left: -25%; top: 0; width: 3.5rem; height: 100%; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; background-color: var(--dark-color); color: #fff; font-weight: bold; transition: .5s; } .card__icon{ font-size: 1.5rem; color: var(--dark-color); } .card__icon:hover{ color: var(--accent-color); } .card__precis{ width: 100%; display: flex; justify-content: space-between; align-items: flex-end; transition: .5s; } .card__preci{ display: block; text-align: center; } .card__preci--before{ font-size: var(--smaller-font-size); color: var(--accent-color); margin-bottom: .25rem; } .card__preci--now{ font-size: var(--h3-font-size); font-weight: bold; } /*Move left*/ .card:hover{ box-shadow: 0 .5rem 1rem #D1D9E6; } .card:hover .card__name{ left: 0; } .card:hover .card__img{ transform: rotate(30deg); margin-left: 3.5rem; } .card:hover .card__precis{ margin-left: 3.5rem; padding: 0 1.5rem; } /*-- MEDIA QUERIES --*/ @media screen and (min-width: 1200px){ body{ margin: 3rem 0 0 0; } .title-shop{ margin: 0 5rem; } .bd-grid{ margin-left: auto; margin-right: auto; } }
JS
Copy