Wie kann ich das mit HTML und CSS umsetzen? Würde mich sehr über Antworten freuen.
<img class="vorschau" src="image/erstellen-einer-startseite.jpeg">
Code
<style>
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
.infobox {
margin-top: 30px;
width: 80%;
display:flex;
flex-direction:column;
}
.titel h2{
height: 40px;
color: yellow;
line-height: 40px;
background-color: orange;
padding-left: 1em;
border-radius:10px;
}
.inhalt p{
min-height: 100px;
background: yellow;
line-height: 1.6em;
padding: 1em;
border-radius:10px;
}
</style>
<body>
<div class="infobox">
<div class="titel">
<h2>News aus der Stadt</h2>
</div>
<div class="inhalt">
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
</div>
</div>
<div class="infobox">
<div class="titel">
<h2>........................</h2>
</div>
<div class="inhalt">
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
</div>
</div>
</body>