The Dream of Breakout Store - 创意想象

The Dream of Breakout Store

故事简介

Join Leo as he builds his very own fashion empire from the ground up in this inspiring tale of creativity and ambition. Witness the transformation of a simple idea into a vibrant community hub where style knows no bounds and every outfit tells a story.

评分:评分人数不足
语言:英文
发布日期:
阅读时间:1 分钟

关键词

生成提示词

<!DOCTYPE html> <html> <head> <title>Breakout Store</title> <style> body{ font-family: Arial; margin:0; background:#f5f5f5; } /* LEFT SIDEBAR */ .sidebar{ width:200px; height:100vh; background:#111; position:fixed; top:0; left:0; padding-top:20px; } .sidebar a{ display:block; color:white; padding:12px; text-decoration:none; font-weight:bold; } .sidebar a:hover{ background:red; } /* MAIN CONTENT */ .main{ margin-left:210px; } /* TOP NAVBAR */ .topnav{ background:white; padding:15px; text-align:center; font-size:20px; font-weight:bold; border-bottom:1px solid #ccc; } /* BANNER */ .banner{ display:flex; } .banner img{ width:25%; height:300px; object-fit:cover; } /* SECTION */ .section{ padding:20px; text-align:center; } .products{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; } .card{ background:white; padding:10px; width:200px; box-shadow:0 0 5px rgba(0,0,0,0.2); } .card img{ width:100%; height:200px; object-fit:cover; } /* FOOTER */ .footer{ background:#333; color:white; padding:20px; display:flex; justify-content:space-around; } .footer a{ color:white; text-decoration:none; display:block; margin:5px; } .social{ text-align:center; padding:20px; } </style> </head> <body> <!-- SIDEBAR MENU --> <div class="sidebar"> <a href="#home">HOME</a> <a href="#men">MEN</a> <a href="#women">WOMEN</a> <a href="#boys">BOYS</a> <a href="#girls">GIRLS</a> <a href="#accessories">ACCESSORIES</a> <a href="#new">NEW ARRIVAL</a> <a href="#sale">SALE</a> </div> <div class="main"> <!-- HEADER --> <div id="home" class="topnav">BREAKOUT</div> <!-- BANNER --> <div class="banner"> <img src="men.jpg"> <img src="women.jpg"> <img src="boys.jpg"> <img src="girls.jpg"> </div> <!-- MEN --> <div id="men" class="section"> <h2>Men</h2> <div class="products"> <div class="card"><img src="men1.jpg"><p>T-Shirt</p></div> <div class="card"><img src="men2.jpg"><p>Jeans</p></div> </div> </div> <!-- WOMEN --> <div id="women" class="section"> <h2>Women</h2> <div class="products"> <div class="card"><img src="women1.jpg"><p>Dress</p></div> <div class="card"><img src="women2.jpg"><p>Top</p></div> </div> </div> <!-- BOYS --> <div id="boys" class="section"> <h2>Boys</h2> <div class="products"> <div class="card"><img src="boys1.jpg"><p>Shirt</p></div> <div class="card"><img src="boys2.jpg"><p>Shorts</p></div> </div> </div> <!-- GIRLS --> <div id="girls" class="section"> <h2>Girls</h2> <div class="products"> <div class="card"><img src="girls1.jpg"><p>Frock</p></div> <div class="card"><img src="girls2.jpg"><p>Top</p></div> </div> </div> <!-- ACCESSORIES --> <div id="accessories" class="section"> <h2>Accessories</h2> <div class="products"> <div class="card"><img src="cap.jpg"><p>Cap</p></div> <div class="card"><img src="bag.jpg"><p>Bag</p></div> </div> </div> <!-- NEW ARRIVAL --> <div id="new" class="section"> <h2>New Arrivals</h2> <div class="products"> <div class="card"><img src="new1.jpg"><p>New Shirt</p></div> <div class="card"><img src="new2.jpg"><p>New Dress</p></div> </div> </div> <!-- SALE --> <div id="sale" class="section"> <h2>Sale</h2> <div class="products"> <div class="card"><img src="sale1.jpg"><p style="color:red;">50% OFF</p></div> <div class="card"><img src="sale2.jpg"><p style="color:red;">SALE</p></div> </div> </div> <!-- SOCIAL --> <div class="social"> <h3>Follow Us</h3> <a href="https://www.instagram.com">Instagram</a> <a href="https://www.facebook.com">Facebook</a> <a href="https://www.tiktok.com">TikTok</a> </div> <!-- FOOTER --> <div class="footer"> <div> <h3>Support</h3> <a href="#">Contact</a> <a href="#">FAQs</a> </div> <div> <h3>Blog</h3> <a href="#">News</a> </div> <div> <h3>Can We Help?</h3> <a href="#">Help Center</a> </div> </div> </div> </body> </html> Give me html coding of every single page separately and the navigation bar from which the other pages will open

评论

加载中...