Pagination
CODE
×
HTML
<div class='pagination'> <img class='arrow-left-disabled' src='img/go-back-deactive.svg'> <input value='1' class='pagination'> <p class='pagination'>von 17</p> <img class='arrow-right' src='img/go-next.svg'> </div>
CSS
@media screen and (max-width: 1119px) { div.pagination { margin-left: 30px; margin-right: 30px; margin-top: 32px; height: 180px; } } @media screen and (max-width: 767px) { div.pagination { margin-left: 20px; margin-right: 20px; margin-top: 24px; height: 120px; } } img.arrow-right { -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; width: 32px; height: 24px; } img.arrow-left-disabled { -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; width: 32px; height: 24px; } input.pagination { border: 1px solid rgba(112,112,112,1); white-space:nowrap; text-align:center; overflow:hidden; text-overflow:ellipsis; padding-top: 0; padding-right: 3px; padding-bottom: 0; padding-left: 3px; width: 36px; height: 36px; } p.pagination { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 24px; letter-spacing: 0.02rem; word-spacing: 0.05rem; color: var(--black); display:inline-block; position:relative; margin-right: 10px; margin-left: 10px; } div.pagination > img.arrow-left-disabled { margin-top: -4px; margin-right: 12px; } div.pagination > input.pagination { margin-top: 0; margin-bottom: 0; margin-right: 0; margin-left: 0; } div.pagination > p.pagination { display: inline-block; margin-left: 5px; } div.pagination > img.arrow-right { margin-top: -4px; } img.arrow-right:hover, img.arrow-right:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } }
JS
Pagination
×
von 17