Creative Web Design Level Ii: Group 1

CREATIVE WEB
DESIGN
LEVEL II
GROUP 1
Joshua B. Ramos
Mari Angela
Lambatan
Alex Christian M.
Suson
Grace Ann L. Castro
1|Page
El-Jhay Ramos
TABLE OF CONTENTS
Introduction - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
--- 3
Acknowledgement - - - - - - - - - - - - - - - - - - - - - - - - - - - -
---- 4
Materials/Tools - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
--- 5
CODES -- Home page, About, Contact - - - - - - - - - - - - - -

--- 7
CODES -- Menu Page - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - 16
Members - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - 23
Screenshots of the Website - - - - - - - - - - - - - - - - - - - - -

- - - - - - 25
2|Page
3|Page
INTRODUCTION
Breakfast is the most important meal of the day. It gives

people energy and helps them focus on work or their studies
so without it, people may not function/think properly in the
morning. Since many people are busy and in a hurry to cook
and eat their breakfast early in the morning and even at
home, Joshua, Angela, Ian, Grace and El-Jhay decided to
make an All Day Breakfast named JAIGEL’s All~Day Breakfast
to cater the needs of the workers and students at an
affordable price.
JAIGEL’s All~day Breakfast caters not only students and

workers but everyone! You are all welcome to try and taste
the delicious food that they have in their menu. It consists of
Main Dish: Bangsilog, Longsilog, Spamsilog, Tapsilog,
Tosilog, Tuyo and Egg, Dilis, Danggit. Desserts: Halo-Halo,
Buko Pandan, Coffee Jelly, Leche Flan, Ube Halaya.
Beverages: Pineapple juice, Iced tea, Orange juice, Sago’t
gulaman, Shakes. Value of money as well as the quality and
taste of the food wise, we assure you that you will surely love
their food.
4|Page
ACKNOWLEDGEMENT
First, we would like to thank our Father God for giving us

knowledge, skills and wisdom to complete this task.
To SLDM Colleges of Quezon City, Inc., our school, for

being an instrument in making this course possible.
To TESDA, for giving us the chance to study this course

for free.
To Ms. Rizza May Pelayo, our instructor, who always

made sure that we understood and knew what we were doing
in the class.
To Sir Charlie for assisting us with our lectures and

activities.
5|Page
And lastly, to our classmates who kept on encouraging
and cheering us up that we would be able to finish this
portfolio.
Materials/Tools
 Internet
 Bond Paper
 Clear book
Hardware:
 Printer
 Computer
 Laptop
 Flash Drive
Software:
 HTML
 Adobe Photoshop CS4
 Brackets
6|Page
Home page
About page
Contact page
7|Page
HOME, ABOUT, CONTACT
8|Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/fontawesome/css/all.css" />
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/all.css" />
<title>Jaigel</title>
</head>
<body>

<header>
<div class="nav-top d-flex justify-content-between p-1">
<ul class="m-0 p-0 text-white">
<p><i class="fas fa-phone"></i>09123456789</p>
<a href="mailto:bentosilog@gmail.com"><i class="fas fa-
envelope"></i>jaigel@gmail.com</a>
</ul>
<ul class="m-0 p-0">
<a href="https://www.facebook.com/" class="text-white">
<i class="fab fa-facebook-square"></i>
</a>
<a href="https://www.instagram.com/" class="text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="text-white">
<i class="fab fa-twitter"></i>
</a>
</ul>
</div>
<div class="navbar navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="lib/images/logo-2.png" alt=""></a>
<button class="navbar-toggler" data-toggle="collapse" data-
target="#navbarcontent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcontent">
<ul class="navbar-nav ml-auto align-items-center">
<li class="nav-item">
<a href="#" class="nav-link active"><i class="fas fa-home"></i>
Home</a>
</li>
<a href="menu.html" class="nav-link">
<i class="fas fa-book"></i> Menu
</a>
</li>
<a href="#about" class="nav-link">
<i class="fas fa-users"></i> About
9|Page
</a>
</li>
<a href="#contact" class="nav-link">
<i class="fas fa-phone"></i> Contact
</a>
</li>
</ul>
</div>
</div>
</header>



<main>

<div class="carousel slide" data-ride="carousel" id="carousel">
<ul class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="lib/images/carousel-1.jpg" alt="" class="d-block w-100">
<div class="carousel-caption mb-md-5">
<h1> Who said breakfasts are only meant to be eaten in the morning?
</h1>
<p> At Jaigel's, we can offer you breakfast anytime, anyday. </p>
</div>
</div>
<div class="carousel-item">
<h1>Who said breakfasts are only meant to be eaten in the morning? </h1>
<p>At Jaigel's, we can offer you breakfast anytime, anyday. </p>
</div>
</div>
</h1>
<p>At Jaigel's, we can offer you breakfast anytime, anyday. </p>
</div>
</div>
</h1>
<p> At Jaigel's, we can offer you breakfast anytime, anyday. </p>
</div>
</div>
10 | P a g e
</div>
</div>



<div class="about" id="about">
<div class="container">
<h1 class="text-center">About Us</h1>
<p class="text-justify">Jaigel's was established just May of this year. It was
founded by 5 soon-to-be
developers, namely: Joshua, Angela, Ian, Gracey, El-Jhay.
As students with limited resources for our everyday allowances, we’d often look
for cheap places
where we could dine at yet delectable food we could fill our hungry tummies
with.
This has been our everyday struggle comes our lunch time. As many students
also go to those kinds of
places (Not to mention, some employees too.), they are always jam-packed.
Jam-packed that we would
have to wait several minutes for our turn whenever our class ends longer than
the usual time.
Those minutes spent while waiting could have been utilized in a more
meaningful way. At times, we
cannot afford to wait any longer for we have some activities we have to attend
to. Either we show up
at the activity with empty stomachs or wallets -- for spending a big amount for
lunch.
Since then, we would always dream of/talk about having our own canteen that
can cater a hundred
customers at their most convenient times as our own way of helping the
students' lives easier during
lunch time (Be it
employees’ too.).
As we nearly approach our way to employment, and understanding the

hardships of a student, what we
were just dreaming of became a reality.
Hence, the birth of Jaigel’s.

</p>
</div>
</div>



<div class="menu">
<div class="menu-1">
<div class="mx-5">
<div class="row py-5">
<div class="col-md-6">
11 | P a g e
<img class="d-flex img-thumbnail wow animated bounceInLeft mx-auto
ml-md-0 shadow-lg"
src="lib/images/main-dishes-logo.jpg">
</div>
<div class="col-md-6 text-center text-md-left mt-5">
<h1>Main Dishes</h1>
<p>Masarap, walang katulad ang lasa sa iba. Unique at may pagmamahal
pa. San ka na Jaigel's
is the best.</p>
</div>
</div>
</div>
</div>
<div class="mx-5">
<div class="col-md-6 order-md-2">
<img class="d-flex img-thumbnail wow animated bounceInRight mx-auto
mr-md-0 shadow-lg"
src="lib/images/desserts-logo.jpg">
</div>
<div class="col-md-6 order-md-1 text-center text-md-left mt-5">
<h1>Desserts</h1>
<p>Ang kulit masarap nga sa Jaigel's wag ka na sa iba.</p>
</div>
</div>
</div>
</div>
<div class="mx-5">
<img class="d-flex img-thumbnail wow animated bounceInLeft mx-auto
ml-md-0 shadow-lg"
src="lib/images/beverages-logo.jpg">
</div>
<div class="col-md-6 text-center text-md-left mt-5">
<h1>Beverages</h1>
<p>Dpngl wag na nga sa iba. Panget lasa pagkain nila. Dito ka enjoy ka
pa.</p>
</div>
</div>
</div>
</div>
</div>



<div class="contact" id="contact">
<h1 class="mb-0 mb-md-5">Contact Us</h1>
<div class="row m-0 py-5 px-md-5">
<div class="col-lg-6 ml-0 mt-5 mt-lg-0">
<form>
<div class="form-group">
<label for="name">Fullname</label>
12 | P a g e
<input class="form-control" type="text" name="name" required>
</div>
<label for="email">Email</label>
<input class="form-control" type="email" name="name"
placeholder="name@example.com"
required>
</div>
<label for="subject">Subject</label>
<input type="text" name="subject" class="form-control" required>
</div>
<label for="message">Message</label>
<textarea name="message" cols="30" rows="10" class="form-control"
required></textarea>
</div>
<button class="w-100 py-3" type="submit">Submit</button>
</form>
</div>
</div>
</div>



<div class="testimonials p-5">
<div class="row justify-content-between">
<div class="col-md-4 d-flex align-items-center flex-column text-center">
<ul class="list-unstlyed">
<img class="rounded-circle" src="lib/images/male-1.jpg">
<h3>Mike Marcus Alonto</h3>
<em> College Student </em>
</ul>
<p><span>“</span> Jaigel's is one of my go-to places during lunch time. As a
student, limited lang
ang time namin. Usually, 1 hour lang for lunch. With Jaigel's spacious place,
kahit madami
nagdi-dine in, kaya padin magaccomodate ng several students.
</p>
</div>
<div class="col-md-4 d-flex align-items-center flex-column text-center scale">
<img class="rounded-circle" src="lib/images/female-1.jpg">
<h3>Veronica Josune Murro</h3>
<em> Intern </em>
</ul>
<p><span>“</span> As an exchange student, I am not that familiar with
Filipino food yet. But with
Jaigel's, I can say that I am now a Filipino by heeart. I love their dishes. I love
tapsilog!!
And Bangsilog too! I
am going to miss it when I go back home. Surely, I will try to make cook it
there.
</p>
</div>
13 | P a g e
<div class="col-md-4 d-flex align-items-center flex-column text-center">
<img class="rounded-circle" src="lib/images/male-2.jpg">
<h3>Casta Triston Lomondot</h3>
<em> University Professor </em>
</ul>
<p><span>“</span> With the busy schedule I have as a professor, I most of
the time skip eating
breakfast para makarating ng maaga sa school to set a good example to the
students. Good thing
Jaigel is here to serve us an all-day breakfast. Hindi man ako
makapgbreakfast sa bahay, I know
for sure na I can always have it here. The food is good also at a very
resonable price.
</p>
</div>
</div>
</div>

</main>



<footer>
<div class="row m-0 py-5">
<a href="" class="navbar-brand">Logo</a>
</div>
<h2>Useful Links</h2>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<h2>Social Links</h2>
<ul class="list-inline">
<a href="https://www.facebook.com/"><i class="fab fa-facebook-
square"></i></a>
<a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a>
</ul>
</div>
<h2>Contact Us</h2>
<li><i class="fas fa-map-marker-alt"></i> 260 Roosevelt Avenue, San
Francisco Del Monte, 1100</li>
<li><i class="fas fa-phone"></i> 09176276222</li>
<li><i class="fas fa-envelope"></i> jaigel@gmail.com</li>
</ul>
14 | P a g e
</div>
</div>
<div class="copyright">
<div class="d-flex mx-4 flex-column flex-md-row align-items-center">
<p>© Jaigel 2019. All Rights Reserved</p>
<p class="ml-md-auto">
<a href="#">Terms of Use</a> |
<a href="#">Privacy & Cookies Policy</a> |
<a href="#">Sitemap</a>
</p>
</div>
</div>
</footer>

<script src="assets/js/jquery.min.js"> </script>

<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/parallax.min.js"></script>
<script>
new WOW().init();
$('.carousel').carousel({
pause: false,
interval: 4000
});
const c = (a, b) => {
$(a).parallax({
imageSrc: 'lib/images/' + b + '.jpg'
});
}
c('.menu-1', 'main-dishes');
c('.menu-3', 'beverages');
</script>
</body>
</html>
15 | P a g e
Menu page
MENU
16 | P a g e
17 | P a g e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/fontawesome/css/all.css" />
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/all.css" />
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.css">
<title>Jaigel | Menu</title>
</head>
<body>

<header>
<div class="nav-top d-flex justify-content-between p-1">
<ul class="m-0 p-0 text-white">
<p><i class="fas fa-phone"></i>09123456789</p>
<a href="mailto:bentosilog@gmail.com"><i class="fas fa-
envelope"></i>jaigel@gmail.com</a>
</ul>
<ul class="m-0 p-0">
<a href="https://www.facebook.com/" class="text-white">
<i class="fab fa-facebook-square"></i>
</a>
<a href="https://www.instagram.com/" class="text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="text-white">
<i class="fab fa-twitter"></i>
</a>
</ul>
</div>
<div class="navbar navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand">Logo</a>
<button class="navbar-toggler" data-toggle="collapse" data-
target="#navbarcontent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcontent">
<ul class="navbar-nav ml-auto align-items-center">
<a href="index.html" class="nav-link">
<i class="fas fa-home"></i> Home
</a>
</li>
<a href="#" class="nav-link active">
<i class="fas fa-book"></i> Menu
</a>
</li>
18 | P a g e
<a href="index.html#about" class="nav-link">
<i class="fas fa-users"></i> About
</a>
</li>
<a href="index.html#contact" class="nav-link">
<i class="fas fa-phone"></i> Contact
</a>
</li>
</ul>
</div>
</div>
</header>



<div class="menu-pages m-sm-5">
<h1>Menu</h1>

<div id="main-dishes">
<h2>Main Dishes </h2>
<div class="menu-pages-body owl-carousel owl-theme">
<div class="menu-card">
<div class="menu-card-body">
<img src="lib/images/tapsilog.jpg" alt="">
<h5>Tapsilog</h5>
<p>₱50</p>
</div>
</div>
<img src="lib/images/longsilog.jpg" alt="">
<h5>Longsilog</h5>
<p>₱40</p>
</div>
</div>
<img src="lib/images/tocilog.jpg" alt="">
<h5>Tocilog</h5>
<p>₱45</p>
</div>
</div>
<img src="lib/images/spamsilog.jpg" alt="">
<h5>Spamsilog</h5>
<p>₱50</p>
</div>
</div>
<img src="lib/images/bangsilog.jpg" alt="">
<h5>Bangsilog</h5>
19 | P a g e
<p>₱50</p>
</div>
</div>
<img src="lib/images/tuyo-and-egg.jpg" alt="">
<h5>Tuyo and Egg</h5>
<p>₱20</p>
</div>
</div>
<img src="lib/images/danggit.jpg" alt="">
<h5>Danggit</h5>
<p>₱25</p>
</div>
</div>
<img src="lib/images/dilis.jpg" alt="">
<h5>Dilis</h5>
<p>₱20</p>
</div>
</div>
</div>
</div>



<div id="desserts">
<h2>Desserts</h2>
<img src="lib/images/halo-halo.jpg" alt="">
<h5>Halo-Halo</h5>
<p>₱40</p>
</div>
</div>
<img src="lib/images/buko-pandan.jpg" alt="">
<h5>Buko-Pandan</h5>
<p>₱20</p>
</div>
</div>
<img src="lib/images/coffee-jelly.jpg" alt="">
<h5>Coffee Jelly</h5>
<p>₱30</p>
</div>
</div>
20 | P a g e
<img src="lib/images/leche-flan.jpg" alt="">
<h5>Leche Flan</h5>
<p>₱35</p>
</div>
</div>
<img src="lib/images/ube-halaya.jpg" alt="">
<h5>Ube Halaya</h5>
<p>₱35</p>
</div>
</div>
</div>
</div>



<div id="beverages">
<h2>Beverages </h2>
<img src="lib/images/pinapple-juice.jpg" alt="">
<h5>Pinapple Juice</h5>
<p>₱20</p>
</div>
</div>
<img src="lib/images/iced-tea.jpg" alt="">
<h5>Iced Tea</h5>
<p>₱15</p>
</div>
</div>
<img src="lib/images/orange-juice.jpg" alt="">
<h5>Orange Juice</h5>
<p>₱20</p>
</div>
</div>
<img src="lib/images/sago-at-gulaman.jpg" alt="">
<h5>Sago't Gulaman</h5>
<p>₱10</p>
</div>
</div>
<img src="lib/images/shakes.jpg" alt="">
<h5>Shakes</h5>
<p>₱50</p>
</div>
</div>
21 | P a g e
</div>
</div>

</div>



<footer>
<div class="row m-0 py-5">
<a href="#" class="navbar-brand">Logo</a>
</div>
<h2>Useful Links</h2>
<li><a href="index.html">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
<h2>Social Links</h2>
<ul class="list-inline">
<a href="https://www.facebook.com/"><i class="fab fa-facebook-
square"></i></a>
<a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a>
</ul>
</div>
<h2>Contact Us</h2>
<li><i class="fas fa-map-marker-alt"></i> 260 Roosevelt Avenue, San
Francisco Del Monte, 1100</li>
<li><i class="fas fa-phone"></i> 09176276222</li>
<li><i class="fas fa-envelope"></i> jaigel@gmail.com</li>
</ul>
</div>
</div>
<div class="copyright">
<div class="d-flex mx-4 flex-column flex-md-row align-items-center">
<p>© Jaigel 2019. All Rights Reserved</p>
<p class="ml-md-auto">
<a href="#">Terms of Use</a> |
<a href="#">Privacy & Cookies Policy</a> |
<a href="#">Sitemap</a>
</p>
</div>
</div>
</footer>

<script src="assets/js/jquery.min.js"> </script>
22 | P a g e
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
margin: 20,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5,
}
}
});
</script>
</body>
</html>
23 | P a g e
MEMBERS
O N A R L
S G N A J
H E C H
U L E A
A A Y Y
Joshua B. Ramos
Mari Angela Lambatan
Alex Christian M. Suson
Grace Ann L. Castro
El-Jhay Ramos
24 | P a g e
SCREENSHOT
S
25 | P a g e
26 | P a g e
27 | P a g e
28 | P a g e

Creative Web Design Level Ii: Group 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creative Web Design Level Ii: Group 1

Uploaded by

Copyright:

Available Formats

CREATIVE WEB

Grace Ann L. Castro

CODES -- Home page, About, Contact - - - - - - - - - - - - - -

CODES -- Menu Page - - - - - - - - - - - - - - - - - - - - - - - - - -

Screenshots of the Website - - - - - - - - - - - - - - - - - - - - -

Breakfast is the most important meal of the day. It gives

JAIGEL’s All~day Breakfast caters not only students and

First, we would like to thank our Father God for giving us

To SLDM Colleges of Quezon City, Inc., our school, for

To TESDA, for giving us the chance to study this course

To Ms. Rizza May Pelayo, our instructor, who always

To Sir Charlie for assisting us with our lectures and

As we nearly approach our way to employment, and understanding the

Hence, the birth of Jaigel’s.

<script src="assets/js/jquery.min.js"> </script>

Mari Angela Lambatan

Alex Christian M. Suson

Grace Ann L. Castro

You might also like