%20(1).png)
Desarrolo de proyecto
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="author" content="Alex Brito">
<meta name="description" content="Portafolio de Alex Brito">
<meta name="keywords" content="HTML , CSS , JavaScript ,React ,Bootstrap">
<meta name="viewport" content="width=device-width , initial-scale=1">
<!-- Titulo -->
<title>Desarrollo con Bootstrap</title>
<!-- Favicom -->
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Barra de navegacion
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="author" content="Alex Brito">
<meta name="description" content="Portafolio de Alex Brito">
<meta name="keywords" content="HTML , CSS , JavaScript ,React ,Bootstrap">
<meta name="viewport" content="width=device-width , initial-scale=1">
<!-- Titulo -->
<title>Desarrollo con Bootstrap</title>
<!-- Favicom -->
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Barra de navegacion -->
<!-- Cambiar lg a -md -->
<nav class="navbar navbar-expand-md bg-body-tertiary">
<div class="container-fluid">
<!-- Cambiamos por data-bs-target="#navbar-toggler" # problema -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggler" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Cambiamos por id="navbar-toggler" -->
<div class="collapse navbar-collapse" id="navbar-toggler">
<!-- Eliminamos el texto y colocamos una el logo -->
<a class="navbar-brand" href="#">
<img src="images/logo.png" width="50" alt="Logo de la web">
</a>
<!-- Lo eliminamos me-auto mb-2 mb-lg-0 -->
<!-- Agregamos d-flex justify-content-center align-items-center -->
<ul class="navbar-nav d-flex justify-content-center align-items-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sobre mi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item">
<!-- Eliminamos la clase disabled no activo-->
<a class="nav-link " aria-disabled="true" href="#">Testimonios</a>
</li>
<li class="nav-item">
<a class="nav-link " aria-disabled="true" href="#">Contacto</a>
</li>
</ul>
<!-- Eliminamos <form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
style.css
/* Barra de navegacion */
.navbar {
padding: 2rem;
background-color: black;
}
.navbar-collapse{
align-items: center;
justify-content: space-between;
}
/* Esconder el logo */
/* Adaptable (responsivo) */
@media screen and (max-width: 767px){
.navbar-brand{
display: none;
}
}
Seccion hero
index.html
<!-- Seccion Hero -->
<!-- Se estiren para llenar el contenedor align-items-stretch -->
<section class="hero align-items-stretch">
<div class="hero-principal d-flex flex-column justify-content-center align-items-center">
<!-- Para que se convierta en circulo la imagen el borde rounded-circle , eliminamos border-radius: 50%; -->
<img class="hero-imagen-desarrollador rounded-circle" src="images/Avatar.png" alt="Foto de AlexTech">
<h1>HOLA , SOY ALEX BRITO</h1>
<h2>Desarrollador y Creativo</h2>
</div>
<div class="hero-inferior">
<!-- Imagen se adapte al ancho del navegador img-fluid -->
<img class="hero-inferior-imagen img-fluid" src="images/hero-inferior.svg" alt="Monitor , laptop y logos de HTML , CSS , Bootstrap">
</div>
</section>
style.css
/* Seccion Hero */
/* min-height le permitimos que se estire */
.hero{
background-color: #0C0E12;
color: white;
min-height: 450px;
text-align:center;
}
.hero-principal{
padding: 3rem;
}
.hero-imagen-desarrollador{
width: 200px;
height: 200px;
/* border-radius: 50%; */
margin: 20px;
}
.hero-principal h2{
font-size: 1.5rem;
color: white;
}
/* Medida relativa 2.5rem al tamaño de la letra raiz */
h1{
font-size: 2.5rem;
font-family: "Concert One", sans-serif;
font-weight: 400;
font-style: normal;
}
@media screen and (min-width: 700px){
.hero-inferior-imagen{
max-width: 600px;
}
}
Secciòn sobre mi
index.html
<!-- Acerca de mi about me -->
<!-- Seccion 2 -->
<section class="sobre-mi seccion-oscura">
<div class="contenedor">
<!-- Podemos eliminar seccion-titulo texto-blanco -->
<h2 class="seccion-titulo">Conoce a Alex Brito</h2>
<p class="seccion-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Augue eget arcu dictum varius duis at consectetur lorem. Nibh cras pulvinar mattis nunc sed. Porta non pulvinar neque laoreet suspendisse interdum. Vivamus arcu felis bibendum ut tristique. Venenatis urna cursus eget nunc scelerisque viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Lacus sed turpis tincidunt id. Purus viverra accumsan in nisl nisi scelerisque. Nibh tortor id aliquet lectus proin nibh.</p>
</div>
</section>
style.css
/* Seccion sobre mi */
.seccion-oscura{
color: white;
background-color: #000;
}
.sobre-mi{
height: 500px;
padding: 10px;
}
.sobre-mi .contenedor{
max-width: 600px;
text-align: center;
}
/* Estilos generales */
.seccion-titulo{
font-size: 2rem;
padding: 15px 0;
font-family: "Concert One", sans-serif;
}
.seccion-texto{
font-size: 1.2rem;
}
Secciòn de experiencia
index.html
<!-- Acerca de la experiencia -->
<!-- Seccion 3 -->
<section class="experiencia seccion-clara">
<div class="container text-center">
<!-- fila -->
<div class="row">
<!-- Columnas -->
<!-- Desarrollo -->
<div class="columna col-12 col-md-4">
<!-- Icono bootstrap -->
<i class="bi bi-laptop"></i>
<p class="experiencia-titulo">Desarrollo Web</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra conva</p>
<div class="badges-contenedor">
<span class="badge text-bg-success">HTML</span>
<span class="badge text-bg-danger">CSS</span>
<span class="badge text-bg-warning">JavaScript</span>
<span class="badge text-bg-info">React</span>
</div>
</div >
<!-- Articulos -->
<div class="columna col-12 col-md-4">
<i class="bi bi-book"></i>
<p class="experiencia-titulo">Articulos</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra conva</p>
<div class="badges-contenedor">
<span class="badge text-bg-success">Escribir</span>
<span class="badge text-bg-danger">Editar</span>
<span class="badge text-bg-warning">Blogs</span>
</div>
</div >
<!-- Estudiante -->
<div class="columna col-12 col-md-4">
<i class="bi bi-code-slash"></i>
<p class="experiencia-titulo">Estudiante</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra conva</p>
<div class="badges-contenedor">
<span class="badge text-bg-success">Microsoft</span>
<span class="badge text-bg-danger">Còdigo Facilito</span>
<span class="badge text-bg-warning">IBM</span>
<span class="badge text-bg-info">React</span>
</div>
</div >
</div>
</div>
</section>
style.css
/* Seccion experiencia */
.experiencia {
padding: 40px 40px 60px 40px;
}
/* Eliminamos esta regla ,solo como referencia */
/* .experiencia .row div{
height: 250px;
background-color: aqua;
border: 3px solid orange;
} */
.seccion-clara{
color: #000;
background-color: #F8F9FA;
}
.experiencia-titulo {
font-size: 25px;
font-weight: bold;
margin: 10px 0;
}
.experiencia i {
font-size: 2.5rem;
color: #fff;
background-color: #0C0E12;
padding: 8px 19px;
border-radius: 50%;
}
.badges-contenedor{
font-size: 15px;
font-weight: bold;
margin: 10px 0;
}
.badges {
margin: 5px;
}
.experiencia .columna{
padding: 20px;
border:2px solid #8080804d;
display: flex;
flex-direction: column;
align-items: center;
/* Equitativamente los elementos en el eje principal */
justify-content: space-evenly;
transition: all 0.2s ease-in;
}
.experiencia .columna:hover {
color: white;
background-color: #0C0E12;
}
Secciòn de proyectos
index.html
<!-- Secciòn de proyectos -->
<section class="proyectos-recientes seccion-clara d-flex flex-column">
<h2 class="seccion-titulo texto-negro">Mis proyectos recinetes</h2>
<h3 class="seccion-descripcion">Estos son algunos proyectos que he creado recientemente...</h3>
<!-- Galeria de Proyectos -->
<div class="container text-center proyectos-contenedor">
<div class="row">
<!-- Proyecto 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="proyecto">
<img src="images/proyecto 1.jpg" alt="Proyecto 1">
<div class="overlay">
<p>Proyecto 1</p>
<div class="iconos-contenedor">
<!-- Pestaña nueva que se abra target="_blank" -->
<!-- Colocar para que no haya vilnerabilidades de seguridad rel="noopener noreferrer" -->
<a href="https://github.com/AlexGasperCode" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/in/alex-javier-brito-mu%C3%B1oz-b19b851bb/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="proyecto">
<img src="images/proyecto 2.jpg" alt="Proyecto 1">
<div class="overlay">
<p>Proyecto 2</p>
<div class="iconos-contenedor">
<!-- Pestaña nueva que se abra target="_blank" -->
<!-- Colocar para que no haya vilnerabilidades de seguridad rel="noopener noreferrer" -->
<a href="https://github.com/AlexGasperCode" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/in/alex-javier-brito-mu%C3%B1oz-b19b851bb/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 3-->
<div class="col-12 col-md-6 col-lg-4">
<div class="proyecto">
<img src="images/proyecto 3.jpg" alt="Proyecto 1">
<div class="overlay">
<p>Proyecto 3</p>
<div class="iconos-contenedor">
<!-- Pestaña nueva que se abra target="_blank" -->
<!-- Colocar para que no haya vilnerabilidades de seguridad rel="noopener noreferrer" -->
<a href="https://github.com/AlexGasperCode" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/in/alex-javier-brito-mu%C3%B1oz-b19b851bb/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="proyecto">
<img src="images/proyecto 4.jpg" alt="Proyecto 1">
<div class="overlay">
<p>Proyecto 4</p>
<div class="iconos-contenedor">
<!-- Pestaña nueva que se abra target="_blank" -->
<!-- Colocar para que no haya vilnerabilidades de seguridad rel="noopener noreferrer" -->
<a href="https://github.com/AlexGasperCode" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/in/alex-javier-brito-mu%C3%B1oz-b19b851bb/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="proyecto">
<img src="images/proyecto 5.jpg" alt="Proyecto 1">
<div class="overlay">
<p>Proyecto 5</p>
<div class="iconos-contenedor">
<!-- Pestaña nueva que se abra target="_blank" -->
<!-- Colocar para que no haya vilnerabilidades de seguridad rel="noopener noreferrer" -->
<a href="https://github.com/AlexGasperCode" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/in/alex-javier-brito-mu%C3%B1oz-b19b851bb/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="proyecto">
<img src="images/proyecto 6.jpg" alt="Proyecto 1">
<div class="overlay">
<p>Proyecto 6</p>
<div class="iconos-contenedor">
<!-- Pestaña nueva que se abra target="_blank" -->
<!-- Colocar para que no haya vilnerabilidades de seguridad rel="noopener noreferrer" -->
<a href="https://github.com/AlexGasperCode" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/in/alex-javier-brito-mu%C3%B1oz-b19b851bb/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Agregar boton -->
<a href="https://github.com/AlexGasperCode" target="_blank" rel="noopener noreferrer">
<button type="button" class="btn btn-danger">
Ver màs proyectos
<i class="bi bi-arrow-right-circle-fill"></i>
</button>
</a>
</section>
style.css
/* Proyectos */
.proyectos-recientes{
padding: 40px;
}
/* Generales */
.texto-negro{
color: black;
}
.texto-blanco{
color: white;
}
.seccion-descripcion{
font-size: 1.2rem;
color: #584e4e;
}
.proyectos-recientes img{
height: 100%;
width: 100%;
padding: 10px;
border-radius: 10px;
display: block;
transition: all 0.2s ease;
}
.proyectos-contenedor{
padding-top: 60px;
margin-bottom: 40px;
}
/* Overlay sobre una imagen */
.overlay{
transition: all 0.2s ease;
opacity: 0;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50% , -50%);
text-align: center;
}
.overlay p {
font-size: 25px;
font-weight: bold;
margin-bottom: 0;
}
.proyecto:hover img{
opacity:0.2;
}
.proyecto:hover .overlay{
opacity: 1;
}
.proyecto{
position: relative;
}
.overlay .iconos-contenedor{
display: flex;
}
.overlay i {
color: #000;
font-size: 60px;
margin: 10px;
}
/* Adaptar con media query git ,laptop dispositivos pequeños */
@media screen and (max-width:400px){
.overlay p{
font-size: 18px;
}
.overlay i {
font-size: 40px;
}
}
/* Estilo general */
.btn-info {
font-size: 1.1rem;
margin: 20px;
font-weight: bold;
}
Secciòn de articulos
index.html
<!-- Seccion articulos -->
<section class="articulos justify-content-start">
<h2 class="seccion-titulo texto-negro">Articulos</h2>
<!-- Eliminamos ese stylo style="width: 18rem;" -->
<div class="card">
<div class="card-header">
Mas recientes
</div>
<ul class="list-group list-group-flush">
<a href="https://alexbritobitacoras.blogspot.com/2024/01/tecnico-helpdesk.html" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">Soporte tècnico HelpDesk o mesa de ayuda</li>
</a>
<a href="https://alexbritobitacoras.blogspot.com/2023/12/400-comandos-linux.html" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">400 comandos bàsicos para Linux </li>
</a>
<a href="https://alexbritobitacoras.blogspot.com/2023/11/html-para-frontend-parte-3.html" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">HTML escritura de marcado para programadores FrontEnd</li>
</a>
<a href="https://alexbritobitacoras.blogspot.com/2023/11/css-hojas-de-estilo-en-cascada.html" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">Hojas de estilo en cascada para programadores FrontEnd</li>
</a>
</ul>
</div>
<!-- Creamos boton -->
<a href="https://alexbritobitacoras.blogspot.com/" target="_blank" rel="noopener noreferrer">
<button type="button" class="btn btn-danger">
Ver màs articulos
<i class="bi bi-arrow-right-circle-fill"></i>
</button>
</a>
style.css
/* Articulos */
.articulos{
min-height: 500px;
padding: 30px;
}
.articulos .card{
width: 80%;
max-width: 600px;
margin: 20px;
}
.articulos .card-header{
font-weight: bold;
}
Secciòn de testimonios
Dato importante en google font reemplazamos para un nuevo estilo de letra
index.html
<!-- Testimonios -->
<section class="testimonios seccion-clara">
<h2 class="seccion-titulo">Testimonios</h2>
<h3 class="seccion-descripcion">Estos son algunos testimonios de mis clientes...</h3>
<!-- Carrusel -->
<div id="testimonios-carrusel" class="carousel slide carousel-dark">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<img class="testimonio-imagen rounded-circle" src="images/cliente1.svg" alt="Foto cliente1">
<p class="testimonio-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan.</p>
<div class="testimonio-info">
<p class="cliente">Luis Mora</p>
<p class="cargo">Gerente de proyectos MICROSOFT</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<img class="testimonio-imagen rounded-circle" src="images/cliente2.svg" alt="Foto cliente1">
<p class="testimonio-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan.</p>
<div class="testimonio-info">
<p class="cliente">Maria Arias</p>
<p class="cargo">Gerente de proyectos AMAZON</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<img class="testimonio-imagen rounded-circle" src="images/cliente3.svg" alt="Foto cliente1">
<p class="testimonio-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan.</p>
<div class="testimonio-info">
<p class="cliente">Maria Burf</p>
<p class="cargo">Gerente de proyectos IBM</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonios-carrusel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonios-carrusel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
</section>
style.css
/* Testimonios */
.testimonios{
padding: 40px 40px 80px 40px;
}
.testimonios .carousel{
max-width: 800px;
}
.carousel-item{
height: 500px;
}
.carousel-item .container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.testimonio-imagen{
height: 150px;
width: 150px;
margin: 10px 10px 20px 10px;
}
.testimonio-texto {
max-width: 70%;
font-size: 20px;
text-align:center;
}
.testimonio-info {
font-weight: bold;
text-align: center;
}
.testimonio-info p {
margin-bottom: 0;
}
.testimonio-footer .cliente {
font-size: 1.2rem;
}
.testimonio-info .cargo{
font-size: 0.9rem;
color: #656060;
}
/* Para que el contenido no se salga del contenedor */
@media screen and (max-width: 800px){
.testimonio-imagen{
height: 120px;
width: 120px;
}
.testimonio-texto{
font-size: 18px;
}
}
Secciòn de contacto
index.html
<!-- Contacto -->
<section class="contacto seccion-oscura">
<div class="container">
<div class="container text-center rectangulo d-flex justify-content-evenly">
<div class="row">
<div class="col-12 col-md-4 seccion-titulo">
! Hablemos ¡
</div>
<div class="col-12 col-md-4 description">
Contàctame para iniciar tu proyecto de desarrollo web
</div>
<div class="col-12 col-md-4">
<a href="mailto:alexinfo.sistemas@gmail.com">
<button type="button">
Contacto
<i class="bi bi-envelope-check-fill"></i>
</button>
</div>
</div>
</div>
</div>
</section>
style.css
/* Contacto */
.contacto .container {
max-width: 1100px;
min-height: 200px;
padding: 20px;
}
.contacto .rectangulo {
margin-top: -5rem;
background-color: #DC3545;
border-radius: 10px;
box-shadow: 0px 1px 4px 1px white;
}
.contacto .row {
width: 100%;
display: flex;
align-items: center;
}
.contacto .descripcion {
color: white;
font-size: 1.2rem;
}
.contacto button {
color: white;
font-weight: bold;
background-color: transparent;
border: 2px solid white;
padding: 1.25em 2em;
margin: 10px;
border-radius: 100px;
transition: all 0.2s ease-in-out;
}
.contacto button i {
color: white;
font-size: 1.3rem;
transition: all 0.2s ease-in-out;
}
.contacto button:hover {
background-color: #a71d2a;
color: #000;
}
.contacto button:hover i {
color: #000;
}
Footer y redes sociales
index.html
<!-- Footer pie de pagina y redes sociales -->
<footer class="seccion-oscura d-flex flex-column align-items-center justify-content-center">
<img class="footer-logo" src="images/blanco.png" alt="Logo de footer">
<p class="footer-texto text-center">Aprendo y desarrollo todos los dias.<br>Desarrollomes un proyecto juntos</p>
<div class="iconos-redes-sociales d-flex flex-wrap align-items-center justify-content-center">
<a href="https://twitter.com/AlexJavierBrit3" target="_blank" rel="nooponer noreferrer">
<i class="bi bi-twitter-x"></i>
</a>
<a href="https://github.com/AlexGasperCode" target="_blank" rel="nooponer noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/in/alex-javier-brito-mu%C3%B1oz-b19b851bb/" target="_blank" rel="nooponer noreferrer">
<i class="bi bi-linkedin"></i>
</a>
</div>
<div class="derechos-de-autor">Desarrollado por Alex Brito (2024) ©</div>
</footer>
style.css
/* Footer y redes sociales */
footer {
min-height: 500px;
}
.footer-logo{
height: 80px;
width: 80px;
margin: 10px;
}
.footer-texto{
font-size: 1.5rem;
padding: 20px;
margin-bottom: 30px;
}
.iconos-redes-sociales a{
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
margin: 10px;
border: 2px solid white;
border-radius: 50%;
transition: all 0.2s ease-in;
}
.iconos-redes-sociales i{
color: white;
font-size: 1.5rem;
transition: all 0.2s ease-in;
}
.iconos-redes-sociales a:hover {
background-color: white;
border: 2px solid #fff;
}
.iconos-redes-sociales a:hover i {
color: #000;
}
.derechos-de-autor{
font-size: 15px;
color: #aeaeae;
padding: 20px;
}
Enlaces de menu
Lo realizamos con un id
<a class="nav-link active" aria-current="page" href="#sobre-mi">SOBRE MI</a>
<a class="nav-link" href="#proyectos">PROYECTOS</a>
por el id agregamos id="sobre-mi"
<section id="sobre-mi" class="sobre-mi seccion-oscura">
freeCodeCamp Español. (2022, November 10). Aprende Bootstrap 5 - Curso de Bootstrap desde Cero [Video]. YouTube. https://www.youtube.com/watch?v=QCw0L6FupQ0
%20(1).png&description=Bootstrap 5 parte 2){kind=link}