WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
MOSTRO
1116
omer
Apri nell'Editor
Pubblica il Tuo Codice
15 October 2025
Mostro dell'orologio del conto alla rovescia di Halloween
HTML
Copy
MARKET
MARKET
DETAYLI BAK
$990.00
$749.00
DETAYLI BAK
$990.00
$749.00
DETAYLI BAK
$990.00
$749.00
DETAYLI BAK
$990.00
$749.00
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */@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: 1.01rem; --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
/* Replace with your JS Code (Leave empty if not needed) */