Hallo Freunde bitte um Hilfe, möchte mir eine HP basteln, wo der Header wie im Bild ist.
Habe eine HP gefunden, wie ich es mir vorstelle, das ganze auch Handy tauglich.
<img class="vorschau" src="image/header-mit-logo.jpg" alt="bild">
Code
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Schloss Grades</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
</head>
<style>
* {
margin:0;
padding:0;
}
body{
min-height:100vh;
display:flex;
flex-direction:column;
color: #275327;
}
header img {
max-width: 100%;
height: auto;
}
nav,header{
background:#224b22;
}
nav.deskop{
height:100px;
display:block;
width:100vw;
max-width:900px;
margin:0 auto;
}
.deskop ul{
display:flex;
}
.deskop li{
flex:1;
}
.deskop ul li:not(.mitbild){
border-bottom:1px solid #6f2f2f;
}
.deskop ul li{
list-style:none;
padding-top:30px;
height:50px;
}
nav ul li a{
text-align:center;
text-decoration:none;
display:block;
color:white;
width:100%;
font-size:14px;
}
nav ul li a:hover{
color:red;
}
.handy{
position:absolute;
left:0;
top:40px;
z-index:0;
border:1px solid black;
width:200px;
}
.handy li a{
height:20px;
border-bottom:1px solid black;
}
nav ul li img{
width:150px;
top:-60px;
position:relative;
}
.mitbild{
margin-top:0px;
}
.handy{
display:none;
}
@media only screen and (max-width: 860px){
nav.deskop{
display:none;
}
nav.handy{
display:none;
}
#han:checked ~ .handy{
display:block;
}
.mitbild1{
width:200px;
position:absolute;
left:calc(50vw - 100px);
background:rgba(0,0,0,0.0);
}
.mitbild1 img{
height:140px;
background:rgba(0,0,0,0.0);
}
}
@media only screen and (min-width: 861px){
nav.deskop{
display:block;
}
nav.handy{
display:none;
}
.mitbild1{
display:none;
}
label{
display:none;
}
}
input{
display:none;
}
label span{
color:white;
width:40px;
height:40px;
font-size:30px;
}
main{
background: #F6F7F9;
margin:0 auto;
font-size: 18px;
font-family: Georgia, 'Times New Roman', Times, Serif;
font-weight: normal;
font-style: normal;
width: 100%;
min-height: 100%;
}
article {
margin:0 auto;
padding: 15px;
width:100%;
color: #275327;
text-align:center;
}
footer{
background:#224b22;
border-top:2px solid #B4B6B4;
color: #F0F0F0;
font-size: 13px;
font-family: Georgia, 'Times New Roman', Times, Serif;
padding: 5px;
}
footer p{
text-align:center;
}
footer .weg{
text-align:center;
}
footer .line{
justify-content: center;
}
@media only screen and (min-width: 861px){
footer{
display:flex;
}
.line{
display:flex;
flex:10;
}
.weg2{
flex:1;
}
}
@media only screen and (max-width: 860px){
footer{
display:flex;
flex-direction:column;
}
.weg2{
display:none;
}
.line{
display:flex;
width:100%;
}
.line p{
width:45%;
font-size:18px;
}
}
@media only screen and (max-width: 661px){
fotter,.line{
display:flex;
flex-direction:column;
}
.weg{
display:none;
}
footer .line,.line p{
text-align:center;
width:100%;
font-size:20px;
}
}
</style>
<body>
<header>
<nav class="deskop">
<ul>
<li><a href="#">STARTSEITE</a></li>
<li><a href="#"> ANGEBOTE</a></li>
<li><a href="#">GESCHICHTE</a></li>
<li class="mitbild">
<img src="/image/Header_viele-Bilder_nicht-IWMB_0000_Ebene-1.jpg" alt="bild">
</li>
<li><a href="#"> KINDERECKE</a></li>
<li><a href="#">Gruppen und Events</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>
</nav>
<div class="mitbild1">
<img src="/image/bplaced.png" alt="bild">
</div>
<input type="checkbox" id="han">
<label for="han"><span>☰</span></label>
<nav class="handy">
<ul>
<li><a href="#">STARTSEITE</a></li>
<li><a href="#"> ANGEBOTE</a></li>
<li><a href="#">GESCHICHTE</a></li>
<li><a href="#"> KINDERECKE</a></li>
<li><a href="#">Gruppen und Events</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<img src="/image/bplaced.png" alt="bild">
</header>
<main>
<article>
<h3><b>HERZLICH WILLKOMMEN AUF SCHLOSS GRADES – DEM HISTORISCHENZENTRUM IM METNITZTAL</b></h3>
<p>Besuchen Sie uns im Rahmen einer kulturellen Veranstaltung. Mieten Sie die historischen Prunkräume für Ihre Familien – oder Firmenfeier. Für Hochzeiten bieten wir unser komplettes Service rund um die Organisation an. Ein reichhaltiges Programm an Kunst, Kultur und Kulinarik lädt ein, das mystische Metnitztal in all seinen Facetten kennen zu lernen. Kommen Sie zu einer Führung und erfahren Sie etwas über das Leben im Schloss, die Restaurierung, Besonderheiten und Herausforderungen im Umgang mit dem historischen Erbe.
</p>
<p>Erleben Sie selbst, wenn auch nur für wenige Stunden das Gefühl Schlossherrin oder Schlossherr <br>in einem der schönsten Schlösser Kärntens zu sein.</p>
<p><a href="#.php" target="_parent">»»» News - Aktuelles - Events «««</a></p>
<p>Zurzeit befindet sich Schloss Grades im Winterschlaf es gehört jetzt ausschließlich den Schlossgeistern, den Fledermäusen, Rehen und Turmfalken. Wir freuen uns, Sie im Frühjahr wieder begrüßen zu dürfen!</p>
<p><b>Öffnungszeiten:</b></p>
<p>Führungen von April bis Oktober nach Voranmeldung.<br> Für Anfragen aller Art ersuchen wir um Kontaktaufnahme unter:<br> +43123/456789
<br> oder
<br>
<a href="mailto:info@schloss-grades.com?subject=">info@gmx.at</a>
</p>
<br>
</article>
</main>
<footer>
<div class="line">
<p>Herausgeber: Erhaltungs-GmbH</p>
<span class="weg weg1">- - -</span>
<p>Für den Inhalt verantwortlich: XY</p>
</div>
<span class="weg weg2">- - -</span>
<div class="line">
<p>Design und Layout: XY</p>
<span class="weg weg3">- - -</span>
<p>Aktualisiert am: 23. Jänner 2020</p>
</div>
</footer>
</body>
</html>