<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Galerie Layout 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
/*Überschriften - font-family: 'Dosis';*/
@import 'https://fonts.googleapis.com/css?family=Dosis';
@import 'https://fonts.googleapis.com/css?family=Dosis:700';
/*Fließtext - font-family: 'Ek Mukta';*/
@import 'https://fonts.googleapis.com/css?family=Ek+Mukta';
/*Zahlen* - font-family: 'Merriweather';*/
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
min-width: 0;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
}
}
/*Schriften*/
@media all {
html {
font-family: Sans-Serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Dosis';
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0 0 0;
}
h2, h3, h4, h5, h6 {
font-family: 'Dosis';
font-size: 1rem;
margin: 0.5rem 0 0 0;
}
p, li, dl, dt, a, address {
font-family: 'Ek Mukta';
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0 0 0;
}
figcaption {
font-family: 'Ek Mukta';
font-size: 0.9rem;
margin: 0.5rem 0 0 0;
}
}
/*Navigation footer*/
@media all {
footer p>a,
footer p>a:link,
footer p>a:visited {
background-color: transparent;
color: blue;
text-decoration: none;
outline: none;
}
footer p>a:hover,
footer p>a:focus,
footer p>a:active {
background-color: antiquewhite;
color: blue;
text-decoration: underline;
outline: none;
}
}
@media all {
footer p>a::before {
font-family: FontAwesome;
font-size: 0.8rem;
content: "\f08e";
display: inline-block;
padding-right: 0.3rem;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 0;
max-width: 100%;
margin: 0;
}
img {
/*text-align: bottom;*/
min-width: 0;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0;
}
}
/*Spezielle Einstellungen*/
@media all {
.galerie {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.galerie section {
padding: 0.5rem;
border: 1px solid gray;
border-radius: 0.5rem;
margin: 1rem 0.5rem 0 0.5rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 1rem);
}
.galerie img {
border-radius: 0.5rem;
}
.galerie h2 {
font-family: 'Ek Mukta';
margin: 0.5rem 0.3rem 0 0.3rem;
}
.galerie p {
margin: 0 0.3rem;
}
.galerie section {
min-width: 14rem;
max-width: 25rem;
display: flex;
}
.galerie section div:nth-child(1) {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 1rem);
}
.galerie section div:nth-child(2) {
padding-left: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 2rem);
}
}
/*Flexbox für IE*/
/*-ms-flex-preferred-size: calc(50% - 1rem);*/
/*Vorlage für das gesamte CSS*/
@media all {
}
/*Vorlage zum Kopieren für Media Queries - Mobile first*/
@media only screen and (min-width: 0px) {
}
/*Vorlage zum Kopieren für Media Queries - Desktop first*/
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<header>
<h1>benbalthasar: Layout</h1>
</header>
<nav>
</nav>
<main>
<p>Es sollen Bilder mit jeweils zugehörigen Titel und Datum angezeigt werden. Rechts daneben dann jeweils ein oder mehrere Dateinamen.</p>
<article class="galerie">
<section>
<div>
<img src="http://lorempixel.com/600/400/sports/5" alt="Beispielbild">
<h2>BMX-Rennen</h2>
<p>August 2016</p>
</div>
<div>
<p>img05.jpg</p>
</div>
</section>
<section>
<div>
<img src="http://lorempixel.com/600/400/sports/2" alt="Beispielbild">
<h2>Surfen</h2>
<p>Mai 2010</p>
</div>
<div>
<p>img02.jpg</p>
<p>img04.jpg</p>
</div>
</section>
<section>
<div>
<img src="http://lorempixel.com/600/400/sports/3" alt="Beispielbild">
<h2>Radrennen</h2>
<p>November 2011</p>
</div>
<div>
<p>img03.jpg</p>
<p>img23.jpg</p>
<p>img33.jpg</p>
<p>img43.jpg</p>
<p>img53.jpg</p>
<p>img63.jpg</p>
<p>img73.jpg</p>
<p>img83.jpg</p>
<p>img93.jpg</p>
<p>img103.jpg</p>
</div>
</section>
<section>
<div>
<img src="http://lorempixel.com/600/400/sports/6" alt="Beispielbild">
<h2>Fußball</h2>
<p>Mai 2016</p>
</div>
<div>
<p>img06.jpg</p>
</div>
</section>
</article>
</main>
<footer>
</footer>
</body>
</html>
