<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reaktionsfähiges Layout mit veränderbarer Größe der Webseite</title>
<style>
:root {
--weiss: #fff;
--grau: #333;
--blau: #1c87c9;
}
*, *:before, *:after {
box-sizing: border-box;
}
html {
font-family: "Lucida Sans", sans-serif;
}
img {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: table;
}
.menu, .content {
float: left;
padding: 15px;
width: 100%;
}
@media only screen and (min-width: 600px) {
.menu {width: 25%;}
.content {width: 75%;}
}
@media only screen and (min-width: 768px) {
.menu {width: 20%;}
.content {width: 79%;}
}
.header {
background-color: #1c87c9;
color: #ffffff;
padding: 10px;
text-align: center;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#666666;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #1c87c9;
}
.footer {
background-color: #1c87c9;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
.menu li, .menu a {
text-decoration: none;
color: var(--weiss);
transition: .5s ease-in-out;
}
.menu li:hover,
.menu li:hover a {
color: var(--grau);
background: var(--weiss);
}
.menu li.active,
.menu li.active a {
color: var(--weiss);
background: var(--blau);
}
</style>
</head>
<body>
<div class="header">
<h1>chur@work</h1>
</div>
<div class="row">
<div class="menu">
<ul>
<li class="active"><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
</ul>
</div>
<div class="content">
<h2>über uns</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="./bild.jpg" alt="hier sollte ein Bild dargestellt werden"/>
</div>
</div>
<div class="footer">
<p>Ändern Sie die Größe des Browserfensters, um zu sehen, wie der Inhalt auf die Größenänderung reagiert.</p>
</div>
</body>
</html>
