<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Tytuł</title>
<meta name="description" content="Opis strony" />
<meta name="keywords" content="słowa, kluczowe" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container" >
<header>
Kacper Róg
</header>
<nav>
<div class="opcja">
<a href="C:\Users\Kacper\Desktop\zadanie2\main.html" >Strona Głowna</a>
</div>
<div class="opcja">
<a href="#miejsce">Moje zainteresowania</a>
</div>
<div class="opcja">
<a href="#miejsce1">Galeria</a>
</div>
<div class="opcja">
<a href="#miejsce2">Kontakt</a>
</div>
<div style="clear:both"></div>
</nav>
<main>
<div id="blok1">
Piłka Nożna
</div>
<div id="blok2">
<a name="miejsce">Informatyka</a>
</div>
<div style="clear:both"></div>
<div id="blok3">
Akrobatyka
</div>
<div id="blok4">
Jazda na Quadzie
</div>
<div style="clear:both"></div>
</main>
<div id="galeria">
<a name="miejsce1">Galeria</a>
</div>
<section>
<div class="pilka">
<img src="pilka1.jpg" />
</div>
<div class="pilka">
<img src="pilka2.jpg" />
</div>
<div class="pilka">
<img src="pilka3.jpg" />
</div>
<div style="clear:both"></div>
<div class="informatyka">
<img src="informatyka1.png" />
</div>
<div class="informatyka">
<img src="informatyka2.jpg" />
</div>
<div class="informatyka">
<img src="informatyka3.jpg" />
</div>
<div style="clear:both"></div>
<div class="akrobatyka">
<img src="akrobatyka1.jpg" />
</div>
<div class="akrobatyka">
<img src="akrobatyka2.jpg" />
</div>
<div class="akrobatyka">
<img src="akrobatyka3.png" />
</div>
<div style="clear:both"></div>
<div class="quad">
<img src="quad1.jpg" />
</div>
<div class="quad">
<img src="quad2.jpg" />
</div>
<div class="quad">
<img src="quad3.jpg" />
</div>
<div style="clear:both"></div>
<div id="kontakt">
<a name="miejsce2">Kontakt</a>
</div>
<div class="kontaktt">
<a href="https://twitter.com/?lang=pl"><img src="kontakt1.png" /></a>
</div>
<div class="kontaktt">
<a href="https://www.instagram.com/"><img src="kontakt2.jpg" /></a>
</div>
<div class="kontaktt">
<a href="https://facebook.com"><img src="kontakt3.png" /></a>
</div>
</section>
</div>
</body>
</html>
##########################################
I CSS
body
{
box-sizing:border-box;
margin: 0 6vw auto 6vw;
background:#FCF3CF;
}
header
{
text-align:center;
background:#F1C40F;
font-size:65px;
padding-top:15px;
padding-bottom:15px;
font-family:Verdana;
letter-spacing:4px;
font-style:oblique;
}
nav
{
background:#F0B27A;
width:1673px;
height:80px;
}
.opcja
{
box-sizing:border-box;
width:418px;
height:80px;
float:left;
padding-left:110px;
padding-top:25px;
border:solid;
font-size:25px;
font-family:Time New Roman;
letter-spacing:2px;
}
.opcja:hover
{
background-color:#AF601A ;
}
main
{
border-bottom:solid;
}
#blok1
{
height:500px;
width:500px;
border-radius:10%;
background-color:lightblue;
float:left;
margin-left:230px;
margin-right:160px;
margin-top:20px;
margin-bottom:40px;
box-sizing:border-box;
text-align:center;
font-size:50px;
padding-top:220px;
background-image:url("pilkanozna.jpg");
color:#F8F9F9;
}
#blok2
{
box-sizing:border-box;
height:500px;
width:500px;
border-radius:10%;
background-color:lightblue;
float:left;
margin-top:20px;
text-align:center;
font-size:50px;
padding-top:220px;
background-image:url("informatyka.jpg");
color:#F8F9F9;
}
#blok3
{
height:500px;
width:500px;
border-radius:10%;
background-color:lightblue;
float:left;
margin-left:230px;
margin-right:160px;
margin-bottom:40px;
box-sizing:border-box;
text-align:center;
font-size:50px;
padding-top:220px;
background-image:url("akrobatyka.jpg");
color:#F8F9F9;
}
#blok4
{
height:500px;
width:500px;
border-radius:10%;
background-color:lightblue;
float:left;
box-sizing:border-box;
text-align:center;
font-size:50px;
padding-top:220px;
background-image:url("quad.jpg");
color:#F8F9F9;
}
#galeria
{
text-align:center;
font-size:70px;
font-style:oblique;
margin-top:120px;
margin-bottom:20px;
}
.pilka
{
margin-left:105px;
margin-top:30px;
margin-bottom:20px;
height:400px;
width:400px;
float:left;
}
.informatyka
{
margin-left:105px;
margin-top:30px;
margin-bottom:20px;
height:400px;
width:400px;
float:left;
}
.akrobatyka
{
margin-left:105px;
margin-top:30px;
margin-bottom:20px;
height:400px;
width:400px;
float:left;
}
.quad
{
margin-left:105px;
margin-top:30px;
margin-bottom:20px;
height:400px;
width:400px;
float:left;
}
#kontakt
{
text-align:center;
font-size:70px;
font-style:oblique;
margin-bottom:20px;
margin-top:130px;
}
.kontaktt
{
margin-left:190px;
margin-top:30px;
margin-bottom:20px;
height:300px;
width:300px;
float:left;
}
footer
{
text-align:right;
}
{"html5":"htmlmixed","css":"css","javascript":"javascript","php":"php","python":"python","ruby":"ruby","lua":"text\/x-lua","bash":"text\/x-sh","go":"go","c":"text\/x-csrc","cpp":"text\/x-c++src","diff":"diff","latex":"stex","sql":"sql","xml":"xml","apl":"apl","asterisk":"asterisk","c_loadrunner":"text\/x-csrc","c_mac":"text\/x-csrc","coffeescript":"text\/x-coffeescript","csharp":"text\/x-csharp","d":"d","ecmascript":"javascript","erlang":"erlang","groovy":"text\/x-groovy","haskell":"text\/x-haskell","haxe":"text\/x-haxe","html4strict":"htmlmixed","java":"text\/x-java","java5":"text\/x-java","jquery":"javascript","mirc":"mirc","mysql":"sql","ocaml":"text\/x-ocaml","pascal":"text\/x-pascal","perl":"perl","perl6":"perl","plsql":"sql","properties":"text\/x-properties","q":"text\/x-q","scala":"scala","scheme":"text\/x-scheme","tcl":"text\/x-tcl","vb":"text\/x-vb","verilog":"text\/x-verilog","yaml":"text\/x-yaml","z80":"text\/x-z80"}