芝麻web文件管理V1.00

编辑当前文件:/home/qrafawbu/afrobeatsandbrunch.com/menu.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Afrobeats & Brunch Menu</title>
   <link href="./assets/favicon.png" rel="shortcut icon" type="image/x-icon" />
        <link href="./assets/favicon.png" rel="apple-touch-icon" />
        <link href="https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/css/foams-staging.webflow.f98e8b881.min.css" rel="stylesheet" type="text/css" />
  <style>
    /* General Styles */
    body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background-color: #000000;
      color: #ffffff;
    }

h1 {
      text-align: center;
      font-size: 2.5rem;
      color: #f35959;
      margin: 20px 0;
    }
    
    .logo-container {
      text-align: center;
      padding: 20px;
      background-color: #1a1a1a;
    }

.logo-container img {
      width: 150px;
      height: auto;
    }

.logo-container h1 {
      font-size: 2.5rem;
      color: #f88b2c;
      margin: 10px 0;
    }

.menu-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 20px;
    }

/* Card Styles */
    .menu-card {
      background-color: #1a1a1a;
      border-radius: 10px;
      margin: 20px;
      width: 320px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      transition: transform 0.3s ease;
    }

.menu-card:hover {
      transform: translateY(-5px);
    }

/* Ribbon */
    .ribbon {
      background: linear-gradient(45deg, #f35959, #ee288a);
      color: white;
      font-weight: bold;
      font-size: 1rem;
      padding: 10px 20px;
      position: absolute;
      top: 0;
      left: 0;
      clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
      text-transform: uppercase;
    }

.card-content {
      padding: 20px;
      text-align: center;
    }

.card-title {
      font-size: 1.8rem;
      color: #f88b2c;
      margin-bottom: 15px;
    }

ul {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: left;
    }

li {
      margin: 10px 0;
      font-size: 1.1rem;
      color: #ffffff;
    }

.price {
      float: right;
      color: #f35959;
      font-weight: bold;
    }

footer {
      text-align: center;
      padding: 15px;
      color: white;
      margin-top: 20px;
    }
  </style>
</head>
<body>
     <img
                src="https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture.webp"
                loading="eager"
                sizes="100vw"
                srcset="
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-500.webp   500w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-800.webp   800w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-1080.webp 1080w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-1600.webp 1600w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-2000.webp 2000w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-2600.webp 2600w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture.webp        2880w
                "
                alt=""
                class="texture"
            />
  <div class="logo-container">
    <img src="assets/logo-color.png"  width="25%" alt="Afrobeats & Brunch Logo">
    <h1>Menu</h1>

<div class="menu-container">
    
    <div class="menu-card">
      <div class="ribbon">Drinks</div>
      <div class="card-content">
        <span class="card-title">Drinks</span>
        <ul>
          <li>Hennessy <span class="price">$350</span></li>
           <hr>
          <li>Casamigos Blanco <span class="price">$350</span></li>
           <hr>
          <li>Don Julio Blanco <span class="price">$350</span></li>
           <hr>
          <li>Patron Silver <span class="price">$350</span></li>
           <hr>
          <li>Moet Rose <span class="price">$350</span></li>
           <hr>
          <li>Dusse <span class="price">$400</span></li>
           <hr>
          <li>Casamigos Reposado <span class="price">$400</span></li>
           <hr>
          <li>Don Julio Reposado <span class="price">$400</span></li>
           <hr>
          <li>Clase Azul <span class="price">$600</span></li>
           <hr>
          <li>Dom Perignon <span class="price">$600</span></li>
           <hr>
          <li>Don Julio 1942 <span class="price">$600</span></li>
           <hr>
          <li>Ace of Spades <span class="price">$700</span></li>
           <hr>
        </ul>
      </div>
    </div>

<div class="menu-card">
      <div class="ribbon">Hookah</div>
      <div class="card-content">
        <span class="card-title">Hookah</span>
        <ul>
          <li>Regular Hookah (Mint, Blueberry Mint, Watermelon, Peach) <span class="price">$30</span></li>
          <hr>
          <li>Exotic Hookah (Lady Killer, Mint Cream, Love66) <span class="price">$40</span></li>
           <hr>
          <li>Refill Hookah <br> Regular: <span class="price">$20</span> <br> Exotic: <span class="price">$30</span></li>
           <hr>
        </ul>
      </div>
    </div>
    
    
  </div>