Simulador de CSS
⬅ Voltar
Aula Prática: CSS
/* ======================= RESET E BASE ======================= */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #1e1e2f, #2c5364); color: white; text-align: center; padding: 20px; } /* ======================= TÍTULOS ======================= */ h1 { color: #00f2ff; font-size: 42px; margin-bottom: 10px; } h2 { color: #ffd700; margin-top: 20px; } /* ======================= TEXTO ======================= */ p { font-size: 18px; margin: 10px 0; } /* ======================= BOTÃO ======================= */ button { padding: 10px 20px; background: #00f2ff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.3s; } button:hover { background: #00c3cc; transform: scale(1.05); } /* ======================= CAIXA ======================= */ .box { margin: 20px auto; padding: 20px; width: 220px; background: #ffffff22; border-radius: 10px; box-shadow: 0 0 10px #00000055; } /* ======================= FLEXBOX ======================= */ .container-flex { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } .item { background: #00f2ff; color: #000; padding: 15px; border-radius: 8px; width: 80px; } /* ======================= GRID ======================= */ .grid { display: grid; grid-template-columns: repeat(3, 80px); gap: 10px; justify-content: center; margin-top: 20px; } .grid div { background: #ffd700; color: #000; padding: 10px; } /* ======================= IMAGEM ======================= */ img { width: 150px; border-radius: 10px; margin-top: 15px; transition: 0.3s; } img:hover { transform: scale(1.1); } /* ======================= LINK ======================= */ a { color: #00f2ff; text-decoration: none; } a:hover { text-decoration: underline; } /* ======================= ANIMAÇÃO ======================= */ @keyframes piscar { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .animado { animation: piscar 1s infinite; margin-top: 20px; font-size: 20px; color: #ff4081; } /* ======================= TRANSFORMAÇÃO ======================= */ .rotate:hover { transform: rotate(10deg); transition: 0.3s; }
Aplicar CSS