Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hamburg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hamburg</title>
</head>
<html>
<body>
<div class="container">
<h1>Hamburg</h1>
<div class="main">
<div>
<div>
<h2>Zweitgrößte Stadt Deutschlands</h2>
</div>
<div>
<h2>1,8 Millionen Einwohner</h2>
</div>
<div>
<h2>An Alster & Elbe</h2>
</div>
<div>
<h3>Mehr erfahren</h3>
</div>
</div>
</div>
<div class="more">
<div id="sights">
<h3>Sehenswürdigkeiten</h3>
</div>
<div id="events">
<h3>Veranstaltungen</h3>
</div>
</div>
<div id="footer">Kontakt</div>
</div>
</body>
</html>
h1 {
width: 100%;
font-weight: lighter;
text-align: center;
width: 100% ;
font-size: 40px;
color:indianred;
}
h2 {
display: inline-block;
text-align: center;
background-color: indianred;
padding: 3px;
margin: 5px;
font-size: 28px;
color: white;
}
h3 {
display: inline-block;
font-weight: bold;
background-color: white;
text-align: center;
padding: 10px;
color: indianred;
}
.container {
min-width: 775px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main {
background-size: cover;
min-width: 964px;
min-height: 422px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-image: url("https://abload.de/img/hamburgvyk99.jpg");
}
.more {
display: flex;
justify-content: center;
align-items: center;
padding-top: 45px;
}
.more div {
background-size: cover;
min-width: 450px;
min-height: 345px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 30px;
margin-left: 30px;
}
#sights {
background-image: url("https://abload.de/img/sehenswuerdigkeiteng6jig.jpg");
}
#events {
background-image: url("https://abload.de/img/veranstaltungensbjlz.jpg");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.