Definiremos estilos de texto y espacios del portafolio (Mi primer página Web)
Para dar un orden a nuestra redaccion vamos a definiremos estilos de texto y espacios del portafolio siguiendo estos pasos:
- En esta clase vamos a trabajar con diferentes estilos de texto, espaciados y colores que nos ofrece Bootstrap.
- Definiremos los márgenes que separan los textos.
- Centraremos textos.
- Cambiamos a mayúsculas el texto sin tocar HTML.
- Cambiamos el ancho y el estilo del texto con fw-bold y fst-italic.
- Agregamos un párrafo marcado con float-start.
<!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/[email protected]/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 mt-2">
<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/[email protected]/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
