<html>
<head>
<meta charset="UTF-8" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<h1 class="myTitle"><a href="https://blog.sandbay.it/" target="_blank">Go to Blog SandBay</a></h1>
<div class="content">
<h5>A long article</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<footer>
<p>A footer</p>
</footer>
</body>
</html>
h1.myTitle {
background: #236965 url("https://tools.obyte.it/img/idrobyte/logo_sfera.svg")
no-repeat;
background-position: 2px 2px;
margin: 0 0 10px;
padding: 0 0 0 60px;
background-size: 45px;
line-height: 46px !important;
}
h1.myTitle a {
color: white;
font-family: Verdana;
font-size: 20px;
text-decoration: none;
}
html {
// min-height: 100%;
// position: relative;
height: 100%; /* the height must be 100%, in order to work the trick */
}
/** Footer at bottom */
body {
position: relative;
bottom: 0;
min-height: 100%; /* for first case and third case, when the content is too short */
padding: 0 0 100px; /* we have an example footer of 100px of height */
height: auto; /* the height must be auto, in order to work the trick */
}
footer {
position: absolute;
bottom: 0;
height: 100px; /* the fixed height chosen for the footer */
background-color: #236965;
left: 0;
right: 0;
color: white;
text-align: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.