ARTICLE AD BOX
how do I make the image below the lines and before the letters responsive? The img-fluid class can't be used here because there's no img tag, only a div tag. The tag responsible for displaying images is in the div:
<div id="image-wrapper" class="image-wrapper"></div>
So how do I make this image responsive in this situation?
(function () {
'use strict';
var lettersWrapper = document.getElementById('alphabet');
var imageWrapper = document.getElementById('image-wrapper');
var resultElement = document.getElementById('result');
var lettersToWrap = 'AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŻŹ';
var phraseToGuess = 'SIOSTRY ZMARTWYCHWSTANKI ZAKOPANE';
var maxFailsNumber = 9;
var sounds = {
success: new Audio('./sounds/success.wav'),
fail: new Audio('./sounds/fail.wav')
};
var guessFails = 0;
var uncoveredLetters = [];
function updateImage() {
imageWrapper.innerHTML = '';
var image = imageWrapper.appendChild(document.createElement('img'));
image.src = './szubienica_images/s' + guessFails + '.jpg';
};
function updateResult() {
resultElement.innerHTML = phraseToGuess.split('').map(function (phraseLetter) {
if (phraseLetter === ' ' || uncoveredLetters.indexOf(phraseLetter) > -1) {
return phraseLetter;
}
return '-';
}).join('');
};
function discoverLetter(letter, letterElement) {
if (letterElement.classList.contains('discovered')) return;
letterElement.classList.add('discovered');
if (phraseToGuess.indexOf(letter) > -1) {
letterElement.classList.add('success');
sounds.success.play();
uncoveredLetters.push(letter);
updateResult();
var isGuessed = phraseToGuess.split('').every(function (letter) {
return letter === ' ' || uncoveredLetters.indexOf(letter) > -1;
});
if (isGuessed) showResult(true);
} else {
letterElement.classList.add('fail');
sounds.fail.play();
if (++guessFails > maxFailsNumber) showResult(false);
else updateImage();
}
};
function showResult(state) {
var gameState = ['Przegrana', 'Wygrana'][+state];
var resetElement = document.createElement('a');
resetElement.href = '';
resetElement.innerHTML = 'JESZCZE RAZ?';
resetElement.classList.add('reset');
lettersWrapper.innerHTML = gameState + '! Prawidłowe hasło: ' + phraseToGuess;
lettersWrapper.appendChild(resetElement);
};
function appendLetters() {
lettersToWrap.split('').forEach(function (letter, index) {
var letterElement = lettersWrapper.appendChild(document.createElement('div'));
var letterPosition = index + 1;
var lettersInWidth = 7;
if (letterPosition % lettersInWidth === 0) {
var clearfixElement = lettersWrapper.appendChild(document.createElement('div'));
clearfixElement.classList.add('clearfix');
}
letterElement.innerHTML = letter;
letterElement.classList.add('letter');
letterElement.addEventListener('click', function () {
return discoverLetter(letter, letterElement);
}, false);
});
};
appendLetters();
updateResult();
updateImage();
})();
/*html
{
background-image: url("../images/background_szubienica.jpg");
}*/
body
{
overflow-x: hidden;
}
:root
{
--bs-body-font-family: var(--bs-font-times-new-roman);
}
h1, .h1
{
font-weight: 700;
}
#bg
{
background-image: url("../images/background_szubienica.jpg");
}
#container
{
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 100%;
max-width: 960px;
}
header
{
max-width: 960px;
max-height: 85px;
background-color: #808080;
}
#logo
{
width: 160px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
#image_gora
{
box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
-o-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
}
.row > *
{
padding-right: 0;
padding-left: 0;
}
#napis
{
width: 800px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
#napis_gora
{
color: #830808;
font-size: 35px;
text-shadow: 4px 4px 6px rgba(255, 255, 255, 1);
text-transform: uppercase;
}
.clear
{
clear: both;
}
nav
{
width: auto;
min-height: 870px;
background-color: #C0C0C0;
}
menu
{
list-style-type: none;
text-align: center;
padding: 0;
}
nav menu li a
{
text-decoration: none;
color: black;
border-bottom: solid;
font-size: 25px;
line-height: 50px;
font-weight: bold;
}
nav menu li a:hover, nav menu li a#active
{
font-style: italic;
font-weight: normal;
border-bottom: none;
color: white;
background-color: #0080C0;
border-radius: 30px;
padding: 10px;
cursor: pointer;
}
.row
{
display: flex;
align-items: stretch;
}
button
{
display: block;
margin: 0 auto;
}
#nowrap
{
white-space: nowrap;
}
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm
{
padding-left: 0;
}
@media screen and (min-width: 992px)
{
.navbar .container-fluid,
.navbar-expand-lg .navbar-collapse,
.navbar-expand-lg .navbar-nav
{
flex-direction: column;
align-items: center;
}
}
.navbar
{
--bs-navbar-padding-y: 0;
display: inline;
}
.nav-link
{
display: inline;
padding: 0;
font-size: 25px;
font-weight: bold;
color: black;
text-decoration: none;
background: none;
border-bottom: solid;
transition: none;
}
@media screen and (max-width: 576px)
{
.nav-link
{
font-size: 12px;
}
}
.navbar-nav
{
display: inline;
}
.navbar-expand-lg .navbar-nav .nav-link
{
padding-right: 0;
padding-left: 0;
}
main
{
width: auto;
min-height: 870px; /*dla poprawnej wysokości w firefox*/
background-color: #E0E0E0;
}
body {
/*background-color: #000;*/
/*color: lightgray;*/
color: black;
font-size: 28px;
font-family: 'Inconsolata';
font-weight: 700;
}
.wrapper {
width: 100%;
max-width: 830px;
margin: 0 auto;
}
#szubienica_napis
{
text-align: center;
text-transform: uppercase;
font-size: 26px;
}
.clearfix {
clear: both;
}
.result {
width: 100%;
min-height: 60px;
margin: 50px 0;
text-align: center;
font-size: 48px;
}
.image-wrapper {
/*float: left;*/
width: 50%;
text-align: center;
min-height: 280px;
margin: 0 auto;
}
.alphabet {
/*float: right;*/
max-width: 450px;
text-align: center;
min-height: 280px;
margin: 0 auto;
}
.letter {
display: inline-block;
width: 30px;
height: 30px;
padding: 5px;
margin: 5px;
cursor: pointer;
border-radius: 15px;
border: 3px solid gray;
}
.letter:hover {
background-color: #222;
color: white;
border: 3px solid white;
}
.letter.discovered {
cursor: default;
}
.letter.fail {
color: #c00000;
border: 3px solid #c00000;
background: #330000;
}
.letter.success {
color: #00c000;
border: 3px solid #00c000;
background: #003300;
}
.reset {
display: inline-block;
margin-top: 30px;
color: green;
cursor: pointer;
font-size: 48px;
text-decoration: none;
}
.reset:hover {
/*color: #fff;*/
color: black;
text-decoration: underline;
}
footer
{
max-width: 960px;
max-height: 85px;
background-color: #808080;
}
#stopka_lewa
{
width: 160px;
float: left;
}
#html, #css, #js
{
width: 53px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
#html:hover, #css:hover, #js:hover
{
opacity: 0.5;
}
#html_rozmiar
{
width: 50px;
height: 50px;
cursor: pointer;
}
#css_rozmiar
{
width: 59px;
height: 50px;
cursor: pointer;
}
#js_rozmiar
{
width: 90px;
height: 50px;
cursor: pointer;
}
#zegar
{
width: 250px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
#stopka_prawa
{
width: 550px;
height: 85px;
float: left;
display: flex;
justify-content: right;
align-items: center;
font-size: 20px;
}
#stopka_napis
{
text-decoration: none;
font-style: italic;
color: #404040;
margin-right: 20px;
cursor: pointer;
}
#stopka_napis:hover
{
color: #008020;
font-weight: bold;
}
@media screen and (max-width: 164px)
{
#html, #css, #js
{
width: 26px;
}
#html_rozmiar
{
width: 25px;
height: 25px;
}
#css_rozmiar
{
width: 30px;
height: 25px;
}
#js_rozmiar
{
width: 45px;
height: 25px;
}
}
@media screen and (max-width: 425px)
{
#zegar
{
font-size: 0;
}
}
@media screen and (max-width: 494px)
{
#napis_gora
{
font-size: 17px;
}
}
@media screen and (max-width: 278px)
{
#napis_gora
{
font-size: 8px;
}
}
@media screen and (max-width: 576px)
{
#stopka_prawa
{
width: 0;
}
#stopka_napis
{
font-size: 0;
}
}
@media screen and (max-width: 712px)
{
#stopka_prawa
{
width: 0;
}
#stopka_napis
{
font-size: 0;
}
}
@media screen and (max-width: 768px)
{
#stopka_prawa
{
width: 193px;
}
}
@media screen and (max-width: 992px)
{
#stopka_prawa
{
width: 290px;
}
}
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>Szubienica</title>
<meta name="description" content="Zakopane Siostry Zakonne" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/szubienica.css" media="screen" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/ico" />
<script type="text/javascript">
function odliczanie()
{
var dzisiaj = new Date();
var dzien = dzisiaj.getDate();
if (dzien<10) {dzien = "0"+dzien;}
var miesiac = dzisiaj.getMonth()+1;
if (miesiac<10) {miesiac = "0"+miesiac;}
var rok = dzisiaj.getFullYear();
var godzina = dzisiaj.getHours();
if (godzina<10) {godzina = "0"+godzina;}
var minuta = dzisiaj.getMinutes();
if (minuta<10) {minuta = "0"+minuta;}
var sekunda = dzisiaj.getSeconds();
if (sekunda<10) {sekunda = "0"+sekunda;}
document.getElementById("zegar").innerHTML = godzina+":"+minuta+":"+sekunda+" | "+dzien+"/"+miesiac+"/"+rok;
setTimeout("odliczanie()",1000);
}
</script>
</head>
<body onload="odliczanie();" id="bg">
<div id="container" class="container">
<header>
<div id="logo">
<img src="images/logo.png" id="image_gora" alt="logo">
</div>
<div class="row">
<div id="napis">
<h1 id="napis_gora" class="text-break">Siostry Zmartwychwstanki - Zakopane</h1>
</div>
</div>
<div class="clear"></div>
</header>
<div class="row g-0 d-flex align-items-stretch">
<nav class="navbar navbar-expand-lg col-2">
<div class="sticky-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<menu class="navbar-nav">
<li class="nav-item"><a href="zakopane-siostry-zmartwychwstanki" class="nav-link">Start</a></li>
<li class="nav-item"><a href="gory" class="nav-link">Góry</a></li>
<li class="nav-item"><a href="galeria" class="nav-link">Galeria</a></li>
<li class="nav-item"><a href="kronika" class="nav-link">Kronika</a></li>
<li class="nav-item"><a href="kontakt" class="nav-link">Kontakt</a></li>
<li class="nav-item"><a href="bonus" class="nav-link">Bonus</a></li>
<li class="nav-item"><a href="zagadka" class="nav-link">Zagadka</a></li>
<li class="nav-item"><a href="frustrator" class="nav-link">Frustr8tor</a></li>
<li class="nav-item"><a href="szubienica" id="active" class="nav-link">Szubienica</a></li>
<li class="nav-item"><a href="sw-pawel" id="nowrap" class="nav-link">Św. Paweł</a></li>
</menu>
</div>
</div>
</div>
</nav>
<main class="col-10">
<article>
<div class="row">
<div class="wrapper">
<br/><div id="szubienica_napis">Zapraszamy do spróbowania gry szubienica</div>
<div id="result" class="result"></div>
<div id="image-wrapper" class="image-wrapper"></div><br/>
<div id="alphabet" class="alphabet"></div>
<div class="clearfix"></div>
</div>
</div>
</article>
</main>
</div>
<div class="clear"></div>
<footer>
<div id="stopka_lewa">
<div id="html">
<a href="https://validator.w3.org/#validate_by_input" target="_blank"><img src="images/belka_dol_html5.png" id="html_rozmiar" alt="html5"></a>
</div>
<div id="css">
<a href="https://jigsaw.w3.org/css-validator/#validate_by_input" target="_blank"><img src="images/belka_dol_css3.png" id="css_rozmiar" alt="css3"></a>
</div>
<div id="js">
<a href="https://www.site24x7.com/tools/javascript-validator.html" target="_blank"><img src="images/belka_dol_javascript.png" id="js_rozmiar" alt="js"></a>
</div>
</div>
<div id="zegar"></div>
<div id="stopka_prawa">
<a href="zagadka.php" id="stopka_napis">Created by CSfC & Team</a>
</div>
<div class="clear"></div>
</footer>
</div>
<script src="js/szubienica.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
