kod html:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>nazwa</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="IgOrEk"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="img/icon.png"/>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<i class="description col-12">Ekscytujące motto strony</i>
<h3 class="name" style="letter-spacing: 5px;">nazwa</h3>
<span class="description col-12" >opis ambitny</span>
<div class="footer col-12"><a href="glowna" class="kontaktlink">nazwa ®
</a> | Wszelkie prawa zastrzeżone © | <a href="kontakt" class="kontaktlink">Kontakt
</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
kod css:
body
{
background-image: url(img/tlo.png);
color: white;
}
.description{
font-size: 20px;
font-family: Impact;
cursor: default;
display: inline-block;
}
.container{
width: 900px;
margin: auto;
text-align: center;
}
.name{
font-family: 'Comic Sans MS';
font-size: 50px;
cursor: default;
display: inline-block;
}
.name:hover{
color: orange;
}
.description:hover{
color: orange;
}
.kontaktlink{
color: white;
text-decoration: none;
cursor: pointer;
}
.kontaktlink:hover{
color: orange;
}
.footer{
display: inline-block;
font-size: 15px;
position: absolute;
bottom: 5px;
left: 0;
right: 0;
text-align: center;
}
.boxco{
margin: 0;
text-align: center;
cursor: default;
}
.kontakt{
font-size: 30px;
font-family: Courier;
font-weight: bold;
text-decoration: none;
color: white;
display: inline-block;
}
.kontakt:hover{
color: orange;
}
.titleGame{
display: inline-block;
color: white;
border: 2px dotted orange;
padding: 10px;
border-radius: 5px;
}
.titleGame:hover{
color: orange;
border: 2px dotted white;
}
.download{
text-decoration: none;
background-color: #ffa500;
padding: 10px;
font-size: 15px;
color: black;
font-family: Impact;
cursor: pointer;
border: 2px solid white;
border-radius: 5px;
}
.download:hover{
background-color: #ffc252;
color: #212121;
}
(tam w css są tez inne klasy ale to nie wazne)
Poprostu bo zwężeniu ekranu do extra small nagle strona zachowuje sie jakby nie była responsywna - "zeskakuje"
