WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di ashimadison8
777
ashimadison8
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
28 February 2025
Un codice di securearray494
27 March 2025
APT di sicurezza
1 March 2025
HTML CSS Barra di navigazione moderna
HTML
Copy
Brazil
Latest Deals from Heathrow
OUT
£849
RTN
£659
Belize
Latest Deals from Heathrow
OUT
£999
RTN
£745
Egypt
Latest Deals from Heathrow
OUT
£399
RTN
£257
CSS
Copy
body { margin: 0; background-color: #2e2e31; display: flex; align-items: center; height: 100vh; width: 100vw; } .container { height: 100vh; width: 100vw; max-height: 600px; max-width: 1200px; min-height: 600px; min-width: 1100px; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; } .panel { height: 270px; width: 190px; position: relative; &:hover { .card { filter: blur(1.5px); } .card1 { background-size: 215% 135%; } .card2 { background-size: 115% 115%; } .card3 { background-size: 155% 115%; } .title { color: rgba(255, 255, 255, 0.2); } .border { border: 1px solid rgba(255, 255, 255, 1); } .slide { bottom: 0px; } .ring:before, .ring:after { transform: translateX(-50%) translateY(-50%) rotate(310deg); } } } .ring, .card, .border, .slide, .line { display: flex; justify-content: center; align-items: center; } .ring { color: #fffbf1; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 170px; } .card { background: #f0ead6; position: relative; transition: all 1s; height: 270px; width: 190px; border: 1px solid rgba(255, 255, 255, 1); } .card1 { background-image: url("https://assets.codepen.io/489403/brazil.jpg"); background-repeat: no-repeat; background-size: 200% 120%; } .card2 { background-image: url("https://assets.codepen.io/489403/belize.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } .card3 { background-image: url("https://assets.codepen.io/489403/egypt.jpg"); background-repeat: no-repeat; background-size: 140% 100%; } .ring:before, .ring:after { content: ""; padding: 0.7em 0.4em; position: absolute; left: 50%; width: 115%; top: 50%; display: block; border: 5px solid #50c9c3; border-radius: 50%; transition: transform 1s; transform: translateX(-50%) translateY(-50%) rotate(50deg); } .ring:before { border-color: rgb(235, 235, 235) rgb(235, 235, 235) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); z-index: -1; } .ring:after { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(235, 235, 235) rgb(235, 235, 235); } p { text-align: center; position: absolute; font-family: "Playfair Display"; } .title { font-size: 36px; font-weight: 700; transition: all 1s; top: 0; } .para { bottom: 0; font-size: 16px; font-family: "Raleway"; padding: 20px; margin: 0; text-align: center; } .border { position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); height: 260px; width: 180px; transition: border 1s; overflow: hidden; } .slide { height: 260px; width: 180px; position: absolute; border: 1px solid black; bottom: -270px; background: rgba(0, 0, 0, 0.5); transition: bottom 1s; flex-direction: column; } .fa-plane { font-size: 16px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */