Codeforyou: Zomato Clone Build Using HTML and CSS Only.

Zomato Clone Build Using HTML and CSS Only.

This is Basic Zomato Clone Page build using HTML and CSS .

GitHub Link: Click Here

View the Live the live website :- Here

Given below is HTML and CSS.

<html>

<head>

<link rel="stylesheet" href="./index.css">

<link rel="shortcut icon" href="https://b.zmtcdn.com/images/logo/zomato_logo_2017.png" type="image/x-icon">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>

<body>

<header>

<div class="nav">

<div class="nav">

<p>Get the app</p>

</div>

<ul class="nav-bar">

<li>Investor relation</li>

<li>Add resturant</li>

<li>Login</li>

<li>Sign up</li>

</ul>

</div>

<div class="head">

<img class="logo" src="https://b.zmtcdn.com/web_assets/8313a97515fcb0447d2d77c276532a511583262271.png">

<h3>Discover the best food in Tagore Bhawan, Gkp</h3>

<div class="search">

<div class="search-item">

<i class="fas fa-map-marker-alt"></i>

<p>Tagore Bhawan,MMMUT,Gorakhpur</p>

</div>

<div class="search-item">

<i class="fas fa-search"></i>

<input type="text" placeholder="Enter your laziz khaana">

</div>

</div>

</div>

<div class="header-image">

<img src="https://b.zmtcdn.com/web_assets/81f3ff974d82520780078ba1cfbd453a1583259680.png">

</div>

</header>

<div>

<section class="section-1">

<div class="section-1-item">

<div class="items-details">

<p>Food at Mess</p>

</div>

<img src="https://b.zmtcdn.com/webFrontend/e5b8785c257af2a7f354f1addaf37e4e1647364814.jpeg?output-format=webp&fit=around|402:360&crop=402:360;*,*" alt="">

</div>

<section class="section-1">

<div class="section-1-item">

<div class="items-details">

<p>Campus Cafeteria</p>

</div>

<img src="https://b.zmtcdn.com/webFrontend/d026b357feb0d63c997549f6398da8cc1647364915.jpeg?output-format=webp&fit=around|402:360&crop=402:360;*,*" alt="">

</div>

<section class="section-1">

<div class="section-1-item">

<div class="items-details">

<p>Hostel Life</p>

</div>

<img src="https://b.zmtcdn.com/webFrontend/d9d80ef91cb552e3fdfadb3d4f4379761647365057.jpeg?output-format=webp&fit=around|402:360&crop=402:360;*,*" alt="">

</div>

</section>

</div>

<section class="section-2">

<div class="section-2-heading">

<p>Popular Place in Gorakhpur</p>

</div>

<div class="section-2-container">

<div class="section-2-items">

<div class="section-2-item">

<p class="item-head">Golghar</p>

<p class="item-subhead">Resturant</p>

</div><div class="section-2-item">

<p class="item-head">Golghar</p>

<p class="item-subhead">Resturant</p>

</div><div class="section-2-item">

<p class="item-head">Golghar</p>

<p class="item-subhead">Resturant</p>

</div><div class="section-2-item">

<p class="item-head">Golghar</p>

<p class="item-subhead">Resturant</p>

</div><div class="section-2-item">

<p class="item-head">Golghar</p>

<p class="item-subhead">Resturant</p>

</div><div class="section-2-item">

<p class="item-head">Golghar</p>

<p class="item-subhead">Resturant</p>

</div>

</div>

</div>

</section>

<section class="section-3">

<div class="section-3-container">

<div class="section-3-img">

<img src="https://b.zmtcdn.com/data/o2_assets/a500ffc2ab483bc6a550aa635f4e55531648107832.png">

</div>

<div class="section-3-content">

<h1>Get the Zomato App</h1>

<p>Download the app by just clicking here</p>

<div class="section-3-download">

<img src="https://b.zmtcdn.com/data/webuikit/23e930757c3df49840c482a8638bf5c31556001144.png">

<img src="https://b.zmtcdn.com/data/webuikit/9f0c85a5e33adb783fa0aef667075f9e1556003622.png">

</div>

</div>

</div>

</section>

<footer>

<hr>

Made by <span>Vaibhav Yadav</span> <mark>❤</mark>

</footer>

</body>

</html>

Now CSS code is :-

/* CSS CODE */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

body{

margin: 0;

padding: 0;

text-decoration: none;

}

header{

width: 100%;

height: 70vh;

overflow: hidden;

position: relative;

object-fit: cover;

}

.header-image{

width: 100%;

position: absolute;

top: -20vh;

z-index: -1;

}

.nav{

display: flex;

justify-content: space-between;

color: white;

margin: 0 40px;

font-size: 3vh;

}

.nav-bar{

list-style: none;

font-weight: lighter;

display: flex;

gap: 1.5rem;

}

.head{

display: flex;

flex-direction: column;

justify-content: center;

margin-top: 7vh;

align-items: center;

}

.logo{

width: 35vh;

}

.head h3{

font-size: 4vw;

color: white;

}

.search{

display: flex;

width: 55vw;

align-items: center;

border-radius: 10px;

background: white;

padding: 5px 4px;

}

.search .search-item{

display: flex;

align-items: center;

margin-left: 10px;

}

.search .search-item p{

color: gray;

border-right: 1px solid gray;

font-size: 15px;

margin-right: 10px;

margin-left: 10px ;

margin: 10px;

}

.search .search-item input{

outline: none;

border: none;

width: 200%;

padding-left: 10px;

font-size: 15px;

}

.search .search-item:first-child{

color: red;

width: 30%;

}

.search .search-item:last-child{

color: gray;

width: 20%;

}

/* Section 1 css starts here */

.section-1{

display: flex;

justify-content: center;

align-items: center;

}

.section-1 .section-1-item {

position: relative;

width: 15rem;

margin: 3px 5px;

overflow: hidden;

border-radius: 10px;

background: white;

border: 1px solid white;

}

.section-1 .section-1-item img{

width: 100%;

border: 1px solid rgb(87, 83, 83);

border-radius: 10px;

z-index: -1;

}

.section-1 .section-1-item .items-details{

position: absolute;

bottom: 0px;

align-items: center;

border: 0 0 10px 10px;

background: white;

width: 100%;

height: 25%;

z-index: 2;

}

.section-1 .section-1-item .items-details p{

text-align: center;

}

/* section 2 */

.section-2{

width: 1000px;

margin: 0 auto;

margin-bottom: 4rem;

}

.section-2 .section-2-heading{

font-size: 2rem;

line-height: 1.2;

font-weight: 400px;

}

.section-2 .section-2-container .section-2-items{

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.section-2 .section-2-container .section-2-items .section-2-item{

width: 100%;

max-width: 26%;

margin-bottom: 20px;

border-radius: 10px;

box-shadow: 0 2px 4px rgb(128, 125, 125);

padding: 20px;

}

.section-2-item .item-head{

font-size: 1.2rem;

color: rgb(49, 48, 48);

margin: 0;

margin-bottom: 5px;

}

.section-2-item .item-subhead{

color: gray;

font-weight: lighter;

margin: ;

}

/* section 3 starts */

.section-3{

height: 620px;

background-color: white;

}

.section-3-container{

width: 1000px;

height: 100%;

margin: 0 auto;

display: flex;

justify-content: center;

align-items: center;

}

.section-3-img{

width: 40%;

}

.section-3-img img{

width: 400px;

}

.section-3-content{

font-size: 1.4rem;

color: steelblue;

}

.section-3-content h1{

border-bottom: 2px solid steelblue;

}

.section-3-download img{

width: 40%;

box-shadow: 1px 1px 5px black;

}

/* footer section starts here*/

footer{

color: steelblue;

font-size: 2rem;

text-align: center;

padding: 5%;

}

footer span{

color: red;

text-shadow: 1px 1px 5px yellow,1px 1px 5px black;

text-decoration: underline;

}

This is Complete Code for basic Structure of famous known E-commerce website Zomato.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)