<!DOCTYPE html>
<html>
    <title>Mustertext</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Standard um eine Seite responsive zu gestalten -->
<style>
body { 
    font-family: Angsana,Calibri,Arial; 
    display:block; 
    text-align:justify;     
/*justify wird bei Mobiltelefonen abgeschaltet,*/ 
/*weil die Silbentrennung bei schmalem Bildschirm fast unmöglich wird */   
    font-size:12pt;
    vertical-align:middle;
    margin-right:20px;
    max-width:800px;
    min-width:400px;
    width:50%;  /*Ein Text darf nicht zu breit sein, damit er gut lesbar bleibt - Angabe in % für responsive Seite*/
    background-color:white;
    }         
/*Der besseren Lesbarkeit wegen wurden alle einfachen spezifischen styles in den Text integriert*/
/*media-styles zur Begrenzung für Mobiltelefone stehen hier, es können auch mehrere Stufen ähnlich gestaltet werden*/
@media only screen and (max-width:599px) {
	body {
		 margin-right:0px;min-width:350px;width:80%;text-align:left;clear:left;
	}
}
</style>
</head>
<body>
<h2>Mein Tagebuch</h2>

<div style="float:left; margin-right:20px; margin-bottom:20px; border:solid 1px red; text-align:center">Jänner<br>
<span style="font-family:Algerian,serif; font-size:72pt; color:red">&nbsp;1&nbsp;</span></div>

<p style="font-size:120%">Am ersten Tag beginnt das Jahr  
mit allen guten und schlechten Vorsätzen. </p>

<p><strong>Allgemeiner Einleitungstext: ...</strong></p>
<p><small>Um das Floaten zu beginnen, wurde  float:left verwendet </small></p>

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.

<p style="clear:left"><strong>Hier beginnt dann das eigentliche Tagebuch: ...</strong></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p><small>Um das Floaten zu beenden, wurde  clear:left verwendet </small></p>

</div>
</body>
</html>