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>