Restaurant Website Using Html And Css
Hello, guys today in this blog we are going to create a new and Beautiful Bootstrap Restaurant Template Website with just HTML, CSS, and JavaScript.
Let’s first watch a video of it then.
Step 1: Writing the HTML code and adding Markup to our website
Go create a file named as index.html
This code below is HTML template for our restaurant website it even uses the Bootstrap framework. The head section includes all the metadata tags which are helpful for SEO, the website title, and links to external resources such as Bootstrap’s CSS and JavaScript files for styling and functionality. The body section has a unique id of “myPage” and various data attributes to enable smooth scrolling and navigation using Bootstrap’s data-spy and data-target attributes. The body element does not contain any actual content for the website. Google fonts are also included
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Northstreet Restaurant">
<meta name="author" content="A.K.">
<title>Restaurant Northstreet</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
</body>
</html>Next lets add some stuff to our body tags.
This is code for our website which is about an restaurant called “Northstreet”. Our website also has a nav bar which is going to contains links to different sections of our website. Below the navigation bar, there is an header or your can say banner that welcomes visitors to the website and introduces the restaurant’s mission.
Portfolio Website Using Html ,Css and JavaScript
Next our website also has a section called about that is going to provide the info about the history of this restaurant and the restaurant’s mission. The section also includes imgs and descriptions of the restaurant’s warm welcome, delicious meals and professional staff.
Overall, this code will create an section to give visitors a sense of what the northstreet restaurant is all about from its history to its food to its staff.
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Restaurant Northstreet</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<div class="header-content-inner">
<h1>Welcome to Northstreet restaurant</h1>
<h3>text</h3>
</div>
</div>
</div>
<section class="bg-about bg-section" id="about">
<div class="container-fluid">
<h1 class="container-h1">About</h1>
<div class="row">
<div class="col-sm-5">
<div class="hov-img">
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951746/new/warm_welcome.jpg" alt="Warm welcome" class="hov-img-bottom img-fluid">
<div class="hov-img-top hov-img-slideup">
<div class="hov-img-text">
<h5>Warm welcome</h5>
<p>texttext</p>
</div>
</div>
</div>
<div class="hov-img">
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951746/new/delicious_meals.jpg" alt="Delicious meals" class="hov-img-bottom img-fluid">
<div class="hov-img-top hov-img-slideup">
<div class="hov-img-text">
<h5>Delicious meals</h5>
<p> texttext</p>
</div>
</div>
</div>
<div class="hov-img">
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951746/new/professional_staff.jpg" alt="Professional staff" class="hov-img-bottom img-fluid">
<div class="hov-img-top hov-img-slideup">
<div class="hov-img-text">
<h5>Professional staff</h5>
<p>texttext</p>
</div>
</div>
</div>
</div>
<div class="col-sm-7">
<div class="row ">
<div class="restaurant-history slideanim text-center">
<h3 class="section-heading">Restaurant Northstreet</h3>
<p class="about-history first">texttext<br /> <br >
texttext
</p>
<button type="button" class="btn more" id="more" data-toggle="collapse" data-target="#demo">More</button>
<div id="demo" class="collapse">
<p class="about-history"> texttext</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Next create new section
This code below is going to create the new section of our website with a menu. The section has a id “menu” which can be used to link to it with CSS or JS. The first child element is a “container-fluid” div which will make the section expand to fill the entire width of our page.
Inside the container there is a heading element “h1” with the text “Menu”. Below the heading is a “row” div that is containing a “nav” element with an list of “nav-item” elements. These list items contain “a” tag with the text for the different menu options.
The “data-toggle” attribute is going to be used to indicate that clicking on these options will toggle between different tabs within the section. The first “nav-link” element is given the “active” class which is going to indicate that it is the currently selected option.
<section class="bg-menu bg-section" id="menu">
<div class="container-fluid">
<h1 class="container-h1">Menu</h1>
<div class="row">
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#breakfast">Breakfast</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#lunch">Lunch</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#dinner">Dinner</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#dessert">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#salads">Salads</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#drinks">Drinks</a>
</li>
</ul>This code is the HTML markup for our menu page that is having a tabbed layout showing breakfast and lunch menus.
The even uses Bootstrap framework classes for styling and responsiveness. It consists of a parent div with class “tab-content” that contains two child divs with IDs “breakfast” and “lunch” respectively. Each child div contains a row with two columns one for the menu items and the other for a image.
Responsive Hamburger Menu Using HTML and CSS Only
Each menu item is represented as a list item with class “list-group-item” and contains a heading tag with the item name and price as well as a paragraph tag with the ingredients or description of the item. The price is displayed as a badge with class “badge pull-right”.
The image for each menu section is placed in a div with class “right-cover” and contains a heading tag with the section name and an image tag with the corresponding image source.
In summary, the code creates a tabbed menu layout with Bootstrap classes and displays menu items with their ingredients and prices in a responsive and visually appealing way.
<!-- Tab panes -->
<div class="tab-content slideanim">
<div id="breakfast" class="tab-pane fade show active">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Spanish tortilla<span class="badge pull-right">5.90 €</span></h4>
<p class="list-group-item-text">potatoes, onion, olive oil, free-range eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Quick fish cakes<span class="badge pull-right">6.80 €</span></h4>
<p class="list-group-item-text">skinless cod, pollock fillets, Maris Piper, flour, olive oil, fresh green herbs, chives, mayonnaise, eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Wild rice salad<span class="badge pull-right">5.20 €</span></h4>
<p class="list-group-item-text">mixed rice, wild and long-grain, mixed nuts, fresh basil, fresh mint, dried apricots, extra virgin olive oil
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Chicken milanese with spaghetti<span class="badge pull-right">8.70 €</span></h4>
<p class="list-group-item-text">cloves of garlic, fresh basil, olive oil, plum tomatoes, skinless free-range chicken breasts, plain flour, free-range eggs, breadcrumbs, Parmesan cheese, dried spaghetti</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Mango lassi<span class="badge pull-right">3.10 €</span></h4>
<p class="list-group-item-text">green cardamom pods , optional, ripe mangos, low-fat natural yoghurt, ice cubes, runny honey
</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>Breakfast</h3>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951905/new/breakfast.jpg" class="menu-img img-fluid" alt="breakfast-img">
</div>
</div>
</div>
</div>
<div id="lunch" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Spanish tortilla<span class="badge pull-right">5.90 €</span></h4>
<p class="list-group-item-text">potatoes, onion, olive oil, free-range eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Quick fish cakes<span class="badge pull-right">6.80 €</span></h4>
<p class="list-group-item-text">skinless cod, pollock fillets, Maris Piper, flour, olive oil, fresh green herbs, chives, mayonnaise, eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Wild rice salad<span class="badge pull-right">5.20 €</span></h4>
<p class="list-group-item-text">mixed rice, wild and long-grain, mixed nuts, fresh basil, fresh mint, dried apricots, extra virgin olive oil
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Chicken milanese with spaghetti<span class="badge pull-right">8.70 €</span></h4>
<p class="list-group-item-text">cloves of garlic, fresh basil, olive oil, plum tomatoes, skinless free-range chicken breasts, plain flour, free-range eggs, breadcrumbs, Parmesan cheese, dried spaghetti</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Mango lassi<span class="badge pull-right">3.10 €</span></h4>
<p class="list-group-item-text">green cardamom pods , optional, ripe mangos, low-fat natural yoghurt, ice cubes, runny honey
</p>
</li>
</ul>
</div>This is the code for our restaurant menu page that is going to display three tabs – Breakfast and Lunch and Dinner. Each tab display a list of food items with their descriptions and prices.
This even uses the Bootstrap framework to create a responsive layout for the menu. It starts with a div element that has a id of menu and a class of container. Inside this div, there is a nav element that contains the three tabs – Breakfast, Lunch, and Dinner.
Each tab is represented by a div tag which has an class of tab-pane and a id that corresponds to the name of the tab. For example, the Breakfast tab has the id of breakfast. Inside each tab there is a row tag that contains two columns one for the list of food items and one for an image.
The list of food items is represented by a ul tag with a class of list-group. Each food item is represented by an li element with a class of list-group-item. The item name with description and price are displayed using h4 and p and span tags.
The img is displayed using an img tag with a class of menu-img img-fluid and a alt attribute that describes the img. The source URL for the image is provided in the src attribute.
<div class="col-sm-5">
<div class="right-cover">
<h3>Lunch</h3>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951906/new/lunch.jpg" class="menu-img img-fluid" alt="brekfast-img">
</div>
</div>
</div>
</div>
<div id="dinner" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Spanish tortilla<span class="badge pull-right">5.90 €</span></h4>
<p class="list-group-item-text">potatoes, onion, olive oil, free-range eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Quick fish cakes<span class="badge pull-right">6.80 €</span></h4>
<p class="list-group-item-text">skinless cod, pollock fillets, Maris Piper, flour, olive oil, fresh green herbs, chives, mayonnaise, eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Wild rice salad<span class="badge pull-right">5.20 €</span></h4>
<p class="list-group-item-text">mixed rice, wild and long-grain, mixed nuts, fresh basil, fresh mint, dried apricots, extra virgin olive oil
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Chicken milanese with spaghetti<span class="badge pull-right">8.70 €</span></h4>
<p class="list-group-item-text">cloves of garlic, fresh basil, olive oil, plum tomatoes, skinless free-range chicken breasts, plain flour, free-range eggs, breadcrumbs, Parmesan cheese, dried spaghetti</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Mango lassi<span class="badge pull-right">3.10 €</span></h4>
<p class="list-group-item-text">green cardamom pods , optional, ripe mangos, low-fat natural yoghurt, ice cubes, runny honey
</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>Dinner</h3>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951906/new/dinner.jpg" class="menu-img img-fluid" alt="brekfast-img">
</div>
</div>
</div>
</div>Next code id going to define the set of tabs using Bootstrap framework to display a menu with different categories such as breakfast, dessert, and salads. Its quite the same as above code so lets provide you code without much explaination.
<div id="dessert" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Spanish tortilla<span class="badge pull-right">5.90 €</span></h4>
<p class="list-group-item-text">potatoes, onion, olive oil, free-range eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Quick fish cakes<span class="badge pull-right">6.80 €</span></h4>
<p class="list-group-item-text">skinless cod, pollock fillets, Maris Piper, flour, olive oil, fresh green herbs, chives, mayonnaise, eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Wild rice salad<span class="badge pull-right">5.20 €</span></h4>
<p class="list-group-item-text">mixed rice, wild and long-grain, mixed nuts, fresh basil, fresh mint, dried apricots, extra virgin olive oil
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Chicken milanese with spaghetti<span class="badge pull-right">8.70 €</span></h4>
<p class="list-group-item-text">cloves of garlic, fresh basil, olive oil, plum tomatoes, skinless free-range chicken breasts, plain flour, free-range eggs, breadcrumbs, Parmesan cheese, dried spaghetti</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Mango lassi<span class="badge pull-right">3.10 €</span></h4>
<p class="list-group-item-text">green cardamom pods , optional, ripe mangos, low-fat natural yoghurt, ice cubes, runny honey
</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>Dessert</h3>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951905/new/dessert.jpg" class="menu-img img-fluid" alt="brekfast-img">
</div>
</div>
</div>
</div>
<div id="salads" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Spanish tortilla<span class="badge pull-right">5.90 €</span></h4>
<p class="list-group-item-text">potatoes, onion, olive oil, free-range eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Quick fish cakes<span class="badge pull-right">6.80 €</span></h4>
<p class="list-group-item-text">skinless cod, pollock fillets, Maris Piper, flour, olive oil, fresh green herbs, chives, mayonnaise, eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Wild rice salad<span class="badge pull-right">5.20 €</span></h4>
<p class="list-group-item-text">mixed rice, wild and long-grain, mixed nuts, fresh basil, fresh mint, dried apricots, extra virgin olive oil
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Chicken milanese with spaghetti<span class="badge pull-right">8.70 €</span></h4>
<p class="list-group-item-text">cloves of garlic, fresh basil, olive oil, plum tomatoes, skinless free-range chicken breasts, plain flour, free-range eggs, breadcrumbs, Parmesan cheese, dried spaghetti</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Mango lassi<span class="badge pull-right">3.10 €</span></h4>
<p class="list-group-item-text">green cardamom pods , optional, ripe mangos, low-fat natural yoghurt, ice cubes, runny honey
</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>Salads</h3>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951906/new/salads.jpg" class="menu-img img-fluid" alt="brekfast-img">
</div>
</div>
</div>
</div>Next we will create the same type of divs for drinks and etc
Thats also same as the above code
<div id="drinks" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Spanish tortilla<span class="badge pull-right">5.90 €</span></h4>
<p class="list-group-item-text">potatoes, onion, olive oil, free-range eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Quick fish cakes<span class="badge pull-right">6.80 €</span></h4>
<p class="list-group-item-text">skinless cod, pollock fillets, Maris Piper, flour, olive oil, fresh green herbs, chives, mayonnaise, eggs</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Wild rice salad<span class="badge pull-right">5.20 €</span></h4>
<p class="list-group-item-text">mixed rice, wild and long-grain, mixed nuts, fresh basil, fresh mint, dried apricots, extra virgin olive oil
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Chicken milanese with spaghetti<span class="badge pull-right">8.70 €</span></h4>
<p class="list-group-item-text">cloves of garlic, fresh basil, olive oil, plum tomatoes, skinless free-range chicken breasts, plain flour, free-range eggs, breadcrumbs, Parmesan cheese, dried spaghetti</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Mango lassi<span class="badge pull-right">3.10 €</span></h4>
<p class="list-group-item-text">green cardamom pods , optional, ripe mangos, low-fat natural yoghurt, ice cubes, runny honey
</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>Drink</h3>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536951906/new/drink.jpg" class="menu-img img-fluid" alt="brekfast-img">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Lets create a new section now
This code below represents the section with the class “bg-service bg-section” and the ID “service” on our website. Inside this section, there is a container-fluid div element with a class of “text-center”.
Inside the container-fluid, there is an h1 element with a class of “container-h1” and the text “Service”.
Then, there is a row div element with a class of “service-round-3 slideanim”. Inside this row div, there are three columns of equal width, each with a class of “col-sm-4” and a class of “text-center round”.
Otp Input Field Using HTML and CSS
Inside each column, there is a div element with a class of “service-round” and a different additional class for each column: “b-party”, “wedding”, or “b-dinner”. Each div also contains an icon represented by an i element with a class of “fa fa-4x” and another class specific to each icon.
Below the icon, there is an h4 element with the title of each service: “Birthday party”, “Wedding”, or “Business dinner”. And below the title, there is a p element with the text “For more information please contact us.”
<section class="bg-service bg-section" id="service">
<div class="container-fluid text-center">
<h1 class="container-h1">Service</h1>
<div class="row service-round-3 slideanim">
<div class="col-sm-4 text-center round">
<div class="service-round b-party">
<i class="fa fa-4x fa fa-birthday-cake sr-icons"></i>
</div>
<h4>Birthday party</h4>
<p>For more information please contact us.</p>
</div>
<div class="col-sm-4 text-center round">
<div class="service-round wedding">
<i class="fa fa-4x fa fa-heart sr-icons"></i>
</div>
<h4>Wedding</h4>
<p>For more information please contact us</p>
</div>
<div class="col-sm-4 text-center round">
<div class="service-round b-dinner">
<i class="fa fa-4x fa fa-suitcase sr-icons"></i>
</div>
<h4>Business dinner</h4>
<p>For more information please contact us.</p>
</div>
</div>
<a href="#contact" class="btn">Contact us</a>
</div>
</section>Next lets create a new section
This code define the section with an id of “gallery”. Inside the section, there is a container-fluid that contains a title “Gallery” and a horizontal rule. The row with class “gallery” contains six columns with class “col-sm-4” which displays images of an event. Each column is a portfolio item with an image and a link. When we will click on the img than it opens in a larger view. The links are currently set to “#” which means they don’t go anywhere but they can be updated with actual links.
At the bottom of the gallery section, there is a row with class “more-img”. Inside this row, there is a div with class “to-gallery” which contains a title “For more pictures visit us on” and two social network links, Instagram and Facebook.
The entire section has a background of a gallery and no padding. The CSS class “slideanim” is used to add an animation effect when the section is scrolled into view.
<section id="gallery" class="bg-gallery no-padding">
<div class="container-fluid">
<h3>Gallery</h3>
<hr class="hr-h3s">
<div class="row no-gutter gallery slideanim">
<div class="col-sm-4 portfolio-item">
<a href="#" class="portfolio-link">
<div class="caption">
<div class="caption-content">
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952203/new/s1.jpg" class="img-fluid
" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="portfolio-link">
<div class="caption">
<div class="caption-content">
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952203/new/s2.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="portfolio-link">
<div class="caption">
<div class="caption-content">
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952203/new/s3.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="portfolio-link">
<div class="caption">
<div class="caption-content">
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952203/new/s4.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="portfolio-link">
<div class="caption">
<div class="caption-content">
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952203/new/s5.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="portfolio-link">
<div class="caption">
<div class="caption-content">
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952203/new/s6.jpg" class="img-fluid" alt="">
</a>
</div>
</div>
<div class="row more-img">
<div class="to-gallery">
<h4>For more pictures visit us on</h4>
<div class="social-networks">
<a href="https://www.instagram.com" target="_blank" class="instagram"><i class="fa fa-instagram"></i></a>
<a href="https://www.facebook.com" target="_blank" class="facebook"><i class="fa fa-facebook"></i></a>
</div>
</div>
</div>
</div>
</section>Lets now add another section
This code represents the section of our website that is going to display information about the staff of our restaurant. The section starts with a heading “Our staff” and a horizontal line below it. The staff information is displayed using the row of four columns that use the Bootstrap grid system.
Each column represents an staff member and include a img of the staff member with their name and their position in the restaurant. The imgs are sourced from a cloud-based image hosting service called Cloudinary. The imgs have a width and height of 170px.
The first column represents the manager of the restaurant, John Johnson. The second, third, and fourth columns represent the chefs of the restaurant: Anna Schmidt, Ivan Gonzales, and Joseph Martinez.
The HTML code is organized using Bootstrap classes and custom CSS styles to ensure the layout is visually appealing and responsive across different screen sizes.
<section class="bg-staff" id="staff">
<div class="container-fluid">
<h3>Our staff</h3>
<hr class="hr-h3s">
<div class="row text-center slideanim thumbnail-row">
<div class="col-sm-3">
<div class="staff">
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952566/new/manager.jpg" class="" alt="chef-img" style="width:170px; height: 170px">
<h5 class="">John Johnson</h5>
<h6>Manager</h6>
</div>
</div>
<div class="col-sm-3">
<div class="staff">
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952565/new/chef1.jpg" class="" alt="chef-img" style="width:170px; height: 170px">
<h5 class="">Anna Schmidt</h5>
<h6>Chef</h6>
</div>
</div>
<div class="col-sm-3">
<div class="staff">
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952566/new/chef3.jpg" class="" alt="chef-img" style="width:170px; height: 170px">
<h5 class="">Ivan Gonzales</h5>
<h6>Chef</h6>
</div>
</div>
<div class="col-sm-3">
<div class="staff">
<img src="https://res.cloudinary.com/dbte0ueti/image/upload/v1536952566/new/chef2.jpg" class="" alt="chef-img" style="width:170px; height: 170px">
<h5 class="">Joseph Martinez</h5>
<h6>Chef</h6>
</div>
</div>
</div>
</div>
</section>Next lets add one more section
This code is going to define a section of our website that display customer testimonials about a restaurant.
The section has a background color set by the class “bg-testimonials” and an ID “testimonials”. It starts with a heading “What people say about us” and a horizontal rule.
The section contains a row that will be animated. Within the row, there is a carousel component defined by the div with ID myCarousel. The carousel has a set of indicators, defined by the unordered list with the class carousel-indicators.
The actual testimonials are defined within the div with the class “carousel-inner” which is containing three carousel items with different testimonials and the name of the customers who wrote them.
After that the carousel component has two controls that are defined by the links with the classes “carousel-control-prev” and “carousel-control-next”. When these controls are clicked the carousel slides to the previous or next item.
<section class="bg-testimonials" id="testimonials">
<div class="container-fluid">
<h3 class="">What people say about us</h3>
<hr class="hr-testimonials">
<div class="row slideanim">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<h4>The atmosphere in restaurant is friendly, and the
dishes are delicious.</h4>
<h5>Mark Gross</h5>
</div>
<div class="carousel-item">
<h4>Delicious meals, warm welcome, excellent service.</h4>
<h5>Nina Hansen</h5>
</div>
<div class="carousel-item">
<h4>Definitely my favourite restaurant, friendly, clean,
delicious meals.</h4>
<h5>Maria Fernandez</h5>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</section>Next lets add more Section
This code is going to code a contact section with the class bg-contact and bg-section and a ID of contact. Inside this section, there is going to be a container with a heading “Contact us”. The container is going to have two columns each of which is containing a contact information box and an contact form.
The contact information box has a address element with the class of contact. The contact information is including a phone number and email and address.
The contact form has four input fields which is including First name with Last name and Email and Description (textarea). The form also has two buttons which are Send and Reset. The form is validated using the required attribute on the input fields.
The novalidate attribute is going to be added to the form tag, which is going disable the browser’s default validation
<section class="bg-contact bg-section" id="contact">
<div class="container-fluid">
<h1 class="container-h1">Contact us</h1>
<div class="row slideanim">
<div class="col-md-6 col-sm-6 contact-left">
<div class="left-box">
<address class="contact">
<span class="span-contact">Call:</span>
<br>
+000 0011 0000
<br>
<span class="span-contact">Email:</span>
<br>
yourmail@mail.com
<br>
<span class="span-contact">Visit:</span>
<br>
00, AREA
<br>
Colony, State
<br>
Country
</address>
</div>
</div><div class="col-md-6 col-sm-6 contact-right" >
<form novalidate action="" name="frm" method="post">
<div class="form-group has-feedback">
<label class="sr-only">First name:</label>
<input type="text" name="name" class="form-control" placeholder="First name" required>
</div>
<div class="form-group has-feedback">
<label class="sr-only">Last name:</label>
<input type="text" name="surname" class="form-control" placeholder="Last name" required>
</div>
<div class="form-group has-feedback">
<label class="sr-only">Email:</label>
<input type="email" name="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<label class="sr-only" name="comment" for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment" placeholder="Description"></textarea>
</div>
<div class="contact-buttons pull-left">
<input type="submit" name="submit" value="Send" />
<input type="reset" value="Reset" />
</div>
</form>
</div>
</div>
Now lets add a google map
This code is going to define a section with a class row. Inside this section, there is a div with an ID googleMap and a style that sets the height to 300px and the width to 100%. This div will be used to display a Google Map.
The code then adds an script tag that includes the Google Maps API. This script is used to create an Google Map object and display it in the googleMap div.
The code defines a JavaScript function called initialize that creates a new LatLng object to define the center of the map. this map represent a location in Melbourne, Australia.
The initialize function also sets several options for the map, including the zoom level, whether the map is scrollable or draggable, and the map type ROADMAP. The function then creates an new Google Map object using the mapProp options and sets the googleMap div as its container.
The initialize function also creates a new Marker object and sets its position to the myCenter location. The marker is then added to the map using the setMap method.
At last the code uses the addDomListener method to wait for the window to load before calling the initialize function. This ensures that the Google Map is only displayed after the page has finished loading.
<div class="row">
<div id="googleMap" style="height:300px;width:100%;"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(-37.817110, 144.959128);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</div>
</section>Lets create the footer section of this website and finish the HTML code
This code defines a footer section with a class -bg-footer and an ID footer. Inside this footer, there is a container-fluid div with a row div inside it. The row div contains three columns, each with different content.
The first column contains the heading Northstreet and a horizontal rule. It also has a paragraph with the class footer that contains a sentence about the number of businesses involved in accommodation and food services in the EU-27, as well as two social network links for Instagram and Facebook.
The second column contains the heading Our contact and a horizontal rule. It has an address section that displays a fictitious address with a phone number, fax number, and email address.
The third column contains the heading Open hours and a horizontal rule. It has an unordered list that displays the opening hours for the business.
At the bottom of the footer, there is an anchor tag with the class to-top that links to the top of the page with the ID myPage. The anchor tag contains an icon with the class fa fa-chevron-up that displays an upward-pointing arrow to indicate the link’s purpose.
Step 2: Writing the CSS code and adding Styling to our website
Go create a file named as style.css
The first block of code sets the fontfamily property to ‘Lato’, sans-serif and sets the width property to 100% for the html and body elements. It also hides any horizontal overflow that may occur.
The next block of code sets the textdecoration property to none for all anchor tags, and sets the liststyletype property to none for all unordered lists.
The third block of code sets the textdecoration property to none for anchor tags when they are hovered over or in focus.
The fourth block of code sets the texttransform property to none and the fontweight property to 600 for all heading tags (h1-h6), and sets the textalign property to center.
The final block of code sets the style for horizontal rules (hr) to have a border color also a border width of 5 pixels, and a maximum width of 100%.
html, body {
overflow-x: hidden;
font-family: 'Lato', sans-serif;
width: 100%;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
a:hover,
a:focus {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: none;
font-weight: 600;
font-family: 'Lato', sans-serif;
text-align: center;
}
hr {
border-color: #ffc266;
border-width: 5px;
max-width: 100%;
}Lets move ahead
This code is going to defines several CSS styles that can be applied to HTML elements.
The containerh1 style is applied to a container element that contains an h1 heading. It sets the font family to ‘Lora’, the text alignment to center, the font size to 50 px, the font weight to 700, the margin to 50px from the top and bottom and auto from the left and right, the color and then the font family is changed to Ubuntu.
The btn style is applied to button elements. It sets the font color to white, the background color, an margin of 20px from the top and bottom and auto from the left and right, the border radius to 0, the font weight to 500, it makes the display property an table, and sets padding to 10px.
The btnhover style is applied when the button is hovered over. It sets the font color, the background color to transparent, and an 1px solid border to the color.
The .hrh3s style is applied to an horizontal rule element. It sets the border to 3px, the width to 70px, the margin to auto on the top and bottom and 35px from the left and right.
The textarea style is applied to textarea elements. It disables resizing.
The section style is applied to section elements. It sets the vertical alignment of the elements in the section to center, and adds padding of 50px from the top and bottom and 60px from the left and right.
The .bg-section h2 style is applied to an h2 heading element within a element with the class bgsection. It sets the font family to ‘Montserrat’, the text transformation to none, the color, the background color, adds an margin of 50 px from the top and bottom, adds padding of 25px from the top and bottom and 20 pixels from the left and right, and sets the border radius to 50px.
.container-h1 {
font-family: 'Lora', serif;
text-align: center;
font-size: 50px;
font-weight: 700;
margin: 50px auto;
color: #333;
font-family: 'Ubuntu', sans-serif;
}
.btn {
color: #fff;
background-color: #182c39;
margin: 20px auto;
border-radius: 0;
font-weight: 500;
display: table;
padding: 10px;
}
.btn:hover{
color: #182c39;
background-color: transparent;
border: 1px solid #182c39;
}
.hr-h3s {
border: 3px solid #E94B3C;
width: 70px;
margin: 0 auto 35px auto;
}
textarea {
resize: none;
}
section {
align-items: center;
padding: 50px 60px;
}
.bg-section h2 {
font-family: 'Montserrat', sans-serif;
text-transform: none;
color: #ffc266;
background-color: #182c39;
margin: 50px 0;
padding: 25px 20px;
border-radius: 50px;
}
Lets move ahead
This code defines an animation called slide and a class called slideanim that is sets the visibility of elements to hidden. The slide animation is applied to elements with the class slide and it use keyframe to change the element’s opacity and position over an period.
The keyframes and webkitkeyframes rules define the animation behavior for all browsers that support CSS animations. The slide animation starts with a opacity of 0 and an transform that moves the element to the right 50% of it width. At 100% of the animation duration the element has a opacity of 1 and an transform that places it at its original position 0%.
The webkit prefix is used for older versions of the WebKit engine used by Safari and other browser.
.slideanim {
visibility: hidden;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
-moz-animation-name: slide;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateX(50%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}Lets move ahead
The navbar class sets the background color and border color of the navigation bar with the font weight and padding. The navbar navbarbrand class styles the website’s logo or brand name, with an custom font family and size, and a text shadow effect. The navbar navba-nav class styles the links in the navigation menu, with uppercase text and a custom font family. The navbar navbarnav li a class applies styles specifically to the links in the navigation menu, including their font weight and size and color, and text shadow. The navbarscrolled class adds an box shadow effect to the navigation bar when the user scrolls down the page.
The jumbotron class styles the large header section of the website, which includes a background image, a heading, and a subheading. The backgroundimage, backgroundposition, backgroundsize, and backgroundrepeat properties set the image for the header, as well as its position, size, and repetition. The jumbotron header contentinner class styles the content within the header section, with custom font family with font weight and margin. The jumbotron h1 and jumbotron h3 classes style the main heading and subheading with custom font sizes. The textshadow property creates a shadow effect behind the text in the header.
/* ******* Header + Navigation ******* */
.navbar {
background-color: #182c39;
border-color: rgb(51, 17, 0);
border-color: rgba(51, 17, 0, 0.2);
font-weight: 700;
padding: 15px 0;
transition: padding .5s;
}
.navbar .navbar-brand {
color: #fff;
font-family: 'Leckerli One', cursive;
font-weight: 500;
text-transform: none;
font-size: 25px;
padding-left: 15px;
text-shadow: black 0.3em 0.3em 0.3em;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ffc266;
transition: color 1s;
}
.navbar .navbar-nav {
padding-right: 50px;
}
.navbar .navbar-nav > li > a {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
color: #fff;
margin: auto 5px;
font-family: 'Lato', sans-serif;
text-shadow: #222 0.3em 0.3em 0.3em;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus:hover {
color: #ffc266;
transition: color 1s;
}
.navbar .navbar-nav > li.active > a:hover,
.navbar .navbar-nav > li.active > a:focus:hover {
background-color: transparent;
}
.navbar.scrolled {
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 5px 0;
opacity: 0.9;
}
.jumbotron {
margin-bottom: 0px;
background-image: url('https://res.cloudinary.com/dbte0ueti/image/upload/v1536951689/new/jumbotron.jpg');
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
height: 700px;
}
.jumbotron .header-content-inner {
font-weight: 700;
text-transform: none;
margin-bottom: 0;
margin: 200px;
font-family: 'Roboto', sans-serif;
}
.jumbotron h1 {
font-size: 45px;
}
.jumbotron h3 {
font-size: 25px;
}
Lets move ahead
The bg about class defines the background color and margin for the section.
The #about h3 selector styles the heading of the section with a specific font, color, and margin.
The about restaurant history p selector styles the paragraph text within the section with a specific padding, font, size, and color. The first letter of the first sentence is styled with a larger font size and a different color using the p.first first-letter pseudo-element.
The about h1 selector styles the main heading of the section with a specific padding.
The about image selector styles the images within the section to have a width of 100% and an auto height.
The hov img class defines a hover effect for images within the section. The image is initially displayed with a transparent overlay hov img top that covers the entire image, and this overlay becomes opaque and displays text when the image is hovered over. The hov img text selector styles the text that appears on the overlay, including its position and size and font.
Finally, the hov img slideup class is used to slide the text on the overlay upwards when it is displayed.
/* ******* About ******* */
.bg-about {
margin: auto 50px;
background-color: white;
}
#about h3 {
font-family: 'Roboto', sans-serif;
color: #E94B3C;
}
#about .restaurant-history p {
padding: 20px 80px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #444;
}
p.first::first-letter {
font-size: 150%;
color: #000;
}
#about h1 {
padding-top: 35px;
}
#about .image {
display: block;
width: 100%;
height: auto;
}#about .hov-img * {
box-sizing: border-box;
}
#about .hov-img {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
#about .hov-img img {
max-width: 100%;
}
#about .hov-img-bottom {
display: block;
}
#about .hov-img-top {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#about .hov-img:hover .hov-img-top {
opacity: 1;
}
#about .hov-img-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
text-shadow: black .2em .2em .2em;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#about .hov-img-text p {
font-size: 15px;
line-height: 1.2em;
}
#about .hov-img-slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
#about .hov-img:hover .hov-img-slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}Lets move ahead
The first section of the code is going to sets the margin of the menu and the second section set the bg color and border color of the menu. The third section sets the font weight with color and size of the menu items with their border and text transform properties. The fourth section sets the background color and text color of the menu items when hovered over or selected.
The fifth section sets the border style and width of a horizontal line element used to separate menu items. The sixth section sets the background color and border properties of the list items within the menu. The seventh section styles the heading element within the menu content, including its alignment and font family.
The eighth and ninth sections set the border radius of the first and last list item respectively and style the heading and paragraph elements within each list item. The tenth section sets the style of a badge element within the menu. Finally, the last section styles an cover element on the right side of the menu with a specific background color, font color, and text shadow.’
.bg-menu {
margin: auto 50px;
}
#menu .nav-pills {
background-color: #182c39;
border-color: transparent;
font-weight: 500;
color: #000;
margin: 25px;
}
#menu .nav-pills > li > a,
#menu .nav-pills > li > a:focus {
font-weight: 500;
font-size: 15px;
color: #fff;
border-radius: 0;
border: 1px solid #fff;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
}
#menu .nav-pills > li > a:hover,
#menu .nav-pills > li > a:focus:hover {
color: #fff;
background-color: #944743;
}
#menu .nav-pills > li > a.active,
#menu .nav-pills > li > a.active:focus {
background-color: #944743;
color: #fff;
}
#menu .hr-menu {
border: 2px solid #182c39;
width: 100%;
}
#menu .list-group-item {
background-color: transparent;
border: none;
border-bottom: 1px solid #555;
padding: 0 auto;
}
#menu .tab-content .tab-pane h3 {
text-align: center;
font-family: 'Leckerli One', cursive;
}
#menu .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#menu .list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#menu .list-group-item h4 {
text-align: left;
color: #182c39;
text-transform: none;
font-size: 18px;
}
#menu .list-group-item p {
text-align: left;
color: #555555;
font-weight: 500;
font-style: italic;
text-transform: none;
font-size: 14px;
}
#menu .badge {
border-radius: 0;
background-color: #444;
font-size: 12px;
color: #fff;
}
#menu .right-cover {
background-color: #fff;
color: #DC4C46;
text-shadow: #DC4C46 .4em .4em .4em;
padding: 10px;
text-transform: none;
}Lets go
This code is responsible for styling the “Service” section of our website. It includes CSS rules for the circular icons that represent different services with rules for their associated text.
The service round class is used to style the circular icons. It is set the height and width of the icon to 100px and adds an border radius of 50% to create an circular shape. The border is set to 8px solid and the text is centered and given a padding of 10px. The color of the icon and its border is set.
The “h4” tag is used to style the text associated with the icons. It sets the margin to 10px auto and the font size to 20px. The color is set.
When the user hovers over a icon, the color of the icon and its associated text change with an transition effect of 2 seconds. Additionally, the border color of the icon changes with a transition effect of 2s.
Ecommerce Website Using Html,Css and JavaScript
/* ******* Service ******* */
#service .service-round {
height: 100px;
width: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 8px solid #182c39;
text-align: center;
display: inline-block;
padding: 10px;
color: #182c39;
}
#service .service-round i {
color: #182c39;
}
#service h4 {
margin: 10px auto;
font-size: 20px;
color: #555;
}
#service .round:hover .fa {
color: #ffc266;
transition: color 2s;
}
#service .round:hover .service-round {
border-color: #ffc266;
transition: border-color 2s;
}
Lets move ahead and add more CSS code
This code is going to defines the styling for an gallery component in our web site using CSS. It starts with setting the font family, color, and margin of the heading of the gallery section. Then it specifies the margin for the gallery element and removes the padding of the columns inside the gallery.
Then the appearance of the caption content of each portfolio item which is initially hidden and will be shown on hover using a transition effect. The caption content is positioned absolutely at the bottom of the portfolio item and has an black background and white color. The font awesome icon inside the caption content is centered using CSS transforms.
The last part of the code defines the style of the “more images” section at the bottom of the gallery. This section has a dark background color and an centered button with white text that takes the user to another page with more images. The social media icons in this section have a white color and change to orange on hover.
/* ******* Gallery ******* */
#gallery h3 {
font-family: 'Lato', sans-serif;
text-transform: none;
color: #182c39;
margin: 50px auto 10px auto;
font-weight: 700;
}
#gallery .gallery {
margin: 0px 80px;
}
#gallery .no-gutter > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
#gallery .caption-content {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
color: #f1f1f1;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
#gallery .portfolio-item:hover .caption-content {
bottom: 0;
height: 100%;
}
#gallery .caption-content .fa {
white-space: nowrap;
color: white;
font-size: 40px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#gallery .more-img {
margin: 0 80px;
background-color: #182c39;
}
#gallery .more-img .to-gallery {
text-align: center;
text-transform: none;
color: #fff;
padding: 10px;
margin: 0px auto;
}
#gallery .more-img .to-gallery h4 {
text-transform: none;
color: #fff;
padding: 5px;
margin: auto;
font-size: 16px;
}
#gallery .more-img .social-networks .fa {
font-size: 20px;
margin: 5px 5px;
color: #fff;
}
#gallery .more-img .social-networks .fa:hover {
color: #ffc266;
}Let move ahead
The given code contains the styling information for two sections of our web page “Our staff” and “Testimonials”. The first section is styled using CSS selectors starting with “#staff”. It includes a class named “thumbnail-row” that centers the content on the page using margin properties. It also contains an h3 heading styled with a custom font, color, and margin. The images in this section have a circular border using the “border-radius” property and are made to have a box-shadow effect when hovered over with the mouse.
The second section styled using CSS selectors starting with “#testimonials” is styled differently from the first section. It contains a h3 heading and an horizontal line that has a border color and width set using the “border” property. The carousel element in this section is centered on the page using the “float” and “margin” properties. The carousel indicators are styled using a circular shape with a border and background color. The active indicator is given a different border color and background color. The carousel item in this section have custom h4 and h5 headings styled with different font sizes, weights, and styles.
/* ******* Our staff ******* */
#staff .thumbnail-row {
margin: auto 60px;
}
#staff h3 {
font-family: 'Lato', sans-serif;
text-transform: none;
color: #182c39;
margin: 50px auto 10px auto;
}
#staff img {
border-radius: 50%;
margin-bottom: 10px;
}
#staff h5 {
color: #222;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
#staff h6 {
color: #555;
font-size: 16px;
}
#staff img:hover {
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.9);
transition: .3s;
}
/* ******* Testimonials ******* */
#testimonials .hr-testimonials {
border: 1px solid #182c39;
width: 50%;
margin: 0 auto 35px auto;
}
#testimonials h3 {
color: #182c39;
margin: 40px auto;
}
#testimonials .carousel {
float: none;
margin: auto;
}
#testimonials .carousel-indicators li {
border: 2px solid #182c39;
background-color: #fff;
height: 10px;
width: 10px;
border-radius: 50%;
}
#testimonials .carousel-indicators li.active {
border-color: #fff;
background-color: #182c39;
}
#testimonials .carousel-item h4 {
font-size: 18px;
line-height: 1.2em;
font-weight: 500;
padding-bottom: 20px;
}
#testimonials .carousel-item h5 {
font-size: 15px;
font-weight: 500;
margin-bottom: 80px;
font-style: italic;
}The above code is for styling the Contact section of our web page. It includes styles for input fields with buttons and other elements in the section. The first code sets the border and border-radius properties for the input and `textarea` fields in the form-group class. The second code set the hover effect for these fields, changing the border color and adding an box shadow. The third code define the style for the buttons in the contact-buttons class, including the background color also font weight with padding and cursor. It also set the hover effect for the buttons, reversing the background and text colors.
The fourth code set the style for the left-box element which contains text information for the contact section. It sets the background color, margin, font size, text transform, line height, font weight, and padding properties. It also defines a span element within the left-box element with a specific color, font weight, and font size. The fifth and final paragraph of the code sets a grayscale filter for the Google Map element in the contact section, making it appear in black and white.
/* ******* Contact ******* */
#contact .form-group input,
#contact .form-group textarea {
border: 1px solid #000;
border-radius: 0;
}
#contact .form-group input:hover,
#contact .form-group textarea:hover {
border-color: #ababee;
box-shadow: 2px 2px 2px rgba(0,0,0, .2);
}
#contact .contact-buttons input,
#contact .contact-buttons input:focus {
color: #fff;
background-color: #182c39;
margin: 20px auto 40px auto;
border-radius: 0;
font-weight: 500;
padding: 10px;
border: 1px solid #182c39;
cursor: pointer;
}
#contact .contact-buttons input:hover {
color: #182c39;
background-color: #fff;
}
#contact .left-box {
background-color: #182c39;
margin: 0 20px;
font-size: 15px;
text-transform: none;
line-height: 1.8em;
font-weight: 500;
padding: 30px 50px;
color: #fff;
}
#contact .left-box .span-contact {
color: #ffc266;
font-weight: 700;
padding-right: 20px;
font-size: 17px;
}
#contact #googleMap {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
The given code is for styling the footer section of our website. The footer is designed to have a blue background color and white text color, which is defined in the footer selector. The font family used for the footer text is Roboto, sans serif.
The social network icons are defined in the footer fa selector which includes properties such as font size and background color and color and border radius and padding and height and width and text align. When the mouse hovers over the Facebook and Instagram icons they will change their background color and border color, and their text color to the background color.
The to top button is defined in the footer to top selector, which is positioned fixed at the bottom right corner of the screen. It has an background color and an text color of white. When the mouse hovers over the button and its background color and text color change and an transition effect is applied.
/* ***** Footer ***** */
#footer {
background-color: #182c39;
color: white;
font-family: 'Roboto', sans-serif;
}
#footer ul {
list-style-type: none;
padding-left: 0;
line-height: 2.2;
}
#footer h5 {
font-size: 18px;
color: white;
margin-top: 40px;
margin-bottom: 10px;
text-transform: uppercase;
}
#footer a {
color: #aaa;
}
#footer a:hover,
#footer a:focus {
text-decoration: none;
color: white;
}
#footer .social-networks {
padding-top: 20px;
padding-bottom: 25px;
}
#footer .footer-items .fa {
font-size: 17px;
margin-bottom: 5px;
background-color: white;
color: #182c39;
border-radius: 50%;
padding-bottom: 25px;
height: 30px;
width: 30px;
text-align: center;
line-height: 31px;
text-decoration: none;
transition: color 1s;
}
#footer .footer-items {
margin: auto;
padding-left: 50px;
font-size: 15px;
}
#footer .fa-facebook:hover,
#footer .fa-instagram:hover {
border: 1px solid #fff;
color: #fff;
background-color: #182c39;
}
.footer-copyright {
background-color: #10222e;
}
.footer-copyright p {
text-align: center;
color: #ccc;
font-size: 15px;
padding: 10px 0;
margin-bottom: 0;
}
#footer .hr-foot {
width: 80%;
margin: 10px auto;
border: 1px solid #fff;
}
#footer .to-top {
color: #fff;
font-size: 30px;
position: fixed;
right: 12px;
bottom: 12px;
height: 40px;
width: 40px;
text-decoration: none;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
background: rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-position: center;
}
#footer .to-top:hover {
background-color: #222;
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
Step 3: Writing the JS code and adding Function to our website
Go create a file called script.js
The first function is for the navbar scroll effect which is going to add an CSS class to the navbar when the user scrolls down the page past. It is going to check the position of the document relative to the top of the page and adds the scrolled class to the navbar if the position is greater than 80px. If the user scrolls back up above that position the scrolled class will be removed.
The second function is for an button with the ID more that toggles an CSS class called more on and off when clicked. When the class is added than the button text is rewritten to `Less` text but if the class is removed than the button text is changed to text More. This function uses the hasClass and toggleClass methods to check if the button already has the more class and add or remove it.
/* Navbar scroll */
$(function(){
var nav = $('.navbar'),
doc = $(document),
win = $(window);
win.scroll(function() {
if (doc.scrollTop() > 80) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
win.scroll();
});
/* ***** Btn More-Less ***** */
$("#more").click(function(){
var $this = $(this);
$this.toggleClass('more');
if($this.hasClass('more')){
$this.text('More');
} else {
$this.text('Less');
}
});Lets are three more functions
The first part of the code adds a class “slide” to element with the class of the “slideanim” when the element is scrolled into view (within 600 pixels from the top of the viewport).
The second part of the code enables smooth scrolling to any anchor link clicked on the navbar or the service section. It prevents the default action of the anchor tag, gets the hash value of the clicked link, and animates the scroll to the top of the element with the matching ID, with a duration of 900 milliseconds.
The end part of the code make an “to-top” button when the user has scrolled down 300px and when clicked, it is going to animates the scroll to the top of the page.
/* ***** Slideanim ***** */
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
/* ***** Smooth Scrolling ***** */
$(document).ready(function(){
$(".navbar a, #service a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
}
});
/* ***** Scroll to Top ***** */
$(window).scroll(function() {
if ($(this).scrollTop() >= 300) {
$('.to-top').fadeIn(200);
} else {
$('.to-top').fadeOut(200);
}
});
$('.to-top').click(function() {
$('.body,html').animate({
scrollTop : 0
}, 500);
});
})That is it
Let’s see the video again
Final Output Of Restaurant Website Using Html And Css
Live Preview Of Restaurant Website:-
FAQs:
Does this website has a google map embed in it?
Yes, this website has google map embed in it which can be used for seeing the location of the restaurant and etc.
Does this website has reponsiveness?
Yes, this website is very much responsive and there is an amazing looking hamburger when the website is run in mobile phones.
Can use the google maps to see my home and this restaurants location?
Yes, you can see the restaurant in this google map that is the main purpose of this map
Does this website contains animations when we scroll down?
Yes, This website contains animations and when we scroll down these animations look cool and make good design to website