<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
background-image: url(http://www.vako.bplaced.net/Mathematik.png);
background-attachment: fixed;
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
background-color: hsla(360, 0%, 100%, 1);
width: 80%;
padding: 0.5rem 1rem;
margin: 2rem auto;
}
h1 {
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin-bottom: 1.5rem;
}
h2, h3, h4, h5, h6 {
font-size: 1rem;
}
p, li, dl, dt {
font-size: 1rem;
}
figcaption {
font-family: 'Amiri';
font-size: 0.9rem;
}
figure {
margin: 0;
min-width: 0;
}
img {
display: block;
max-width: 100%;
max-height: 100vh;
border: 0;
}
footer {
border-top: 3px solid silver;
}
footer p {
text-align: right;
}
}
@media only screen and (max-width: 800px) {
html {
background-color: #fff;
background-image: none;
}
body {
width: 98%;
padding: 2rem 0;
margin: 0 auto;
}
h1 {
letter-spacing: 0;
}
}
}
</style>
</head>
<body>
<main>
<h1>Flächenberechnung von einem Rechteck</h1>
<h2>Eine allgemeine Information über die Flächenberechnung von einem Rechteck</h2>
<p>Zuerst was Allgemeines über einen Rechteck.</p>
<p>Die gegenübber liegende Seiten von einem Rechteck sind Gleich lang.</p>
<p>Alle Winkeln von ein em Rechteck sind 90°.</p>
<figure>
<img src="http://www.vako.bplaced.net/Rechteck.png" alt="Rechteck">
</figure>
<h2>Beispiel Aufgaben für die Berechnung von einen Rechteck</h2>
<p>Jetzt machen wir eine aufgabe für Flächenberechnung von einem Rechteck.</p>
<p>Die Formel lautet: A=a*b.</p>
<figure>
<img src="http://www.vako.bplaced.net/Rechteck.2.png" alt="Rechteck">
</figure>
<p>Jetzt machen wir eine Textaufgabe für Flächenberechnung von einem Rechteck.</p>
<p>Ein rechteckiger Bauplatz ist 255 m² groß. Eine Seite ist 17 m lang.</p>
<p>Wie lang ist die andere Seite?</p>
</main>
<footer>
<p><a href="http://www.vako.bplaced.net/">vako.bplaced.net</a></p>
</footer>
</body>
</html>
