Na stronie: https://filszu.000webhostapp.com/ nie działa ani hover na obrazkach, ani <div> kontakt
dlaczego?
online
https://filszu.000webhostapp.com/
o
offline
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Flying Sausage HOME</title>
<meta name="description" content="Opis w Google" />
<meta name="keywords" content="12saGHY90ju, klic-k, flying, sausage, filip, szumowski, sp1, zielona góra" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald|ZCOOL+KuaiLe" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<!----------------->
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link rel="Shortcut icon" href="img/h2.ico">
<link rel="stylesheet" href="css/fontello.css">
<script data-ad-client="ca-pub-6202644433627847" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="logo">
<center><img src="img/fs.png" oncontextmenu="return false" ondragstart="return false" ondrag="return false">
<div></div><b>Flying<span style="color: red">Sausage</span><b><center>
<!--</div>
Tata<img src="img/zly.gif" style=" width: 350px;">
Filip<img src="img/hura.gif" style=" width: 120px;">
matka<img src="img/hura.gif" style=" width: 80px;">
Agata<img src="img/zly.gif" style=" width: 25px;">-->
</div>
</header>
<main>
<nav id="menu">
<div class="option">Strona główna</div>
<div class="option">Nasze projekty</div>
<div class="option">aktualności</div>
<a href="#kontakt"><div class="option" >kontakt</div></a>
<a href="sklep.html"><div class="option" >SKLEP (olx)</div></a>
<div style="clear:both;"></div>
</nav>
<article id="projectMenu">
<section class="ourProjects">
<div class="overlayT">
<img src="img/project/haslo2.png" alt="program:haslo" width="300px" >
<center><p class="centered">haslo 2.0 (hasło rar: <i>Filip <i>)</p>
<a class="link" target="_blank" href="http://haslo.5v.pl/haslo%2020.html"><span class="icon"><i class="icon-eye"></i><p>Zobacz</p></span></a>
</center>
</div>
</section>
<section class="ourProjects">
<div class="overlayT">
<img src="img/project/mine.png" alt="mapa minecraf" width="300px" >
<center><p class="centered" >mapa MINECRAFT<i> "spotkanie z obcymi" </i></p>
<a class="link" href="minecraft.html"><span class="icon"><i class="icon-eye"></i><p>Zobacz </p></span></a>
</center>
</div>
</section>
<section class="ourProjects">
<div class="overlayT">
<img src="img/project/enigma.png" alt="enigma" width="300px" ><center>
<a class="link" href="#"><span class="icon"><i class="icon-eye"></i><p>Zobacz</p></span></a>
</center>
</div>
</section>
<section class="ourProjects">
<div class="overlayT">
<center><p class="centered" >NOWE PROJEKTY WKRÓTCE</p>
<a class="link" href="#"><span class="icon"><i class="icon-eye"></i><p>Zobacz</p></span></a>
</center>
</div>
</section>
<section class="ourProjects">
<div class="overlayT">
<center><p class="centered" >NOWE PROJEKTY WKRÓTCE</p>
<a class="link" href="#"><span class="icon"><i class="icon-eye"></i><p>Zobacz</p></span></a>
</center>
</div>
</section>
<section class="ourProjects">
<div class="overlayT">
<center><p class="centered" >NOWE PROJEKTY WKRÓTCE</p>
<a class="link" href="#"><span class="icon"><i class="icon-eye"></i><p>Zobacz</p></span></a>
</center>
</div>
</section>
<!--KONIEC////////////////////////////////////////////-->
<div style="clear:both"></div>
</section>
<!--<i class="icon-play-circled2"></i>
<i class="icon-eye"></i>-->
</article>
<section id="kontakt">
<h1>KONTAKT</h1>
Ja jestem Filip Szumowski -twórca tej strony. Urodziłem się 10.11.2005r, a moją pasją jest programowanie.<br>
Skontaktować ze mną możesz się poprzez e-maila <span style="color:pink">admin@filszu.cba.pl</span>.
</section>
<div style="height: 250px;"></div>
</main>
</body>
</html>
body{
margin: 0px;
background-image: url("img/tlo2.png"), url("img/tlo1.png");
background-color: #666;
color: white;
font-family: 'Oswald', sans-serif;
font-size: 25px;
}
#container
{
width: 1000px;
margin-right: auto;
margin-left: auto;
min-height: 1000px;
padding: 5px;
background-color: #404040;
}
#logo
{
min-height: 450px;
background-color: #a6a6a6;
margin-left: auto;
margin-right: auto;
font-size: 50px;
font-family: 'ZCOOL KuaiLe', cursive;
}
#menu
{
background-color: #303030;
color: #ffffff;
padding: 10px;
letter-spacing: 3px;
}
.option
{
float: left;
min-widht: 50px;
height: 25px;
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
padding-right: 40px;
border-right: 2px dotted #444444;
opacity: 0.8;
transition: all 0.3s ease-in-out;
text-decoration:none;
color: white;
}
.option:hover
{
background-color: #000000;
cursor: pointer;
transform: scale(1.05) rotate(-3deg);
text-decoration:none;
}
#projectMenu
{
margin-left: auto;
margin-right: auto;
}
.project
{
width: 300px;
height: 300px;
background-color: black;
}
.podpis
{
}
.ourProjects
{
/*font-family: 'Shadows Into Light', cursive;*/
height:300px;
width:300px;
background-color: black;
color: white;
font-size: 20px;
float:left;
margin: 10px;
}
.ourProjects a:hover
{
color: white;
text-decoration:none;
}
.overlayT
{
position: relative;/*pozawala używać left right, top ,bottom*/
width: 300px;
height: 300px;
}
.overlayT .link
{
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #27a38d;
left: 0px;
top: 0px;
opacity: 0;
}
.overlayT:hover .link
{
opacity: 0.8;
transition: opacity 0.5s ease-in-out;
}
.icon
{
display: block;
top: 25%;
position: relative;
font-size: 72px;
}
.icon p
{
font-size: 40px;
}
#slider
{
margin-left:auto;
margin-right:auto;
background-color:black;
}
.zmiana
{
cursor:pointer;
padding:10px;
}
.zmiana:hover{
color: yellow;
border: double 2px
}
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
.wspolpraca
{
font-family: 'Source Code Pro', monospace;
padding: 20px;
background-color: yellow;
border: 3px dashed red;
border-radius: 20px;
font-size: 20px;
color: black;
}
.bar
{
float: left;
margin-left:auto;
margin-right:auto;
margin: 10px;
width:260px;
height: 350px;
margin-top: 50px;
background-color: black;
border-radius: 20px;
padding: 5px;
}
.centered {
background-color: rgba(0, 0, 255, 0.3);
background: rgba(0, 0, 255, 0.3);
/*color: rgba(0, 0, 255, 0.3);*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}
.centersed:hover {
background-color: rgba(0, 0, 255, 0.1);
background: rgba(0, 0, 255, 0.1);
color: rgba(0, 0, 255, 0.1);
}
#kontakt
{
padding: 15px;
font-size: 20px;
font-family: 'Dosis', sans-serif;
}
