WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2012
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
20 September 2025
Demonstração de fogos de artifício animados em CSS, vaga-lumes e girassóis
25 February 2025
Um código por securearray494
26 May 2025
Um Código de Liamgilles76
HTML
Copy
Top 3 Mobile Games
Roblox
#1
Subway Surfers
#2
Stumble Guys
#3
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap'); body{ font-family: 'Nunito', sans-serif; background-color:#f5f4f6 ; } *, *::before, *::after{ padding: 0px; margin: 0px; box-sizing: border-box; } .container{ width: 100%; display: flex; justify-content: center; align-items: center; padding: 100px 0px; } .list-container{ width: 400px; text-align: center; } .card{ height: 95px; width: 100%; background: white; margin-top: 10px; border-radius: 5px; cursor: pointer; display: flex; overflow: hidden; transition: 0.3s; } h2{ padding-bottom: 14px; } .content-container{ width: 80%; height: 100%; display: flex; align-items: center; } .game-image1{ width: 70px; height: 70px; margin-left: 10px; background-image: url("https://play-lh.googleusercontent.com/WNWZaxi9RdJKe2GQM3vqXIAkk69mnIl4Cc8EyZcir2SKlVOxeUv9tZGfNTmNaLC717Ht"); background-position: center; background-size: cover; border-radius: 5px; } .game-image2{ width: 70px; height: 70px; margin-left: 10px; background-image: url("https://play-lh.googleusercontent.com/Lf-c_8Tk6ppqF8aGmMhWNDFvWDmKakkRXGXZh0e33xHlgJ4o3n7D-eIVCOGT8X7eeuY"); background-position: center; background-size: cover; border-radius: 5px; } .game-image3{ width: 70px; height: 70px; margin-left: 10px; background-image: url("https://play-lh.googleusercontent.com/uHoOYJbKRC6qIbZ6uhJHpK9LtVUb6kh85gDGvn3LRPAzJY9bCk9QvicK3fMRb2ELkQ"); background-position: center; background-size: cover; border-radius: 5px; } .game-name{ margin-left: 30px; font-size: 20px; } .image{ width: 100%; height: 100%; } .rating{ transition: 0.5s; width: 20%; display: flex; align-items:center; justify-content: center; transform: translateX(100px); } .card:hover .rating{ transform: translateX(0px); } .list-container:hover .card{ filter: blur(5px); opacity: 0.5; } .list-container .card:hover{ transform: scale(1.1); filter: blur(0px); opacity: 1; }
JS
Copy