Kontaktbox
CODE
×
HTML
<div class='contactbox clearfix'><a class='image-c' title="Öffnet in einem neuen Fenster ein grosses Bild" target="_blank" href="image-link"> <img alt="Stefan Mustermann" src="img/Costa-Stefan.jpg"> <div class='enl-ico open-lightbox-2'></div> </a> <div class="text-c"> <p class="strong">Stefan Mustermann</p> <p class="teaser">Region Oberaargau<br> PF 1177<br> 4900 Langenthal</p> <ul class="no-circle no-margin"> <li><a class="text-link" href="#">Mobile +41 00 123 45 67</a></li> <li><a class="text-link-2" href="#">E-Mail schreiben</a></li> </ul> </div></div>
CSS
div.contactbox.clearfix { background-color: rgba(247,233,210,1); margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 0; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; width: 400px; } @media screen and (max-width: 1119px) { div.contactbox.clearfix { width: 100%; } } div.contactbox a.image-c { position: relative; cursor: pointer; display: inline-block; } div.contactbox div.enl-ico.open-lightbox-2 { top: 0; left: 0; position: absolute; } div.contactbox img { width: auto; height: auto; max-height: 250px; max-width: 350px; margin-bottom: 18px; -webkit-transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } a.image-c:hover > div.enl-ico.open-lightbox-2, a.image-c:focus > div.enl-ico.open-lightbox-2 { opacity: 1; } @media screen and (max-width: 1119px) and (min-width: 768px) { div.contactbox a.image-c { float: left; } div.contactbox div.text-c { float: left; margin-left: 20px; } div.contactbox img { margin-bottom: 0px; } } div.contactbox p.teaser { display: block !important; } div.clearfix:before { display:table-cell; } div.clearfix:after { position:-webkit-sticky;position:sticky; } .context-column + .clearfix { height: 15px; width: 100%; display: inline-block; }
JS
Kontaktbox
Erstellt: 14.10.2021 - 15:54 Uhr
Letzte Änderung: 08.08.2024 - 21:33 Uhr
×
Stefan Mustermann
Region Oberaargau
PF 1177
4900 Langenthal
Mobile +41 00 123 45 67
E-Mail schreiben