-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpicture-examples.html
10 lines (10 loc) · 9.21 KB
/
picture-examples.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html><html lang="de"><head><title>Beispiele Bild-Module | Designsystem der Stadtwerke Münster</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="title" content="Beispiele Bild-ModuleDesignsystem"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="index,follow"><meta name="author" content="Autor"><meta name="publisher" content="Publizist"><meta property="og:site_name" content="Designsystem der Stadtwerke Münster"><meta property="og:url" content="https://swmue.brandsites.depicture-examples.html"><meta property="og:title" content="Beispiele Bild-Module"><meta property="og:description" content=""><meta property="og:image" content="https://swmue.brandsites.deassets/picts/default.png"><meta property="og:locale" content="de_DE"><meta property="og:language" content="de"><link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png?v=1637680488962"><link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png?v=1637680488962"><link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png?v=1637680488962"><link rel="manifest" href="assets/fav/site.webmanifest?v=1637680488962"><link rel="shortcut icon" href="assets/fav/favicon.ico?v=1637680488962"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-TileImage" content="assets/fav/mstile-144x144.png?v=1637680488962"><meta name="msapplication-config" content="assets/fav/browserconfig.xml?v=1637680488962"><meta name="theme-color" content="#ffffff"><link rel="stylesheet" href="assets/css/app.bundle.css"><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="a2857e8c-8bbc-45fa-baf6-0d0986cb44f6" type="text/javascript" async></script><script>
let bots = new RegExp('/bot|slurp|crawler|spider|crawling/i');
if (!bots.test(navigator.userAgent)) {
let css = '[data-animate]{opacity:0;}';
let style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}
</script><script>if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script>document.createElement("picture");<\/script><script src="/assets/js/picturefill.min.js" async><\/script>');</script></head><body><header><div class="c-header is-sticky" id="header"><div class="g-container"><div class="c-header__wrapper"><div class="c-header__logo-wrapper"><div class="c-svg"> <a class="c-svg__link" href="index.html" aria-label="Zur Startseite"><img class="c-svg__img" alt="Logo" src="assets/img/logo-light.svg"></a></div></div><div class="c-header__button-wrapper"> <button class="c-burger" id="nav-toggle-button"><span class="c-burger__icon"></span></button></div><div class="c-header__nav-wrapper"><nav class="c-nav c-nav--main cs-light" id="main-nav"><ul class="c-nav__list"><li class="c-nav__list-item"><a href="index.html"><i class="ic ic__search"></i></a></li><li class="c-nav__list-item"> <a href="index.html">Start</a></li><li class="c-nav__list-item"> <a href="text-examples.html">Text Examples</a></li><li class="c-nav__list-item"> <a href="picture-examples.html">Picture Examples</a></li></ul></nav></div></div></div></div><div class="c-header__sticky-spacing"></div></header><main><div class="c-section mb-2"><div class="g-container-fluid"><div class="g-row g-row--no-gutters"><div class="g-col-12 f-display f-justify-center"><figure class="c-picture"><picture> <img src="assets/picts/Berlin_Regierungsviertel.jpg" alt=""></picture></figure></div></div></div></div><div class="c-section bg-primary-40 m-2"><div class="g-container"><div class="g-row"><div class="g-col-12 f-display f-justify-center"><figure class="c-picture"><picture> <img src="assets/picts/Braunschweig_Burgplatz.jpg" alt=""></picture></figure></div></div></div></div><div class="c-section m-2"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-6"><figure class="c-picture"><picture> <img src="assets/picts/Berlin_Regierungsviertel.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div><div class="g-col-12 g-col-tp-6 mt-mw-auto"><figure class="c-picture"><picture> <img src="assets/picts/Braunschweig_Burgplatz.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div></div></div></div><div class="c-section m-2"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-7 f-display f-justify-center f-align-self-end"><figure class="c-picture"><picture> <img src="assets/picts/Berlin_Regierungsviertel.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div><div class="g-col-12 g-col-tp-5 mt-mw-auto f-display f-justify-center f-align-self-end"><figure class="c-picture"><picture> <img src="assets/picts/Berlin_Neue_Synagoge.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div></div></div></div><div class="c-section bg-secondary-40 m-2 p-2"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-5 f-display f-justify-center f-align-self-center"><figure class="c-picture"><picture> <img src="assets/picts/Berlin_Regierungsviertel.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div><div class="g-col-12 g-col-tp-7 mt-mw-auto f-display f-justify-center f-align-self-center"><figure class="c-picture"><picture> <img src="assets/picts/Braunschweig_Burgplatz.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div></div></div></div><div class="c-section m-2"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-7"><figure class="c-picture"><picture> <img src="assets/picts/Braunschweig_Burgplatz.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div><div class="g-col-12 g-col-tp-5 g-col-tl-4 g-offset-tl-1 mt-mw-auto"><figure class="c-picture"><picture> <img src="assets/picts/Braunschweig_TU.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div></div></div></div><div class="c-section bg-black cs-light mt-2 p-2"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-5 g-col-tl-4 f-display f-justify-center f-align-self-center"><figure class="c-picture"><picture> <img src="assets/picts/Braunschweig_TU.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div><div class="g-col-12 g-col-tp-7 g-offset-tl-1 mt-mw-auto f-display f-justify-center f-align-self-center"><figure class="c-picture"><picture> <img src="assets/picts/Berlin_Neue_Synagoge.jpg" alt=""></picture><figcaption class="c-picture__caption"><p>Lorem ipsum sunt</p></figcaption></figure></div></div></div></div></main><footer><div class="c-footer"><div class="c-footer__main p-2"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-4 g-col-tl-3"><div class="c-footer__logo-wrapper"><div class="c-svg"> <a class="c-svg__link" href="index.html"><img class="c-svg__img" alt="Logo" title="Logo Title" src="assets/img/logo-light.svg"></a></div></div></div><div class="g-col-12 g-col-tp-4 g-col-tl-3 mt-mw-auto"><div class="c-footer__meta-nav-wrapper"><div class="c-footer__headline"><h2>Rechtliche Hinweise</h2></div><nav class="c-nav c-nav--list cs-light"><ul class="c-nav__list"><li class="c-nav__list-item"> <a href="impressum.html">Impressum</a></li><li class="c-nav__list-item"> <a href="datenschutz.html">Datenschutz</a></li><li class="c-nav__list-item"> <a href="cookies.html">Cookies</a></li></ul></nav></div></div><div class="g-col-12 g-col-tp-4 g-col-tl-3 mt-mw-auto"><div class="c-footer__social-wrapper"><div class="c-footer__headline"><h2>Folge uns auf</h2></div><ul class="c-social-bar"><li class="c-social-bar__item"><a href="#" aria-label="Facebook"><i class="ic ic__facebook"></i></a></li><li class="c-social-bar__item"><a href="#" aria-label="Instagram"><i class="ic ic__instagram"></i></a></li><li class="c-social-bar__item"><a href="#" aria-label="Twitter"><i class="ic ic__twitter"></i></a></li><li class="c-social-bar__item"><a href="#" aria-label="XING"><i class="ic ic__xing"></i></a></li><li class="c-social-bar__item"><a href="#" aria-label="LinkedIn"><i class="ic ic__linkedin"></i></a></li></ul></div></div></div></div></div><div class="c-footer__bottom"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-6"><div class="c-footer__copyright-wrapper"><p>2021 @ wirDesign communication AG</p></div></div><div class="g-col-12 g-col-tp-6 f-display f-justify-tp-end f-align-items-tp-center"><nav class="c-nav c-nav--meta"><ul class="c-nav__list"><li class="c-nav__list-item"> <a href="impressum.html">Impressum</a></li><li class="c-nav__list-item"> <a href="datenschutz.html">Datenschutz</a></li></ul></nav></div></div></div></div></div></footer><script src='assets/js/app.js'></script><script src='assets/js/side-nav.js'></script><script src='assets/js/code-block.js'></script></body></html>