simple.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> Simple page for all device sizes </title>
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/simple.css">
</head>

<body>

	<h1>A simple page for all device sizes</h1>

	<p>The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible units of measurement in CSS (such as rem and percent), as well as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">max-width</a>, makes this possible. Keep in mind the <a href="https://baymard.com/blog/line-length-readability">optimal line length</a> for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5rem (or 150%) makes it reasonable.</p>

	<p>No <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a> is required here, because the CSS adapts to any screen size.</p>

	<img src="images/sita.jpg" alt="Sita">

	<p>Ravana carries Sita away to Lanka, where Sita is kept under the heavy guard of rakshasis. Ravana demands Sita marry him, but Sita, eternally devoted to Rama, refuses. Rama and Lakshmana learn about Sita's abduction, and immediately set out to save her. During their search, they meet the demon Kabandha and the ascetic Shabari, who direct them towards Sugriva, the monkey king, and Hanuman.*</p>

	<img src="images/rama.jpg" alt="Rama">

	<p>Having received Hanuman's report on Sita, held prisoner in Lanka, Rama and Lakshmana proceed with their allies towards the shore of the southern sea. There they are joined by Ravana's renegade brother Vibhishana. The monkeys construct a giant floating bridge across the ocean, and the princes and their army cross over to Lanka. A lengthy battle ensues, in which Rama eventually kills Ravana.*</p>

	<p>Below is a screenshot of the page as it would appear on an iPhone 6, rendered by Chrome Dev Tools.</p>

	<img src="images/screenshot.png" alt="Screenshot">


	<p class="centered"><a href="index.html">index</a> | <a href="https://github.com/macloo/html_css_templates">GitHub</a><br>
	* Text adapted from Wikipedia entry <a href="http://en.wikipedia.org/wiki/Ramayana">Ramayana</a>.</p>


</body>
</html>