28 junio, 2021
Dividir layout a la mitad con CSS
Para dividir un layout con CSS GRID sigamos los siguientes pasos: primero declarar dos capas dentro de un div padre, luego aplicar reglas css grid, flex.
Suscríbete a nuestro canal en Youtube
Suscríbirse¿Cómo dividir una pantalla al 50% cada lado con CSS?
Para dividir un layout con CSS GRID sigamos los siguientes pasos: primero declarar dos capas dentro de un div padre, luego aplicar reglas css grid, flex.
- 0:51 Crear el documento html dividirpantalla
- 1:30 Crear 3 divs una padre container y dos hijos left y right
- 2:22 Empezando con los estilos css
- 2:45 Aplicando CSS GRID
- 5:32 Mostrando como queda el diseño CSS
- 8:08 Aplicando estilos css a los elementos de left: como flex, centrado
- 10:20 Creando una animación para el botón con transition css
- 11:46 Agregando fuentes personalizadas al proyecto
- 13:30 Optimizando la versión móvil modificando las fracciones de la columnas flex.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PANTALLA DIVIDIDA EN 2 PARTES</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap');
body{ margin: 0; font-family: 'Roboto Condensed', sans-serif; }
.container{
display: grid;
grid-template-columns: 1fr 1fr;
background: url(bg.jpg) center;
background-size: cover;
height: 100vh;
}
.left{
background: linear-gradient(red, rgba(0, 0, 255, 0.411));
display: flex;
place-items: center;
justify-content: center;
text-align: center;
}
.left h1{ color: white; font-size: 50px;}
.left p{ color: white; font-size: 20px; }
.left a{ border-radius: 25px; border: 1px solid white; text-decoration: none; padding: 10px 50px; transition: background 1s; color:white}
.left a:hover{ background: white; color:blue}
@media (max-width:900px){
.container{
grid-template-columns: 3fr 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div>
<h1>CODEA</h1>
<p>Dev FullStack</p>
<a href="">ENTER</a>
</div>
</div>
<div class="right">
</div>
</div>
</body>
</html>
Leido 19289 veces
