Assignment Question: You are required to develop a website for the purpose of promoting Bakery Shops that are available in your chosen district. You need to use only the HTML code and insert the following elements in the website which is The list of Bakery Shops, The use of appropriate graphics, Text and fonts that are appropriate, Link to objects in the same document and links to other files that are appropriate, and The use of table and its properties those are appropriate. Points will be awarded based on creativity using these elements, a function that runs perfectly, as well as the suitability of its functions. You are allowed to build up maximum of FIVE web pages.
Preparation Phase
For this question, to avoid any copyright or legal issue I will create a fake bakery shop brand and identity. Refer below for the fake bakery shop details:
1. Restaurent Name: Ayam's Bakery
2. BRN: JM0593899-K
3. Location: 116, Jalan Langkawi, Taman Setapak, 53000 KL.
Now, for web development I will use the following program.
1. Visual Studio 2017 as my IDE for HTML5 with CSS3
2. Bootstrap Framework
3. Jquery JS
4. Adobe Photoshop CS6 for image editor
5. Adobe Illustrator CS6 for vector images such as logo design
First step, logo design. I use Adobe Illustrator to draw up the logo shown below.
Next step, is to come up with the website's sitemap so that I can structure the HTML pages based on the sitemap. Refer below for the website's sitemap:
1. Welcome – Landing page of the website.
2. About – Basic information about the company.
3. Pricing – Pricing information about the products.
4. Promotions – Latest promotions available.
5. Location – Restaurant locations
After done with that, start developing the website accordingly. Once done, pictures needed to be taken for this fake website. Pictures are retrieved from the royalty free images from the following sites. Bear in mind that some images requires credits or linking back to the origin, therefore I will avoid usage of those pictures. This will ensures no legal issue with the website.
1. https://www.pexels.com/royalty-free-images/
2. https://unsplash.com/
3. And many other publications offering royalty free images.
HTML Code
Now, let's start designing the website using the Visual Studio. Refer below for the HTML code:
<!--
Assignment CBWP2203 Semester May 2017
OPEN UNIVERSITY MALAYSIA
-->
<!-- Declare HTML Doctype. Standard W3C XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- HTML Head -->
<head>
<title>Assignment Question 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Mohd Arief Ramli">
<meta name="description" content="Question1 Assignment Answer">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="Question2 Assignment">
<meta property="og:type" content="website">
<meta property="og:description" content="Question2 Assignment Answer">
<meta property="og:url" content="http://www.lemon-web.net">
<!-- Reference to CSS & JS files -->
<link rel="stylesheet" href="/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style-portfolio.css">
<link rel="stylesheet" href="/css/jquery-ui.css">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"> </script>
<script type="text/javascript" src="/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/js/jquery.mixitup.min.js" ></script>
<script type="text/javascript" src="/js/ayambakery.js" ></script>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<!-- HTML BODY -->
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ayam's bakery</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav main-navclear navbar-right ">
<li><a class="navactive color_animation" href="#top">WELCOME</a></li>
<li><a class="color_animation" href="#about">ABOUT</a></li>
<li><a class="color_animation" href="#pricing">PRICING</a></li>
<li><a class="color_animation" href="#promotions">PROMOTIONS</a></li>
<li><a class="color_animation" href="#location">LOCATIONS</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- ============ Welcome============= -->
<div id="top" class="starter_container bg">
<div class="follow_container">
<div class="col-md-6 col-md-offset-3">
<h2 class="top-title"> Ayam's Bakery</h2>
<h2 class="white second-title">" malaysian cuppicakes style "</h2>
<hr>
</div>
</div>
</div>
<!-- ============ About============= -->
<section id="about" class="description_content">
<div class="text-content container">
<div class="col-md-6">
<h1>About Us</h1>
<div class="fa fa-cutlery fa-2x"></div>
<p class="desc-text">Everything we make is with Encik Arief in mind, hence only the highest quality products will make it to our shelves. As they are handmade, sometimes the pastries/bread differs slightly in appearance but we do believe strongly on our tagline, "It tastes even better than it looks!" Take it from a mummy's perspective: sometimes the dinner we cooked didn't turn out perfect, but it certainly was cooked with love for our family and friends.</p>
</div>
<div class="col-md-6">
<div class="img-section">
<img src="/images/ayamsbakerylogo.png" width="613" height="413">
</div>
</div>
</div>
</section>
<!-- ============ Pricing============= -->
<section id ="pricing" class="description_content">
<div class="pricing background_content">
<h1><span>Affordable</span> pricing</h1>
</div>
<div class="text-content container">
<div class="container">
<div class="row">
<div id="w">
<ul id="filter-list" class="clearfix">
<li class="filter" data-filter="all">All</li>
<li class="filter" data-filter="cupcakes">CupCakes</li>
<li class="filter" data-filter="pastry">Pastries</li>
<li class="filter" data-filter="cakes">Cakes</li>
<li class="filter" data-filter="promo">Promotions</li>
</ul>
<!-- @end #filter-list -->
<ul id="portfolio">
<li class="item cupcakes">
<img src="/images/food_icon01.jpg" alt="Food" >
<h2 class="white">RM 2.50</h2>
</li>
<li class="item cupcakes"><img src="/images/food_icon02.jpg" alt="Food" >
<h2 class="white">RM 2.50</h2>
</li>
<li class="item cupcakes"><img src="/images/food_icon03.jpg" alt="Food" >
<h2 class="white">RM 2.50</h2>
</li>
<li class="item pastry"><img src="/images/food_icon04.jpg" alt="Food" >
<h2 class="white">RM 3.90</h2>
</li>
<li class="item pastry"><img src="/images/food_icon05.jpg" alt="Food" >
<h2 class="white">RM 1.70</h2>
</li>
<li class="item cakes"><img src="/images/food_icon06.jpg" alt="Food" >
<h2 class="white">RM 45.00</h2>
</li>
<li class="item cakes promo"><img src="/images/food_icon07.jpg" alt="Food" >
<h2 class="white">RM 30.00</h2>
</li>
<li class="item cupcakes promo"><img src="/images/food_icon08.jpg" alt="Food" >
<h2 class="white">RM 0.99</h2>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ============ PROMOTIONS ============= -->
<section id="promotions" class="description_content">
<div class="featured background_content">
<h1><span>July 2017</span> Promotions</h1>
</div>
<div class="text-content container">
<div class="col-md-6">
<h1>Promotions</h1>
<div class="icon-hotdog fa-2x"></div>
<p class="desc-text">Every month we have something in for you. This month <strong>July 2017</strong>, we slashed down our prices for the following items. Enjoy great value on great foods brought to you by Ayam Bakery!</p>
</div>
<div class="col-md-6">
<ul class="image_box_story2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Slider -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/promo1.jpg"alt="Promo1">
<div class="carousel-caption">
New Roti Bawang. Buy 1 Get 1 Free!
</div>
</div>
<div class="item">
<img src="/images/promo2.jpg" alt="Promo2">
<div class="carousel-caption">
an all new cheese sardine!
</div>
</div>
<div class="item">
<img src="/images/promo3.JPG" alt="Promo3">
<div class="carousel-caption">
coming soon in August 2017
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</section>
<!-- ============ LOCATION============= -->
<sectionid="location"class="description_content">
<div class="featured background_content">
<h1>Our Locations</h1>
</div>
<div class="text-content container">
<div class="inner contact">
<div class="contact-form" style="min-height:600px;">
<!-- Left Inputs -->
<form id="question2_form" action="" onsubmit="return false;">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-6 col-xs-12">
<div class="row">
<div style="text-align:left">
<h2>Bakery Locations</h2>
<p class="desc-text">
We have three bakery shops open throughout Malaysia.<br/>
<img src="/images/locations.jpg" width="333" height="166">
<img src="/images/locations2.jpg" width="342" height="168">
Select branch:
<select name="branch" id="branch" class="fields">
<option value="kl">Kuala Lumpur</option>
<option value="jb">Johor Bahru</option>
<option value="kdh">Kedah</option>
</select>
</p>
<div id="RESULT" class="desc-text" style="border-top:dotted; padding-top:15px; font-size:18px; color:#666; line-height: 30px;">
Ayam's Bakery, <br/>
116 Jalan langkawi, <br/>
Taman Setapak, <br/>
53000 Kuala Lumpur <br/>
Malaysia <br/>
</div>
</div>
</div>
</div>
</form>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="right-text" ID="LOCATIONDIV">
<h2>Operation Hours</h2><hr>
<p>Monday to Friday: 7:30 AM - 8:30 PM</p>
<p>Saturday: 7:30 AM - 5:30 PM</p>
<p>Sunday: 7:30 PM - 12:00 PM</p>
<p>Public Holidays:Closed</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</section>
<!-- ============ Footer Section============= -->
<footer class="sub_footer">
<div class="container">
<div class="col-md-4"><p class="sub-footer-text text-center">OUM - CBWP2203 Assignment Question</p></div>
<div class="col-md-4"><p class="sub-footer-text text-center">Back to <a href="#top">TOP</a></p>
</div>
<div class="col-md-4"><p class="sub-footer-text text-center">Designed by Mohd Arief Ramli</p></div>
</div>
</footer>
</body>
</html>
CSS Code
Designed using Bootstrap Framework with inclusive of Jquery animations. Refer below for the CSS code:
/* CSS for AYAM BAKERY WEBSITE */
h1 {
font-size: 37px;
font-weight: 900;
width: 414px;
letter-spacing: 0.040em;
border: 1px solid rgba(47, 46, 47, 0.59);
}
.navactive{
border-bottom: 1px solid #96E16B;
}
p.desc-text{
font-size: 20px;
line-height: 35px;
text-align: justify;
}
.text-content.container {
margin-top: 65px;
margin-bottom: -51px;
}
.right-text p{
text-align: left !important;
border-bottom: 1px solid;
padding: 10px 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
.img-section-space {
margin-top: 5px;
}
.fa-2x{
padding-top: 5px;
}
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoonacfe.eot?-yinaf8');
src:url('../fonts/icomoond41d.eot?#iefix-yinaf8') format('embedded-opentype'),
url('../fonts/icomoonacfe.woff?-yinaf8') format('woff'),
url('../fonts/icomoonacfe.ttf?-yinaf8') format('truetype'),
url('../fonts/icomoonacfe.svg?-yinaf8#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-mail:before {
content: "\e600";
}
.icon-github:before {
content: "\e601";
}
.icon-twitter:before {
content: "\e602";
}
.icon-linkedin:before {
content: "\e603";
}
.carousel-slide{
float: right !important;
margin-right: -15px;
}
li.item{
position: relative;
width: 100%; /* for IE 6 */
background: rgba(211, 15, 34, 1);
}
.icon_knife {
width: 40px;
height: 20px;
margin: 30px auto;
opacity: 0.8;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgODUuMyI+PHBhdGggZD0iTTI5OC43IDEyLjZDMjk3LjUgNS41IDI4OC43IDEgMjgzLjEgMWwtODcuOSAwLjNMMzAuNiAxLjVjLTE0LjQgMC0yNS4xIDgtMjUuNSA4LjNsLTUuNCA0bDMuNyA1LjkgYzI1LjkgNDAuOSA3MSA1Ni4zIDEwNC4zIDYyLjFjMzkuMiA2LjcgNzUgMi42IDg4LjMtMS42YzQuMy0xLjQgOC40LTMuMyA5LjMtOGwwLjEtMS4xbDAtMC42YzAtMi4zLTAuNy00LjctMS44LTguNSBjLTAuMi0wLjgtMC41LTEuOC0wLjktM2MtMS4zLTQuMi0zLjQtMTEuMy00LjUtMTYuOGMzLjMtMS4xIDUuOC0xLjggNi42LTEuOWMxLjUgMCA4IDEuNyAxMy40IDMuNmwwLjUgMC4ybDAuNSAwLjEgYzIgMC4zIDEyLjEgMS43IDE2LjQgMS43YzQuMSAwIDEzLjEtMS40IDE1LjctMS45bDAuNC0wLjFsMC40LTAuMWM1LjgtMS45IDEwLjktMy4zIDEyLjYtMy42YzAuOSAwLjMgMi45IDEuMiA1IDIuNCBjMC40IDAuMyAwLjkgMC42IDEuNCAwLjhsMSAwLjZsMS4yIDBsNi4yLTAuNWMwLjIgMCAwLjQgMCAwLjYtMC4xbDguOC0xLjRjNC4yLTEuNyA3LjktNC4yIDkuOC03LjRsMC40LTAuN2wwLjItMC43IGMwLjUtMi4xIDAuOC01LjYgMC44LTkuMUMzMDAgMTcuOCAyOTkuMiAxNC40IDI5OC43IDEyLjZ6Ii8+PC9zdmc+) no-repeat center;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transformm;
}
.icon_knife:hover {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
}
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.clear::after {
content: "";
display: table;
clear: both;
}
h1, h2, p, span, a {
font-family: "museo-sans", helvetica, sans-serif;
color: #2f2e2f;
margin: 0;
padding: 0;
}
.limit {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.color_animation {
text-decoration: initial;
/* word-spacing: 5px; */
margin-right: -30px;
margin-left: -30px !important;
color: white !important;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.color_animation:hover{
color: #9BE86F !important;
}
/*========================
NAV
=========================*/
div#bs-example-navbar-collapse-1 {
height: 368px;
overflow: hidden;
text-align: center;
text-decoration: none !important;
}
.navbar-brand{
font-family: 'Pacifico', cursive;
font-size: 34px !important;
text-decoration: none;
color: white !important;
}
nav {
background: #1E1E1E !important;
font-size: 18px;
color: white !important;
}
li{
color: white !important;
/*padding-left: 10px;*/
word-spacing: 5px !important;
}
/*========================
INTRO CONTAINER
=========================*/
.starter_container {
margin-top: -21px;
padding: 0;
min-width: 100%;
height: 100%;
background: url('../images/background.jpg') no-repeat center center;
background-size: cover;
text-align: center;
background-position: center;
}
.follow_container {
width: 100%;
position: absolute;
top: 35%;
text-align: center;
}
.starter_follow {
display: inline-block;
width: 80%;
z-index: 1;
margin: 0 auto;
padding: 0;
}
.top-title{
color: white;
font-family: 'Playball', cursive;
font-size: 120px;
font-weight: 400;
}
.second-title {
font-weight: lighter;
font-size: 30px;
font-style: italic;
text-transform: capitalize;
}
.white{
color: white;
}
/* ========================
IMAGE INTRO BANNER CONTENT
=========================*/
.background_content {
position: relative;
top: 0px;
width: 100%;
height: 350px;
background-color: white;
margin: 0 auto 0 auto;
z-index: 98;
text-align: center;
}
.background_content h1 {
font-size: 3em;
width: 60%;
position: relative;
top: 24%;
color: white;
padding: 0;
border: 0;
display: inline-block;
}
.background_content h1 span {
color: white;
border-bottom: 8px solid #fff;
}
.beer.background_content{
background: url('../images/beer.jpg') no-repeat center center;
background-size: cover;
background-position: 70% 50%;
}
.bread.background_content{
background: url('../images/bread.jpg') no-repeat center center;
background-size: cover;
background-position: 70% 50%;
}
.featured.background_content{
background: url('../images/promotions.jpg') no-repeat center center;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.pricing.background_content{
background: url('../images/pricing.jpg') no-repeat center center;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.reservation.background_content{
background: url('../images/reservation-seat.jpg') no-repeat center center;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.bread.background_content{
background: url('/../images/breakfast.jpg') no-repeat center center;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/*========================
DESCRIPTION BODY CONTENT
=========================*/
.description_content {
padding: 50px 0;
width: 100%;
background: #fff;
margin: 0 auto 0 auto;
z-index: 99;
position: relative;
background: white;
text-align: center;
}
.description_body {
margin: 45px auto;
max-width: 300px;
}
h1 {
font-size: 28px;
font-weight: 900;
width: 225px;
letter-spacing: 0.040em;
border: 8px solid #2f2e2f;
display: inline-block;
padding: 7px 16px;
margin: 0;
}
.picture_content {
display: none;
}
.first_footer {
background-color: #1e1e1e;
text-align: center;
}
.social_heading,
.social_info {
display: block;
}
.social_heading {
font-size: 28px;
font-weight: 900;
letter-spacing: 0.040em;
color: #63C85D;
text-align: center;
margin: 40px 0 0 0;
}
.social_info,
.social_icons {
margin: 18px 0 50px 0;
}
.social_info a {
text-decoration: none;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.200em;
line-height: 1.400em;
color: #fff;
display: inline-block;
margin: 0 auto;
width: 210px;
}
.social_info a:hover {
color: #6c8f34;
}
.social_icons {
padding: 0;
}
.social_icons li {
list-style: none;
display: inline-block;
padding: none;
}
.social_icons li:nth-child(1),
.social_icons li:nth-child(2),
.social_icons li:nth-child(3) {
margin: 0 50px 0 0;
}
.social_icons li a {
color: #fff;
text-decoration: none;
font-size: 25px;
}
.social_icons li a:hover {
color: #6c8f34;
}
.direction a{
color: white !important;
}
footer.sub_footer {
background-color: #1C1C1C;
padding: 20px;
}
p.sub-footer-text{
color: #6B6B6B;
}
p.sub-footer-text a{
color: #BDBDBD;
text-decoration: none;
}
/*Contact */
.contact-text{
margin:45px auto;
}
/* Contact Form */
#contact .contact-form{
margin: 0 auto;
padding:25px 25px 0px 25px;
-moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.2);
}
.inner.contact {
padding: 0px 0;
}
.form{
width: 100%;
padding: 16.94px;
/* background:#E2E2E2; */
border: 1px solid rgba(13, 12, 12, 0.23);
margin-bottom:25px;
color:#727272 !important;
font-size:13px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.form:hover{
border:1px solid #8BC3A3;
}
.form:focus{
color: white;
outline: none;
border:1px solid #8BC3A3;
}
.textarea{
height: 200px;
max-height: 200px;
max-width: 100%;
}
.button{
padding:8px 12px;
background:#0A5175;
display: block;
width:120px;
margin:10px 0 0px 0;
border-radius:3px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
text-align:center;
font-size:0.8em;
box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
-moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
}
.button:hover{
background:#8BC3A3;
color:white;
}
.form-btn{
width:180px;
display: block;
float: left;
height: auto;
padding:15px;
color:#fff;
background:rgba(80, 160, 108, 1);
border:none;
border-radius:3px;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin: 0 auto !important;
box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
-moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
text-align: center;
}
.form-btn:hover{
background: rgba(85, 184, 120, 1);
color: white;
border:none;
}
.form-btn:active{
opacity: 0.9;
}
div.fa {
display: block;
padding: 30px 0px 25px 0px;
}
div .fa-2x {
padding: 30px 0px 25px 0px;
}
h1 {
text-transform: capitalize;
}
.navbar-default {
border: 0 !important;
}
@media (max-width: 660px) {
.top-title {
font-size: 67px;
}
.second-title {
font-size: 21px;
}
.background_content h1 {
width: 80%;
font-size: 2.5em;
}
.form-btn {
margin: 0px auto;
/* display: block; */
}
}
/*========================
MEDIA QUERIES TABLET
=========================*/
@media (min-width: 400px) {
.starter_container {
height: 100%;
}
.background_content h1 {
top: 33%;
}
}
/*========================
MEDIA QUERIES TABLET
=========================*/
@media (min-width: 660px) {
.starter_container {
height: 100%;
}
/*========================
NAV
=========================*/
.navbar-default{
height: 70px;
padding-top: 10px;
}
nav li{
padding-right: -15px;
}
.navbar-brand{
font-family: 'Pacifico', cursive;
font-size: 34px !important;
text-decoration: none;
color: white !important;
}
nav {
position: fixed;
display: block;
position: fixed;
width: 100%;
height: 55px;
z-index: 100;
margin: 0;
padding: 0;
background-color: #1e1e1e;
text-align: center;
}
.logo {
display: none;
}
.main-nav {
padding: 0;
margin: 18px auto 0 auto;
}
.main-nav li {
display: inline-block;
list-style: none;
margin: 0 29px 0 29px;
}
.logo a,
.main-nav a {
font-size: 0.75000em;
font-weight: 700;
/* letter-spacing: 0.250em; */
text-decoration: none;
color: #fff;
display: block;
text-align: center;
padding: 2px 0;
transition: color 0.3s ease-in-out;
}
.main-nav a:hover {
color: #6c8f34;
}
.direction a {
border: 5px solid rgba(0,0,0,0);
display: inline-block;
width: 45px;
height: 45px;
background-size: 30px;
}
.direction a:hover {
border: 5px solid #6D903C;
}
/*========================
DESCRIPTION BODY CONTENT
=========================*/
.description_body {
margin: 45px auto;
max-width: 500px;
}
h1 {
font-size: 32px;
font-weight: 900;
width: 280px;
letter-spacing: 0.040em;
border: 1px solid #2f2e2f;
}
.picture_content {
display: inline-block;
padding: 0 20px;
}
/*========================
IMAGE INTRO BANNER CONTENT
=========================*/
.background_content {
position: relative;
top: 0px;
width: 100%;
height: 570px;
background-color: white;
margin: 0 auto 0 auto;
z-index: 98;
text-align: center;
}
.background_content h1 {
font-size: 4.5em;
position: relative;
top: 41%;
width: 100%;
color: white;
padding: 0;
border: 0;
display: inline-block;
}
.background_content h1 span {
color: white;
padding: 0;
border-bottom: 10px solid #fff;
}
}
/*========================
Social Connect
=========================*/
section.social_connect {
background-color: black;
text-align: center;
margin-bottom: 50px;
}
.social_heading {
font-size: 33px;
margin: 50px 0 0 0;
}
.social_info a {
font-size: 24.93px;
}
.social_icons li a {
font-size: 30px;
}
.social_info a {
display: inline-block;
margin: 0 auto;
width: 325px;
}
}
@media (min-width: 1100px) {
.starter_container {
background-attachment: fixed;
}
.background_content h1 {
font-size: 5em;
position: relative;
top: 41%;
width: 100%;
color: white;
padding: 0;
border: 0;
display: inline-block;
margin-top: 20px;
}
.background_content h1 span {
color: white;
padding: 0;
border-bottom: 12px solid #fff;
}
.margin-right {
margin-right: 5%;
}
.margin-left {
margin-left: 5%;
}
.background_content:nth-of-type(2),
.background_content:nth-of-type(4) {
background-attachment: fixed;
}
.description_body {
max-width: 450px;
display: inline-block;
vertical-align: middle;
margin: 0;
margin-top: 10px;
}
.picture_content {
display: inline-block;
padding: 0;
vertical-align: middle;
}
.social_heading {
font-size: 33px;
margin: 50px 0 0 0;
}
.come_in .social_info a {
font-size: 24.93px;
display: inline-block;
margin: 0 auto;
width: 565px;
}
.come_in .social_info {
margin-bottom: 25px;
}
.or_call .social_info a {
font-size: 24.93px;
display: inline-block;
margin: 0 auto;
width: auto;
}
.social_icons li a {
font-size: 30px;
}
}
For this project, I am not using the standard Javascript, but write a JQuery instead as it offers more functionality. Refer below for the JQuery JS code:
// Navigational Smooth scrolling
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('navactive');
})
$(this).addClass('navactive');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
// Scroll Function
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('.nav li a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('ul.nav li a').removeClass("navactive");
currentLink.addClass("navactive");
}
else{
currentLink.removeClass("navactive");
}
});
$(function(){
$('#portfolio').mixitup({
targetSelector: '.item',
transitionSpeed: 350
});
});
};
// Bakery Location Script
$(document).ready(function(){
$("select").change(function(){
var loc = $( "#branch option:selected" ).text();
var kl = ("Ayam's Bake22ry, <br/>116 Jalan langkawi, <br/>Taman Setapak, <br/>53000 Kuala Lumpur <br/>Malaysia <br/>");
var kdh = ("Ayam's Bakery, <br/>Persiaran 12 Ungkap Tali Bagus<br/>Kampung Bagan Terlalang,<br/>73500 Alor Setar, Kedah, <br/>Malaysia <br/>");
var johor = ("Ayam's Bakery, <br/>722 Jalan Angsana Itik Kambing <br/>Taman Angsana Muda Sangat,<br/>13500 Johor Bahru <br/>Malaysia <br/>");
if (loc == "Kuala Lumpur") {
$('#RESULT').html(kl);}
else if (loc == "Johor Bahru") {
$('#RESULT').html(kdh);
}
else if (loc == "Kedah") {
$('#RESULT').html(johor);
}
});
});
Screenshots
Refer below for sample screenshots:
Live Website URL
Refer link below to view the live website of this project.
