HTML, CSS y Bootstrap 5 (bluuweb)

# CSS Flexbox [Práctica]

Comenzaremos a crear nuestro primer sitio web con Flexbox

# Utilidades

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

Otros recursos utilizados:

<!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>

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.750);
    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

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

/* 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

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

/* 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;
}

<footer class="bg-footer">
    <div class="container">
        <p>Lorem, ipsum dolor.</p>
    </div>
</footer>

/* 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.

<!-- 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:

<!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:

@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

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.750);
    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

Last Updated: 9/8/2021, 10:17:31 PM

← Terminal CMD →