HTML
<!doctype html>
<html>
<body>
<main class="center">
<h1>Sticky Footer</h1>
</main>
<footer>
<p>Feel free to use this code.<br>If you have any suggestions, please leave a comment.</p>
</footer>
</body>
</html>
CSS
html {
font-size: 62.5%;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.8rem;
color: #333;
background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%);
}
.center {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 3px;
}
footer {
font-size: 1.4rem;
background: #333;
color: #f1f1f1;
box-shadow: 0 0 25px 0 rgba(0,0,0,.8);
}
1 Response