# Overworld Website - https://app.dework.xyz/m3/m3ta?taskId=7a3e56f3-cf7d-45ce-bba0-cbc72eed89f6 - https://github.com/M3-org/website - https://sketchfab.com/m3org/models ![image](https://hackmd.io/_uploads/H1YNFGsQa.png) Using GPT4 Vision to convert this image to instructions on making a simple static HTML website > ME: Please convert this creative website layout into HTML and CSS code. Each building and label should be its own element with hover effects, and hyperlink to a URL **CHATGPT:** To create a webpage based on the provided image, we would first slice the image into separate images for each building and label. Then, we would use CSS to position these images on a webpage and add hover effects and hyperlinks. However, I can't slice the image for you directly here, but I can provide you with a general guideline and example code to help you achieve this. **Image Slicing:** Use an image editor (like Photoshop, GIMP, or any online image editor) to slice the provided image into separate images for each building and label. **HTML & CSS:** Here's an example structure and style for two buildings. You can replicate this for all the other buildings: ```html! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website Layout</title> <style> body { background: url('path-to-background-image.jpg') no-repeat; width: 100%; height: 100vh; margin: 0; overflow: hidden; position: relative; } .building { position: absolute; transition: transform 0.3s; } .building:hover { transform: scale(1.05); cursor: pointer; } .mcdonalds-shop { top: 210px; left: 150px; width: 100px; height: 100px; background: url('path-to-mcdonalds-shop-image.png') no-repeat; } .petpet-shop { top: 50px; left: 50px; width: 100px; height: 100px; background: url('path-to-petpet-shop-image.png') no-repeat; } </style> </head> <body> <a href="mcdonalds-shop-url" class="building mcdonalds-shop"></a> <a href="petpet-shop-url" class="building petpet-shop"></a> <!-- ... add other buildings similarly ... --> </body> </html> ``` Notes: - Replace `path-to-background-image.jpg`, `path-to-mcdonalds-shop-image.png`, and `path-to-petpet-shop-image.png` with actual paths to your sliced images. - Adjust the top, left, width, and height properties for each building according to their positions and sizes in the image. - Add hyperlinks to each building by updating the href attribute of each anchor (`<a>`) tag. - Repeat the above steps for each building and label in the image to create a fully interactive layout. ## Assets For quick mockup can search sketchfab or clip art for the various assets, or use https://www.bing.com/images/create for sticker art. You can drag and drop the glb into https://playcanvas.com/viewer and download the png to get a nice shadow + transparent png. - safe (multisig bank) - Metafactory - https://sketchfab.com/3d-models/metafactory-truck-101bd0d014fd45ab90e7552aae89375d - discord channel - use discord icon - opensea marketplace - pirate ship or vending machine? - snapshot voting - see comments - M3 Mart - https://sketchfab.com/3d-models/m3-mart-833699c4a15b4d1ab3e3d79068972431 - GitHub - https://sketchfab.com/3d-models/3d-skill-role-badges-and-pins-e3329ed59b874aad98586657a5f11630 - Twitter / X - X logo on roof - Sketchfab Logo for link to our Sketchfab - Hyperfy HQ - OMI group building - https://sketchfab.com/3d-models/omi-diner-b8972d0fc33047c3b475e78b3f5a9183 - Internet Archive - https://sketchfab.com/3d-models/internet-archive-building-2d76cc9e714f42bb9d090af73074296a - Voxels Makers District - https://sketchfab.com/3d-models/metafactory-castle-f08c9c88d9974c80ba88c034c25b7738 - M3TV - https://sketchfab.com/3d-models/m3tv-soundstage-6206325ff5c643c9b1dd2ce5aadbec19 --- ## Thumbnails