WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
HTML
CSS
JS
nana
Bienvenue sur mon site
Cree.Apprendre.Reussir
La reussie commence par une idea
travaille dur chaque joue
Ne jamais abandonner
commencer
body{ margin: 0; background: url(https://tse4.mm.bing.net/th/id/OIP.MS3xP454CQ3F1Nks_FRnvwHaE-?rs=1&pid=ImgDetMain&o=7&rm=3); } h1{ font-family: ARIAL; text-align: center; } p{ font-family: ARIAL; text-align: center; } .gg{ display: flex; justify-content: space-evenly; } .bt{ width: 200px; border: 2px solid rgb(255, 254, 254); box-shadow: 0 0 10px rgb(255, 254, 254),0 0 20px rgb(255, 254, 254) ; border-radius: 20px; } h4{ text-align: center; } img{ width: 200px; height: 200px; border-radius: 20px; } .ba{ animation: awal 4s ease alternate-reverse; } .bc{ animation: nana 4s ease alternate-reverse; } button{ padding: 9px 50px; border-radius: 20px; font-size: 16px; color: black; background: blue; box-shadow: 0 0 10px blue, 0 0 20px blue; border:2px solid blue; display: block; margin: 20px auto; } @keyframes awal { to{ transform: translateX(-80vw); } } @keyframes nana { to{ transform: translateX(80vw); } } @media (max-width: 600px) { h1{ font-size: 20px; } .bt{ width: 25%; } img{ width: 100%; } button{ padding: 8px 30px; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
nana
Bienvenue sur mon site
Cree.Apprendre.Reussir
La reussie commence par une idea
travaille dur chaque joue
Ne jamais abandonner
commencer
body{ margin: 0; background: url(https://tse4.mm.bing.net/th/id/OIP.MS3xP454CQ3F1Nks_FRnvwHaE-?rs=1&pid=ImgDetMain&o=7&rm=3); } h1{ font-family: ARIAL; text-align: center; } p{ font-family: ARIAL; text-align: center; } .gg{ display: flex; justify-content: space-evenly; } .bt{ width: 200px; border: 2px solid rgb(255, 254, 254); box-shadow: 0 0 10px rgb(255, 254, 254),0 0 20px rgb(255, 254, 254) ; border-radius: 20px; } h4{ text-align: center; } img{ width: 200px; height: 200px; border-radius: 20px; } .ba{ animation: awal 4s ease alternate-reverse; } .bc{ animation: nana 4s ease alternate-reverse; } button{ padding: 9px 50px; border-radius: 20px; font-size: 16px; color: black; background: blue; box-shadow: 0 0 10px blue, 0 0 20px blue; border:2px solid blue; display: block; margin: 20px auto; } @keyframes awal { to{ transform: translateX(-80vw); } } @keyframes nana { to{ transform: translateX(80vw); } } @media (max-width: 600px) { h1{ font-size: 20px; } .bt{ width: 25%; } img{ width: 100%; } button{ padding: 8px 30px; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...