1ts
index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mateusz Siemież</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
</head>
<body>
<header>
<h1> Mateusz Siemież </h1>
</header>
<main>
<section class="kwadrat">
<a href="index.html"><div class="k1"><span class="material-symbols-outlined">home</span></div></a>
<a href="oferta.html"><div class="k2"><span class="material-symbols-outlined">sync_saved_locally</span></div></a>
<a href="kontakt.html"><div class="k2"><span class="material-symbols-outlined">map_pin_review</span></div></a>
<a href="galeria.html"><div class="k1"><span class="material-symbols-outlined">satellite</span></div></a>
<div style="clear: both;"></div>
</section>
<section class="kwadrat">
<div id="tresc">treść właściwa</div>
<article class="social">
<a href="https://www.youtube.com" target="_blank"><article id="yt"><i class="fa-brands fa-youtube"></i></article></a>
<a href="https://www.facebook.pl" target="_blank"><article id="fb"><i class="fa-brands fa-facebook"></i></article></a>
<a href="https://www.instagram.pl" target="_blank"><article id="ig"><i class="fa-brands fa-instagram"></i></article></a>
<a href="https://www.x.pl" target="_blank"><article id="x"><i class="fa-brands fa-x-twitter"></i></article></a>
</article>
</section>
</main>
<footer>
<p>Stronę wykonał Mateusz Siemież © 2025</p>
</footer>
</body>
</html>style.css
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 100px !important; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
.fa-brands {
font-size: 60px;
color: #fff;
}
body
{
margin: auto;
width: 1000px;
}
header
{
background-color: aqua;
color: green;
text-align: center;
height: 80px;
padding: 20px;
}
.kwadrat
{
width: 50%;
float: left;
background-color: blue;
height: 500px;
}
footer
{
background-color: blueviolet;
clear: both;
height: 100px;
font-size: 30px;
text-align: center;
padding-top: 12px;
box-sizing: border-box;
}
.k1
{
width: 230px;
height: 230px;
margin: 10px;
padding-top: 55px;
box-sizing: border-box;
text-align: center;
background-color: burlywood;
float: left;
}
.k2
{
width: 230px;
height: 230px;
margin: 10px;
padding-top: 55px;
box-sizing: border-box;
text-align: center;
background-color: darkgoldenrod;
float: left;
}
#tresc
{
margin: 10px;
width: 420px;
height: 244px;
background-color: orange;
text-align: justify;
padding: 30px;
}
#yt
{
margin: 10px;
width: 105px;
height: 142px;
padding-top: 40px;
box-sizing: border-box;
background-color: #d94348;
float: left;
}
#fb
{
margin: 10px;
width: 105px;
height: 142px;
padding-top: 40px;
box-sizing: border-box;
background-color: #4668b3;
float: left;
}
#ig
{
margin: 10px;
width: 105px;
height: 142px;
padding-top: 40px;
box-sizing: border-box;
background-color: #833AB4;
float: left;
}
#x
{
margin: 10px;
width: 105px;
height: 142px;
padding-top: 40px;
box-sizing: border-box;
background-color: black;
float: left;
color: white;
}
.social
{
text-align: center;
}
a
{
text-decoration: none;
color: white;
}