ARTICLE AD BOX
Thanks for answer. My code now looks like:
HTML:
<!DOCTYPE html> <html lang="pl-PL"> <head> <title>Zakopane Siostry Zmartwychwstanki</title> <meta name="description" content="Zakopane Siostry Zakonne" /> <meta name="keywords" content="adoracja, apostolstwo, Bóg, cisza, cr, galeria, Giewont, góry, Jezus, kaplica, klasztor, kontakt, kościół, modlitwa, msza, nocleg, noclegi, odpoczynek, pobyt, pokoje, refleksja, rekolekcje, siostry, spotkania, spotkanie, Tatry, wędrówka, wspólnota, wspólnoty, wypoczynek, zakon, zakonnice, Zakopane, zakopanecr, zdjęcia, zdjęcie, zmartwychwstanki, dom modlitwy, dom rekolekcyjny, dom wypoczynkowy, dom zakonny, domy modlitwy, domy rekolekcyjne, domy wypoczynkowe, domy zakonne, Jezus Chrystus, odpoczynek duchowy, organizacja kościelna, organizacje kościelne, Pan Jezus, Regina mundi, rozmowa z Bogiem, siostry zakonne, siostry zmartwychwstanki, spotkanie z Bogiem, ulica Za Strugiem, ulica Za Strugiem 27, wspólnota zakonna, wspólnoty zakonne, Za Strugiem, Za Strugiem 27, zgromadzenia zakonne, zgromadzenie 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/index.css" media="screen" /> <link rel="shortcut icon" href="images/favicon.ico" type="image/ico" /> <style> </style> <!--typedjs START--> <script> document.addEventListener("DOMContentLoaded", function(){ const typed = new Typed('#typed', { strings: ["\<span style='font-size:20px;'>\<strong>\<center>\</br>\</br>„Regina mundi” – klasztor sióstr zmartwychwstanek,\</br>z pięknym widokiem na Giewont, w pobliżu Ścieżki pod Reglami,\</br>i u wejścia do malowniczej Doliny Strążyskiej.\</br>Od 27 grudnia 1955 roku mieszka w nim Pan Jezus Zmartwychwstały,\</br>który pragnie być nawiedzany i adorowany.\</br>\</br>^1000Po Panu Jezusie,\</br>czekają na Państwa w progach domu siostry zmartwychwstanki,\</br>które założyła matka z córką – swoisty ewenement – w XIX wieku,\</br>kiedy Polski nie było na mapach świata,\</br>ale była w sercach Polek i Polaków,\</br>którzy nigdy nie zwątpili w jej zmartwychwstanie,\</br>i moralne odrodzenie społeczeństwa.\</br>Tymi ideałami żyją również współczesne pokolenia zmartwychwstanek,\</br>o czym będą się mogli Państwo przekonać, odwiedzając nasz klasztor.\</br>\</br>^1000ZAPRASZAMY\</center>\</strong>\</span>"], typeSpeed: 60, // typing speed startDelay: 500, // time before typing starts backSpeed: 0, // backspacing speed backDelay: 15000, // time before backspacing loop: true, contentType: 'html', // or text // defaults to false for infinite loop loopCount: false, onComplete: function(self) { shift(); } }); }); function shift(){ document.querySelector(".head-wrap").classList.add("shift-text"); terminalHeight(); } function terminalHeight(){ var termHeight = document.querySelector(".terminal-height"); var value = termHeight.textContent; value = parseInt(value); setTimeout(function(){ if (value > 10){ value = value-1; this.txtValue = value.toString(); termHeight.textContent = this.txtValue; terminalHeight(); } else{ clearTimeout(); } }, 10); } </script> <!--typedjs END--> <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 sticky-top col-lg-2"> <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" id="active" 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" class="nav-link">Szubienica</a></li> <li class="nav-item"><a href="sw-pawel" class="nav-link">Św. Paweł</a></li> </menu> </div> </div> </nav> <main class="col-lg-10"> <article> <div id="start_chrystus" class="col-12"> <img src="images/start_chrystus.png" class="img-fluid" alt="chrystus"> </div> <!--typedjs START--> <div class="header"> <div class="head-wrap"> <div class="text-editor-wrap"> <div class="title-bar"><span class="title"><span class="terminal-height"></span></span></div> <div class="text-body"> <span id="typed"></span> </div> </div> </div> </div> <!--typedjs END--> </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/typed.umd.js"></script> <script src="js/bootstrap.js"></script> </body> </html>CSS:
/*html { background-image: url("../images/background_start.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_start.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: 130px; 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: 830px; 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: 130px; height: 600px; background-color: #C0C0C0; float: left; } menu { list-style-type: none; text-align: center; padding: 0; position: sticky; top: 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; } .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: 990px) { nav { width: 80px; } .nav-link { font-size: 12px; } } .navbar-nav { display: inline; } .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } main { position: relative; width: 830px; min-height: 600px; background-color: #E0E0E0; float: left; } #start_chrystus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 808px; max-height: 569px; } #start_chrystus:hover { opacity: 0; transition: opacity 1s; } footer { max-width: 960px; max-height: 85px; background-color: #808080; } #stopka_lewa { width: 130px; float: left; } #html, #css, #js { width: 43px; 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: 580px; 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: 576px) { #stopka_prawa { width: 0; } #stopka_napis { font-size: 0; } } @media screen and (max-width: 680px) { #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; } } button { margin: 0 auto; } nav, main { float: none; width: auto; min-height: 600px; } .row.equal-cols { display: flex; align-items: stretch; } nav { background-color: #C0C0C0; } main { background-color: #E0E0E0; position: relative; }But when i minimize window size (to 990px) the menu strech to full width and main fallen under the menu. Mayby i'm doing something wrong?
![Template literal variable missing in alert() output within inline onclick handler [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)