<script>
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
body {
background-image: url("img/apozadina.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position:center;
}
footer {
bottom: 0;
position: fixed-bottom;
width: 100%;
height: 300px;
background: #2b1d0e;
text-align: left;
color:white;
}
.centriraj {
text-align: center;
}
p{
color:#ffffff;
}
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #2b1d0e;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: .3s ease;
transition: .3s ease;
}
.container:hover .overlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
</style>
</style>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/logo.png" alt="space">
<nav class="navbar navbar-expand-lg navbar navbar-dark">
<a class="navbar-brand" href="index.html">
<img alt="Logo" src="img/logo.png" width="35px" height="35px">
</a>
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">O nama <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-mouseover" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Frakcije
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="bastion.html" >Bastion & Kyrian</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="revendreth.html" >Revendreth & Venthyr</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="ardenwald.html">Ardenweald & Night Fae</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="maldraxsus.html" >Maldraxxus & Necrolord</a>
</div>
</li>
</ul>
</div>
</nav>
<title>Shadownlands Intro</title>
</head>
<body>
<h1 align="center"><strong><i>Ardenveald i Night Fae</i></strong></h1>
<div class="container">
<div class="row">
<div class="col-md-6">
This is main part of page txt from lore that i plan to put on page
<p class="text-justify" >
<strong>
Ardenveald, koji se ponekad naziva i samo veald, carstvo je Shadownlandsa
koje je osnovala Zimska kraljica i naseljeno Noc?nim vilinskim zavetom. Za?arana
, misti?na ?uma odmora i hibernacije, Ardenveald je mesto gde divlji bogovi i
drugi duhovi prirode putuju nakon smrti. Divovska drvec?a iz snova ?irom ?ume
crtaju anima, koji Noc?na vila zatim koristi za podmla?ivanje duhova dok dremaju
u divljem semenu i priprema ih za ponovno ro?enje u svet ?ivih. U Gaju bu?enja
odr?ava se portal za prevo?enje du?a natrag u njihov svet; kada je vreme da se
du?a preporodi, donesu u ?umu da se vrate kuc?i i zapo?nu svoj ciklus iznova.
Svako drvo snova ima svoje ime, a svaki deo ?ume ima drvo. ?umarak Hibernal Hollov
ima Tirnu Glain, ?umarak Tirna Vaal ime je dobio po svom drvetu, Tirna Noch je
pala ranije u su?i, Tirna Roven iz Heartvood Grove-a nedavno je stradala, Gove
Clav's Edge ima Tirnu Kaithe, kro?nja Glitterfall-a Basin ima Tirnu Eas, kro?nja Dreamsong
Fenna ima Tirnu Fenn, Tirna Scithe je posebno opasna, a Tirna Marvol u Darkreachu
izgubljene su davno pre su?e.
Pored toga, Ardenveald slu?i kao zagrobni ?ivot smrtnim du?ama koje su imale blisku
vezu sa prirodnim ciklusom, poput druida i lovaca. Po dolasku, ove du?e mogu odabrati
?ivotinjski oblik natopljen Ardenvealdovom nebeskom magijom i provesti celu ve?nost
brinuc?i se o divljini. Ta sposobnost se naziva Blagodat oblika, koju je Zimska kraljica
prvobitno dodelila prvim smrtnicima koje je Arbitar dodelio Ardenvealdu. U zamenu za
ovu blagodat, du?e daju deo svoje ?ume ?umi.
Ardenveald se mo?e uporediti sa Smaragdnim snom, ali tamo gde San predstavlja prolec?e
i leto ?ivotnog ciklusa, Ardenveald odra?ava jesen i zimu. U su?tini, carstvo je najvi?i
izraz odnosa izme?u zavr?etaka i po?etaka - izme?u Smrti i ?ivota.</strong></p>
</div>
> This one here is image i was planing to test code so i can make it
> responsive. With added code responsive part works, when i do
> mouseEnter on picture, picture shines with responsive part but when i
> try to click on img nothing happens. This img is starting part for 7
> pieces gallery but still something dont works
<img id="myImg" src="img/ardenweal1.jpg" alt="Ardenveald" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
> This here is second part of container
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="column">
<img src="img/ardenweal1.jpg">
<img src="img/Pocetna.jpg">
<img src="img/ardenweal2.jpg">
<img src="img/ardenweal3.jpg">
<img src="img/ardenweal4.jpg">
<img src="img/6.jpg">
<img src="img/7.jpg">
</div>
> I want here with this pictures to make them responsive, plan was that
> they take half of screen in container and i can click on any picture
</div>
</div>
</div>
</div>
</div>
<footer class="navbar-bottom" style="margin-top:5rem;">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2>Kontakt</h2>
<h5><i class="fas fa-map-marker"></i>**********</h5>
<h5><i class="fas fa-phone"></i>**********</h5>
<h5><i class="fas fa-at"></i>**********</h5>
</div>
<div class="col-md-3">
<h2>Istra?ite</h2>
<a href="index.html" style="color:white">Po?etna strana</a><br>
<a href="onama.html" style="color:white">Uvod u Shadowlands</a><br>
</div>
<div class="col-md-3">
<h2>Copyright</h2>
<h5>?2020 Svi za?tic?eni ?igovi ovde navedeni su s
