<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Photoalben</title>
<meta name="description"">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(
http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
/*Überschriften - font-family: 'Roboto Slab', Serif;*/
@import url(
https://fonts.googleapis.com/css?family=Roboto+Slab);
/*Fließtext - font-family: 'Roboto', Sans-Serif";*/
@import url(
https://fonts.googleapis.com/css?family=Roboto);
/*Zahlen* - font-family: 'Merriweather';*/
@import url(
https://fonts.googleapis.com/css?family=Merriweather);
/*Basisangaben*/
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
/*box-sizing: border-box;*/
min-width: 1px;
}
html {
}
body {
padding: 1rem 0.5rem 2rem 0.5rem;
margin: 0rem 0rem 0rem 0rem;
}
}
/*Schriften*/
@media all {
html {
font-family: sans-serif;
font-size: 150%;
line-height: normal;
}
h1 {
font-family: 'Felix titling', serif;
font-size: 36px;
color: #800000;
letter-spacing: 0.5rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/*darkblue*/
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
}
/*body*/
@media all {
body {
background-color: #3366FF;
}
}
@media only screen and (min-width: 1000px) {
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
/*.pageheader*/
@media all {
.pageheader {
background-color:
#63B8FF;
border: 1px solid black;
}
.pageheader h1 {
text-align: center;
}
}
@media only screen and (min-width: 1000px) {
.pageheader {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(50% - 0rem - 2px - 0rem);
}
}
/*.navigation*/
@media all {
.navigation {
background-color: #63B8FF;
padding: 0.5rem;
margin: 1.rem 0rem;
}
.navigation p {
text-align: center;
}
.navigation a {
color: #B22222;
font-weight: bold;
}
}
a:hover {
background-color: #CEECF5;
}
/*.navigation*/
@media all {
.navigation {
background-color: #63B8FF;
padding: 0.5rem;
margin: 0.5rem 0rem;
}
.navigation p {
text-align: center;
}
.navigation a {
color: #B22222;
font-weight: bold;
}
}
a:hover {
background-color: #FFC1C15;
}
@media only screen and (min-width: 1000px) {
.navigation a,
.navigation a:visited {
display: block;
color: #483d8b;
font-weight: bold;
padding: 0.3rem;
border: 1px solid black;
border-radius: 0.3rem;
}
.navigation a:hover,
.navigation a:active,
.navigation a:focus {
background-color: black;
color: gold;
}
/*.content*/
@media all {
.content {
background-color: #63B8FF;
border: 2px solid black;
padding: 0.5rem;
margin: 0.5rem 0rem;
}
.content h2 {
color: ;
text-align: center;
}
.content figure {
max-width: 600px;
margin: 0rem auto;
}
}
@media only screen and (min-width: 1000px) {
.content {
margin: 0.5rem 1rem;
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem);
}
}
/*.pagefooter*/
@media all {
.pagefooter {
padding: 0.5rem;
border: 2px solid black;
margin: 0.5rem 0rem;
}
}
}
/*Vorlagen zum Kopieren*/
/*CSS*/
@media all {
}
@media only screen and (min-width: 0px) {
}
@media only screen and (max-width: 0px) {
}
.Stil1 {color: #000}
h2 {
font-size: 1px;
}
h3 {
font-size: 1px;
}
h4 {
font-size: 1px;
}
h5 {
font-size: 1px;
}
h6 {
font-size: 1px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<header class="pageheader">
<h1 class="pageheader">Photoalben</h1>
<p align="center"><a href="http://guenter-leipfinger.de/photoalben/ahrntal/album/index.html">Ahrntal</a></p>
<p align="center"> </p>
<p align="center"><a href="http://guenter-leipfinger.de/photoalben/Winter/album/index.html">Winter</a></p>
<p align="center"> </p>
<p align="center"><a href="http://guenter-leipfinger.de/photoalben/Korfu/album/index.html">Korfu</a></p>
<p align="center"> </p>
<p align="center"><a href="http://guenter-leipfinger.de/photoalben/Wien/album/index.html">Wien, Wien nur Du allein</a></p>
<p align="center"> </p>
<p align="center"><a href="http://guenter-leipfinger.de/photoalben/Eng/album/index.html">Ein Ausflug in die Eng</a></p>
<p align="center"> </p>
<p align="center"><a href="http://guenter-leipfinger.de/photoalben/Foto-Kunst/album/index.html">Fotokunst </a></p>
<p align="center"> </p>
<p align="center"><a href="http://guenter-leipfinger.de/index.html">zurück zur Übersicht </a></p>
</header>
