Hey Hive people, how´s it going?
Today I will show you the easy sample of website where is header, navigation block, footer, and article.
Parts what I'm using for this project:
<html></html>
<head></head>
<title></title>
<meta>
<style></style>
<body></body>
<header></header>
<nav></nav>
<ul></ul>
<li></li>
<em></em>
<strong></strong>
<h1></h1>
<p></p>
<article></article>
<a></a>
<section></section>
This website sample is about Estonian cities. In left side is Navigation block, where are 3 Estonian cities, and if you click on them, this city official webiste will open.
In the right side I put a little description about Tallinn.
Also I changed the website colors into Estonian flag colors. Header is blue, right side is black and footer is white.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tallinn</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: blue;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: black;
height: 300px;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: white;
padding: 10px;
text-align: center;
border: 10px
}
.myButton {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#777777;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
background-color:#dfdfdf;
}
.myButton:active {
position:relative;
top:1px;
}
}
</style>
</head>
<body>
<header>
<h2>Eesti Linnad</h2>
</header>
<section>
<nav>
<ul>
<a href="https://www.tallinn.ee/" class="myButton">Tallinn</a>
<a href="https://tartu.ee/et" class="myButton">Tartu</a>
<a href="https://parnu.ee/" class="myButton">Pärnu</a>
</ul>
</nav>
<article>
<h1>Tallinn</h1>
<p style="color:white;">Tallinn on linn Põhja-Eesti rannikul Tallinna lahe ääres, Eesti pealinn ja Harju maakonna halduskeskus.</p>
<p style="color:white;">Teadaolevalt on Tallinna, toonase nimega Revalit, koos oma kodanikkonnaga esimest korda mainitud linnana aastal 1238. Lübecki linnaõigused sai linn 15. mail 1248. Läänemere idaosa merekaubandusega tegeleva linna tähtsust kasvatas märgatavalt 1285. aastast kuulumine Hansa Liitu, mis andis linnale laokoha õiguse 1346. aastal. Tallinnast arenes oma strateegilise asukoha tõttu 14.–16. sajandil Põhja-Euroopa oluline idakaubandust juhtiv hansalinn.</p>
</article>
</section>
<footer>
<p>eesti.ee</p>
</footer>
</body>
</html>
Little screenshot, how this is looking
Have a nice day!
