3tei
index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Mateusz Siemież - wizytówka</title>
</head>
<body>
<div id="container">
<header>
Mateusz Siemież
</header>
<div class="kwadrat">
<div class="kafelek1">
1
</div>
<div class="kafelek2">
2
</div>
<div style="clear: both;"></div>
<div class="kafelek2">
3
</div>
<div class="kafelek1">
4
</div>
<div style="clear: both;"></div>
<div class="kafelek3">
Daj Kamienia!
</div>
</div>
<div class="kwadrat">
<main>
Witaj na mojej Stronie! <br/><br/>
Znadziesz tutaj wiele ciekawych informacji oraz treści.
</main>
<div class="yt">
yt
</div>
<div class="fb">
fb
</div>
<div class="ln">
linked in
</div>
<div class="ig">
insta
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>style.css
body
{
background-color: #303030;
color: rgb(255, 255, 255);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
}
#container
{
width: 1000px;
margin: auto;
}
header
{
background-color: blue;
}
.kwadrat
{
background-color: brown;
width: 50%;
float: left;
}
.kafelek1
{
margin: 10px;
width: 230px;
height: 142px;
background-color: lime;
text-align: center;
float: left;
}
.kafelek2
{
margin: 10px;
width: 230px;
height: 142px;
background-color: orange;
text-align: center;
float: left;
}
.kafelek3
{
margin: 10px;
width: 420px;
height: 82px;
background-color: violet;
text-align: center;
font-size: 26px;
padding: 30px;
line-height: 150%;
}
main
{
margin: 10px;
width: 420px;
height: 244px;
background-color: rgb(8, 62, 62);
text-align: justify;
padding: 30px;
}
.yt
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #d94348;
float: left;
}
.yt:hover
{
background-color: #c83237;
}
.fb
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #4668b3;
float: left;
}
.fb:hover
{
background-color: #3557a2;
}
.ln
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #0e76a8;
float: left;
}
.ln:hover
{
background-color: #185a7a;
}
.ig
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #c13584;
float: left;
}
.ig:hover
{
background-color: #e1306c;
}