Untitled
unknown
plain_text
a month ago
3.1 kB
2
Indexable
### HTML (index.html) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pastel Café</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <header> <h1>Pastel Café</h1> </header> <nav> <ul> <li><a href="#menu">Menu</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="menu" class="menu"> <h2>Our Menu</h2> <div class="menu-item" onclick="toggleDetails(this)"> <h3>Coffee</h3> <p class="details">A warm cup of happiness.</p> </div> <div class="menu-item" onclick="toggleDetails(this)"> <h3>Pastries</h3> <p class="details">Freshly baked, sweet treats.</p> </div> <div class="menu-item" onclick="toggleDetails(this)"> <h3>Tea</h3> <p class="details">Steeped to perfection.</p> </div> </section> <footer> <p>© 2023 Pastel Café. All rights reserved.</p> </footer> </div> <script src="script.js"></script> </body> </html> ``` ### CSS (styles.css) ```css body { font-family: 'Pixel', sans-serif; background-color: #f2f5f8; color: #333; margin: 0; padding: 20px; } .container { max-width: 800px; margin: auto; } header h1 { font-size: 3em; text-align: center; color: #ff6f91; } nav ul { display: flex; justify-content: center; list-style-type: none; padding: 0; } nav ul li { margin: 0 15px; } nav ul li a { text-decoration: none; color: #ff6f91; font-weight: bold; } .menu { margin: 40px 0; background-color: #fff9f2; padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .menu-item { margin: 10px 0; padding: 10px; background-color: #fbfdd8; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .menu-item:hover { background-color: #ffe493; } .details { display: none; color: #555; } footer { text-align: center; margin-top: 40px; font-size: 0.9em; } ``` ### JavaScript (script.js) ```javascript function toggleDetails(item) { const details = item.querySelector('.details'); if (details.style.display === 'none' || details.style.display === '') { details.style.display = 'block'; } else { details.style.display = 'none'; } } ``` ### Instructions: 1. Create three files: `index.html`, `styles.css`, and `script.js`. 2. Copy the respective code snippets into the files. 3. Open `index.html` in your browser to view your cute, pixelated aesthetic café menu website! Feel free to customize the menu items, colors, and styles further to match your vision! 🍰☕
Editor is loading...
Leave a Comment