“UNIVERSIDAD PRIVADA” FRANZ TAMAYO”
FACULTAD DE DISEÑO GRÁFICO Y PRODUCCIÓN CROSSMEDIA
CARRERA DE DISEÑO GRÁFICO
EJERCICIOS
ESTUDIANTE:
MONZERRAT CARPIO MONTAÑO
DOCENTE:
EDGAR CRISPIN FERNANDEZ GISBERT
La paz- Bolivia
2025
CODIGO php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Fantasy Core</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.cs
s" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center gallery-header"> ★ Final Fantasy Core ★</h1>
<div class="row g-4">
<!-- Imagen 1 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img/CLOUD11.jpg"
alt="Cloud Strife"
data-bs-toggle="modal"
data-bs-target="#modal1">
<div class="gallery-info">
<h5><strong>★ Cloud Strife</strong></h5>
<p><strong>EX-SOLDADO de Shinra</strong></p>
<p><i>No soy un heroe...Solo soy el eco de una
historia que no me pertenece...</i></p>
</div>
</div>
</div>
<!-- Imagen 2 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img/ZACK1.jpg"
alt="zack fair"
data-bs-toggle="modal"
data-bs-target="#modal2">
<div class="gallery-info">
<h5><strong>★ Zack Fair</strong></h5>
<p><strong>SOLDADO 1ra Clase, Shinra Electric Power
Company</strong></p>
<p><i>Abraza tus sueños. Y pase lo que
pase...protege tu honor como SOLDADO...</i></p>
</div>
</div>
</div>
<!-- Imagen 3 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img//shephirot 1.jpg"
alt="Sephiroth"
data-bs-toggle="modal"
data-bs-target="#modal3">
<div class="gallery-info">
<h5><strong>★ Sephiroth</strong></h5>
<p><strong>EX-SOLDADO DE 1ra Clase</strong></p>
<p>Nunca sere un recuerdo...</p>
</div>
</div>
</div>
<!-- Imagen 4 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img//aerith.jpg"
alt="Aerith Gainsborough"
data-bs-toggle="modal"
data-bs-target="#modal4">
<div class="gallery-info">
<h5><strong>★ Aerith Gainsborough</strong></h5>
<p><strong>Cetra</strong></p>
<p><i>"Así que mi sangre ha sido una maldición...
pero también ha sido una bendición."</i></p>
</div>
</div>
</div>
<!-- Imagen 5 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img//tifa2.jpg"
alt="tifa lockhart"
data-bs-toggle="modal"
data-bs-target="#modal5">
<div class="gallery-info">
<h5><strong>★ Tifa lockhart</strong></h5>
<p><strong>Miembro de AVALANCHA</strong></p>
<p><i>Solo prométeme una cosa. Cuando seamos mayores
y seas un SOLDADO famoso... si alguna vez estoy atrapado o en problemas...
prométeme que vendrás a salvarme</i></p>
</div>
</div>
</div>
<!-- Imagen 6 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img//barret.jpg"
alt="Tecnología"
data-bs-toggle="modal"
data-bs-target="#modal6">
<div class="gallery-info">
<h5><strong>★ Barret Wallace</strong></h5>
<p>Lider de AVALANCHA</p>
<p><i>No quiero pensar en ellos como
muertos...</i></p>
</div>
</div>
</div>
<!-- Imagen 7 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img//Rude.jpg"
alt="Rude"
data-bs-toggle="modal"
data-bs-target="#modal7">
<div class="gallery-info">
<h5><strong>★ Rude</strong></h5>
<p><strong>Turk de Shinra</strong></p>
<p><i>Reno concentrate!...</i></p>
</div>
</div>
</div>
<!-- Imagen 8 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img//reno.jpg"
alt="Reno Sinclair"
data-bs-toggle="modal"
data-bs-target="#modal8">
<div class="gallery-info">
<h5><strong>★ Reno Sinclair</strong></h5>
<p><strong>Turk/ miembro de operaciones especiales
de S.E.P.C.</strong></p>
<p><i>No es nada personal, solo es
trabajo...</i></p>
</div>
</div>
</div>
<!-- Imagen 9 -->
<div class="col-lg-4 col-md-6">
<div class="gallery-item">
<img src="./Img//vincent.jpg"
alt="vincent valentine"
data-bs-toggle="modal"
data-bs-target="#modal9">
<div class="gallery-info">
<h5><strong>★ Vincent Valentine</strong></h5>
<p><strong>EX-Turk de Shinra</strong></p>
<p><i>La esperanza excesiva es lo opuesto a la
desesperacion. Un amor abrumador puede consumirte al final... </i></p>
</div>
</div>
</div>
</div>
</div>
<!-- Modales para cada imagen -->
<!-- Modal 1 -->
<div class="modal fade" id="modal1" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>Ex-Soldier. ⊹ . ݁ ⟡ ݁
</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video//cloud3.gif" alt="Naturaleza Serena"
class="modal-img">
<p class="mt-3">Ex-soldado marcado por sus memorias,
busca su propia identidad mientras empuña su espada como eco de un heroe que
nunca fue. <br>
<strong>Estilo de combate:</strong> espadachin ofencivo,
Omnislash
</p>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="modal2" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>Zack el imparable ৻( •̀
ᗜ •́৻)</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video/Zack.gif" alt="Zack fair"
class="modal-img">
<p class="mt-3"> Zack es el relampago antes de la
tormenta. Un joven de sonrisa facil y corazon indestructible. <br>
<strong>Estilo de combate:</strong> Buster Sword.</p>
</div>
</div>
</div>
</div>
<!-- Modal 3 -->
<div class="modal fade" id="modal3" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>Angel Caido
(¬_¬")</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video/shephiroto.gif" alt="Sephiroth"
class="modal-img">
<p class="mt-3">Angel caido,angel del juicio, busca
fundirse con el planeta para renacer como Dios. <br>
<strong>Estilo de combate:</strong> juicio
</p>
</div>
</div>
</div>
</div>
<!-- Modal 4 -->
<div class="modal fade" id="modal4" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>Aerith Gainsborough (˶˃
ᵕ ˂˶)</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video/aerith.gif" alt="Aerith Gainsborough"
class="modal-img">
<p class="mt-3">Ultima Cetra, intercectora espiritual
que canaliza la Corriente vital para sanar, proteger y salvar al planeta.
<br>
<strong>Estilo de combate:</strong> Sacerdotiza
espiritual, proteccion.
</p>
</div>
</div>
</div>
</div>
<!-- Modal 5 -->
<div class="modal fade" id="modal5" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>₍^. .^₎⟆
Tifa...</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video//tifa2.gif" alt="Arte y Cultura"
class="modal-img">
<p class="mt-3">La luchadora de Nibelheim, puos
firmes corazon leal, que sostiene al grupo con fuerza fisica y calidez
emocional. <br>
<strong>Estilo de combate:</strong> Monje/ Artes marciales/
apoyo.
</p>
</div>
</div>
</div>
</div>
<!-- Modal 6 -->
<div class="modal fade" id="modal6" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>El Brazo-Cañon
⚠</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video/wallace.gif" alt="Barret Walace"
class="modal-img">
<p class="mt-3">Lider de AVALANCHA, padre combativo que
convierte su brazo en un gran cañon contra Shinra para proteger al planeta.
<br>
<strong>Estilo de combate:</strong> Tirador/Artillero.
</p>
</div>
</div>
</div>
</div>
<!-- Modal 7 -->
<div class="modal fade" id="modal7" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>Rude (
◡̀_◡́
)</strong>x</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video/rude.gif" alt="Rude" class="modal-
img">
<p class="mt-3">Turk silencioso y leal de Shinra, un
ejeutor de puños firmes cuya fuerza habla mas que sus palabras. <br>
<strong>Estilo de combate:</strong> Luchador fisico/ Brawler
/ Artes marciales.
</p>
</div>
</div>
</div>
</div>
<!-- Modal 8 -->
<div class="modal fade" id="modal8" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>Reno ৻( •̀ᗜ •́
৻)</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video/reno.gif" alt="Reno Sinclair"
class="modal-img">
<p class="mt-3">Turk electrico y sacastico de Shinra, un
agente agil que mezcla cinismo con eficia letal en las sombras de la
corporacion. <br>
<strong>Estilo de combate:</strong> Duelista/ Agil/ Baston
electromagnetico. (Electr-Mag Rod.)
</p>
</div>
</div>
</div>
</div>
<!-- Modal 9 -->
<div class="modal fade" id="modal9" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><strong>Vincent Valentine
⛧♱</strong></h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
<img src="./video//vincent.gif" alt="Vincent Valentine"
class="modal-img">
<p class="mt-3">Ex-Turk, tirador gotico y atormentado
que carga con el Caos en su interior, dispara desde las sombras de su
pasado. <br>
<strong>Estilo de combate:</strong> Franco
tirador/transformista
</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.m
in.js"></script>
</body>
</html>
CODIGO CSS
body {
background: linear-gradient(135deg, #868680ff 0%, #35352cff
100%);
min-height: 100vh;
padding: 40px 0;
}
.gallery-header {
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 50px;
}
.gallery-item {
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(27, 10, 1, 0.95);
transition: all 0.3s ease;
background: white;
}
.gallery-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
cursor: pointer;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-info {
padding: 20px;
background: linear-gradient(135deg, #180e01f6 0%, #33261bec
100%);
}
.gallery-info h5 {
color: #f9f9fcff;
font-weight: 600;
margin-bottom: 10px;
}
.gallery-info p {
color: #cac6c2ff;
margin-bottom: 0;
font-size: 0.9rem;
}
.modal-img {
background-color: #1b120dd3;
width: 100%;
height: auto;
border-radius: 8px;
}
.modal-content {
border-radius: 15px;
background-color: #080706ff;
color: white;
}
.modal-header {
background: linear-gradient(135deg, #140101ff 0%, #271e18ab
100%);
color: white;
border-radius: 15px 15px 0 0;
}
.btn-close {
filter: brightness(0) invert(1);
}
Utilice gifs en vez de imagen en el modal para darle otro estilo
CARTURAS DE PANTALLA.
