File: /home/asjudine/public_html/principal/trayectoria.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta charset="iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=edge" />
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Trayectoria</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css">
<link rel="stylesheet" href="../css/estilos.css">
<style>
/*.panel-main{
width: 400px;
height: 280px;
margin: 0 auto;
}
.panel-main img,
.thumbs img {
width: 100%;
height: auto;
}
div.thumbs {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
}
div.thumbs figure{
max-width: 200px;
align-content: center;
border: 2px solid #b21f1f;
margin-right: 10px;
text-align: center;
}
div.thumbs figure img{
max-width: 100%;
height: 100px;
cursor: pointer;
}
div.thumbs figure:hover{
transform: translateY(2px);
transition: ease-in-out;
}
div.thumbs figure figcaption{
text-transform: uppercase;
font-size: .7em;
padding: 5px;
background-color: #333333;
color: #fff;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 0.5s ease-in 1 forwards;
}*/
.fotorama__stage {
overflow: visible;
}
.fotorama__nav::before, .fotorama__nav::after {
background-image: none;
}
.fotorama__arr {
top: auto;
bottom: -72px;
width: 17px;
height: 17px;
margin-top: 0;
background: transparent;
border-top: 3px solid black;
border-right: 3px solid black;
border-radius: 2px;
box-shadow: 2px -2px 0 white;
}
.fotorama__wrap--css3 .fotorama__arr--prev {
left: 17px;
transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.fotorama__wrap--css3 .fotorama__arr--prev:hover {
left: 13px;
}
.fotorama__wrap--css3 .fotorama__arr--next {
right: 17px;
transform: translate3d(0, -50%, 0) rotate(45deg);
}
.fotorama__wrap--css3 .fotorama__arr--next:hover {
right: 15px;
}
.fotorama__thumb {
box-sizing: border-box;
border: 1px solid red;
}
.fotorama__thumb-border {
border-style: solid;
border-color: green;
}
.fotorama__stage__frame .fotorama__fade-rear .fotorama__loaded .fotorama__loaded--img .fotorama__active
{
height: 400px!important;
}
img.fotorama__img{
margin: 0 !important;
text-align: center!important;
}
/*.fotorama img{
width: 250px!important;
height: 250px!important;
}*/
</style>
</head>
<body>
<?php include('../headerint.php'); ?>
<?php include('../navint.php'); ?>
<h1 class="titulos">NUESTROS CLIENTES</h1>
<main class="main">
<!--
<div class="contenedor">
<div class="panel-main">
<div class="imagen">
<img src="../ELEMENTS/trayec/1.jpg" id="selected" class="grande">
</div>
<div class="descripcion">
</div>
</div>
<div class="thumbs">
<figure>
<img src="../ELEMENTS/trayec/1.jpg" class="img">
<figcaption>Armada Nacional</figcaption>
</figure>
<figure>
<img src="../ELEMENTS/trayec/2.jpg" class="img">
<figcaption>Fuerza Area Colombiana</figcaption>
</figure>
<figure>
<img src="../ELEMENTS/trayec/3.jpg" class="img">
<figcaption>Policia Nacional</figcaption>
</figure>
<figure>
<img src="../ELEMENTS/trayec/4.jpg" class="img">
<figcaption>Ejercito Nacional</figcaption>
</figure>
<figure>
<img src="../ELEMENTS/trayec/5.jpg" class="img">
<figcaption>DAS</figcaption>
</figure>
<figure>
<img src="../ELEMENTS/trayec/6.jpg" class="img">
<figcaption>INPEC</figcaption>
</figure>
</div>
</div>
-->
<div class="fotorama">
<img src="../ELEMENTS/escudos/FuerzasMilitares.png">
<img src="../ELEMENTS/escudos/FuerzaAerea.png">
<img src="../ELEMENTS/escudos/policia.png">
<img src="../ELEMENTS/escudos/Armadanacional.png">
<img src="../ELEMENTS/escudos/EjercitoNacional.png">
<img src="../ELEMENTS/escudos/empresas.png">
<!--<img src="http://s.fotorama.io/5.jpg">-->
</div>
</main>
<?php include('../footerint.php'); ?>
<script src="../js/jquery_3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<script>
fotoramaDefaults = {
width: 1100,
height: 300,
maxwidth: '100%',
allowfullscreen: true,
nav: 'thumbs',
loop: true,
arrows: 'always',
transition: 'crossfade',
navwidth: '88%',
thumbwidth: 125,
thumbheight: 80,
thumbmargin: 20
}
</script>
<!--<script>
const current = document.querySelector("#selected");
const thumbs = document.querySelectorAll(".thumbs img");
const opacity = 0.5;
// Set opacity of first image
thumbs[0].style.opacity = opacity;
thumbs.forEach(img => img.addEventListener("click", imgActivate));
function imgActivate(e) {
// Reset opacity on all thumbs
thumbs.forEach(img => (img.style.opacity = 1));
// Change current image to source of clicked image
current.src = e.target.src;
// Add fadeIn class
current.classList.add("fade-in");
// Remove fadeIn class after animation
setTimeout(() => current.classList.remove("fade-in"), 300);
// Change opacity to variable value on line 3
e.target.style.opacity = opacity;
}
</script>-->
</body>
</html>