<h1>Pagination</h1>
<div class="bg">
<div class="pagination-body">
<ul class="pagination">
<li><a href="#"><svg width="13.83" height="22.396" viewBox="0 0 13.83 22.396"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M8.59,25.765,17.138,17.2,8.59,8.632,11.222,6l11.2,11.2-11.2,11.2Z" transform="translate(22.42 28.396) rotate(180)"/></svg></a></li>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">...</a></li>
<li><a href="#">99</a></li>
<li><a href="#"><svg width="13.83" height="22.396" viewBox="0 0 13.83 22.396"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M8.59,25.765,17.138,17.2,8.59,8.632,11.222,6l11.2,11.2-11.2,11.2Z" transform="translate(-8.59 -6)"/></svg></a></li>
</ul>
</div>
</div>
<div class="guideline">
<div class="section">
<div class="color1"></div>
<p class="color-p1">#764BA2</p>
</div>
<div class="section">
<div class="color2"></div>
<p class="color-p2">#764BA2</p>
</div>
<div class="type">
<p style="font-size: 14px; color: #764ba2;">Roboto Regular 20px</p>
<p style="font-size: 18px; color: #764ba2; font-weight:900;">Roboto Black 30px</p>
</div>
</div>
body {
background-color: #f7f7f7;
margin: 0px;
padding: 0px;
}
h1 {
display: flex;
margin: 30px 0 35px 0;
font-family: Roboto;
font-weight: 400;
color: #667eea;
justify-content: center;
}
p{
font-family: Roboto;
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
color: #c8cce3;
font-size: 20px;
font-weight: 400;
margin: 0px;
padding: 0px;
}
a:hover{
color: #667eea;
}
ul {
margin: 0px;
padding: 0px;
}
.pagination svg {
display: flex;
padding: 0 10px;
}
.bg {
display: flex;
background: #fff;
width: 376px;
height: 131px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
margin: auto;
}
.pagination-body {
display: flex;
margin: auto;
}
.pagination {
margin: auto;
display: flex;
height: 50px;
list-style-type: none;
font-family: 'Roboto', sans-serif;
align-items: center;
background: linear-gradient(to top, #EBEDEE, #FDFBFB);
box-shadow: 0 3px 6px 0 rgba(96, 79, 168, 0.3);
border-radius: 50px;
}
.pagination li {
padding: 0 7px;
}
.pagination li:first-child {
display: flex;
align-items: center;
height: 50px;
background: linear-gradient(to right, #764BA2, #667EEA);
box-shadow: 3px 0 3px 0 rgba(102, 125, 233, 0.5);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
margin-right: 10px;
}
.pagination li:first-child:hover{
opacity: 0.7;
}
.pagination li:last-child {
display: flex;
align-items: center;
height: 50px;
background: linear-gradient(to right, #667EEA, #764BA2);
box-shadow: -2px 0 3px 0 rgba(102, 125, 233, 0.5);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
margin-left: 10px;
}
.pagination li:last-child:hover{
opacity: 0.7;
}
.pagination li a:nth-child(3):hover{
color:#667eea !important;
}
.pagination .active {
font-size: 30px;
font-weight: 900;
color: #667de9
}
.color1{
width: 38px;
height: 38px;
background: #764ba2;
}
.color2{
width: 38px;
height: 38px;
background: #667eea;
}
.color-p1{
color:#764ba2;
font-size: 10px;
}
.color-p2{
color:#667eea;
font-size: 10px;
}
.guideline{
display: flex;
justify-content: center;
padding: 30px 0 0 0;
}
.guideline .section{
margin: 0 10px;
}
.section p{
margin: 10px 0 0 0;
}
.type{
display: flex;
flex-direction: column;
}
.type p{
padding: 3px 0;
margin-left: 40px;
}