<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Pagination</title>
</head>
<body>
<h1 class="title">The Lipsum Times</h1>
<div class="container">
<input class="one" type="radio" name="page" checked>
<input class="two" type="radio" name="page">
<input class="three" type="radio" name="page">
<div class="content one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lorem ac risus sollicitudin, faucibus consequat tellus accumsan. Aenean hendrerit sodales nunc. Duis feugiat augue dolor, sed cursus metus lacinia at. Nullam finibus luctus massa quis tristique. Duis bibendum scelerisque nulla sit amet tincidunt. Aliquam imperdiet arcu turpis, sit amet mattis nibh scelerisque in. Sed bibendum quis justo at gravida. Ut vestibulum sed neque vel semper. Sed gravida urna eget purus rhoncus consequat. Aenean orci lacus, consectetur et arcu quis, finibus vestibulum erat. Nullam tellus augue, convallis in purus id, molestie maximus turpis. In laoreet erat non turpis sodales, at scelerisque ante faucibus. Ut in ipsum eu tellus imperdiet condimentum. Nullam tristique tristique mollis. Morbi facilisis neque ut dignissim malesuada.</div>
<div class="content two"> Vestibulum vehicula, sapien vel pellentesque gravida, lacus sem iaculis turpis, id cursus felis tortor id dolor. Etiam ac vestibulum mauris. Fusce finibus elit vel justo lacinia, semper porttitor ipsum posuere. Sed eleifend dui sed diam egestas, quis iaculis risus convallis. Etiam pretium suscipit ipsum, vel consectetur ipsum pellentesque viverra. Fusce sit amet rhoncus leo, vitae ornare nisl. Nam eget imperdiet augue.</div>
<div class="content three"> Aenean feugiat eros vel nunc malesuada, eget luctus ante commodo. Maecenas ac molestie est. In hac habitasse platea dictumst. Ut vel risus eu sapien volutpat consequat. Donec metus sem, dignissim ac tincidunt ac, vehicula eget magna. Fusce eget lorem nec enim posuere sagittis id nec ipsum. Sed faucibus, magna vel egestas hendrerit, erat massa consequat diam, non elementum turpis erat vitae ex. Nulla vel ligula semper, vulputate dolor nec, vehicula orci. Aenean neque quam, dictum sit amet maximus non, condimentum ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin a sem euismod, fermentum leo id, suscipit risus. Aenean tempor sem sit amet nunc dapibus sagittis. Sed rutrum neque lectus, vel rhoncus libero sollicitudin non. Vestibulum convallis id felis non cursus. Aliquam bibendum bibendum odio.</div>
</div>
<div class="footer">
<div class="copyright">© The Lipsum Times</div>
<div class="contact">
[email protected]</div>
</div>
</body>
</html>
html, body {
width: 100%;
margin: 0;
padding: 0;
background: #161621;
color: #ddd;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1em;
}
body {
width: calc(100% - 10em);
padding-left: 5em;
}
p, h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: normal;
}
/* title */
.title {
margin: 0.5em 0;
position: relative;
text-align: center;
}
.title::after {
content: "";
width: 75%;
height: 1px;
background: #aaa;
display: block;
position: absolute;
bottom: -0.5em;
left: 12.5%;
}
/* content/pagination/what you're here for */
.container {
height: 5em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
input {
width: 1.5em;
height: 1.5em;
background: #aaa;
border-radius: 50%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: all 0.3s;
}
input:checked {
width: 2.5em;
height: 2.5em;
background: #ddd;
}
.content {
display: none;
position: absolute;
text-align: justify;
top: 5em;
}
input.one:checked ~ .content.one,
input.two:checked ~ .content.two,
input.three:checked ~ .content.three {
display: block;
}
/* footer */
.footer {
width: calc(100% - 10em);
height: 3em;
display: flex;
align-items: center;
position: absolute;
bottom: 0;
}
.footer::before {
content: "";
width: 75%;
height: 1px;
background: #aaa;
display: block;
position: absolute;
top: 0;
left: 12.5%;
}
.footer .copyright {
margin-left: 2em;
flex: 1;
}
.footer .contact {
margin-right: 2em;
}