Guías bluuweb

Appearance

Return to top
On this page

CSS Flexbox [Práctica]

Comenzaremos a crear nuestro primer sitio web con Flexbox

⭐ Videos Premium ⭐

Esta sección es parte del curso en Udemy. Si quieres acceder a ella, puedes comprar el curso en Udemy: Bootstrap 5 by bluuweb.

O bien también puedes visualizar los videos siendo miembro en Youtube. Accede a miembros del canal aquí y accede a los videos de esta sección.

Utilidades

Ya habíamos trabajado con varios estilos por ende los vamos a reciclar:

Otros recursos utilizados:

html
<!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>Alto's Game</title>

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500&display=swap"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="css/normalize.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body>
        <header class="bg-header">
            <div class="bg-navbar">
                <div class="container">
                    <div class="navbar">
                        <a href="/" class="navbar-brand">
                            <img
                                src="assets/icons/logo.svg"
                                alt="Logo Altos Game"
                            />
                            Alto's Game
                        </a>
                        <nav class="navbar-nav">
                            <a href="" class="nav-link">Inicio</a>
                            <a href="" class="nav-link">Tienda</a>
                            <a href="" class="nav-link">Nosotros</a>
                            <a href="" class="nav-link">Contacto</a>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
    </body>
</html>
css
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: "Raleway", sans-serif;
}

/* Utilidades */
.container {
    width: 80%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.bg-header {
    background-image: url("../assets/images/bg-header.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 18.75em;
}

.bg-navbar {
    background-color: rgba(0, 0, 0, 0.157);
    padding: 1.5em 0;
}

.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 2rem;
    margin-bottom: 1em;
    font-weight: 500;
}

.navbar-brand img {
    width: 2em;
}

.navbar-nav {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 1em;
    border-radius: 0.3em;
}

.nav-link {
    display: inline-block;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    padding: 0.3em;
}

.nav-link:hover {
    background-color: white;
    color: black;
    border-radius: 0.5em;
}

Main & Tienda

html
<main class="container main">
    <h1 class="main-title">Nuestros productos</h1>
    <section class="tienda">
        <article class="card">
            <img src="assets/images/card-1.png" alt="" class="card-img" />
            <div class="card-body">
                <h5>Lorem, ipsum dolor.</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Eveniet exercitationem quod adipisci a eaque tempore
                    recusandae voluptatibus atque sed ratione dolores, officia
                    deserunt et dolorum sunt velit quis excepturi eius.
                </p>
                <a
                    href="https://www.google.cl/"
                    target="_blanck"
                    class="btn btn-dark"
                    >Comprar</a
                >
            </div>
        </article>
        <article class="card">
            <img src="assets/images/card-1.png" alt="" class="card-img" />
            <div class="card-body">
                <h5>Lorem, ipsum dolor.</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Eveniet exercitationem quod adipisci a eaque tempore
                    recusandae voluptatibus atque sed ratione dolores, officia
                    deserunt et dolorum sunt velit quis excepturi eius.
                </p>
                <a
                    href="https://www.google.cl/"
                    target="_blanck"
                    class="btn btn-dark"
                    >Comprar</a
                >
            </div>
        </article>
        <article class="card">
            <img src="assets/images/card-1.png" alt="" class="card-img" />
            <div class="card-body">
                <h5>Lorem, ipsum dolor.</h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Eveniet exercitationem quod adipisci a eaque tempore
                    recusandae voluptatibus atque sed ratione dolores, officia
                    deserunt et dolorum sunt velit quis excepturi eius.
                </p>
                <a
                    href="https://www.google.cl/"
                    target="_blanck"
                    class="btn btn-dark"
                    >Comprar</a
                >
            </div>
        </article>
    </section>
</main>
css
/* Utilidades */
.container {
    width: 80%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5em;
    margin: 0 0.1em;
    border-radius: 0.5em;
}

.btn-primary {
    color: white;
    background-color: #214037;
}

.btn-secondary {
    color: white;
    background-color: #77a699;
}

.btn-danger {
    color: white;
    background-color: #a6464e;
}

.btn-info {
    color: black;
    background-color: #e2f2c9;
}

.btn-dark {
    color: white;
    background-color: #2f2e2e;
}

/* MAIN */
.main {
    background-color: white;
    margin-top: -2rem;
    border-radius: 0.3em;
    padding: 0.3em;
}

.main-title {
    text-align: center;
    text-transform: uppercase;
}

/* CARD */
.card {
    background-color: #a6464e;
    color: white;
    overflow: hidden;
    border-radius: 0.5em;
    margin-bottom: 1em;
}

.card-img {
    width: 100%;
}

.card-body {
    padding: 1em;
}

.card-body h5 {
    font-size: 1.5rem;
    margin: 1em 0;
    font-weight: 500;
}

.card-body p {
    font-weight: 300;
}

Nosotros

html
<section class="nosotros">
    <div class="nosotros-col-img"></div>
    <div class="nosotros-col-text">
        <div class="nosotros-body">
            <h2>Nosotros</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus
                omnis, incidunt velit voluptatum officia nulla enim ea ducimus
                maiores consequatur earum quisquam sapiente architecto magnam
                provident ratione quibusdam aperiam sit?
            </p>
            <a href="#" class="btn btn-danger">Más información</a>
        </div>
    </div>
</section>
css
/* NOSOTROS */
.nosotros {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
    background-color: #2f2e2e;
}

.nosotros-col-img {
    order: 2;
    background-image: url("../assets/images/perfil-dos.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    width: 100%;
}

.nosotros-col-text {
    order: 1;
}

.nosotros-body {
    padding: 1em;
    text-align: center;
    color: white;
}

.nosotros-body h2 {
    text-transform: uppercase;
    font-weight: 500;
}

.nosotros-body p {
    font-weight: 200;
}
html
<footer class="bg-footer">
    <div class="container">
        <p>Lorem, ipsum dolor.</p>
    </div>
</footer>
css
/* FOOTER */
.bg-footer {
    background-color: #214037;
    color: #e2f2c9;
}

.bg-footer p {
    padding: 1em;
    margin: 0;
    text-align: center;
}

Media Queries

El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.

html
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
    @media (max-width: 600px) {
        .facet_sidebar {
            display: none;
        }
    }
</style>

Ejemplo:

html
<!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>Media Queries</title>
        <style>
            main {
                background-color: black;
                color: white;
            }

            @media (min-width: 576px) {
                main {
                    background-color: peru;
                }
            }

            @media (min-width: 768px) {
                main {
                    background-color: tomato;
                }
            }
        </style>
    </head>

    <body>
        <main>
            <article>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed
                    a, accusamus culpa voluptatem quasi dignissimos officia
                    necessitatibus ad quod voluptate ipsa expedita enim ratione
                    perspiciatis, omnis asperiores totam esse architecto.
                </p>
            </article>
            <article>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Ex, sed porro. Quis, ipsa architecto accusantium, porro
                    dolorem officia, repellat rem nostrum doloremque sunt saepe
                    quaerat dicta quod amet illo quo.
                </p>
            </article>
        </main>
    </body>
</html>

Ejemplo flexbox:

css
@media (min-width: 576px) {
    main {
        background-color: peru;
        display: flex;
    }

    article {
        margin: 2em;
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    main {
        background-color: tomato;
    }

    article {
        font-size: 2rem;
    }
}

Práctica Responsive

css
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: "Raleway", sans-serif;
}

/* Utilidades */
.container {
    width: 80%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5em;
    margin: 0 0.1em;
    border-radius: 0.5em;
}

.btn-primary {
    color: white;
    background-color: #214037;
}

.btn-secondary {
    color: white;
    background-color: #77a699;
}

.btn-danger {
    color: white;
    background-color: #a6464e;
}

.btn-info {
    color: black;
    background-color: #e2f2c9;
}

.btn-dark {
    color: white;
    background-color: #2f2e2e;
}

/* HEADER */
.bg-header {
    background-image: url("../assets/images/bg-header.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 18.75em;
}

.bg-navbar {
    background-color: rgba(0, 0, 0, 0.157);
    padding: 1.5em 0;
}

.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .navbar {
        flex-direction: row;
        justify-content: space-between;
    }
}

.navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 2rem;
    margin-bottom: 1em;
    font-weight: 500;
}

@media (min-width: 768px) {
    .navbar-brand {
        flex-direction: row;
        margin-bottom: 0;
    }
}

.navbar-brand img {
    width: 2em;
}

.navbar-nav {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 1em;
    border-radius: 0.3em;
}

.nav-link {
    display: inline-block;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    padding: 0.3em;
}

.nav-link:hover {
    background-color: white;
    color: black;
    border-radius: 0.5em;
}

/* MAIN */
.main {
    background-color: white;
    margin-top: -2rem;
    border-radius: 0.3em;
    padding: 0.3em;
}

.main-title {
    text-align: center;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .tienda {
        display: flex;
        gap: 1em;
    }
}

/* CARD */
.card {
    background-color: #a6464e;
    color: white;
    overflow: hidden;
    border-radius: 0.5em;
    margin-bottom: 1em;
}

.card-img {
    width: 100%;
}

.card-body {
    padding: 1em;
}

.card-body h5 {
    font-size: 1.5rem;
    margin: 1em 0;
    font-weight: 500;
}

.card-body p {
    font-weight: 300;
}

/* NOSOTROS */
.nosotros {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
    background-color: #2f2e2e;
}

.nosotros-col-img {
    order: 2;
    background-image: url("../assets/images/perfil-dos.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    width: 100%;
}

.nosotros-col-text {
    order: 1;
}

@media (min-width: 576px) {
    .nosotros-col-img {
        height: 500px;
    }
}

@media (min-width: 768px) {
    .nosotros {
        flex-direction: row;
    }

    .nosotros-col-img {
        order: 1;
        flex: 1 1 0;
    }

    .nosotros-col-text {
        order: 2;
        flex: 1 1 0;
    }
}

.nosotros-body {
    padding: 1em;
    text-align: center;
    color: white;
}

.nosotros-body h2 {
    text-transform: uppercase;
    font-weight: 500;
}

.nosotros-body p {
    font-weight: 200;
}

/* FOOTER */
.bg-footer {
    background-color: #214037;
    color: #e2f2c9;
}

.bg-footer p {
    padding: 1em;
    margin: 0;
    text-align: center;
}

Hosting