witam, nie dziala mi linkowanie do podstron, sa w tym samym folderze wiec wszystko powinno dzialac, jednak klikajac w link <a/> nie przenosi do nastepnej strony. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zadanie</title>
<link rel = 'stylesheet' href = 'style.css'>
<script defer src = 'app.js'></script>
</head>
<body onload = 'clock()'>
<center>
Zmiana tła:
<hr>
<button onclick = 'green()' class = 'green'>Zielony</button>
<button onclick = 'red()' class = 'red'>Czerwony</button>
<button onclick = 'blue()' class = 'blue'>Niebieski</button>
<button onclick = 'yellow()' class = 'yellow'>Żółty</button>
<button onclick = 'randoms()' class = 'random'>Losowy</button>
<hr>
</center>
<div id = 'slider'>
<div id = 'box'>
<img src = '5.jpg'>
</div>
<input class = 'button1' type = 'submit' onclick = 'prevImage()' value = '<<'>
<input class = 'button2' type = 'submit' onclick = 'nextImage()' value = '>>'>
</div>
<div class = 'daciwo'>
<span id = 'zegar'>
</span>
<span id = 'dzien'>
</span>
<span id = 'data'>
</span>
</div>
<nav>
<input type = 'submit' value = 'Kody' class = 'menu'/>
<div class = 'lista'>
<ul>
<li>
<a href = 'slides.html'>Kod do pokazu slajdów</a>
</li>
<li>
<a href = 'background.html'>Kod do zmiany tła</a>
</li>
<li>
<a href = 'date.html'>Kod do obiektu date</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS:
body{
font-family: 'impact';
font-size: 30px;
background-color: rgb(72, 187, 196);
overflow-x: hidden;
}
button{
outline: none;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'impact';
font-size: 20px;
margin-right: 15px;
transition-duration: .1s;
}
.green{
background-color: rgb(75, 187, 75);
}
.red{
background-color: rgb(197, 76, 76);
}
.blue{
background-color: rgb(83, 161, 235);
}
.yellow{
background-color: rgb(180, 180, 83);
}
.random{
background-color: transparent;
}
button:hover{
border-radius: 30px;
animation-name: zmiana;
animation-duration: 1s;
transition-duration: .5s;
}
@keyframes zmiana {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
img{
width: 1600px;
height: 730px;
border: 3px inset black;
box-shadow: 5px 5px 5px black;
border-radius: 15px;
}
.button1{
width: 50px;
height: 730px;
background-color: black;
opacity: .4;
outline: none;
border: none;
transition-duration: 3s;
border-radius: 15px;
cursor: pointer;
}
.button1:focus{
opacity: .7;
transition-duration: 1s;
}
.button2{
width: 50px;
height: 730px;
background-color: black;
opacity: .4;
outline: none;
border: none;
transition-duration: 3s;
border-radius: 15px;
cursor: pointer;
}
.button2:focus{
opacity: .7;
transition-duration: 1s;
}
.button1{
position: absolute;
top: 147px;
}
.button2{
position: absolute;
top: 147px;
right: 308px;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background: rgb(0, 37, 68);
}
::-webkit-scrollbar-thumb {
background: rgb(0, 174, 255);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(0, 127, 177);
}
.daciwo{
position: absolute;
top: 15%;
right: 3%;
text-align: center;
}
nav{
width: 100%;
height: 40px;
background-color: transparent;
text-align: right;
font-size: 20px;
line-height: 40px;
position: absolute;
top: 300px;
right: 15px;
}
.menu{
height: 35px;
border: none;
outline: none;
background-color: transparent;
color: white;
cursor: pointer;
font-size: 30px;
font-family: 'impact';
letter-spacing: 1px;
font-weight: 600;
transition: .5s ease-in-out;
}
.lista{
position: absolute;
top: 48px;
right: 0;
background-color: transparent;
height: 300px;
width: 400px;
transform: translateX(100%);
}
li{
text-align: center;
color: black;
transition: .5s ease-in-out;
}
li:hover{
transform: scale(1.5);
color: white;
transition: .5s ease-in-out;
cursor: pointer;
}
.lista ul{
list-style-type: none;
}
.lista ul li{
border: none;
}
.menu:hover{
transform: scale(1.5);
transition: .5s ease-in-out;
color: black;
font-weight: 600;
}
.menu:focus + .lista{
transform: translateX(0);
transition: 1s ease-in-out;
}
a{
text-decoration: none;
color: black;
transition: .5s ease-in-out;
}
a:hover{
transform: scale(1.5);
color: white;
transition: .5s ease-in-out;
cursor: pointer;
z gory dziekuje
