Spróbuj może np. tak:
body {
width: 100%;
color: white;
font-family: 'Mukta', sans-serif;
margin: 0;
background-color: #191816;
}
#intro {
height: 645px;
background-image: url(../img/back.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
lub tak
body {
width: 100%;
color: white;
font-family: 'Mukta', sans-serif;
margin: 0;
background-image: url(../img/back.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
tu masz błąd
#foto {
width: 50%;
height: 80%;
float: left;
text align-content: right;
}
i tu masz błąd element <br> nie posiada "domknięcia" (usuń tego </br> lub zapisz po prostu <br>)
<div id="contact">
<h1>Kontakt</h1>
<hr>
</br>
<div id="foto">
<img src="img/kontakt.jpg" width="571" height="493">
</div>
może rozważ, też:
dodanie
/* dodaj do swojego pliku css */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth; /* płynne przewijanie strony */
}
}
dodanie do
nav {
position: sticky;
top: 0;
display: block;
background-color: rgba(0,0,0,0.85);
}
zamianę
<div id="video">
<h1>Wideo</h1>
<hr>
<h3><span class="blue">Na początek zapraszam do obejrzenia krótkiego filmiku.</span></h3>
<iframe width="1120" height="630" src="https://www.youtube.com/embed/ecN4gheWA9o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
na
<div id="video">
<h1>Wideo</h1>
<hr>
<h3><span class="blue">Na początek zapraszam do obejrzenia krótkiego filmiku.</span></h3>
<div class="yt-iframe-wrapper">
<iframe width="1120" height="630" src="https://www.youtube.com/embed/ecN4gheWA9o" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
/* dodaj do swojego pliku css */
.yt-iframe-wrapper {
position: relative;
padding-bottom: 56.10%;
height: 0;
overflow: hidden;
}
.yt-iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
zamianę
.foto2 {
display: inline-block;
width: 20%;
margin: 0 20px 0 20px;
border: 10px solid white;
}
.foto2:hover {
transform: scale(2);
}
na
.foto2 {
display: inline-block;
width: 20%;
margin: 0 20px 0 20px;
border: 10px solid white;
transition: transform 200ms;
}
.foto2:hover {
transform: scale(2);
}
lub
<div>
<img class="foto2 left" src="img/1.jpg">
<img class="foto2" src="img/2.jpg">
<img class="foto2 right" src="img/3.jpg">
</div>
.foto2 {
display: inline-block;
width: 20%;
margin: 0 20px 0 20px;
border: 10px solid white;
transition: transform 200ms;
}
.foto2:hover {
transform: translateY(+70%) scale(2.5);
}
.foto2.left:hover {
transform: translate(+70%,+70%) scale(2.5);
}
.foto2.right:hover {
transform: translate(-70%,+70%) scale(2.5);
}
P.S.
Przy "zmniejszeniu" okna masz taki
proponuję
<article>
<div class="details">
<h2><span class="blue">GDZIE GRAM?</span></h2>
<ul>
<li>Wesela</li>
<li>Poprawiny</li>
<li>Urodziny</li>
<li>Imprezy firmowe</li>
<li>Wszędzie gdzie oczekiwana jest dobra zabawa ;)</li>
</ul>
</div>
<div class="details blue">
<h2><span class="blue">CO GRAM?</span></h2>
<ul>
<li>Biesiada</li>
<li>Utwory żołnierskie</li>
<li>Utwory francuskie i rosyjskie</li>
<li>Marsze weselne i wojskowe</li>
<li>Wszystko czego klienci oczekują :)</li>
</ul>
</div>
<div class="details">
<h2><span class="blue">DLACZEGO WARTO?</span></h2>
Mogę zagwarantować, że Twoja inwestycja zwróci się z nawiązką. Posiadam ogromne doświadczenie w obsłudze różnego typu uroczystości i eventów. Jeżeli zależy Państwu aby Wasi goście świetnie się bawili i długo wspominali Waszą imprezę to zadzwońcie - wspólnie uzgodnimy scenariusz.
</div>
</article>
#offer {
padding: 20px 0 20px 0px;
background-color: #000C25;
text-align: center;
font-size: 18px;
}
#offer article {
display: flex;
flex-direction: row;
}
#offer article .details {
width: 33%;
margin: 20px;
padding: 20px;
border: 10px solid #C92F89;
vertical-align: middle;
color: white;
}
#offer article .blue {
border-color: #3CBFAE;
}
@media screen and (max-width: 900px) {
#offer article {
flex-direction: column;
align-items: center;
}
#offer article .details {
width: 50%;
min-width: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 750px) {
#offer article .details {
width: 60%;
min-width: 60%;
max-width: 60%;
}
}
przy 900px lub mniej
