casifyve.github.io/index.html at main · JamTheDev/casifyve.github.io · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>CasiFYVE</title>

  <!-- 0. FavIcon -->
  <link rel="shortcut icon" href="images/raw-assets/3-Logo/Logo-HP.png" type="image/x-icon">

  <!-- 1. Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;600;700&family=Poppins:ital,wght@0,400;0,700;1,400&display=swap"
    rel="stylesheet">

  <!-- 2. Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <!-- 3. Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- 4. Main CSS Files -->
  <link href="styles/index.css" rel="stylesheet" type="text/css" />

  <!-- 5. JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
    crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar navbar-expand-md fixed-top">
    <div class="container-fluid">
        <section class="__nav-hamburger">

            <button class="navbar-toggler ms-3" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbar-hamburger" aria-controls="navbar-hamburger" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbar-hamburger">

                <div class="navbar-nav mt-3 text-center">
                    <a class="nav-item nav-link ms-lg-4" href="/menu/index.html">MENU</a>
                    <a class="nav-item nav-link" href="/testimonials/index.html">TESTIMONIALS</a>
                    <a class="nav-item nav-link" href="/about-us/index.html">ABOUT US</a>
                </div>

            </div>

        </section>

        <section class="navbar-brand w-50">
          <a href="/index.html"><img src="../images/raw-assets/3-Logo/Logo-HP.png" width="55" height="55" /></a>
        </section>
    </div>
  </nav>

  <main>
    <section class="__hero-sec-1 container-fluid mt-5">

      <div class="__tapsilog-bg row ">
        <!-- Tapsilog Background -->
        <div class="col container p-auto">
            <div class="col-sm-11 col-md-10 col-lg-8 col-xl-7 col-xxl-6 p-5 glassmorphism mx-auto">
              <div class="text-center">
                <p class="fs-1">Hungry Potter </p>
                <p class="fs-2">KIM'S</p>
                <p class="fs-1">TAPSILOGAN</p>
                <p class="fs-4">Best Silog Meals in Town</p>
              </div>

              <div class="mt-4 d-grid gap-2">
                <a class="mx-auto" href="https://www.facebook.com/HungryPotterTapsilogan/" target="_blank" rel="noopener noreferrer">
                  <button type="button" class="btn btn-outline-light px-5"><i class="fa-brands fa-facebook me-2" aria-hidden="true"></i> Learn More</button>
                </a>
              </div>
          </div>
        </div>
      </div>

    </section>

    <section class="__hero-sec-2 container-fluid mt-3 " onclick="window.location = '/menu'">
      <div class="row">

        <div class="p-5 px-3 px-sm-4 px-md-5 col-sm-12 col-md-7 col-lg-7 col-xl-6 col-xxl-8">
          <div class="p-5 glassmorphism mb-5">
            <h1>Dishes</h1>
            <p class="__text-justify">Kim's Hungry Potters Tapsilogan is a popular restaurant located in a beautiful setting, where you can enjoy a wide variety of delicious
              dishes served at your table. Not only will you be able to savor the flavors of the dishes you choose, but you will also be able to take
              in the stunning view and ambiance of the place. The restaurant has a cozy and inviting atmosphere, making it the perfect spot for a
              casual dinner with friends or a romantic date. </p>

            <p class="__text-justify"> Some of the dishes that people always come back for include tapsilog, chicksilog, porksilog, sisigsilog, and bangsilog, which are all
              made with the freshest ingredients and cooked to perfection. Each meal typically includes 2 servings of garlic rice, a sunny-side up egg,
              and a main dish of your choice.</p>

            <p class="__text-justify">
              Be sure to stop by and try out the delicious food and great atmosphere at Kim's Hungry Potters Tapsilogan
              which is are affordable and sure to fill your tummy, leaving you satisfied and happy.
            </p>

          </div>
        </div> <!-- Ctn-Left -->

        <div class="mx-auto row col-sm-12 col-md-5 col-lg-5 col-xl-6 col-xxl-4 px-0 shadow-lg">
          <div class="img-cover">

          </div>
        </div> <!-- Ctn-Right -->

      </div>
    </section>
  </main>

  <footer>
    <div class="row mx-0 py-2 px-3 px-md-4">
      <div class="col-12 col-md-7 col-lg-6 d-flex justify-content-center align-items-center">
        <section class="__footer-ctn-1 position-relative w-100 h-100 py-3 rounded-4 ">
          <div class="row"> <!-- Floating modal -->
            <form>
              <div class="col-11 mx-auto">
                <h2 class="__footer-heading ">Contact Us</h2>
              </div> <!-- Modal: Contact Us Text-->

              <div class="col-11 mx-auto my-3">
                <input type="email" class="form-control" id="InputEmail" name="inputEmail" placeholder="Email" aria-placeholder="Email">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
              </div> <!-- Modal: Email -->

              <div class="col-11 mx-auto mb-3">
                <textarea class="form-control" placeholder="I think the food is great!" id="emailTextarea" name="emailTextarea" style="height: 100px"></textarea>
              </div> <!-- Modal: Textarea input -->
            </form>
          </div>

          <div class="row my-auto mx-auto fs-4">
            <div class="__footer-social-icons col col-sm-4 col-md-6 col-lg-5 my-auto ms-2 ms-sm-3 ms-md-0 ms-lg-auto">
              <a href="https://www.facebook.com/HungryPotterTapsilogan" title="Follow our Facebook Page"><i class="ms-3 ms-md-2 ms-lg-0 ms-xl-1 fa-brands fa-facebook"></i></a> <!-- FB Page -->
              <a href="https://www.facebook.com/hungarypotter.tapsilogan" title="Message us for inqueries"><i class="ms-3 ms-md-2  fa-brands fa-facebook-messenger"></i></a> <!-- FB Messenger -->
              <a href="tel:09198695491"><i class="ms-3 ms-md-2 fa-solid fa-phone" title="Call us at: (+63) 0919-869-5491"></i></a> <!-- Tel No.-->
            </div> <!-- Social Icons -->

            <div class="__footer-submit-btn col-6 col-sm-7 col-md-6 mx-auto me-sm-0 me-lg-2">
              <div class="d-grid gap-3">
                <button type="submit" class="btn btn-outline-light">Submit <i class="fa-solid fa-arrow-right"></i></button>
              </div>
            </div> <!-- Submit Btn -->
          </div> <!-- Modal: Social Icon & Submit -->
        </section>
      </div> <!-- Left Side -->

      <div class="col-12 col-md-5 col-lg-6 d-flex justify-content-end align-items-center">
        <section class="__footer-ctn-2 row col-12 col-sm-11 col-md-8 col-lg-6 text-end p-3 me-md-2 me-lg-1">
          <div class="__footer-subctn-2 col-12">
            <h3 class="__footer-heading"><i class="me-2 fa-solid fa-circle-info"></i>OTHERS</h3>
            <hr class="ms-auto">
            <a href="/menu/index.html">MENU</a> <!-- Menu -->
            <a href="/testimonials/index.html">TESTIMONIALS</a> <!-- Testimonials -->
          </div>

          <div class="__footer-subctn-2 col-12 my-4 my-sm-3">
            <h3 class="__footer-heading"><i class="me-2 fa-solid fa-location-dot"></i>ADDRESS</h3>
            <hr class="ms-auto">
            <a href="https://goo.gl/maps/jpKhB5ZNFyLJxmZb6" title="Find us in Google Maps">37-E A.Luna St. West Rembo Makati City 1215, Philippines</a>
          </div> <!-- Address -->
        </section>
      </div> <!-- Right Side -->
    </div>
  </footer>

</body>
</html>