WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por danis
1383
danis
Abrir no Editor
Publique Seu Código
Recomendado
5 June 2025
Um código por yuhhxn
21 April 2025
Um Código de Metehan
17 April 2025
Um código de Metehan
HTML
Copy
Webleb
Log In
Sign Up
Log In
Login
Or
Forgot your password?
Sign Up
Register
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900'); body{ font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1.7; color: #ffeba7; background-color: #1f2029; overflow: hidden; } a:hover { text-decoration: none; } .link { color: #ffeba7; } .link:hover { color: #c4c3ca; } p { font-weight: 500; font-size: 14px; } h4 { font-weight: 600; } h6 span{ padding: 0 20px; font-weight: 700; } .section{ position: relative; width: 100%; display: block; } .full-height{ min-height: 100vh; } [type="checkbox"]:checked, [type="checkbox"]:not(:checked){ display: none; } .checkbox:checked + label, .checkbox:not(:checked) + label{ position: relative; display: block; text-align: center; width: 60px; height: 16px; border-radius: 8px; padding: 0; margin: 10px auto; cursor: pointer; background-color: #ffeba7; } .checkbox:checked + label:before, .checkbox:not(:checked) + label:before{ position: absolute; display: block; width: 36px; height: 36px; border-radius: 50%; color: #ffeba7; background-color: #020305; font-family: 'unicons'; content: '\eb4f'; z-index: 20; top: -10px; left: -10px; line-height: 36px; text-align: center; font-size: 24px; transition: all 0.5s ease; } .checkbox:checked + label:before { transform: translateX(44px) rotate(-270deg); } .card-3d-wrap { position: relative; width: 440px; max-width: 100%; height: 450px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; perspective: 800px; margin-top: 60px; } .card-3d-wrapper { width: 100%; height: 100%; position:absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 600ms ease-out; border: 2px solid #ffeba7; border-radius: 10px; } .card-front, .card-back { width: 100%; height: 100%; background-color: #2b2e38; background-image: url('/img/pattern_japanese-pattern-2_1_2_0-0_0_1__ffffff00_000000.png'); position: absolute; border-radius: 6px; -webkit-transform-style: preserve-3d; } .card-back { transform: rotateY(180deg); } .checkbox:checked ~ .card-3d-wrap .card-3d-wrapper { transform: rotateY(180deg); } .center-wrap{ position: absolute; width: 100%; padding: 0 35px; top: 50%; left: 0; transform: translate3d(0, -50%, 35px) perspective(100px); z-index: 20; display: block; } .form-group{ position: relative; display: block; margin: 0; padding: 0; } .form-style { padding: 13px 20px; padding-left: 55px; height: 48px; width: 100%; font-weight: 500; border-radius: 4px; font-size: 14px; line-height: 22px; letter-spacing: 0.5px; outline: none; color: #c4c3ca; background-color: #1f2029; border: none; -webkit-transition: all 200ms linear; transition: all 200ms linear; box-shadow: 0 4px 8px 0 rgba(21,21,21,.2); } .form-style:focus, .form-style:active { border: none; outline: none; box-shadow: 0 4px 8px 0 rgba(21,21,21,.2); } .input-icon { position: absolute; top: 0; left: 18px; height: 48px; font-size: 24px; line-height: 48px; text-align: left; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .btn{ border-radius: 4px; height: 44px; font-size: 13px; font-weight: 600; text-transform: uppercase; -webkit-transition : all 200ms linear; transition: all 200ms linear; padding: 0 30px; letter-spacing: 1px; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; align-items: center; background-color: #ffeba7; color: #000000; } .btn:hover{ background-color: #000000; color: #ffeba7; box-shadow: 0 8px 24px 0 rgba(16,39,112,.2); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */