maxresdefault 52
Programador Novato > Crear una pagina web desde 0 > Mostramos nuestras habilidades en Tarjetas Cardrs de Bootstrap (Mi primer página Web)

Mostramos nuestras habilidades en Tarjetas Cardrs de Bootstrap (Mi primer página Web)

No nos podemos olvidar de colocar nuestras habilidades como programadores full-stack y todo se mira mejor en tarjetas (Cardrs) de Bootstrap. Bootstrap nos ofrece unas elegantes tarjetas para colocar todo el contenido que queramos de forma flexible y elegante. Seguiremos estos pasos:

  • Agregaremos comentarios a la página donde definiremos las diferentes partes.
    • Cabecera
    • Menu
    • Contenido
  • Colocamos las imágenes de nuestras habilidades.
  • Creamos las tarjetas y las alineamos una al lado de otra.

Codigo de las Tarjetas (Cardrs) de Bootstrap: https://github.com/programadornovato/MiPaginaWeb/commit/5cc8654ba825ea2d3ef473fcea1ac699ef36d28e

<!DOCTYPE html>
<html lang="en">

<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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        .fondo {
            background-image: url("images/bg-1.png");
            height: 100vh;
            background-size: cover;
            background-position: center;
        }
        .card:hover,.card:focus{
            background-color: #0d6efd;
            color: #fff;
        }
    </style>
    <title>Programador Novato</title>
</head>

<body>
    <!-- cabecera-->
    <div class="row fondo align-items-center">
        <h1 class="text-white text-center">Programador Novato</h1>
    </div>
    <!-- menu-->
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="images/pn.jpg" width=30px;></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contacto</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Ingresa tu email"
                        aria-label="Ingresa tu email">
                    <button class="btn btn-outline-success" type="submit">Guardar</button>
                </form>
            </div>
        </div>
    </nav>
    <!--Habilidades-->
    <div class="container mt-3 text-center">
        <h1 class="text-center text-uppercase fst-italic fw-bold">Habilidades</h1>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/c++.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">C++</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-primary">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/csharp.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">csharp</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-primary">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/css.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">css</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-primary">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/html.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">html</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-primary">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/js.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">js</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-primary">Ver mas</a>
            </div>
        </div>
        <div class="card d-inline-block" style="width: 18rem;">
            <img src="images/lenguajes/kotlin.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">kotlin</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit necessitatibus
                    placeat autem, at minima recusandae.</p>
                <a href="#" class="btn btn-primary">Ver mas</a>
            </div>
        </div>
    </div>
    <!-- contenido-->
    <div class="container mt-3">
        <h1 class="text-center text-uppercase fst-italic fw-bold">Lorem ipsum dolor sit</h1>
        <p class="bg-primary w-25 float-start p-3 me-2 d-none d-sm-block" style="text-align:justify">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis debitis, quibusdam incidunt eum
            necessitatibus excepturi iusto itaque unde delectus facere!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic harum non quae sunt tenetur, ut, numquam unde
            ipsum voluptate provident consequuntur repudiandae necessitatibus nihil inventore sit in! Iusto, architecto
            quo!
        </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
</body>

</html>

🎦[Curso] Visual Studio Code 🆚 de 0 a 100: https://www.youtube.com/watch?v=s47z_qh16j4&list=PLCTD_CpMeEKQbdlT8efsS-veXuvYZ1UWn&ab_channel=programadornovato
🎦[Curso] Bootstrap de 0 a 100 🌈: https://www.youtube.com/watch?v=_paV6qQ-a4M&list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT&ab_channel=programadornovato
🎦[Curso] Javascript🔥 de 0 a 100: https://www.youtube.com/watch?v=fwtaVaiR-Kg&list=PLCTD_CpMeEKQZtB8mNm0J1qWmHdZ2QUt-&ab_channel=programadornovato

Anterior tutorial Siguiente tutorial

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Salir de la versión móvil