Free Food Website Template
Free Food Website Template normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
A website is a collection of publicly accessible, interlinked Web pages that share a single domain name. Websites can be created and maintained by an individual, group, business or organization to serve a variety of purposes.
Together, all publicly accessible websites constitute the World Wide Web.
Although it is sometimes called “web page,” this definition is wrong, since a website consists of several webpages. A website is also known as a “web presence” or simply “site”.
Websites come in a nearly endless variety, including educational sites, news sites, porn sites, forums, social media sites, e-commerce sites, and so on. The pages within a website are usually a mix of text and other media. That said, there are no rules dictating the form of a website.
A person could create a website of nothing but black and white photos of roses, or the word “cat” linked to another Web page with the word “mouse.” However, many sites follow a standard pattern of a homepage that links off to other categories and content within the website.
<!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.0">
<title>Our Food stole</title>
<!-- logo script link -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- custom css file link -->
<link rel="stylesheet" href="food.css">
</head>
<body>
<div class="main" id="home">
<nav class="header" id="header">
<div class="logo">
<h1>Food</h1>
</div>
<div class="link" id="links">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#service">services</a>
<a href="#blog">blog</a>
<a href="#contact" class="aa">contact</a>
</div>
<div class="icon">
<ion-icon name="menu-outline" id="menu-btn" onclick="openmenu()"></ion-icon>
<ion-icon name="close-outline" id="close" onclick="closemenu()"></ion-icon>
</div>
</nav>
<div class="header_content">
<center>
<img src="logo1.png">
<br>
<ion-icon name="chevron-down-outline"></ion-icon>
</center>
</div>
</div>
<!-- ===========================================Our Food section start================ -->
<section class="content" id="service">
<div class="text_content">
<h1>Our Food</h1>
<!-- <center><hr></center> -->
<hr>
<p><i>Our food roots are colourful, global and eclectic with a gourmet, playful edge.
We get inspired by flavours and ingredients from all four corners of the world and
put our signature "wild" twist to them. Our aim is to provide a little vision on how
food could be if we just imagined so!</i></p>
</div>
<div class="img">
<img src="image1.jpeg" alt="">
</div>
</section>
<!-- ===========================================Our Food section ent================ -->
<!-- ===========================================organic section start================ -->
<section class="content">
<div class="text_content">
<h1>organic</h1>
<!-- <center><hr></center> -->
<hr>
<p><i>Our food roots are colourful, global and eclectic with a gourmet, playful edge.
We get inspired by flavours and ingredients from all four corners of the world and
put our signature "wild" twist to them. Our aim is to provide a little vision on how
food could be if we just imagined so!</i></p>
</div>
<div class="img">
<img src="image2.jpeg" alt="">
</div>
</section>
<!-- ===========================================organic section ent================ -->
<!-- ===========================================Our Food section start================ -->
<section class="content">
<div class="text_content">
<h1>Our Food</h1>
<!-- <center><hr></center> -->
<hr>
<p><i>Our food roots are colourful, global and eclectic with a gourmet, playful edge.
We get inspired by flavours and ingredients from all four corners of the world and
put our signature "wild" twist to them. Our aim is to provide a little vision on how
food could be if we just imagined so!</i></p>
</div>
<div class="img">
<img src="image3.jpeg" alt="">
</div>
</section>
<!-- ===========================================Our Food section ent================ -->
<!-- ===================================================================================== -->
<section class="content">
<img src="image4.jpeg">
</section>
<!-- ===================================================================================== -->
<!-- ========================================footer section start========================== -->
<section class="footer">
<div class="footer_logo">
<img src="logo2.png">
</div>
<div class="footer_icons" id="contact">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
</div>
</section>
<!-- ========================================footer section end========================== -->
<!-- javascript file -->
<script>
let menu = document.getElementById('links')
let open = document.getElementById('menu-btn')
let close = document.getElementById('close')
function openmenu() {
menu.style.left = "0";
open.style.display = "none";
close.style.display = "inline-block"
}
function closemenu() {
menu.style.left = "100%";
open.style.display = "inline-block";
close.style.display = "none";
}
var scrollTrigger = 600;
let nav = document.getElementById('header');
</script>
<script type="text/javascript">
var scrollTrigger = 600;
let nava = document.getElementById('header');
let mybutton = document.getElementById("myBtn");
let heading3 = document.getElementById("head");
window.onscroll = function () {
// We add pageYOffset for compatibility with IE.
if (window.scrollY >= scrollTrigger) {
nava.style.background = "#eee";
nava.style.zIndex = "999999";
nava.style.boxShadow = "0px 0px 10px black";
mybutton.style.display = "block";
heading3.style.color = "black";
} else {
nava.style.background = "none";
nava.style.zIndex = "999999";
nava.style.boxShadow = "none";
mybutton.style.display = "none";
}
};
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
:root {
--main-color: #e00b4c;
--main-color2: #ffffff;
--font-color: rgb(12, 11, 11);
}
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
body {
background: #eee;
}
.main {
width: 100%;
height: 100vh;
background-image: url(background.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0%;
animation: change 10s infinite ease-in-out;
z-index: -1;
}
.header {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 7rem;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.header .logo h1 {
font-size: 40px;
padding: 15px 0;
}
.header .link {
position: relative;
left: 270px;
z-index: 99999;
}
.header .link a {
font-size: 18px;
margin-right: 60px;
color: black;
}
.header .link a:hover {
color: var(--main-color);
}
#menu-btn,
#close {
display: none;
}
.icon ion-icon {
font-size: 40px;
color: var(--main-color);
margin-left: 10px;
cursor: pointer;
}
.header_content {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.header_content ion-icon {
font-size: 60px;
color: var(--main-color);
margin-top: 100px;
}
/* ================================================ */
.content {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
padding: 50px 100px;
}
.text_content {
width: 40%;
height: 100%;
text-align: left;
}
.img {
width: 60%;
height: 100%;
overflow: hidden;
}
.img img {
width: 100%;
height: 110%;
}
.text_content h1 {
font-size: 40px;
padding: 20px 0;
}
.text_content hr {
width: 20%;
height: 5px;
background: var(--main-color);
}
.text_content p {
font-size: 18px;
font-weight: 300;
padding: 30px 30px 0 0;
}
/* ===================================================== */
.footer {
width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 7%;
border-bottom: 5px solid var(--main-color);
}
.footer img {
width: 200px;
height: 50px;
}
.footer .footer_icons ion-icon {
font-size: 35px;
padding: 10px;
border-radius: 10px;
margin-right: 10px;
}
.footer .footer_icons ion-icon:hover {
background: var(--main-color);
color: #eee;
cursor: pointer;
}
/* =====================================================================================
=========================================================================================
=========================MEDIA QURRY STATR============================================== */
@media only screen and (max-width: 991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
section {
padding: 2rem;
}
.header .logo {
position: relative;
left: 7%;
}
.header .link {
position: relative;
left: 16%;
}
.content {
padding: 0;
margin: 0;
}
.text_content {
text-align: center;
padding: 0 30px;
}
.text_content hr {
margin: auto;
}
}
@media only screen and (max-width: 768px) {
#menu-btn {
display: inline-block;
background: var(--black);
}
#close {
background: var(--black);
}
#header .link {
position: absolute;
top: 100%;
left: -100%;
width: 100%;
height: 100vh;
background: rgba(238, 238, 238, 0.5);
padding: 2rem;
transition: .5s;
z-index: 999999;
}
#header .link a {
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 20px;
text-align: center;
z-index: 9999999;
}
#header .link a:hover {
background: rgba(0, 0, 0, 0.5);
color: #eee;
}
.content {
display: block;
padding: 0;
margin: 0;
text-align: center;
}
.text_content {
width: 100%;
padding: 100px 50px;
}
.img {
width: 100%;
}
.image4 {
width: 100%;
height: auto;
}
}
@media only screen and (max-width: 691px) {
.footer {
height: auto;
display: block;
padding: 30px;
}
.footer .footer_logo {
margin: auto;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.footer .footer_logo img {
margin: auto;
}
.footer .footer_icons {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 10%;
}
}