Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <title>Titre du document</title> <head> <style> #gallery { width: 600px; overflow: hidden; position: relative; z-index: 1; margin: 100px auto; border: 2px solid #003c72; } #navigation { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; } #navigation li { padding: 0; margin: 0; margin: 5px 0 20px; } #navigation li a img { display: block; border: none; } #navigation li a { display: block; } #full-picture { width: 600px; height: 375px; overflow: hidden; float: left; } #full-picture img { width: 100%; } </style> </head> <body> <div id="gallery"> <ul id="navigation"> <li> <a href="#picture1"> <img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" /> </a> </li> <li> <a href="#picture2"> <img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" /> </a> </li> <li> <a href="#picture3"> <img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" /> </a> </li> <li> <a href="#picture4"> <img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" /> </a> </li> </ul> <div id="full-picture"> <div> <a name="picture1"></a> <img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" /> </div> <div> <a name="picture2"></a> <img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" /> </div> <div> <a name="picture3"></a> <img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" /> </div> <div> <a name="picture4"></a> <img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" /> </div> </div> </div> </body> </html>