Foodie Website
Creating Fully Responsive Website Project Using HTML & CSS
Before starting, take a look at all the folders, we will use. Also download all the images given in the bottom of this post ;)
We will begin by making a navbar and give it an id as follows-
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item"><a href="#home">Home</a></li>
<li class="item"><a href="#services-container">Services</a></li>
<li class="item"><a href="#client-section">Our Clients</a></li>
<li class="item"><a href="#contact">Contact Us</a></li>
</ul>
</nav>
- Now we will make a section below it and add a background image to it. Create a section with id as home as follows-
<section id="home">
<h1 class="h-primary">Welcome to MyOnlineMeal</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis dolorum numquam minus. </p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
<button class="btn">Order Now</button>
</section>
The next step is to customize this section with the CSS. We will target each element of the home section and customize them individually.
Next, we will make the services class where we will describe the services provided by us. The code is as follows-
<section id="services-container">
<h1 class="h-primary center">Our Services</h1>
<div id="services">
<div class="box">
<img src="img/1.png" alt="">
<h2 class="h-secondary center">Food Catering</h2>
<p class="center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, culpa suscipit error
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et qui, repudiandae similique nam, recusandae quidem ab asperiores ex, aut fugit labore veritatis facere?
sint delectus ab dolorum nam. Debitis facere, incidunt voluptates eos, mollitia voluptatem iste sunt
voluptas beatae facilis labore, omnis sint quae eum.</p>
</div>
<div class="box">
<img src="img/2.png" alt="">
<h2 class="h-secondary center">Bulk Ordering</h2>
<p class="center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, culpa suscipit error
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde laudantium a incidunt animi ad, ab dignissimos vero? Unde numquam odit repudiandae perferendis nisi.
sint delectus ab dolorum nam. Debitis facere, incidunt voluptates eos, mollitia voluptatem iste sunt
voluptas beatae facilis labore, omnis sint quae eum.</p>
</div>
<div class="box">
<img src="img/3.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, culpa suscipit error
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus provident fugiat aliquam minima at explicabo. Earum eveniet quaerat, sunt molestias nesciunt quas! Quis.
sint delectus ab dolorum nam. Debitis facere, incidunt voluptates eos, mollitia voluptatem iste sunt
voluptas beatae facilis labore, omnis sint quae eum.</p>
</div>
</div>
</section>
- Now we will add CSS to this services container section and modify it accordingly.
- The next step is to add the client's section on the page or the sensors of our page. Here we can name our clients and add a picture of them. The code for it is as follows-
<section id="client-section">
<h1 class="h-primary center">Our Clients</h1>
<div id="clients">
<div class="client-item">
<img src="img/logo1.png" alt="Our Client">
</div>
<div class="client-item">
<img src="img/logo2.png" alt="Our Client">
</div>
<div class="client-item">
<img src="img/logo4.png" alt="Our Client">
</div>
<div class="client-item">
<img src="img/logo3.png" alt="Our Client">
</div>
</div>
</section>
Now we will add CSS to this section and the first step is to convert the section after our clients should be converted into a flexbox.
Next, we will add the contact form to our website. The form will contain a name, email, phone no., and message box. The code for it is as follows-
<section id="contact">
<h1 class="h-primary center">Contact Us</h1>
<div id="contact-box">
<form action="">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="email" name="name" id="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="phone">Phone Number: </label>
<input type="phone" name="name" id="phone" placeholder="Enter your phone">
</div>
<div class="form-group">
<label for="message">Message: </label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
</form>
</div>
</section>
The next step is to style our form with the help of CSS. We will differently style contact::before, contact-box, contact-box input, contact-box form, and contact-box label.
The next step is to make the website responsive. For making it responsive, we will make a new file as phone.css and necessary code here. Add the file in the HTML along with media queries as follows-
After doing all the necessary changes your website would now be responsive.
So I hope you must have got an idea of how to make a fully responsive website using HTML and CSS. Try to customize more things according to your needs and keep practicing.
Code file .\index.html as described above:
Code file phone.css as described above:/* Navigation */#navbar { flex-direction: column;}
#navbar ul li a{ font-size: 1rem; padding: 0px 7px; padding-bottom: 8px;}/* Home section */#home{ height: 370px; padding: 3px 28px;}
#home::before{ height: 480px; }
#home p{ font-size: 13px;}
/* Services section */#services{ flex-direction: column;}
#services .box { padding: 14px; margin: 2px 0px; margin-bottom: 20px;}
/* Clients section */#clients{ flex-wrap: wrap;}
#clients img{ width: 66px; padding: 6px; height: auto;}
/* Contact us section */#contact-box form{ width:80%;}/* Footer */
/* Utility classes */.h-primary{ font-size:26px;}.btn{ font-size: 13px; padding: 4px 8px;}
Code file style.css as described above:
/* CSS Reset */
*{
margin: 0;
padding: 0;
}
html{
scroll-behavior: smooth;
}
/* CSS Variables */
:root{
--navbar-height: 59px;
}
/* Navigation Bar */
#navbar{
display: flex;
align-items: center;
position: sticky;
top: 0px;
}
#navbar::before{
content: "";
background-color: black;
position: absolute;
top:0px;
left:0px;
height: 100%;
width:100%;
z-index: -1;
opacity: 0.7;
}
/* Navigation Bar: Logo and Image */
#logo{
margin: 10px 34px;
}
#logo img{
height: 59px;
margin: 3px 6px;
}
/* Navigation Bar: List Styling */
#navbar ul{
display: flex;
font-family: 'Baloo Bhai', cursive;
}
#navbar ul li{
list-style: none;
font-size: 1.3rem;
}
#navbar ul li a{
color: white;
display: block;
padding: 3px 22px;
border-radius: 20px;
text-decoration: none;
}
#navbar ul li a:hover{
color: black;
background-color: white;
}
/* Home Section */
#home{
display: flex;
flex-direction: column;
padding:3px 200px;
height: 550px;
justify-content: center;
align-items: center;
}
#home::before{
content: "";
position: absolute;
background: url('../bg1.jpg') no-repeat center center/cover;
height: 642px;
top:0px;
left:0px;
width: 100%;
z-index: -1;
opacity:0.89;
}
#home h1{
color:white;
text-align: center;
font-family: 'Bree Serif', serif;
}
#home p{
color:white;
text-align: center;
font-size: 1.5rem;
font-family: 'Bree Serif', serif;
}
/* Services Section */
#services{
margin: 34px;
display: flex;
}
#services .box{
border: 2px solid brown;
padding: 34px;
margin: 2px 55px;
border-radius: 28px;
background: #f2f2f2;
margin-bottom: 20px;
}
#services .box img{
height: 160px;
margin: auto;
display: block;
}
#services .box p{
font-family: 'Bree Serif', serif;
}
/* Clients Section */
#client-section{
position: relative;
}
#client-section::before{
content: "";
position: absolute;
background: url('../bg.jpg');
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;
}
#clients{
display: flex;
justify-content: center;
align-items: center;
}
.client-item{
padding: 34px;
}
#clients img{
height: 124px;
}
/* Contact Section */
#contact{
position: relative;
}
#contact::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.7;
background: url('../contact.jpg') no-repeat center center/cover;
}
#contact-box{
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 34px;
}
#contact-box input,
#contact-box textarea{
width: 100%;
padding: 0.5rem;
border-radius: 9px;
font-size: 1.1rem;
}
#contact-box form{
width: 40%;
}
#contact-box label{
font-size: 1.3rem;
font-family: 'Bree Serif', serif;
}
footer{
background: black;
color: white;
padding: 9px 20px;
}
/* Utility Classes */
.h-primary{
font-family: 'Bree Serif', serif;
font-size: 3.8rem;
padding: 12px;
}
.h-secondary{
font-family: 'Bree Serif', serif;
font-size: 2.3rem;
padding: 12px;
}
.btn{
padding: 6px 20px;
border: 2px solid white;
background-color: brown;
color: white;
margin: 17px;
font-size: 1.5rem;
border-radius: 10px;
cursor:pointer;
}
.center{
text-align: center;
}
Images needed:
(Note: Make sure not to change the name of any of these files and also save them in the same folder where you are writing the code)
Superb bro
ReplyDeleteGood Skills
Hi bro greenmangomore it u.
ReplyDelete