templates/main/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="pt">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Giru's Café - Elegância Culinária na Guarda</title>
  7.     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
  8.     <style>
  9.         body, html {
  10.             margin: 0;
  11.             padding: 0;
  12.             font-family: 'Montserrat', sans-serif;
  13.             color: #333333; /* Dark Gray */
  14.             line-height: 1.6;
  15.         }
  16.         header {
  17.             background-color: #FFFFFF; /* White */
  18.             position: fixed;
  19.             width: 100%;
  20.             z-index: 1000;
  21.             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  22.         }
  23.         nav {
  24.             display: flex;
  25.             justify-content: space-between;
  26.             align-items: center;
  27.             padding: 20px 40px;
  28.         }
  29.         .logo {
  30.             font-family: 'Cormorant Garamond', serif;
  31.             font-size: 24px;
  32.             font-weight: 600;
  33.         }
  34.         .nav-links a {
  35.             text-decoration: none;
  36.             color: #333333; /* Dark Gray */
  37.             margin-left: 20px;
  38.             font-size: 14px;
  39.             text-transform: uppercase;
  40.         }
  41.         .hero {
  42.             height: 100vh;
  43.             background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F81%2Fcb%2Fc6%2F81cbc6420485d22e563db40885369c2a.jpg&f=1&nofb=1&ipt=c2bfc053dd0a53be9b5edff3f6222cec54974500d50dc7b53ab8492eda9542d6&ipo=images'); /* Replace with actual image URL */
  44.             background-size: cover;
  45.             background-position: center;
  46.             display: flex;
  47.             align-items: center;
  48.             justify-content: center;
  49.         }
  50.         .hero-content {
  51.             text-align: center;
  52.             color: #FFFFFF; /* White */
  53.             background-color: rgba(0,0,0,0.8);
  54.             padding: 40px;
  55.         }
  56.         h1 {
  57.             font-family: 'Cormorant Garamond', serif;
  58.             font-size: 48px;
  59.             margin-bottom: 20px;
  60.         }
  61.         .btn {
  62.             display: inline-block;
  63.             padding: 12px 24px;
  64.             background-color: #FFA500; /* Yellow */
  65.             color: #FFFFFF; /* White */
  66.             text-decoration: none;
  67.             text-transform: uppercase;
  68.             letter-spacing: 1px;
  69.             transition: background-color 0.3s ease, transform 0.3s ease;
  70.         }
  71.         .btn:hover {
  72.             background-color: #FF8C00; /* Darker Yellow */
  73.         }
  74.         .section {
  75.             padding: 80px 40px;
  76.         }
  77.         h2 {
  78.             font-family: 'Cormorant Garamond', serif;
  79.             font-size: 36px;
  80.             margin-bottom: 40px;
  81.             text-align: center;
  82.         }
  83.         .menu-grid {
  84.             display: grid;
  85.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  86.             gap: 40px;
  87.         }
  88.         .menu-item {
  89.             text-align: center;
  90.         }
  91.         .menu-item img {
  92.             width: 100%;
  93.             height: auto; /* Maintain aspect ratio */
  94.         }
  95.         .menu-item h3 {
  96.             font-family: 'Cormorant Garamond', serif;
  97.             font-size: 24px;
  98.             margin-top: 10px; /* Space above title */
  99.         }
  100.         .menu-item p {
  101.             margin-bottom: 10px; /* Space below description */
  102.         }
  103.         footer {
  104.             background-color: #333333; /* Dark Gray */
  105.             color: #FFFFFF; /* White */
  106.             text-align: center; 
  107.             padding: 40px 20px; 
  108.         }
  109.     </style>
  110. </head>
  111. <body>
  112.     <header>
  113.         <nav>
  114.            <div class="logo">Giru's Café</div>
  115.            <div class="nav-links">
  116.                <a href="https://invisuais.overslep.pt/main">Menu</a>               
  117.                <a href="#contact">Contacto</a>
  118.            </div>
  119.        </nav>
  120.     </header>
  122.     <section class="hero">
  123.        <div class="hero-content">
  124.            <h1>Bem-vindo ao Giru's Café</h1>
  125.            <p>A sua pausa o nosso café, combinação perfeita</p>
  126.            <a href="https://invisuais.overslep.pt/main" class="btn">Descubra o Menu</a>
  127.        </div>
  128.     </section>
  130.    <footer id="contact">
  131.        <p>&copy; 2024 Giru's Café. Todos os direitos reservados.</p>
  132.        <p>Rua Vasco da Gama, Guarda | Tel.: (271) 123-456 | Email.: [email protected]</p>
  133.    </footer>
  135.    <!-- Add your JavaScript here if needed -->
  136. </body>
  137. </html>