-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Hola este es mi proyecto final del diplomado Nancy Vega
- Loading branch information
Showing
36 changed files
with
1,269 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,226 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Jhon Disek</title> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> | ||
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | ||
| <link rel="stylesheet" href="css/estilos.css"> | ||
| <script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark sticky-top" data-bs-theme="dark"> | ||
| <div class="container-fluid"> | ||
| <a class="navbar-brand" aria-current="page" href="#">JD</a> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse menu" id="navbarNav"> | ||
| <ul class="navbar-nav"> | ||
|
|
||
| <li class="nav-item"> | ||
| <a id="menu" class="nav-link" href="#acerca">Acerca de</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a id="menu" class="nav-link" href="#proyectos">Proyectos</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a id="menu" class="nav-link" href="#contacto">Contactame</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <div class="container-fluid todo"> | ||
|
|
||
| <header> | ||
| <div class="overlay"></div> | ||
| <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> | ||
| <source src="media/video-header.mp4" type="video/mp4"> | ||
| </video> | ||
| <div class="container h-100"> | ||
| <div class="d-flex h-100 text-center align-items-center"> | ||
| <div class="w-100 text-white"> | ||
| <img src="media/logo-header.png" class="logo-header"> | ||
| <div class="abajo1 animacion"> | ||
| </div> | ||
| <div class="abajo2 animacion"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
|
|
||
|
|
||
| <!-- Acerca de --> | ||
|
|
||
| <div class="container-fluid todo acerca-de"> | ||
| <div id="acerca" class="row bio"> | ||
| <div class="col-sm-12 col-lg-8 acerca-content order-2 order-md-1" data-aos="fade-up"> | ||
| <img src="media/disek.png" class="img-fluid" alt="..."> | ||
| </div> | ||
| <div class="col-sm-12 col-lg-4 order-1 order-md-2" data-aos="fade-left"> | ||
| <h1>Jhon Disek</h1> <br> | ||
| <p>Diseñador gráfico de profesión, escritor de graffti y caligrafía, baso mi trabajo en la composición y armonía de las tipografías, dando como resultado ilustraciones tipográficas apoyadas de software de diseño, que posteriormente plasmo en los muros.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- proyectos --> | ||
|
|
||
| <div class="container-fluid proyectos"> | ||
| <div id="proyectos" class="row proyectos-contenido"> | ||
| <div class="col-sm-12 col-lg-3" data-aos="fade-up"> | ||
| <h1>Proyectos</h1> | ||
| <p>Escritor de graffiti y fascinado por el mundo de las letras.</p> | ||
| </div> | ||
| <div id="galeria" class="col-sm-12 col-lg-3 text-center" data-aos="zoom-in-down"> | ||
| <a href="galeria.html" data-categoria="cuadros"><img src="media/cuadros.jpg" class="img-fluid cuadros"> | ||
| <div class="titulo-cuadros align-items-center"> | ||
| <img src="media/pleca.png" class="img-fluid"> | ||
| <p>Cuadros</p> | ||
| </div></a> | ||
| </div> | ||
|
|
||
| <div id="galeria" class="col-sm-12 col-lg-3 text-center" data-aos="zoom-in-down"> | ||
| <a href="galeria.html"><video class="cuadros" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> | ||
| <source src="media/muros.mp4" type="video/mp4"> | ||
| </video> | ||
| <div class="titulo-cuadros align-items-center"> | ||
| <img class="img-fluid" src="media/pleca.png"> | ||
| <p>Sobre la pared</p> | ||
| </div></a> | ||
| </div> | ||
|
|
||
| <div id="galeria" class="col-sm-12 col-lg-3 text-center" data-aos="zoom-in-down"> | ||
| <a href="galeria.html"><img src="media/playeras.jpg" class="img-fluid cuadros"> | ||
| <div class="titulo-cuadros align-items-center"> | ||
| <img class="img-fluid" src="media/pleca.png"> | ||
| <p>Playeras</p> | ||
| </div></a> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- Contacto --> | ||
|
|
||
| <div class="container-fluid text-center "> | ||
| <div class="container"> | ||
| <div id="contacto" class="row justify-content-md-center"> | ||
|
|
||
| <div class="col-sm-12 col-lg-6" data-aos="zoom-out-up"> | ||
| <img class="img-fluid" src="media/Contacto.png"> | ||
|
|
||
| </div> | ||
| <div class="col-sm-12 col-lg-6 contacto1"> | ||
|
|
||
| <figure> | ||
|
|
||
| <figcaption data-aos="fade-up"> | ||
| <h2 class="title-lg"> | ||
|
|
||
| <span class="span1">Hagamos un</span> | ||
| <span class="span2">gran trabajo </span> | ||
| <span class="span3">juntos</span> | ||
| </h2></figcaption> | ||
| <div id="conta"> | ||
| <a class="" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-aos="fade-up"> <img src="media/pleca.png"> | ||
| <p>Contactame</p> | ||
|
|
||
| </a></div> | ||
|
|
||
|
|
||
| <!-- Modal --> | ||
| <div class="modal fade" id="staticBackdrop" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> | ||
| <div class="modal-dialog modal-lg modal-dialog-centered"> | ||
| <div class="modal-content bg-black text-white" data-bs-theme="dark"> | ||
| <div class="modal-header"> | ||
| <h1 class="modal-title" id="staticBackdropLabel">Comencemos tu nuevo proyecto</h1><br> | ||
|
|
||
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
| <div class="modal-body"> | ||
|
|
||
| <div class="container-fluid"> | ||
| <div class="row"> | ||
| <p>Comunicate estare ecantado de analizar tus planes</p> | ||
| <div class="col-lg-6"> | ||
| <form class="formulario"> | ||
| <div> | ||
| <label for="validationCustom01" class="form-label">Tu nombre</label> | ||
| <input type="text" class="form-control" placeholder="Nombre" aria-label="First name"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="validationCustom02" class="form-label">Tu correo electrónico</label> | ||
| <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="nombre@ejemplo.com"> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <label for="inputCity" class="form-label">Ciudad</label> | ||
| <input type="text" class="form-control" id="inputCity"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label class="form-label">Escribe un mensaje</label> | ||
| <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div class="col-lg-6 mapa"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d40704.60186122138!2d-99.23359519631502!3d19.665691151463975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d21dd4afab4267%3A0xce8d74d9edb4d88!2zQ3VhdXRpdGzDoW4gSXpjYWxsaSwgTcOpeC4!5e0!3m2!1ses!2smx!4v1674343079350!5m2!1ses!2smx" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="modal-footer"> | ||
|
|
||
| <button type="button" class="btn btn-light">Enviar</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </figure> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> <!--termina seccion contacto--> | ||
| </div> <!--termina contendor proyectos y contacto general--> | ||
|
|
||
| <!--footer--> | ||
| <footer> | ||
| <div class="container-fluid"> | ||
| <div class="row"> | ||
| <div class="col-sm-12 redes"> | ||
| <a href="https://www.instagram.com/disek_one/" target="_blank"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"> | ||
| <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/> | ||
| </svg></a> | ||
| <a href="https://www.facebook.com/jhondiseck" target="_blank"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> | ||
| <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> | ||
| </svg></a> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| </footer> | ||
| </div> <!--Termina contenedor general--> | ||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script> | ||
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | ||
| <script src="js/galerias.js"></script> | ||
| <script> | ||
| AOS.init({ | ||
| duration: 1000, | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.