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
Kommentar abgeben zu diesen Beitrag/Code ?
Dann 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>