ungleich-public/public-health-ch
6
1
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity
public-health-ch/publichealth/static/mockup/index.html

226 lines
7.6 KiB
HTML
Raw Normal View History

Added frontpage mockup
2016-12-22 14:43:25 +00:00
<!DOCTYPE HTML>
<html lang="de-CH">
<head>
<title>Public Health Schweiz</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/slick/slick.css" />
<link rel="stylesheet" href="assets/slick/slick-theme.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="index.html" class="logo"><strong>Public Health</strong> Schweiz</a>
<nav id="nav">
<a href="index.html">Wilkommen</a>
<a href="#">Agenda</a>
<a href="#footer">Kontakt</a>
</nav>
<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars"></span></a>
</div>
</header>
<!-- Banner -->
<section id="banner">
<div class="inner">
<!--<header>
<h1>Welcome to public-health.ch</h1>
</header>-->
<div class="banner fade">
<div>
<image style="background-image:url(images/banner_1.jpg)"/>
<h3>Swiss Public Health Conference 15. November 2016 in Bern</h3>
<p>Die Swiss Public Health Conference 2016 ist erfolgreich zu Ende gegangen. Wir bedanken uns bei Ihnen an dieser Stelle für Ihre engagierte Teilnahme und die vielen angeregten Gespräche während der Konferenz.</p>
</div>
<div>
<image style="background-image:url(images/banner_0.jpg)"/>
<h3>Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet</h3>
<p>Die Ständeräte Hans Stöckli und Joachim Eder sowie die Nationalrätin Ruth Humbel haben die Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet. Ziel ist es, das Thema NCD in der Schweizer Politik nachhaltig zu verankern. </p>
</div>
<div>
<image style="background-image:url(images/banner_2.jpg)"/>
<h3>Wirksamer Schutz der Kinder und Jugendlichen vor Tabakkonsum rückt in weite Ferne </h3>
<p>National- und Ständerat finden, dass die wenigen heute geltenden Einschränkungen für Tabakwerbung genügen. Dabei verkennen sie jedoch, dass die omnipräsente Tabakwerbung insbesondere auf Kinder und Jugendliche einen grossen Einfluss hat – und oft auch auf diese ausgerichtet ist.</p>
</div>
</div>
<footer>
<p>Public Health Schweiz ist die unabhängige, nationale Organisation, die die Anliegen der Public-Health-Fachleute vertritt, ein themen- und disziplinenübergreifendes gesamtschweizerisches Netzwerk in Public Health bietet, sich für optimale Rahmenbedingungen für die Gesundheit der Bevölkerung in der Schweiz engagiert und Entscheidungsträgerinnen und Entscheidungsträger fachlich unterstützt. Public Health Schweiz stützt ihr Handeln auf wissenschaftlicher Basis ab.</p>
</footer>
</div>
</section>
<!-- Three -->
<section id="three" class="wrapper align-center">
<div class="inner">
<div class="flex flex-2">
<article>
<div class="image round">
<img src="images/ipad.jpg" alt="Pic 01" />
</div>
<header>
<h3>Über uns</h3>
</header>
<p>Werden Sie jetzt Mitglied von Public Health Schweiz und profitieren Sie von vielen Vorteilen und Vergünstigungen. Als Mitglied tragen Sie zudem dazu bei, dass sich Public Health Schweiz weiterhin für die Anliegen der Public-Health-Fachleute einsetzen kann.</p>
<footer>
<a href="#" class="button">Mitglied werden</a>
</footer>
</article>
<article>
<div class="image round">
<img src="images/konf.jpg" alt="Pic 02" />
</div>
<header>
<h3>Veranstaltungen</h3>
</header>
<p>An unseren Konferenzen und Symposien können Sie erfahren, wie sich die entsprechenden Versorgungsstrukturen in der Schweiz vorbereiten können und welche Erfahrungen und Best-Practice-Beispiele bereits vorliegen.</p>
<footer>
<a href="#" class="button">Kommende Symposien</a>
</footer>
</article>
</div>
<div class="flex flex-2" style="margin-top:4em">
<article>
<div class="image round">
<img src="images/steth.jpg" alt="Pic 02" />
</div>
<header>
<h3>Projekte und Aktivitäten</h3>
</header>
<p>Public Health Schweiz will Prävention und Gesundheitsförderung stärken. Durch unsere Aktionen und Stellungsnahmen treten wir für dieses Ziel ein und stehen damit immer im Zentrum der Aktualität.</p>
<footer>
<a href="#" class="button">Unterstützen</a>
</footer>
</article>
<article>
<div class="image round">
<img src="images/lit.jpg" alt="Pic 02" />
</div>
<header>
<h3>Informationen zu Public Health</h3>
</header>
<p>Hier finden Sie Links zu wichtigen Institutionen und Organisationen aus dem Public Health Bereich. Die Liste erhebt keinen Anspruch auf Vollständigkeit. Gerne nehmen wir Ihre Anregungen und Ergänzungsvorschläge entgegen.</p>
<footer>
<a href="#" class="button">Mehr erfahren</a>
</footer>
</article>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h3>Kontakt</h3>
<form action="#" method="post">
<div class="field half first">
<label for="name">Name</label>
<input name="name" id="name" type="text" placeholder="">
</div>
<div class="field half">
<label for="email">E-mail</label>
<input name="email" id="email" type="email" placeholder="">
</div>
<div class="field">
<label for="message">Anfrage</label>
<textarea name="message" id="message" rows="6" placeholder=""></textarea>
</div>
<ul class="actions">
<li><input value="Senden" class="button alt" type="submit"></li>
</ul>
</form>
<div class="copyright">
&copy; 2016 Public Health Schweiz
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/slick/slick.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script>
$('.banner.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
</script>
<style>
#header .logo {
font-size: 0px;
background: url(images/public-health-logo.png) no-repeat top left;
width: 350px; height: 100px;
background-size: 100% auto;
}
#banner .inner {
padding-top: 1em;
Mockup updated
2017-01-11 12:52:27 +00:00
border-top: none;
Added frontpage mockup
2016-12-22 14:43:25 +00:00
}
#banner h3, #banner p, #header a, #banner button {
color: #333;
}
.slick-prev::before, .slick-next::before {
color: inherit;
}
.slick-dots li button {
box-shadow: none;
}
#banner:before {
background: #e0e0e0;
}
#banner p, #banner h3 {
margin: 0 10%;
}
#banner p {
font-size: 90%;
text-align: left;
color: #777;
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
.banner.fade img {
margin-bottom: 1em;
width: 100%;
height: 500px;
overflow: hidden;
display: block;
background-size: cover;
}
#banner {
padding-bottom: 4em;
}
#banner footer p {
color: black;
text-align: left;
font-size: 110%;
margin-top: 4em;
}
#three img {
width: 300px; height: 300px;
}
</style>
</body>
</html>
Reference in a new issue Copy permalink