Seccion Main pagina web

by oraclepadawan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Section</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <main>
        <div class="content">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem pariatur ex accusantium esse, facere voluptate!</p>

            <form>
                <button class="primary-btn">Comprar</button>
                <button class="outline-btn">Correo</button>
            </form>
        </div>

        <div class="image">
            <img src="images/xboxseriess.jpg" alt="">
        </div>
    </main>
</body>
</html>

CSS

/* Variables para los colores */
:root {
    --primary:#42b983;
    --secundary:#2e4469;
    --background:#35495e;
    --black-text:rgb(61, 61, 61);
    --white-text:#ffffff;
    --blue-gradient:linear-gradient(90deg,#42b983,#35495e);
    --button-hover:#5b79a2;
    --text-shadow:.2rem .2rem .2rem #0d0d0e;
}

*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

main{
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

main h1{
    font-size: 1.7rem;
    color: var(--black-text);
    text-align: center;
    margin: 1rem;
}

main p{
    font-size: 1rem;
    color: var(--black-text);
    text-align: center;
    margin: 1rem 0;
}

main form{
    display: flex;
    justify-content: center;
}

main form button{
    margin: 0 .5rem;
    width: 8rem;
    height: 2.5rem;
    font-size: 1.1rem;
}

.primary-btn{
    background-color: var(--primary);
    color: var(--white-text);
    border-style: none;
}

.outline-btn{
    background-color: var(--white-text);
    color: var(--primary);
    border: solid .1rem var(--primary);
}

.primary-btn:hover{
    background-color: var(--white-text);
    color: var(--primary);
    border-style: solid .1rem var(--primary);
    transition: all .3s;
}

.outline-btn:hover{
    background-color: var(--primary);
    color: var(--white-text);
    border-style: none;
    transition: all .3s;
}

main img{
    height: 80vh;
}

/* Media Query */

@media(max-width:1039px){
    
    .image{
        display: none;
    }

    main{
        height: 100vh;
    }
}