JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Poznaj Linuxa :)</title>
<meta name="description" content="Przed tobą randomowa strona, zaczynam zabawe z html" />
<meta name="keywords" content="film, kino, najlepsze filmy, top filmy"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="mystyle.css" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="containter">
<div id="logo">
Poznaj Linuxa!
</div>
<div id="<menu>">
<div class="option"> Strona Główna </div>
<div class="option"> Dystrybucje </div>
<div class="option"> Instalacja </div>
<div class="option"> Polecenia </div>
<div class="option"> Terminala </div>
<div class="option"> Linus Torvalds </div>
<div class="option"> O projekcie</div>
<div style="clear.both"></div>
</div>
<div id="topbar">
O projekcie słów kilka <br/>
Kiwsy mówisz: "Napisałem program, który wywalił Windows, ludzie gapią się na Ciebie głupkowato i mówią
Hej, ja dostałem to wraz z systemem, za darmo" - Linus Torvalds, twórca Linuxa
</div>
<div id="sidebar">
Strona Główna <br/>
Dystrybucje <br/>
Instalacja <br/>
Polecenia Terminala <br/>
Linus Torvalds <br/>
O projekcie
</div>
<div id="content">
Dlaczego Linux? <br/>
What is Lorem Ipsum? <br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of...
CSS
body {
background-color: gray;
font-family: 'Lato', sans-serif;
}
#containter {
width: 50%;
margin: 0 auto;
}
#logo {
color: white;
font-size: 44px;
letter-spacing: 3px;
font-weight: 900;
}
#menu {
background-color: #purple;
color: #white;
padding: 10px;
margin: 10px;
}
#topbar {}
#sidebar {}
#content {}
#footer {}
h1 {
font-size: 48px;
font-family: cursive;
color: gold !important;
}
/* Nieodwiedzony link */
a:link {
color: yellow;
}
/* Odwiedzony link */
a:visited {
color: yellow;
}
/* Link po najechaniu kursorem */
a:hover {
color: red;
}
.option {
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
}