<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portafolio | Juan Antonio</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
<header class="headerPrincipal">
<div class="container">
<h1 class="headerPrincipal-titulo" href="logo">Antonio</h1>
<nav class="headerPrincipal-nav">
<a class="headerPrincipal-nav-link" href="#principal">Home</a>
<a class="headerPrincipal-nav-link" href="#sobre">Sobre mi</a>
<a class="headerPrincipal-nav-link" href="#skils">Skils</a>
<a class="headerPrincipal-nav-link" href="#proyects">Proyects</a>
<a class="headerPrincipal-nav-link headerPrincipal-nav-link-app" href="#contact">Contact</a>
</nav>
</div>
</header>
<main >
<section id="principal" class="container-principal">
<div class="container">
<img class="foto"
src="img/jarr.jpg"alt="Error de imagen">
<div class="container-titles">
<p class="titulo">Hola soy</p>
<p class="titulo">Juan Antonio</p>
<h2 class="subtitulo">Front-End Developer</h2>
</div>
</div>
</section>
<section id="sobre" class="sobre__container">
<img class="foto__sobre"src="img/gt.jpg"alt="Error de imagen">
<div class="container">
<div class="container__titles__sobre">
<h2 class="subtitulo__sobre">Acerca de mi</h2>
<p class="paragraph"> Mi nombre es Juan Antonio Rodríguez Razo, soy una persona a la cual le encanta la tecnología, y estar informado acerca de ella, en los últimos años me he enfocado en aprender mas sobre el desarrollo de software, concluyendo mi carrera como técnico superior universitario en desarrollo de software multiplataforma, en la UTS ( Universidad Tecnilógica de Salamanca ) y actualmente estoy ejerciendo en Alura Equipo One, para concluir como Front-End Developer…</p>
<a href=""><button class="boton">Descarga CV</button></a>
<div id="skils" class="skils">
<h2 class="subtitulo__sobre">Skils</h2>
<div class="skils__container">
<nav class="skils__icons">
<img class="icons__skils" src="img/logos/html.svg" alt="" srcset="">
<img class="icons__skils" src="img/logos/css.svg" alt="" srcset="">
<img class="icons__skils" src="img/logos/js.svg" alt="" srcset="">
<img class="icons__skils" src="img/logos/figma.svg" alt="" srcset="">
</nav>
</div>
</div>
</div>
</div>
</section>
<section id="proyects" class="proyects">
<div class="container">
<h2 class="subtitulo__sobre">Proyects</h2>
<div class="proyects__grid">
<article class="proyects__items">
<img src="img/fruta y fruto.png" alt="error de imagen" class="proyects__img">
<div class="proyects__hover">
<h2 class="proyects__title">Fruta y fruto</h2>
<a target="_blank" href="no disponible"> <i class="far fa-eye alt proyects__icon" ></i></a>
</div>
</article>
<article class="proyects__items">
<img src="img/apeperia.png" alt="error de imagen" class="proyects__img">
<div class="proyects__hover">
<h2 class="proyects__title">Pagina apeperia</h2>
<a target="_blank" href="no disponible" target="_blank"> <i class="far fa-eye alt proyects__icon" ></i></a>
</div>
</article>
<article class="proyects__items">
<img src="img/carrito.png" alt="error de imagen" class="proyects__img">
<div class="proyects__hover">
<h2 class="proyects__title">Carrito compras</h2>
<a target="_blank" href="https://carritoconjs.netlify.app/"><i class="far fa-eye alt proyects__icon" ></i></a>
</div>
</article>
<article class="proyects__items">
<img src="img/alurabarber.png" alt="error de imagen" class="proyects__img">
<div class="proyects__hover">
<h2 class="proyects__title">Barberia alura</h2>
<a target="_blank" href="no disponible"> <i class="far fa-eye alt proyects__icon" ></i></a>
</div>
</article>
<article class="proyects__items">
<img src="img/amor.png" alt="error de imagen" class="proyects__img">
<div class="proyects__hover">
<h2 class="proyects__title">Amor y amistad</h2>
<a target="_blank" href="https://amoryamistadf.netlify.app/"><i class="far fa-eye alt proyects__icon" ></i></a>
</div>
</article>
</div>
</div>
</section>
</main>
<header class="headerPrincipal">
<div class="container">
<p class="headerPrincipal-titulo" href="logo">Antonio</p>
<nav class="headerPrincipal-nav">
<a class="headerPrincipal-nav-link" href="#principal">Home</a>
<a class="headerPrincipal-nav-link" href="#sobre">Sobre mi</a>
<a class="headerPrincipal-nav-link" href="#skils">Skils</a>
<a class="headerPrincipal-nav-link" href="#proyects">Proyects</a>
<a class="headerPrincipal-nav-link headerPrincipal-nav-link-app" href="#contact">Contact</a>
</nav>
</div>
<footer class="footer">
<section id="contact" class="footer__contact">
<h3 class="footer__title">Contactanos</h3>
<div class="footer__icons">
<span class="footer__container-icon">
<a class="fab fa-facebook-f footer__icon" href="#"></a>
</span>
<span class="footer__container-icon">
<a class="fab fa-twitter footer__icon" href="#"></a>
</span>
<span class="footer__container-icon">
<a class="fab fa-whatsapp footer__icon" href="#"></a>
</span>
<span class="footer__container-icon">
<a class="fab fa-instagram footer__icon" href="#"></a>
</span>
<span class="footer__container-icon">
<a class="fab fa-linkedin footer__icon" href="#"></a>
</span>
</div>
</section>
</div>
</footer>
</header>
<script src="https://kit.fontawesome.com/eb0ce24bc3.js" crossorigin="anonymous"></script>
</body>
</html>