Untitled

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<title>einfaches Box-Layout</title>
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
		<style>
			body {
				font-family: 'Open Sans', sans-serif;
				font-size:100%;
				font-weight:400;
				line-height:1.6;
				}

			 p {
                padding-left: 75px;
                font-size: 0.875em;
               }

            #wrapper{
                width:800px;
                margin: auto;
                    }

            header{
                background-color:darkgrey;
                padding:11px;
                text-decoration: none
                  }

			article {
                background-color: #99cc99;
                padding: 25px;
                border: dotted silver 1px;
                margin-bottom: 6px;
            }

            #bild1 {
				margin-right:12px;
				margin-bottom:12px;
				border:1px dotted silver;
				}

			h1 {
				font-size:1.6em;
				margin: 20px 25px 20px 100px;
                color: white
				}

			h2 {
                font-size: 2em;
				margin: 28px 0 0px ;
				padding-left: 75px;
               }

             nav{
                background-color: #e6e6e6;
                margin:4px 0;
                /* oben/unten links/rechts */
                padding:0 12px;
            }

            nav ul{
                padding:0;
                margin:auto
                list-style: none;
            }

            nav ul li{
                display:inline-block;
            }

            nav ul li a{
                display:block;
                padding:8px 12px;
                text-decoration: none;
                color:black;

            }

            nav ul li a:hover{
                background-color:black;
                color:white;
            }
		</style>
	</head>
	<body>

    <div id="wrapper">

        <header>
            <h1>Header</h1>
        </header>

          <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </nav>

   		<section>
			<article>

			<h2>Gesellschaft verstehen</h2>

			<h3>Unbekannte Realitäten</h3>

			<p>Wir leben in einer Welt und sind umgeben von Entwicklungen und Phänomen, die wir nicht verständlich einordnen können. Wie können wir uns unsere Welt erklären? Welche Möglichkeiten für Erklärungen stehen uns zur Verfügung?</p>

			<p>Gesellschaft steht vor der Herausforderung der Gleichzeitigkeit von Differenzierung und Kopplung. Welche Bedeutung hat dies zukünftig für Politik, Wirtschaft, Wissenschaft, Kultur, Recht, Religion, etc.? Welche Entwicklungen sind zu erahnen und welchen Einfluss werden diese auf Menschen und die sozialen Strukturen nehmen?</p>
			<img src="images/ges_verst.jpg" alt="Gesellschaft verstehen">

			</article>

		<article>
			<h2>Gesellschaft intervenieren</h2>

			<h3>Evolution trifft Revolution</h3>

			<p>Wir nehmen alle Anteil an Gesellschaft, tragen zu ihrem Fortbestehen bei und doch stellt sich für uns die Frage nach einer wirksamen Beteiligung.</p>

			<p>Wie kann auf gesellschaftliche Entwicklungen Einfluss genommen werden und wie auch gerade nicht? Welche Werte spielen für Zukunft eine Rolle und wie entfalten sie ihre Wirksamkeit? Was kann Mensch bewegen und was können soziale Strukturen für eine lebenswerte Zukunft beitragen?</p>
			<img src="images/ges_int.jpg" alt="Gesellschaft intervenieren">
		</article>
        </section>
      </div>
	</body>
</html>