Actualizaciones web estática
He decidido usar esta plantilla https://bootstrapmade.com/bootstrap-5-templates/ , la cual he seleccionado de esta página https://bootstrapmade.com/bootstrap-5-templates/
Además, he usado el archivo de post de esta plantilla https://startbootstrap.com/theme/clean-blog como plantilla para el aprtado de intereses, esto estará más detallado en adelante.
Me he decantado por esta plantilla debido a su estilo minimalista, paleta de colores cálidos y agradables, además de ser perfectos para usar en una página tipo CV. La idea de utilizar esta plantilla es utilizar su diseño claro y minimalista para modificarla y añadir los elementos que considero importantes para mi, además de lo requerido a la hora de evaluar el trabajo.
No detallaré en exceso los cambios de textos e imágenes que ya venían en la plantilla, sólo los nombraré ya que "la práctica NO consiste en coger un estilo bonito, y cambiar los contenidos y las fotos, o simplemente 'quitar partes de esa plantilla'. Requiere integrar nuevos elementos web en la plantilla de partida."
Comenzando con los cambios, el primer cambio es el de la portada:
Simplemente cambié la imagen y el texto del centro. Se puede observar que la barra de navegación también ha cambiado, además de haber eliminado el header y footer. Cambios que detallo en más profundidad a continuación.
He decidio mantener los nombres de los distintos menús en la navabr en inglés, para la comprensión de cualquier persona con interés que se pueda ver limitada por el español. Sin embargo, toda la información y textos relevantes de la página estarán en español. Esto puede ser contradictorio pero creo que como elementos de navegación no tienen tanta relevancia y por otra parte, como se hace en distintos ámbitos de la ingeniería e informática, hay elementos que se nombran en inglés por convenio y conveniencia.
Además elimino tanto el header como el footer de toas las páginas, ya que no creo que esto suponga un problema por el uso que se le va a dar a esta página.
Como se puede observar, el código es totalmente distinto al original, manteniendo los estilos y archivos css y js. Como ya había dicho antes, los elementos del formulario original se mantienen, pero el formulario en si está ahora en el centro y se han eliminado los elementos que originalmente estaban situados a la izquierda y el mapa. Por otra parte, la página fija de respuesta consiste en un texto aliniado en el centro manteniendo los estilos de la página. Llegamos a esta página cuando el usuario rellena el formualrio y le da a enciar mensaje.
A continuación mi archivo de código actual
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Ignacio Aguirre Candia - Index</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container-fluid d-flex justify-content-between align-items-center">
<h1 class="logo me-auto me-lg-0"><a href="index.html">IAC</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Interests</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
<li><a class="dropdown-item" href="interests.html">Interests</a></li>
<li><a class="dropdown-item" href="recomendations.html">Recomendations</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<div class="header-social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
</div>
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<div class="container d-flex flex-column align-items-center" data-aos="zoom-in" data-aos-delay="100">
<h1>Ignacio Aguirre Candia</h1>
<h2> <p style="color: black">Estudiante de grado en Ingeniería de Tecnologías y Servicios de la Telecomunicación</p></h2>
<a href="about.html" class="btn-about">About Me</a>
</div>
</section><!-- End Hero -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
Como se puede observar, el header, el footer y la licencia han sido eliminados. No creo que esto acarree ningún tipo de problema, ya que esta página no va a ser usada mas que para uso propio y nunca a modo comercial. Por otra parte los elementos de la navbar también han sido modificados por aquellos menús que yo he considerado importantes para mi. Haciendo uno de ellos del tipo desplegable, este será detallado posteriormente. Además, he cambiado el nombre de kelly en la esquina superior izquierda por IAC (mis iniciales), este elemento cada vez que se pincha retorna al usuario a este menú.
Los siguientes cambios realizados son en el apartado de contacto:
Como se observa, esta página ha sido completamente cambiada, se han mantenido los elementos originales requeridos enviar el mensaje, pero estos elementos se pueden considerar "universales" a la hora de enviar un correo. Además, se ha añadido una página html fija cada vez que se da a enviar el mensaje. El color de enviar el mensaje es probable que varíe según avance con los cambios, para no romper demasiado con el estilo del resto de la página. Ahora pasaré a detallar los cambios en el código y a ilustrar la página de respuesta fija.
Ahora el nuevo código con los cambios realizados:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Contact - Kelly Bootstrap Template</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Kelly
* Template URL: https://bootstrapmade.com/kelly-free-bootstrap-cv-resume-html-template/
* Updated: Mar 17 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container-fluid d-flex justify-content-between align-items-center">
<h1 class="logo me-auto me-lg-0"><a href="index.html">IAC</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Interests</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
<li><a class="dropdown-item" href="interests.html">Interests</a></li>
<li><a class="dropdown-item" href="recomendations.html">Recomendations</a></li>
</ul>
</li>
<li><a class="active" href="contact.html">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<div class="header-social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
</div>
</div>
</header><!-- End Header -->
<main id="main">
<div class="content">
<div class="container">
<div class="row align-items-stretch justify-content-center no-gutters">
<div class="col-md-7">
<div class="form h-100 contact-wrap p-5">
<h3 class="text-center">Let's Talk</h3>
<form class="mb-5" method="post" action="respuesta.html" id="contactForm" name="contactForm">
<div class="row">
<div class="col-md-6 form-group mb-3">
<label for="" class="col-form-label">Nombre *</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Tu nombre" required>
</div>
<div class="col-md-6 form-group mb-3">
<label for="" class="col-form-label">Email *</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Tu email" required>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group mb-3">
<label for="subject" class="col-form-label">Asunto</label>
<input type="text" class="form-control" name="subject" id="subject" placeholder="Asunto">
</div>
</div>
<div class="row mb-5">
<div class="col-md-12 form-group mb-3">
<label for="message" class="col-form-label">Mensaje *</label>
<textarea class="form-control" name="message" id="message" cols="30" rows="4" placeholder="Escribe tu mensaje" required></textarea>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-5 form-group text-center">
<button type="submit" class="btn btn-block btn-primary rounded-0 py-2 px-4">Enviar Mensaje</button>
<span class="submitting"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</main><!-- End #main -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
Y la página de respuesta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message Sent</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>¡Mensaje enviado, gracias!</h2>
<p>Nos pondremos en contacto contigo lo antes posible.</p>
</div>
</body>
</html>
<div class="col-md-6 form-group mb-3">
<label for="" class="col-form-label">Apellidos *</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Tus apellidos" required>
</div>
Para crear este formulario de contacto simplemente fui creando un formulario básico como los hecho en clase y tuve cuidado de mantener el formato y estilo de la página. Además añadí que fuése neceario completar todos los campos del formulario para que fuera un mensaje que no le faltase ningún elemento, si en el futuro decido añadir algún campo más, decidiré si es obligatorio rellenarlo o no para enviar el mensaje
About:
Así era el menú originalmente y así ha quedado: 
El primer apartado lo he mantenido pero he elimiando los otros 2, en lugar de estos apartados he añadido un pequeño texto seguido de 2 imágenes acompañadas con texto cada una, que ahora de tallaré el código. Esto me pareció una idea bastante buena ya que al ser una apartado sobre mi, detallo un poco mis dos grandes ocupaciones. Por otra parte, también las detallaré posteriormente etsas ocupaciones y otras aficiones en más detalle en el apartado de intereses.
<!-- Header-->
<header class="py-5">
<div class="container px-5">
<div class="row justify-content-center">
<div class="col-lg-8 col-xxl-6">
<div class="text-center my-5">
<h1 class="fw-bolder mb-3">Sobre mi</h1>
<p class="lead fw-normal text-muted mb-4"> Además de estar actualmente estudiando una ingeniería y de interesarme por los nuevos avances en todo ámbito tecnológico, soy una persona apasionada del deporte y la naturaleza. Disfruto de entrenar en el gimnasio, así como de practicar artes marciales mixtas, jiu jitsu brasileño o de simplemente salir a dar un paseo por el campo.
A parte de esto soy aficionado a la lectura y cine de todo tipo de géneros.</p>
<a class="btn btn-primary btn-lg" href="#scroll-target">Más sobre mi</a>
</div>
</div>
</div>
</div>
</header>
<!-- About section one-->
<section class="py-5 bg-light" id="scroll-target">
<div class="container px-5 my-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-6"><img src="assets/img/ingenieria-electronica.jpg" class="img-fluid" alt="..." /></div>
<div class="col-lg-6">
<h2 class="fw-bolder">Ingeniería</h2>
<p class="lead fw-normal text-muted mb-0">Desde siempre he tenido claro que me gustaría estudiar una ingeniería. Empecé a estudiar ingeniería industrial y al no estar muy conforme con la universidad en la que estudiaba, me cambié de carrera y universidad y empecé lo que coloquialmente conocemos como "teleco". Todo lo relacionado con la tecnología e innovación siempre me ha gustado e inspirado, por eso me decanté por esta carrera. Además, me gusta explorar distintas tecnologías, cosa que se puede ver reflejada en los distintos cursos que he realizado hasta ahora de manera personal.</p>
</div>
</div>
</div>
</section>
<!-- About section two-->
<section class="py-5">
<div class="container px-5 my-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-6 order-first order-lg-last"><img class="img-fluid rounded mb-5 mb-lg-0" src="assets/img/Deporte.jpg" alt="..." /></div>
<div class="col-lg-6">
<h2 class="fw-bolder">Deporte & Naturaleza</h2>
<p class="lead fw-normal text-muted mb-0">Al igual que siempre he sabido que quería estudiar una ingeniería, siempre he practicado algún deporte y disfrutado de estar en la naturaleza. Actualmente practico artes marciales mixtas, jiu jitsu brasileño y voy al gimnasio a realizar distintos tipos de entrenamiento. Hasta hace unos años jugaba mucho al futbol y estaba en un equipo federado.
Esta parte de deporte y naturaleza es algo fundamental para mi, es algo con lo que he crecido desde pequeño y pretendo conservar de cara al futuro, ya que lo encuentro tremendamente beneficioso y enriquecedor.</p>
</div>
</div>
</div>
</section>
Resume section:
Así estaba orignalmente:
No son cambios muy significativos ya que cambié el código orinal del aprtado de about a este, ya que lo creía más conveniente. Además de cambiar el texto e imágenes he añadido un par de elementos sobre estos que creía relevantes, pero igual, con la misma estructuura del código original.
</div>
<div class="progress">
<span class="skill">Completado: <i class="val">30.625%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="240"></div>
</div>
</div>
Este es el código usado para añadir la barra del porcentaje del final.
A continuación vamos a ver los apartados de interes y recomendaciones, lo que originalmente eran services y portfolio, ambos han sido completamente remodelados:
El primer elemento distinguible es el menú desplegable añadido a la barra de navegación, aquí el código en concreto:
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="active" href="resume.html">Resume</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Interests</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
<li><a class="dropdown-item" href="interests.html">Interests</a></li>
<li><a class="dropdown-item" href="recomendations.html">Recomendations</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
Comenzamos con la página de intereses, esta es la que ha sufrido el mayor número de modificaciones ya que ha sido remodelada completamente, este es el código sobre el que voy a detallar las modificaciones:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Intereses</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Kelly
* Template URL: https://bootstrapmade.com/kelly-free-bootstrap-cv-resume-html-template/
* Updated: Mar 17 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container-fluid d-flex justify-content-between align-items-center">
<h1 class="logo me-auto me-lg-0"><a href="index.html">IAC</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Interests</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
<li><a class="dropdown-item" href="interests.html">Interests</a></li>
<li><a class="dropdown-item" href="recomendations.html">Recomendations</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<div class="header-social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
</div>
</div>
</header><!-- End Header -->
<main id="main">
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Aficiones</h2>
<p>Aquí detallaré un poco más a fondo mis aficiones, además hay un apartado de recomendaciones de libros que me he leído.</p>
</div>
<div class="album py-5 bg-body-tertiary">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<img src="assets/img/Intereses/Lectura.jpeg" class="img-fluid" alt="">
<div class="card-body">
<p class="card-text">Lectura</p>
<p class="card-text">La lectura es una de mis pasiones desde pequeño. Empecé a leer los libros que me recomendaban en el colegio y los que me regalaban en casa, y en seguida encontré un lugar especial en el que vivir nuevas aventuras, en el que aprender y crecer como persona.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="post/lectura.html" class="portfolio-details-lightbox" > Leer más</i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="assets/img/Intereses/bjj.jpeg" class="img-fluid" alt="">
<div class="card-body">
<p class="card-text">MMA</p>
<p class="card-text">No hay un deporte que se asemeje a este, desde la dificultad física, disciplina, además de resistencia mental, este deporte no es para todo el mundo, pero para aquellos que encuentran la diversión y motivación en este deporte como es mi caso, es algo único. </p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="post/mma.html" class="portfolio-details-lightbox">Leer más</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="assets/img/Intereses/cine.jpg" class="img-fluid" alt="">
<div class="card-body">
<p class="card-text">Cine</p>
<p class="card-text">El cine es una ventana al mundo. A través de películas de diferentes países, culturas y épocas, puedo explorar y comprender la diversidad del ser humano y del mundo que nos rodea. Ampliando mi perspectiva, haciéndome más consciente de las complejidades y bellezas de la vida.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="post/cine.html" class="portfolio-details-lightbox" >Leer más</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="assets/img/Intereses/Naturaleza.jpeg" class="img-fluid" alt="">
<div class="card-body">
<p class="card-text">Naturaleza</p>
<p class="card-text">La naturaleza es mi lugar de paz en un mundo tan acelerado. Encontrar tiempo para sumergirme en la belleza natural es esencial para mi.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="post/naturaelza.html" class="portfolio-details-lightbox">Leer más</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="assets/img/Intereses/technology.jpg" class="img-fluid" alt="">
<div class="card-body">
<p class="card-text">Tecnología</p>
<p class="card-text">La oportunidad de explorar nuevas fronteras y participar en innovaciones alimentan mi pasión por la tecnología.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="post/tecnología.html" class="portfolio-details-lightbox">Leer más</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="assets/img/Intereses/futbol.jpg" class="img-fluid" alt="">
<div class="card-body">
<p class="card-text">Fútbol</p>
<p class="card-text"> Más que solo un juego. Desde que era un niño, el deporte rey ha estado presente en mi vida, cada partido es una montaña rusa de emociones.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="post/fútbol.html" class="portfolio-details-lightbox">Leer más</a>
</div>
</div>
</div>
</div>
</div>
</main><!-- End #main -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
Se han añadido 6 elementos con una foto y un breve texto, además se les ha ñadido un elemento pinchable que despliega una página con más texto y alguna imagen. Esta página que se despliega tiene un estilo diferente al de la plantilla ya que clo cogí de la otra plantilla especificada al comienzo de este blog. Esta página en comparación con la original está completamente remodelada, ya que a pesar de tener una apriencia similar las funcionalidades son otras, siedno la página original 6 tarjetas sin funcionalidad ninguna.
Estas páginas desplegables, como ya he dicho consistn de texto y de una imagen, además de un elemento arriba a la izquierda que añadí para poder volver a la página principal. Además, estas páginas tienen la funcionalidad de pasar a la izqierda o derecha o de cerrarlas en cualquier momento
Aquí el código de las páginas desplegables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<!-- Post Content-->
<article class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<h2 class="section-heading">Tecnología</h2>
<p>La innovación tecnológica es un imán para aquellos que buscan estar a la vanguardia de la transformación digital. Desde la introducción de dispositivos inteligentes hasta el desarrollo de aplicaciones revolucionarias, la constante evolución tecnológica ofrece una experiencia emocionante y dinámica para los entusiastas de la tecnología. La oportunidad de explorar nuevas fronteras y participar en el desarrollo de soluciones innovadoras alimenta una pasión inquebrantable por la tecnología, ya que cada avance representa un paso hacia un futuro más avanzado.</p>
<a href="#!"><img class="img-fluid" src="assets/img/Starship.jpg" alt="..." /></a>
<span class="caption text-muted">“Si decides hacer solo las cosas que sabes que van a funcionar, dejarás un montón de oportunidades encima de la mesa”</span>
<p>La innovación tecnológica promueve la colaboración y el intercambio de ideas en una comunidad global interconectada. Los foros en línea, las redes sociales y los eventos tecnológicos permiten que personas de diferentes culturas y campos compartan conocimientos y experiencias, fomentando un ambiente de aprendizaje continuo y crecimiento personal.</p>
<p>Esta comunidad de innovadores y entusiastas de la tecnología nutre una cultura de creatividad y colaboración, impulsando aún más el impulso hacia adelante en la búsqueda de soluciones tecnológicas innovadoras y significativas.
Siempre me ha gustado la idea de participar en algún tipo de avance tecnológico, ya que es un tema que encuentro fascinante, además de increíblemente enriquecedor y complejo. Como ya he dicho antes, la ayuda entre unos y otros es ventajosa y necesaria, esto además le añade un valor extra a cualquier innovación. Que un grupo de personas de distintos orígenes, distintas ideas, valores y culturas se junten y trabajen mano a mano desarrollando o innovando es algo que siempre me ha parecido extremadamente interesante y atractivo.</p>
</div>
</div>
</div>
</article>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Recomendaciones</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container-fluid d-flex justify-content-between align-items-center">
<h1 class="logo me-auto me-lg-0"><a href="../index.html">IAC</a></h1>
</div>
</header><!-- End Header -->
Por otro lado, la página de recomendaciones deriva de la originalmente denominada como Portfolio, con esta página he decidio mantener su estructura y modificar el código para ajustar el tamaño de las fotos de los libros así como los elementos pinchables, haciendo que cada elemento pinchable sea distinto al anterior. El elemento pinchable de la izquierda mantiene la funcionalidad de aumentar la fotografía en cuestión, pero el de la derecha ya no lleva a una misma página siempre.
Primero, vamos a ver los cambios realizados a las tarjetas e imágenes.
<div class="col-lg-4 col-md-6 portfolio-item filter-Ficción">
<div class="portfolio-wrap">
<img src="assets/img/Recomendaciones/the witcher.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>The witcher</h4>
<p>Andrzej Sapkowski </p>
<div class="portfolio-links">
<a href="assets/img/Recomendaciones/the witcher.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" ><i class="bx bx-plus"></i></a>
<a href="Andrzej Sapkowski.html" class="portfolio-details-lightbox" data-glightbox="type: external" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
Segundo, cuando clicamos en el el elemento de la derecha, se nos despliega una página personalizada para cada libro, excepto los que comparten autor. Lo he programado así, ya que la mayoría de los libros tienen continuación o varios libres de la misma serie, por eso, pienso que es más útil poder verlos tpodos juntos que tener que ir uno a unno. SIn embargo, también he puesto libros individualmente, como es el caso de Cosmos. Por otra parte, no he decido añadir páginas para estrictamente todos los autores por el tiempo que me llevaba que he decidido invertir en pulir otras partes de la página o de este blog. He tomado esta decisión ya que añadir páginas para estos autores no supone dificultadd ya que es coger el formato de las ya creadas y modificar los datos. Estas páginas las iré terminando al igual que añadiendo nuevos libros, ya que este apartado de recomendaciones a modo de bibliografía personal me ha gustado bastante, Tanto la forma en la que aparecen los libros, como la capacidad de filtrarlos (que también ha sido modificado de la plantilla origanl, para que este filtrado vaya acorde al género de estos), como las páginas de los autores con sus fotos capaces de desplazarse a izquierda y derecha deslizando sobre ellas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title> Details</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<main id="main">
<!-- ======= Portfolio Details Section ======= -->
<section id="portfolio-details" class="portfolio-details">
<div class="container">
<div class="row gy-4">
<div class="col-lg-8">
<div class="portfolio-details-slider swiper">
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="assets/img/Recomendaciones/the witcher.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-lg-4">
<div class="portfolio-info">
<h3>Información</h3>
<ul>
<li><strong>Género</strong>: Ficción</li>
<li><strong>Autor</strong>: Andrzej Sapkowski</li>
<li><strong>Fecha</strong>:
<li>El último deseo (1º edición 1993, 1ºedición español 2002)</li>
<li>La espada del destino (1º edición 1992, 1ºedición español 2002)</li>
<li>La sangre de los elfos (1º edición 1994, 1ºedición español 2003)</li>
<li>Tiempo de odio(1º edición 1995, 1ºedición español 2004)</li>
<li>Bautismo de fuego(1º edición 1996, 1ºedición español 2005)</li>
<li>La torre de la golondrina (1º edición 1997, 1ºedición español 2006)</li>
<li>La dama del lago (1º edición 1999, 1ºedición español 2009)</li>
<li>Camino sin retorno (1º edición 2000, 1ºedición español 2001)</li>
<li>Estación de tormentas (1º edición 2013, 1ºedición español 2015)</li>
</ul>
</div>
<div class="portfolio-description">
<h2>Muy recomendados</h2>
<p>
Andrzej Sapkowski (Łódź; 21 de junio de 1948) es un escritor polaco de fantasía heroica. Sus obras están fuertemente influenciadas por la cultura y mitología eslavas, así como por las narraciones tradicionales.1 Su estilo de escritura es fluido y directo, adaptando el lenguaje popular de la Polonia actual.
Bautismo de Fuego es de mis libros favoritos llega un momento en la serie perfecto, no sólo estás embarcado en las épicas aventuras de Geralt, si no que además es altamente reflexivo. Una serie de libros que recomendaría a cualquiera que le guste la ficción.
</p>
</div>
</div>
</div>
</div>
</section><!-- End Portfolio Details Section -->
</main><!-- End #main -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
Comentarios
Publicar un comentario