Dividir layout a la mitad con CSS

¿Cómo dividir una pantalla en dos mitades con CSS?

Video Pantalla a la mitad con CSS GRID

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.

¿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.

  1. 0:51 Crear el documento html dividirpantalla
  2. 1:30 Crear 3 divs una padre container y dos hijos left y right
  3. 2:22 Empezando con los estilos css
  4. 2:45 Aplicando CSS GRID
  5. 5:32 Mostrando como queda el diseño CSS
  6. 8:08 Aplicando estilos css a los elementos de left: como flex, centrado
  7. 10:20 Creando una animación para el botón con transition css
  8. 11:46 Agregando fuentes personalizadas al proyecto
  9. 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>

 

No hay descargable

Redactado por: , Leido 4033 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021