News List Item (full-width)
MEDIA
CODE
×
HTML
<div class='news-list-item full-width'> <span class='label-content'>25. September 2018</span> <h4>Architekturwettbewerb für neues Forschungs- und Ausbildungszentrum auf dem Inselareal</h4> </div>
CSS
@media screen and (max-width: 1119px) { div.news-list-item.full-width { margin-left: 30px; margin-right: 30px; } } @media screen and (max-width: 767px) { div.news-list-item.full-width { margin-left: 20px; margin-right: 20px; padding-top: 25px; padding-right: 1px; padding-bottom: 10px; padding-left: 0px; } } div.news-list-item { background-image: url('../img/arrow-right_large.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; cursor:pointer; background-size: 16px 24px; background-position: calc(100% - 20px) center; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; border-bottom: 1px solid rgba(182,182,182,1); position:relative; padding-top: 30px; padding-right: 70px; padding-bottom: 15px; padding-left: 20px; max-width: 800px; } div.news-list-item:hover, div.news-list-item:focus { background-color: rgba(248,248,248,1); background-size: 16px 24px; background-position: calc(100% - 15px) center; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } @media screen and (max-width: 767px) { div.news-list-item { background-image: none !important; padding-top: 25px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } } h4 { margin: 0 0 12px -1px; max-width: 800px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); font-size: 24px; line-height: 28px; margin-left: -1px; } @media screen and (max-width: 1119px) { h4 { margin-left: 0px; } } @media screen and (max-width: 767px) { h4 { font-size: 21px; line-height: 25px; margin-left: 0px; } } span.label-content { display:block; color: rgba(112,112,112,1); font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 12px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } @media screen and (max-width: 767px) { span.label-content { font-size: 13px; line-height: 17px; } }
JS
News List Item (full-width)
×
25. September 2018
Architekturwettbewerb für neues Forschungs- und Ausbildungszentrum auf dem Inselareal