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
Kommentar abgeben zu diesen Beitrag/Code ?
Kann man das mit HTML und CSS umsetzen oder ist das ein Fake BildDann hier klicken
Der 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>