Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Kann mir einer bei diesen Layout helfen

Kann mir einer bei diesen Layout helfen

Habe beim Googeln dieses Bild gefunden. bild Kann man das mit HTML und CSS umsetzen oder ist das ein Fake Bild

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>