<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var i = 0; // Start point
var images = [];
var time = 3000;
// Image List
images[0] = 'images1.jpg';
images[1] = 'images2.jpg';
// Change Image
function changeImg(){
document.slide.src = images[i];
if(i < images.length - 1){
i++;
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
</script>
</head>
<body>
<div id="container">
<div class="header">
<h2 class="logo">VETA</h2>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#omnie">O MNIE</a></li>
<li><a href="#prtfl">PORTFOLIO</a></li>
<li><a href="#opinie">OPINIE</a></li>
<li><a href="#oferta">OFERTA</a></li>
<li><a href="#kontakt">KONTAKT</a></li>
</ul>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times-circle"></i>
</label>
</ul>
</div>
<div class="odnosnik1">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Dowiedz się wicej o mnie</h1>
<br/><br/><br/>
<a href="#omnie">DOWIEDZ SIĘ WIĘCEJ</a>
<div class="arrow"><br/><i class="icon-down-open"></i></div>
</div>
<section id="omnie"><div class="omnie">
<div class="prof"><br/><br/><br/><br/><br/><img src="img/prof.jpg" style="width:100%; height:auto;"></div>
<div class="opporf"><p>Witam nazywam sie Oskar Sekreta. Uczeszczam do 7 klasy. Mam 13lat.Zajmuje sie webmasterka od ok 1.5r. Jak narazie robieniem stron zajmuję sie Hobbystycznie. Pieniądze za zarobione strony bede angażował w dalszy rozwój mojej pasji. Jak zaczołem swoja pasje? Pewnego razu (ok 2 lata temu) moim rodzicom robił strone pan Adam (rodo). Patrzałem sobie na jego strony i zaczołem sobie czytac o HTML / CSS. Później probowalem robic coś w JavaScript PHP MYsql. I jak narazie potrafie tylko te rodzaje programowania wyżej wymienione.</p></div>
</div></section>
<section id="prtfl"><div class="portfolio">
<div class="op">
<h1 style="font-size:25px; text-align:center; color:white;">PORTFOLIO</h1>
<div class="podk"></div>
</div>
<br/>
<a href="http://koty-bydgoszcz.com.pl"><img src="img/prtfl1.jpg" style="width:100%; height:auto;"></a>
</div></section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<section id="opinie"><img name="slide" width="100%" height="auto"></section>
<section id="oferta"><div class="oferta">
<div class="op">
<h1 style="font-size:25px; text-align:center; color:white;">OFERTA</h1>
<div class="podk"></div>
</div>
<div class="of1">
<p style="font-size:25px; text-align:center">OFERTA ZŁOTA</p>
<br/><br/>
<p>-zwykłe logo</p>
<br/>
<p>-obrobki graficzne zdjec</p>
<br/>
<p>-Strona Mobilna</p>
<br/>
<p>-3 podstrony</p>
<br/>
<p>500zł</p>
</div>
<div class="of1">
<p style="font-size:25px; text-align:center">OFERTA DIAMENTOWA</p>
<br/><br/>
<p>-LOGO</p>
<br/>
<p>-obrobki graficzne zdjec</p>
<br/>
<p>-Strona Mobilna</p>
<br/>
<p>-5+ podstron</p>
<br/>
<p>900zł</p>
</div>
</div>
<div class="of3">
<p style="font-size:25px; text-align:center">OFERTA BRĄZOWA</p>
<br/><br/>
<p>-proste logo</p>
<br/>
<p>-prosty layout</p>
<br/>
<p></p>
<br/>
<p>-1 podstrona</p>
<br/>
<p>-każda dodatkowa podstron-20zł</p>
<p>200zł</p>
</div></section>
<section id="kontakt"><div class="kontakt"><br/>
<p style="text-align:center font-size:26px;">KONTAKT</p>
<br/><br/>
<p>Email PRIV:maly77.rs@gmail.com</p>
<br/>
<p>Email:kontakt@veta-design.pl</p>
<br/>
<p>Nr tel:511-236-744</p>
<br/>
<p>Miasto:Lębork</p>
</div></section>
</div>
<div id="footer"><br/><P>© Copyright VETA-DESIGN · Designed by Oskar Sekreta | veta-design@veta.pl</p></div>
</body>
</html>
body
{
margin:0 !IMPORTANT;
}
*{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
}
a.m
{
border-bottom:6px solid #3498db;
transition:0.4s;
color: #3498db;
text-decoration: none;
padding: 0 10px;
padding:17px;
}
.header{
background: #121212;
padding: 40px 20px;
color: #fff;
}
.logo{
float: left;
text-transform: uppercase;
}
.menu{
float: right;
}
.menu a{
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
padding:17px;
}
.menu a:hover
{
border-bottom:6px solid #3498db;
transition:0.4s
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover{
color: #3498db;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.content{
padding: 0 20px;
}
.content img{
width: 100%;
max-width: 700px;
margin: 20px 0;
}
.content p{
text-align: justify;
}
@media screen and (max-width:800px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.header
{
height:100px;
background:#34495e;
}
.header i
{
font-size:50px;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #121212;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
}
.kocury
{
width:100%;
height:600px;
background-color:#a31313;
margin-top:200px;
}
.kocury img
{
margin-left:auto;
margin-right:auto;
width:100%;
}
.kotki
{
width:100%;
height:300px;
background-color:#a31313;
margin-top:1300px;
}
.kotki img
{
text-align:center;
margin-top:00px;
width:100%;
height:auto;
}
.arrow
{
margin-left:auto;
margin-right:auto;
width:100px;
height:100px;
border-radius:50px;
border:2px solid black;
margin-top:150px;
color:black;
transition:0.3s ease;
}
.arrow:hover
{
border-color:white;
transition:0.3s;
color:white;
}
.icon-down-open
{
text-align:center;
color:black;
transition:0.3s ease;
animation: arrow 1.6s infinite linear;
margin-top:50px;
}
.icon-down-open:hover
{
color:white;
transition:0.3s;
margin-top:200px;
}
.opis2
{
height:400px;
width:100%;
top:0;
}
.opis3
{
width:100%;
height:300px;
background-color:#a31313;
color:white;
}
.margines2
{
margin-left:200px;
margin-right:200px;
}
.margines
{
margin-left:400px;
margin-right:400px;
}
.opis1
{
width:100%;
height:500px;
background-color:#a31313;
color:white;
top:0;
}
.opis
{
width:100%;
height:800px;
font-size:20px;
margin-left:auto;
margin-right:auto;
text-align:center;
float:center;
margin-top:200px;
}
.odnosnik1
{
width:100%;
height:768px;
background-image:url(../img/tlo.jpg);
background-size:cover;
color:white;
}
.odnosnik1 h1
{
font-size:50px;
margin-right:600px;
margin-left:200px;
}
.odnosnik1 a
{
width:200px;
height:60px;
border:1px solid black;
margin-left:200px;
text-decoration:none;
text-align:center;
padding-left:50px;
padding-right:50px;
padding:20px;
color:black;
}
.odnosnik1 a:hover
{
border-color:white;
color:white;
transition:0.3s
}
#container
{
width:100%;
height:100%;
}
.content{
padding: 0 20px;
}
.content img{
width: 100%;
max-width: 700px;
margin: 20px 0;
}
.content p{
text-align: justify;
}
@media screen and (max-width:800px) {
.portfolio a
{
margin-top:-1000px;
}
.miota img
{
width:100%;
height:100%;
}
.kocury
{
height:190px;
margin-top:80px;
}
.kotki
{
height:130px;
font-size:20px;
margin-top:4280px;
}
.kotki h1
{
font-size:20px;
}
.margines2
{
margin-left:10px;
margin-right:10px;
}
.opis2
{
}
.opis3
{
height:800px;
margin-top:500px;
}
.opis1
{
height:1600px;
}
.margines
{
margin-left:10px;
margin-right:10px;
}
.opis
{
background-color:none;
color:black;
}
.omnie
{
height:500px;
}
.opis
{
width:100%;
}
.odnosnik1
{
width:100%;
height:100%;
margin:0px;
}
.odnosnik1 a
{
margin:10px;
margin-top:-10px
}
.odnosnik1 h1
{
margin:10px;
margin-top:-50px;
}
.content
{
width:100%;
height:100%;
}
}
Witam mam problem z odstepami na stronie jak daje margin top na minusie nie dziala co robic mozna tez zobaczyc na stronie http://veta-design.pl błąd tylko na wersji mobilnej
