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

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('//placehold.it/400x215'); } #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="//placehold.it/400x215"> <img class="img2" title="Foley work" alt="" src="//placehold.it/400x225"> <img class="img3" title="I Am Your Father" alt="" src="//placehold.it/400x235"> </div> </form> </div> </div> <div id="rechts"> </div> </main> <footer> fotter </footer> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!