@import url('https://fonts.googleapis.com/css2?

family=Righteous&family=Work+Sans:wght@100;300;400;600;800&display=swa
p');
*{
box-sizing: border-box;
font-family: 'Work Sans';
margin: 0;
padding: 0;
}
html{
/* me permite deslizar cuando hago clic en los links del menu */
scroll-behavior: smooth;
}
/* MENU */
.contenedor-header{
background: #1e2326;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 99;
}
.contenedor-header header{
max-width: 1100px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
.contenedor-header header .logo a{
font-family: 'Righteous';
font-size: 36px;
color: #1CB698;
text-decoration: none;
}
.contenedor-header header ul{
display: flex;
list-style: none;
}
.contenedor-header header nav ul li a{
text-align: none;
color: #fff;
margin: 0 15px;
padding: 3px;
transition: .5s;
text-decoration: none;
}
.contenedor-header header nav ul li a:hover{
color: #1CB698;
}
.nav-responsive{
background-color: #1CB698;
color:#fff;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
display: none;
}
/* SECCION I N I C I O */
.inicio{
 background: linear-gradient(to top, rgba(30,35,38,.8),
rgba(30,35,38,1)),
url(img/fondo.jpg);
background-size: cover;
height: 100vh;
color: #fff;
display: flex;
align-items: center;
}
.inicio .contenido-banner{
padding: 20px;
background-color: #1e2326;
max-width: 350px;
margin: auto;
text-align: center;
border-radius: 40px;
}
.inicio .contenido-banner img{
margin-top: 40px;
border: 10px solid #1CB698;
display: block;
width: 80%;
margin: auto;
border-radius: 100%;
}
.inicio .contenido-banner h1{
margin-top: 40px;
font-size: 42px;
font-family: 'Righteous';
}
.inicio .contenido-banner h2{
font-size: 15px;
font-weight: normal;
}
.inicio .contenido-banner .redes a{
color: #fff;
display: inline-block;
text-decoration: none;
border: 1px solid #fff;
border-radius: 100%;
width: 42px;
height: 42px;
line-height: 42px;
margin: 40px 5px;
font-size: 20px;
transition: .3s;
}
.inicio .contenido-banner .redes a:hover{
background-color: #1CB698;
}
.sobremi{
background-color: #1e2326;
color: #fff;
padding: 50px 20px;
}
.sobremi .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.sobremi h2{
font-size: 48px;
 font-family: 'Righteous';
text-align: center;
padding: 20px 0;

}
.sobremi .contenido-seccion p{
font: 18px;
line-height: 22px;
margin-bottom: 20px;
}
.sobremi .contenido-seccion p span{
color: #1CB698;
font-weight: bold;
}
.sobremi .fila{
display: flex;
}
.sobremi .fila .col
{
width: 50%;
}
.sobremi .fila .col h3{
font-size: 28px;
font-family: 'Righteous';
margin-bottom: 25px;
}
.sobremi .fila .col ul{
list-style: none;
}
.sobremi .fila .col ul li{
margin: 12px 0;
}
.sobremi .fila .col ul li strong{
display: inline-block;
color: #1CB698;
width: 130px;
}
.sobremi .fila .col ul li span{
background-color: #1CB698;
padding: 3px;
font-weight: bold;
border-radius: 5px;
}
.sobremi .fila .col .contenedor-intereses{
display: flex;
flex-wrap: wrap;
}
.sobremi .fila .col .contenedor-intereses .interes{
width: 100px;
height: 100px;
background-color: #252A2E;
border-radius: 10px;
margin: 0 15px 15px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: .3s;
}.sobremi .fila .col .contenedor-intereses .interes:hover{
background-color: #1CB698;
}
.sobremi .fila .col .contenedor-intereses .interes i{
font-size: 30px;
margin-bottom: 10px;
}
.sobremi button{
cursor: pointer;
background-color: transparent;
border: 2px solid #fff;
width: fit-content;
display: block;
margin: 20px auto;
padding: 10px 22px;
font-size: 16px;
color: #fff;
position: relative;
z-index: 10;
}
.sobremi button .overlay{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #1CB698;
z-index: -1;
transition: 1s;
}
.sobremi button:hover .overlay{
width: 100%;
}
/* SECCION S K I L L S */
.skills{
background-color: #252A2E;
color: #fff;
padding: 50px 20px;
}
.skills .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.skills h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;

}
.skills .fila{
display: flex;
}
.skills .fila .col{
width: 50%;
padding: 0 20px;
}
.skills .fila .col h3{
font-size: 28px;
font-family: 'Righteous';
margin-bottom: 25px;
}
.skills .skill > span{
font-weight: bold;
 display: block;
margin-bottom: 10px;
}
.skills .skill .barra-skill{
height: 8px;
width: 80%;
background-color: #131517;
position: relative;
margin-bottom: 30px;
}
.skills .skill .progreso{
background-color: #1CB698;
position: absolute;
top: 0;
left: 0;
height: 8px;
}
.skills .skill .barra-skill span{
position: absolute;
height: 40px;
width: 40px;
background-color: #1CB698;
border-radius: 50px;
line-height: 40px;
text-align: center;
top: -17px;
right: -15px;
font-size: 14px;
}
/* Estas clases se agregaran dinamicamente mediante javascript */
.skills .skill .javascript{
width: 0%;
animation: 2s javascript forwards;
}
@keyframes javascript {
0%{width: 0%;}
100%{width: 75%;}
}

.skills .skill .htmlcss{

width: 0%;
animation: 2s htmlcss forwards;
}
@keyframes htmlcss {
0%{width: 0%;}
100%{width: 89%;}
}

.skills .skill .photoshop{

width: 0%;
animation: 2s photoshop forwards;
}
@keyframes photoshop {
0%{width: 0%;}
100%{width: 95%;}
}

.skills .skill .wordpress{

width: 0%;
animation: 2s wordpress forwards;
}
@keyframes wordpress {
0%{width: 0%;}
100%{width: 81%;}
}

.skills .skill .drupal{

width: 0%;
animation: 2s drupal forwards;
}
@keyframes drupal {
0%{width: 0%;}
100%{width: 55%;}
}

.skills .skill .comunicacion{

width: 0%;
animation: 2s comunicacion forwards;
}
@keyframes comunicacion {
0%{width: 0%;}
100%{width: 80%;}
}

.skills .skill .trabajo{

width: 0%;
animation: 2s trabajo forwards;
}
@keyframes trabajo {
0%{width: 0%;}
100%{width: 70%;}
}

.skills .skill .creatividad{

width: 0%;
animation: 2s creatividad forwards;
}
@keyframes creatividad {
0%{width: 0%;}
100%{width: 99%;}
}

.skills .skill .dedicacion{

width: 0%;
animation: 2s dedicacion forwards;
}
@keyframes dedicacion {
0%{width: 0%;}
100%{width: 65%;}
}

.skills .skill .proyect{

width: 0%;
animation: 2s proyect forwards;
}
@keyframes proyect {
0%{width: 0%;}
100%{width: 94%;}
}
/* SECCION CURRICULUM */
.curriculum{
background-color: #1e2326;
 color: #fff;
padding: 50px 20px;
}
.curriculum .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.curriculum h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;

}
.curriculum .fila{
display: flex;
justify-content: space-between;
}
.curriculum .fila .col{
width: 49%;
padding: 0 20px;
}
.curriculum .fila .col h3{
font-size: 28px;
font-family: 'Righteous';
margin-bottom: 25px;
}
.curriculum .fila .izquierda{
border-right: 2px solid #252A2E;
}
.curriculum .fila .derecha{
border-left: 2px solid #252A2E;
}
.curriculum .fila .item{
padding: 25px;
margin-bottom: 30px;
background-color: #252A2E;
position: relative;
}
.curriculum .fila .item h4{
font-size: 20px;
margin-bottom: 10px;
}
.curriculum .fila .item .casa{
color: #1CB698;
font-size: 22px;
font-weight: bold;
display: block;
}
.curriculum .fila .item .fecha{
display: block;
color: #1CB698;
margin-bottom: 10px;
}
.curriculum .fila .item p{
line-height: 24px;
}
.curriculum .fila .izq{
border-right: 2px solid #1CB698;
margin-right: 20px;
}
.curriculum .fila .der{
border-left: 2px solid #1CB698;
margin-left: 20px;
}
.curriculum .fila .item .conectori{
height: 2px;
background-color: #1CB698;
width: 47px;
position: absolute;
top: 50%;
right: -47px;
z-index: 5;
}
.curriculum .fila .item .conectori .circuloi{
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #1CB698;
float: right;
position: relative;
bottom: 4px;
}
.curriculum .fila .item .conectord{
height: 2px;
background-color: #1CB698;
width: 47px;
position: absolute;
top: 50%;
left: -47px;
z-index: 5;
}
.curriculum .fila .item .conectord .circulod{
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #1CB698;
float: left;
position: relative;
bottom: 4px;
}
/* SECCION PORTFOLIO */
.portfolio{
background-color: #252A2E;
color: #fff;
padding: 50px 20px;
}
.portfolio .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.portfolio h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;
}
.portfolio .galeria{
display: flex;
flex-wrap: wrap;
 justify-content: space-around;
}
.portfolio .galeria .proyecto{
position: relative;
max-width: 340px;
height: fit-content;
margin: 10px;
cursor: pointer;
}
.portfolio .galeria .proyecto img{
width: 100%;
display: block;
}
.portfolio .galeria .proyecto .overlay{
position: absolute;
top: 0;
width: 100%;
height: 100%;
text-align: center;
background: linear-gradient(rgba(28,182,152,.8),
rgba(28,182,152,.8));
display: flex;
flex-direction: column;
justify-content: center;
transition: 1s;
font-size: 18px;
letter-spacing: 3px;
opacity: 0;
}
.portfolio .galeria .proyecto .overlay h3{
margin-bottom: 20px;
transition: 1s;
}
.portfolio .galeria .proyecto .overlay:hover{
opacity: 1;
}
.portfolio .galeria .proyecto .overlay:hover h3{
margin-bottom: 0px;
}
/* SECCION CONTACTO */
.contacto{
background-image: url(img/contact_bg.png);
background-color: #1e2326;
color: #fff;
padding: 50px 0;
}
.contacto .contenido-seccion{
max-width: 1100px;
margin: auto;
}
.contacto h2{
font-size: 48px;
font-family: 'Righteous';
text-align: center;
padding: 20px 0;
}
.contacto .fila{
display: flex;
}
.contacto .col{
width: 50%;
 padding: 10px;
position: relative;
}
.contacto .col input, .contacto .col textarea{
display: block;
width: 100%;
padding: 18px;
border: none;
margin-bottom: 20px;
background-color: #252A2E;
color: #fff;
font-size: 18px;
}
.contacto button{
cursor: pointer;
background-color: transparent;
border: 2px solid #fff;
width: fit-content;
display: block;
margin: 20px auto;
padding: 10px 22px;
font-size: 16px;
color: #fff;
position: relative;
z-index: 10;
}
.contacto button .overlay{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #1CB698;
z-index: -1;
transition: 1s;
}
.contacto button:hover .overlay{
width: 100%;
}
.contacto .col img{
width: 100%;
}
.contacto .col .info{
position: absolute;
top: 40%;
background-color: #252A2E;
padding: 20px;
max-swidth: 350px;
left: 50%;
transform: translate(-50%, -50%);
}
.contacto .col .info ul{
list-style: none;
}
.contacto .col .info ul li{
margin-bottom: 20px;
}
.contacto .col .info ul li i{
color: #1CB698;
display: inline-block;
margin-right: 20px;
}
footer{
background-color: #252A2E;
color: #fff;
padding: 50px 0 30px 0;
text-align: center;
position: relative;
width: 100%;
}
footer .redes{
margin-bottom: 20px;
}
footer .redes a{
color: #fff;
display: inline-block;
text-decoration: none;
border: 1px solid #fff;
border-radius: 100%;
width: 42px;
height: 42px;
line-height: 42px;
margin: 40px 5px;
font-size: 20px;
transition: .3s;
}
footer .arriba{
display: block;
width: 50px;
height: 50px;
background-color: #1CB698;
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -25px;
border-radius: 50%;
line-height: 50px;
font-size: 18px;
}
/* SECCION RESPONSIVE */
@media screen and (max-width:980px){
nav{
display: none;
}
.nav-responsive{
display: block;
}
nav.responsive{
display: block;
position: absolute;
right: 0;
top: 75px;
background-color: #252A2E;
width: 180px;
}
nav.responsive ul{
display: block !important;
}
nav.responsive ul li{
border-bottom: 1px solid #fff;
padding: 10px 0;
 }
}
@media screen and (max-width:700px){
.sobremi .fila{
display: block;
}
.sobremi .fila .col{
width: fit-content;
}

.skills .fila{
display: block;
}
.skills .fila .col{
width: 100%;
}
.skills .fila .col .barra-skill{
width: 100%;
}

.curriculum .fila{
display: block;
}
.curriculum .fila .col{
width: 90%;
}
.curriculum .fila .derecha{
margin-left: 20px;
}

.portfolio .galeria{
display: block;
width: 100%;
}
.portfolio .galeria .proyecto{
max-width: 100%;
}
.portfolio .galeria .proyecto img{
width: 100%;
}
.contacto .fila{
display: block;
}
.contacto .fila .col{
width: 100%;
}
}

INDEX
<!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">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/
all.min.css" integrity="sha512-
1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85p
km9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-
referrer" />
<title>Portfolio</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<!-- MENU ENCABEZADO -->
<div class="contenedor-header">
<header>
<div class="logo">
<a href="#">Nick</a>
</div>
<nav id="nav">
<ul>
<li><a href="#inicio"
onclick="seleccionar()">INICIO</a></li>
<li><a href="#sobremi"
onclick="seleccionar()">SOBRE MI</a></li>
<li><a href="#skills"
onclick="seleccionar()">SKILLS</a></li>
<li><a href="#curriculum"
onclick="seleccionar()">CURRICULUM</a></li>
<li><a href="#portfolio"
onclick="seleccionar()">PORTFOLIO</a></li>
<li><a href="#contacto"
onclick="seleccionar()">CONTACTO</a></li>
</ul>
</nav>
<div class="nav-responsive"
onclick="mostrarOcultarMenu()">
<i class="fa-solid fa-bars"></i>
</div>
</header>
</div>

<!-- SECCION INICIO -->

<section id="inicio" class="inicio">
<div class="contenido-banner">
<div class="contenedor-img">
<img src="img/hero.png" alt="">
</div>
<h1>NICK PEREZ</h1>
<h2>Ingeniero de Software - Experto UI/UX</h2>
<div class="redes">
<a href="#"><i class="fa-brands
fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-skype"></i></a>
<a href="#"><i class="fa-brands
fa-linkedin-in"></i></a>
<a href="#"><i class="fa-solid fa-rss"></i></a>
</div>
 </div>
</section>

<!-- SECCION SOBRE MI -->

<section id="sobremi" class="sobremi">
<div class="contenido-seccion">
<h2>Sobre Mí</h2>
<p><span>Hola, soy Nick Perez.</span> Lorem ipsum dolor
sit amet consectetur adipisicing elit. Quisquam unde soluta minima
necessitatibus, voluptas consectetur vero officiis quas, explicabo
deleniti repellendus aliquid debitis maiores numquam voluptate
reprehenderit in delectus dolores.</p>

<div class="fila">
<!-- datos personales -->
<div class="col">
<h3>Datos Personales</h3>
<ul>
<li>
<strong>Cumpleaños</strong>
15-01-1980
</li>
<li>
<strong>Teléfono</strong>
2555 5454545
</li>
<li>
<strong>Email</strong>
[email protected]
</li>
<li>
<strong>Website</strong>
www.example.com
</li>
<li>
<strong>Dirección</strong>
123 San Luis, Argentina
</li>
<li>
<strong>Cargo</strong>
<span>FREELANCE</span>
</li>
</ul>
</div>

<!-- intereses -->

<div class="col">
<h3>Intereses</h3>
<div class="contenedor-intereses">
<div class="interes">
<i class="fa-solid fa-gamepad"></i>
<span>JUEGOS</span>
</div>
<div class="interes">
<i class="fa-solid fa-headphones"></i>
<span>MUSICA</span>
</div>
<div class="interes">
<i class="fa-solid fa-plane"></i>
<span>VIAJAR</span>
</div>
 <div class="interes">
<i class="fa-brands fa-apple"></i>
<span>MAC OS</span>
</div>
<div class="interes">
<i class="fa-solid fa-person-hiking"></i>
<span>DEPORTE</span>
</div>
<div class="interes">
<i class="fa-solid fa-book"></i>
<span>LIBROS</span>
</div>
<div class="interes">
<i class="fa-solid fa-car"></i>
<span>AUTOS</span>
</div>
<div class="interes">
<i class="fa-solid fa-camera"></i>
<span>FOTOS</span>
</div>

</div>
</div>
</div>
<button>
Descargar CV <i class="fa-solid fa-download"></i>
<span class="overlay"></span>
</button>
</div>
</section>

<!-- SECCION SKILLS -->

<section class="skills" id="skills">
<div class="contenido-seccion">
<h2>Skills</h2>
<div class="fila">
<!-- Technical Skill -->
<div class="col">
<h3>Technical Skills</h3>
<div class="skill">
<span>Javascript</span>
<div class="barra-skill">
<div class="progreso">
<span>75%</span>
</div>
</div>
</div>
<div class="skill">
<span>HTML & CSS</span>
<div class="barra-skill">
<div class="progreso">
<span>89%</span>
</div>
</div>
</div>
<div class="skill">
<span>Photoshop</span>
<div class="barra-skill">
<div class="progreso">
<span>95%</span>
</div>
 </div>
</div>
<div class="skill">
<span>Wordpress</span>
<div class="barra-skill">
<div class="progreso">
<span>81%</span>
</div>
</div>
</div>
<div class="skill">
<span>Drupa</span>
<div class="barra-skill">
<div class="progreso">
<span>55%</span>
</div>
</div>
</div>
</div>
<!-- Professional Skills -->
<div class="col">
<h3>Professional Skills</h3>
<div class="skill">
<span>Comunicación</span>
<div class="barra-skill">
<div class="progreso">
<span>80%</span>
</div>
</div>
</div>
<div class="skill">
<span>Trabajo en Equipo</span>
<div class="barra-skill">
<div class="progreso">
<span>70%</span>
</div>
</div>
</div>
<div class="skill">
<span>Creatividad</span>
<div class="barra-skill">
<div class="progreso">
<span>99%</span>
</div>
</div>
</div>
<div class="skill">
<span>Dedicación</span>
<div class="barra-skill">
<div class="progreso">
<span>65%</span>
</div>
</div>
</div>
<div class="skill">
<span>Proyect Management</span>
<div class="barra-skill">
<div class="progreso">
<span>94%</span>
</div>
</div>
 </div>
</div>
</div>
</div>
</section>

<!-- SECCION CURRICULUM -->

<section id="curriculum" class="curriculum">
<div class="contenido-seccion">
<h2>Curriculum</h2>
<div class="fila">
<div class="col izquierda">
<h3>Educación</h3>
<div class="item izq">
<h4>Arte y Multimedia</h4>
<span class="casa">Universidad de
Oxford</span>
<span class="fecha">2005 - 2008</span>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam
nemo esse natus impedit, nostrum temporibus veritatis eaque soluta
aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
<div class="conectori">
<div class="circuloi"></div>
</div>
</div>
<div class="item izq">
<h4>Arte y Multimedia</h4>
<span class="casa">Universidad de
Oxford</span>
<span class="fecha">2005 - 2008</span>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam
nemo esse natus impedit, nostrum temporibus veritatis eaque soluta
aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
<div class="conectori">
<div class="circuloi"></div>
</div>
</div>
<div class="item izq">
<h4>Arte y Multimedia</h4>
<span class="casa">Universidad de
Oxford</span>
<span class="fecha">2005 - 2008</span>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam
nemo esse natus impedit, nostrum temporibus veritatis eaque soluta
aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
<div class="conectori">
<div class="circuloi"></div>
</div>
</div>
</div>

<div class="col derecha">

<h3>Experiencia de trabajo</h3>
<div class="item der">
<h4>Front Developer</h4>
<span class="casa">Nombre de Compañía</span>
<span class="fecha">2005 - 2008</span>
 <p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam
nemo esse natus impedit, nostrum temporibus veritatis eaque soluta
aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
<div class="conectord">
<div class="circulod"></div>
</div>
</div>
<div class="item der">
<h4>Front Developer</h4>
<span class="casa">Nombre de Compañía</span>
<span class="fecha">2005 - 2008</span>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam
nemo esse natus impedit, nostrum temporibus veritatis eaque soluta
aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
<div class="conectord">
<div class="circulod"></div>
</div>
</div>
<div class="item der">
<h4>Front Developer</h4>
<span class="casa">Nombre de Compañía</span>
<span class="fecha">2005 - 2008</span>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam
nemo esse natus impedit, nostrum temporibus veritatis eaque soluta
aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
<div class="conectord">
<div class="circulod"></div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- SECCION PORTFOLIO -->

<section id="portfolio" class="portfolio">
<div class="contenido-seccion">
<h2>PORTFOLIO</h2>
<div class="galeria">
<div class="proyecto">
<img src="img/p1.jpg" alt="">
<div class="overlay">
<h3>Diseño Creativo</h3>
<p>Fotografía</p>
</div>
</div>
<div class="proyecto">
<img src="img/p2.jpg" alt="">
<div class="overlay">
<h3>Diseño Creativo</h3>
<p>Fotografía</p>
</div>
</div>
<div class="proyecto">
<img src="img/p3.jpg" alt="">
<div class="overlay">
<h3>Diseño Creativo</h3>
<p>Fotografía</p>
 </div>
</div>
<div class="proyecto">
<img src="img/p4.jpg" alt="">
<div class="overlay">
<h3>Diseño Creativo</h3>
<p>Fotografía</p>
</div>
</div>
<div class="proyecto">
<img src="img/p5.jpg" alt="">
<div class="overlay">
<h3>Diseño Creativo</h3>
<p>Fotografía</p>
</div>
</div>
<div class="proyecto">
<img src="img/p6.jpg" alt="">
<div class="overlay">
<h3>Diseño Creativo</h3>
<p>Fotografía</p>
</div>
</div>
</div>
</div>
</section>

<!-- SECCION CONTACTO -->

<section id="contacto" class="contacto">
<div class="contenido-seccion">
<h2>CONTACTO</h2>
<div class="fila">
<!-- Formulario -->
<div class="col">
<input type="text" placeholder="Tú Nombre">
<input type="text" placeholder="Número
telefónico">
<input type="text" placeholder="Dirección de
correo">
<input type="text" placeholder="Tema">
<textarea name="" id="" cols="30" rows="10"
placeholder="Mensaje"></textarea>
<button>
Enviar Mensaje<i class="fa-solid fa-paper-
plane"></i>
<span class="overlay"></span>
</button>
</div>
<!-- Mapa -->
<div class="col">
<img src="img/ubicacion.png" alt="">
<div class="info">
<ul>
<li>
<i class="fa-solid fa-location-
dot"></i>
Nicaragua 159, San Rafael Mza
</li>
<li>
<i class="fa-solid fa-mobile-
screen"></i>
 Llamanos: 2384 - 4343443
</li>
<li>
<i class="fa-solid fa-envelope"></i>
Email: [email protected]
</li>
</ul>
</div>
</div>
</div>
</div>
</section>

<!-- footer -->

<footer>
<a href="#inicio" class="arriba">
<i class="fa-solid fa-angles-up"></i>
</a>
<div class="redes">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-skype"></i></a>
<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#"><i class="fa-solid fa-rss"></i></a>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>

SCPRIPS JS
let menuVisible = false;
//Función que oculta o muestra el menu
function mostrarOcultarMenu(){
if(menuVisible){
document.getElementById("nav").classList ="";
menuVisible = false;
}else{
document.getElementById("nav").classList ="responsive";
menuVisible = true;
}
}

function seleccionar(){
//oculto el menu una vez que selecciono una opcion
document.getElementById("nav").classList = "";
menuVisible = false;
}
//Funcion que aplica las animaciones de las habilidades
function efectoHabilidades(){
var skills = document.getElementById("skills");
var distancia_skills = window.innerHeight -
skills.getBoundingClientRect().top;
if(distancia_skills >= 300){
 let habilidades = document.getElementsByClassName("progreso");
habilidades[0].classList.add("javascript");
habilidades[1].classList.add("htmlcss");
habilidades[2].classList.add("photoshop");
habilidades[3].classList.add("wordpress");
habilidades[4].classList.add("drupal");
habilidades[5].classList.add("comunicacion");
habilidades[6].classList.add("trabajo");
habilidades[7].classList.add("creatividad");
habilidades[8].classList.add("dedicacion");
habilidades[9].classList.add("proyect");
}
}

//detecto el scrolling para aplicar la animacion de la barra de

habilidades
window.onscroll = function(){
efectoHabilidades();
}