In this article, we will learn how to make a fully responsive website using properties we learned so far like display flex, media queries, pseudo-selectors, etc.
Firstly, we need to make the structure of the website using HTML and then designing it using CSS.
So let’s take look a look at the HTML part.
HTML:
In HTML, firstly we need to make a navbar, a footer, and 4 sections in middle.
In Navbar, we need to add a logo and 4 menu items which we will add using an unordered list.
Then we will make a section in which we will add a description of the food website and an order button at the end of the section.
Then we will make another section in which we will add 3 block items which we describe the services provided by the food website.
After that, we will add a section in which we will mention our clients.
and then we will add a contact form in which the user can input his/her contact details.
At last, we will add the footer to the website.
As shown in the below code. This is the index.html file:
| <!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>MyOnlineMeal</title> <link rel=”stylesheet” href=”CSS/style.css”> <link rel=”stylesheet” media=”screen and (max-width: 1035px)” href=”CSS/phone.css”> <link rel=”preconnect” href=”https://fonts.gstatic.com”> <link href=”https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;500&family=Varela+Round&display=swap” rel=”stylesheet”> </head> <body> <nav id=”navbar”> <div id=”logo”> <img src=”food_logo.jpg” alt=”MyOnlineMeal.com”> </div> <ul> <li class=”item”><a href=”#”>Home</a></li> <li class=”item”><a href=”#”>Our Services</a></li> <li class=”item”><a href=”#”>About Us</a></li> <li class=”item”><a href=”#”>Contact Us</a></li> </ul> </nav> <section id=”home”> <h2 class=”h-primary”>Welcome to MyOnlineMeal</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum non quo consectetur necessitatibus, sed sit hic exercitationem iste illo, nisi vero voluptas beatae!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate id rerum, illum labore ducimus nisi?</p> <button class=”btn”>Order now</button> </section> <section id=”service-container”> <h2 class=”h-primary center”>Our Services</h2> <div id=”services”> <div class=”box”> <img src=”pizza.png” alt=”pizza”> <h3 class=”h-secondary center”>Food Catering</h3> <p class=”center”>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error tenetur illo at autem ipsum saepe possimus quidem amet magnam odio, repellat deserunt sit animi dignissimos qui sint, perspiciatis aspernatur. Ad nisi eos ratione pariatur!</p> </div> <div class=”box”> <img src=”food1.jpeg” alt=”pizza”> <h3 class=”h-secondary center”>Bulk Ordering</h3> <p class=”center”>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error tenetur illo at autem ipsum saepe possimus quidem amet magnam odio, repellat deserunt sit animi dignissimos qui sint, perspiciatis aspernatur. Ad nisi eos ratione pariatur!</p> </div> <div class=”box”> <img src=”delivery.png” alt=”pizza”> <h3 class=”h-secondary center”>Food Delivering</h3> <p class=”center”>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error tenetur illo at autem ipsum saepe possimus quidem amet magnam odio, repellat deserunt sit animi dignissimos qui sint, perspiciatis aspernatur. Ad nisi eos ratione pariatur!</p> </div> </div> </section> <section id=”client-section”> <h2 class=”h-primary center”>Our Clients</h2> <div id=”clients”> <div class=”client-item”> <img src=”applelogo.png” alt=”Our Clients”> </div> <div class=”client-item”> <img src=”googlelogo.png” alt=”Our Clients”> </div> <div class=”client-item”> <img src=”delllogo.png” alt=”Our Clients”> </div> <div class=”client-item”> <img src=”hplogo.png” alt=”Our Clients”> </div> <div class=”client-item”> <img src=”fblogo.png” alt=”Our Clients”> </div> </div> </section> <section id=”contact”> <h2 class=”h-primary center”>Contact Us</h2> <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=”email” id=”email” placeholder=”Enter your email”> </div> <div class=”form-group”> <label for=”phone”>Phone no.: </label> <input type=”phone” name=”phone” id=”phone” placeholder=”Enter your phone number”> </div> <div class=”form-group”> <label for=”message”>Message: </label> <textarea name=”message” id=”message” cols=”30″ rows=”10″ placeholder=”Enter your message here…”></textarea> </div> <div class=”btn1″> <button type=”submit”>Submit</button> <button type=”reset”>Reset</button> </div> </form> </div> </section> <footer> <div class=”center”> Copyright © www.MyOnlineMeal.com All Rights Reserved ! </div> </footer> </body> </html> |
That’s about structuring the website. Now we will design the website using CSS.
CSS:
Firstly, we will reset the CSS by making the default margin and padding of every element to 0.
Then we will style each and every element as required.
and after that to make the website responsive we will use the concept of media queries which changes the styling of the website when the size of the screen changes.
This is the style.css file:
| /* CSS Reset */ * { margin: 0; padding: 0; } body{ background-color: rgb(255, 220, 227); } #navbar { display: flex; align-items: center; position: relative; font-family: “Baloo Bhai 2”, cursive; } #navbar::before { content: “”; background-color: black; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; opacity: 0.5; } #logo { margin: 10px 20px; } #logo img { height: 70px; /* width: 100px; */ } #navbar ul { display: flex; } #navbar ul li { /* background-color: rgb(75, 75, 75); */ border-radius: 10px; list-style: none; margin: 10px 15px; } #navbar ul li a { color: white; font-size: 1.6rem; border-radius: 10px; padding: 0px 10px; text-decoration: none; font-family: “Baloo Bhai 2”, cursive; } #navbar ul li a:hover { cursor: pointer; color: rgb(196, 196, 196); text-decoration: underline; /* background-color: rgb(36, 36, 36); */ } #home { display: flex; flex-direction: column; padding: 3px 200px; height: 415px; align-items: center; justify-content: center; font-family: “Varela Round”, sans-serif; } #home::before { content: “”; background: url(../food2.jpg) no-repeat center center/cover; position: absolute; top: 0; left: 0; height: 518px; width: 100%; z-index: -1; opacity: 0.89; } #home h2 { color: white; text-align: center; } #home p { color: white; text-align: center; font-size: 1.5rem; } .h-primary { font-size: 3.8rem; padding: 12px; } .h-secondary { font-size: 2.3rem; padding: 12px; } #services { margin: 30px; margin-top: 0; display: flex; } #services .box { border: 2px solid brown; padding: 34px; margin: 3px 6px; border-radius: 23px; background-color: rgb(255, 237, 237); } #services .box img { height: 160px; display: block; margin: auto; } #services .box p { font-family: “Varela Round”, sans-serif; } #service-container h2{ margin: 20px 0px; } .center { text-align: center; } .btn { color: white; background-color: rgb(214, 118, 39); padding: 6px 20px; border: 2px solid black; margin: 17px; font-size: 1.5rem; border-radius: 10px; cursor: pointer; } .btn:hover{ color: rgb(34, 34, 34); /* background-color: rgb(221, 115, 54); */ } #client-section { height: 340px; position: relative; } #client-section::before { content: “”; position: absolute; background: url(../bg2.jpg) no-repeat center center/cover; height: 100%; width: 100%; z-index: -1; opacity: 0.5; } #clients { display: flex; justify-content: center; align-items: center; } #clients img { height: 110px; } .client-item { padding: 34px; } #contact{ position: relative; } #contact::before{ content: “”; position: absolute; height: 100%; width: 100%; z-index: -1; opacity: 0.4; background: url(../contact.jpeg) no-repeat center center/cover; } #contact-box{ display: flex; justify-content: center; align-items: center; padding-bottom: 10px; } #contact-box input,#contact-box textarea{ width: 100%; padding: 0.5rem; border-radius: 10px; font-size: 1.2rem; } #contact-box form{ width: 40%; } #contact-box label{ font-size: 1.3rem; font-family: “Varela Round”, sans-serif; } #contact-box button{ font-size: 1.3rem; padding: 6px 10px; margin: 20px 20px; width: 160px; border: 2px solid rgb(13, 0, 196); border-radius: 10px; cursor: pointer; background-color: rgb(210, 210, 255); } #contact-box button:hover{ background-color: rgb(188, 188, 255); } .btn1{ display: flex; justify-content: center; align-items: center; } footer{ background: rgb(65, 65, 65); color: white; padding: 10px ; } |
Now after styling the website. We will add another CSS style sheet to make the website responsive. which is as follows
This is the phone.css file that will be used when the screen size is decreased:
| #navbar{ flex-direction: column; } #navbar ul li{ margin: 10px 6px; } #navbar ul li a{ font-size: 0.9rem; padding: 0px 10px; } #home{ height: 350px; padding: 1px 50px; } #home::before{ height: 515px; } #home p{ font-size: 0.8rem; } #services{ flex-direction: column; } #services .box img{ height: 80px; } #clients{ flex-wrap: wrap; } .client-item{ padding: 17px; } #client-section{ height: 270px; } #clients img{ height: 50px; padding: 4px 4px; } #contact-box input{ font-size: 0.7rem; } #contact-box button{ font-size: 0.8rem; padding: 4px 8px; margin: 8px 8px; width: 60px; border-radius: 8px; } .h-primary{ font-size: 2.1rem; } .h-secondary{ font-size: 1.6rem; } .btn{ font-size: 0.8rem; padding: 4px 8px; } |
That’s all you need, to make a fully responsive website.
You can check out this website at: https://food-delivery-website.avdhesharma21.repl.co/
Hope this article will guide you to make a fully responsive website as you wanted and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.
