You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

157 lines
6.9 KiB

<!doctype html>
<html lang="de_DE">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<header class="site-header">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="sozi-ui__menu">
<div class="sozi-ui__menu-start">
<a href="/">
<img src="/images/logo.svg" alt="SPD - Sozial Politik für dich" class="sozi-ui__menu-logo" />
</a>
</div>
<div class="sozi-ui__menu-start">
<button id="mobile-button" type="button" class="sozi-ui__button sozi-ui__button--menu sozi-ui__button--transparent hidden-md-up p-0">
<svg class="sozi-ui__icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-menu"></use>
</svg>
<svg class="sozi-ui__icon hidden" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-close"></use>
</svg>
</button>
<div class="sozi-ui__menu-list-wrapper">
<nav class="sozi-ui__menu-list">
<a class="sozi-ui__menu-item" href="/topics.html#echt-von-hier">
Echt von hier
</a>
<a class="sozi-ui__menu-item" href="/#da-trefft-ihr-mich">
Da trefft Ihr mich
</a>
<a class="sozi-ui__menu-item" href="/#da-komm-ich-wech">
Da komm ich wech
</a>
<a class="sozi-ui__menu-item" href="/#social-media">
Social Media
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container m-bottom-5">
<div class="grid justify-content-center">
<div class="col-12 col-md-8">
<h2 class="h2 center m-bottom-6">
eleifend option congue nihil
</h2>
<div class="sozi-topics">
<article class="sozi-topics__item">
<div class="sozi-topics__item-media">
<img src="/images/topics.jpg" />
</div>
<div class="sozi-topics__item-body">
<h3 class="h3 sozi-topics__item-title">
nihil imperdiet doming
</h3>
<div class="content m-bottom-last-child-0">
<p>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</article>
<article class="sozi-topics__item sozi-topics__item--odd">
<div class="sozi-topics__item-media">
<img src="/images/topics.jpg" />
</div>
<div class="sozi-topics__item-body">
<h3 class="sozi-topics__item-title">
nihil imperdiet doming
</h3>
<div class="content m-bottom-last-child-0">
<p>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</article>
<article class="sozi-topics__item">
<div class="sozi-topics__item-media">
<img src="/images/topics.jpg" />
</div>
<div class="sozi-topics__item-body">
<h3 class="sozi-topics__item-title">
nihil imperdiet doming
</h3>
<div class="content m-bottom-last-child-0">
<p>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
<footer class="sozi-ui__footer">
<div class="container">
<div class="grid">
<div class="col-12 col-md-4">
<ul class="sozi-ui__footer-menu">
<li>
<a href="#lorem">
Aliquip ex ea commodo
</a>
</li>
<li>
<a href="#lorem">
Aliquip ex ea commodo
</a>
</li>
<li>
<a href="#lorem">
Aliquip ex ea commodo
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script async src="/js/menu.js"></script>
</body>
</html>