Agregaremos nuestro portafolio una barra de navegación Navbar (Mi primer página Web)
Una vez creada nuestra impactante cabecera procedemos a crear una barra de navegación Navbar para mostrara los diferentes áreas de nuestro portafolio.
Codigo de la barra de navegación Navbar: https://github.com/programadornovato/MiPaginaWeb/commit/88e337ede6256b26d840f32aa0b95ba9bfee9cec
<!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;
}
</style>
<title>Programador Novato</title>
</head>
<body>
<div class="row fondo align-items-center">
<h1 class="text-white text-center">Programador Novato</h1>
</div>
<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>
<div class="container">
<h1 class="text-center">Lorem ipsum dolor sit</h1>
<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
Ave que vuela, a la cazuela.