Codeforyou: Zomato Clone Page.

Showing posts with label Zomato Clone Page.. Show all posts

Showing posts with label Zomato Clone Page.. Show all posts

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.

Subscribe to: Posts (Atom)