Witam, mam do zrobienia stronę na zadanie i na stronie codepen.io js mi działa nastomiast jak uruchamiam z index.html nie chce zadziałać. Pomocy !!
HTML------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zadanie BTM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="strona">
<div id="logo"> <img class="logo" src="1/1.png"></div>
<div id="link"> <a class="link" href="index.html">Link 1</a> <a class="link" href="http://www.zsp3belchatow.pl">Link 2</a> <a class="link" href="http://www.bti.cba.pl">Link 3</a></div>
<div class="menu">
<button onclick="galeria()">Galeria</button><br>
<button onclick="nowosci()">Nowości</button><br>
<button onclick="laureaci()">Laureaci</button><br>
</div>
<div id="odstep"></div>
<div id="start"><p class="start">Bełchatowski Turniej Informatyczny</p></div>
<div id="galeria">
<img class="jeden" src="1/zdj1.jpg">
<img class="dwa" src="1/zdj2.jpg">
<img class="trzy" src="1/zdj3.jpg">
</div>
<div id="nowosci"><p class="nowosci1">Where does it come from?</p><p class="nowosci2">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p></div>
<div id="laureaci">
<p class="laureaci"> Laureaci XI edycji Bełchatowskiego Turnieju Informatycznego </p>
<table>
<tr>
<th>Miejsce</th>
<th>Skład drużyny</th>
<th>Szkoła</th>
</tr>
<tr>
<td>1</td>
<td> Kamil Kędziak i Mateusz Garncarek</td>
<td> I LO w Bełchatowie
</td>
</tr>
<tr>
<td>2</td>
<td> Wojciech Wiedeński i Mateusz Wala </td>
<td> ZSP nr 3 w Bełchatowie</td>
</tr>
<tr>
<td>3</td>
<td> Piotr Skrok i Bartłomiej Werner</td>
<td> ZSO w Zelowie</td>
</tr>
<tr>
<td>4</td>
<td>Paweł Olczak i Mateusz Kurzynog</td>
<td> ZSP w Szczercowie</td>
</tr>
<tr>
<td>5</td>
<td> Matuesz Gabła i Damian Stępnik</td>
<td> ZSP nr 3 w Bełchatowie</td>
</tr>
<tr>
<td>6</td>
<td> Sebastian Musialik i Piotr Zamorski</td>
<td> ZSP nr 3 w Bełchatowie</td>
</tr>
</table>
</div>
<div id="stopka"><a class="stopka" href="mailto:sekretariat@zsp3belchatow.pl" target="_top">Wyślij maila do naszej szkoły</a></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS----------------------------
body{
text-align: center;
background-color: #e3dede;
padding: 0;
margin: 0;
}
h4,h5,p,a,button{
font-family:Verdana;
}
#strona{
background-color: black;
margin: auto;
width: 1200px;
height: 900px;
-webkit-box-shadow: 0px 14px 57px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 14px 57px -6px rgba(0,0,0,0.75);
box-shadow: 0px 14px 57px -6px rgba(0,0,0,0.75);
}
#logo{
background-color: #FFFFF3;
border-width: :5px;
border-style: solid #1F2124;
}
img.logo{
height: 120px;
}
.menu{
float: right;
background-color: #FFFFF3;
width: 25%;
height:600px;
}
button{
text-align: center;
font-size: 40px;
margin:10% 5% 5% 5%;
padding:4% 10% 4% 10%;
border: 3px solid #333030;
background-color: #a3a1a1;
}
button:focus{
outline: none;
}
#odstep{
float:right;
height: 600px
width:0.5%;
background-color: black;
}
#link{
height: 65px;
background-color: #30A9DE;
border-top: 5px solid #1F2124;
border-bottom:5px solid #1F2124;
}
a.link{
margin:30px 10px 30px 10px;
color:white;
text-decoration: none;
}
a.link:hover{
color:red ;
text-decoration: underline;
}
#stopka{
background-color: gray;
clear: both;
text-align: center;
height: 100px;
border-top:5px solid black;
}
a.stopka{
font-size: 29px;
color: white;
text-decoration: none;
margin: 20px 40px 0px 0px;
}
a.stopka:hover{
text-decoration: underline;
color: green
}
/*startowa*/
#start{
float: left;
background-color:#f9d423;
height: 600px;
width: 74.5%;
display: block;
}
p.start{
margin: 30% 10% 0 10%;
font-size: 30px;
font-weight: bold;
}
/*galeria*/
#galeria{
text-align: initial;
background-color: #f9d423;
height: 600px;
width: 74.5%%;
display: none;
}
.jeden, .dwa, .trzy{
width: 240px;
height: 160px;
position: absolute;
}
@media screen and (min-width: 1270px) and (max-width: 1900px) {
.jeden{
top: 220px;
left: 140px;
}
.dwa{
top: 380px;
left: 380px;
}
.trzy{
top: 540px;
left: 620px;
}
}
@media screen and (min-width: 1910px) {
.jeden{
top: 230px;
left: 430px;
}
.dwa{
top: 390px;
left: 670px;
}
.trzy{
top: 550px;
left: 910px;
}
}
/*Nowości*/
#nowosci{
float: left;
background-color:#f9d423;
height: 600px;
width: 74.5%;
display: none;
}
p.nowosci1{
font-size: 40px;
margin:80px 20px 0 20px;
}
p.nowosci2{
margin:30px 40px 0 40px;
font-size: 20px;
}
/*Laureaci*/
#laureaci{
float: left;
background-color:#f9d423;
height: 600px;
width: 74.5%;
display: none;
}
p.laureaci{
font-size: 35px;
margin: 40px 10px 5px 10px;
}
table{
margin:auto;
margin-top: 8%;
border: 1px solid black;
}
td,th{
font-size: 25px;
border: 1px solid black;
}
td{
padding: 5px 10px 5px 10px;
}
JS------------------------------------
function galeria(){
document.getElementById("start").style.display = "none";
document.getElementById("galeria").style.display = "block";
document.getElementById("nowosci").style.display = "none";
document.getElementById("laureaci").style.display = "none";
}
function nowosci(){
document.getElementById("start").style.display = "none";
document.getElementById("galeria").style.display = "none";
document.getElementById("nowosci").style.display = "block";
document.getElementById("laureaci").style.display = "none";
}
function laureaci(){
document.getElementById("start").style.display = "none";
document.getElementById("galeria").style.display = "none";
document.getElementById("nowosci").style.display = "none";
document.getElementById("laureaci").style.display = "block";
}
