Kann mir einer bei diesen Layout helfen
Habe beim Googeln dieses Bild gefunden.
Kann man das mit HTML und CSS umsetzen oder ist das ein Fake Bild
Kann man das mit HTML und CSS umsetzen oder ist das ein Fake BildDer hier verwendete Code
<!doctype Html>
<html lang="de">
<head>
<style>
*{
margin:0;
padding:0;
overflow:hidden;
}
body{
display:flex;
flex-direction:column;
}
main{
display:flex;
min-height:calc(100vh - 40px - 40px);
}
nav{
background:green;
height:40px;
}
#left{
flex:4;
}
#rechts {
flex:1;
background:yellow;
}
footer{
background:blue;
height:40px;
}
input{
position:absolute;
left:-1220px;
}
.img1,.img2,.img3{
width:calc(100% - 20px);
height:calc(100% - 20px);
margin:10px;
display:none;
}
#helfer{
width:70%;
height:100%;
float:right;
position:relative;
top:-92%;
background:blue;
}
#all,form{
width:100%;
height:100%;
}
#lab1,#lab2,#lab3{
height:29.6%;
width:30%;
display:block;
cursor:pointer;
border:2px solid black;
background-size:100% 100%;
background-repeat:no-repeat;
background-image:url('/image/placeholde_400x236.png');
}
#bild1:checked ~ #helfer .img1{
display:block;
}
#bild2:checked ~ #helfer .img2{
display:block;
}
#bild3:checked ~ #helfer .img3{
display:block;
}
</style>
</head>
<body>
<nav>
Navigation
</nav>
<main>
<div id="left">
<div id="all">
<form>
<input type="radio" name="checken" id="bild1"> <label for="bild1" id="lab1"></label>
<input type="radio" name="checken" id="bild2"> <label for="bild2" id="lab2"></label>
<input type="radio" name="checken" id="bild3"> <label for="bild3" id="lab3"></label>
<div id="helfer">
<img class="img1" alt="Alan: The eBay OAP" src="/image/placeholde_400x236.png">
<img class="img2" title="Foley work" alt="" src="/image/placeholde_400x236.png">
<img class="img3" title="I Am Your Father" alt="" src="/image/placeholde_400x236.png">
</div>
</form>
</div>
</div>
<div id="rechts">
</div>
</main>
<footer>
fotter
</footer>
</body>
</html>