RecetaWeb/receta.html at main · brayancode2004/RecetaWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Receta de Churrasco, un delicioso asado.">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <title>Churrasco</title>
</head>
<body>
  <div class="container my-4">
    <!-- Encabezado -->
    <header class="mb-4 text-center bg-dark text-white p-3 rounded">
      <h1>Churrasco</h1>
      <p class="lead">Aprende a preparar un auténtico churrasco de la mejor manera, sencillo y con pocos pasos. </p>
    </header>

    <main>
      <!-- Sección de Ingredientes -->
      <section class="mb-5">
        <h2 class="text-warning">Ingredientes</h2>
        <ul class="list-group">
          <li class="list-group-item list-group-item-primary">2 libras de carne de res (preferiblemente filete o contrafilete)</li>
          <li class="list-group-item list-group-item-secondary">Sal al gusto</li>
          <li class="list-group-item list-group-item-success">Pimienta negra recién molida</li>
          <li class="list-group-item list-group-item-danger">Aceite de oliva</li>
          <li class="list-group-item list-group-item-warning">1 diente de ajo (opcional)</li>
          <li class="list-group-item list-group-item-info">Jugo de limón (opcional)</li>
        </ul>
      </section>

      <!-- Sección de Pasos de Preparación -->
      <section class="mb-5">
        <h2 class="text-info">Pasos de Preparación</h2>
        <ul class="list-group list-group-numbered">
          <li class="list-group-item list-group-item-primary">Prepara la parrilla o plancha a fuego alto.</li>
          <li class="list-group-item list-group-item-secondary">Sazona la carne con sal y pimienta por ambos lados.</li>
          <li class="list-group-item list-group-item-success">Si lo deseas, frota la carne con un poco de ajo machacado y aceite de oliva.</li>
          <li class="list-group-item list-group-item-danger">Coloca la carne en la parrilla y cocina de 4-5 minutos por cada lado para un término medio (ajusta el tiempo según tu preferencia).</li>
          <li class="list-group-item list-group-item-warning">Rocía con jugo de limón al terminar la cocción para realzar el sabor.</li>
          <li class="list-group-item list-group-item-info">Deja reposar la carne durante 5 minutos antes de cortar y servir.</li>
        </ul>
      </section>

      <!-- Sección de Comentarios -->
      <section class="mb-5">
        <h2 class="text-success">Deja tu Comentario</h2>
        <form action="#" method="post">
          <div class="mb-3">
            <label for="nombre" class="form-label">Nombre:</label>
            <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Tu nombre" required>
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Correo electrónico:</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="ejemplo@correo.com" required>
          </div>
          <div class="mb-3">
            <label for="comentario" class="form-label">Comentario:</label>
            <textarea name="comentario" id="comentario" rows="4" class="form-control" placeholder="Escribe tu comentario aquí" required></textarea>
          </div>
          <button type="submit" class="btn btn-success">Enviar Comentario</button>
        </form>
      </section>
    </main>
  </div>

  <!-- Pie de Página -->
  <footer class="bg-dark text-center text-white py-3 mt-4">
    <p class="mb-0">&copy; 2025 Recetas de Churrasco - Brayan Calderón - Uam Managua</p>
  </footer>
</body>
</html>