Skip to content

Commit

Permalink
Added Zomato Clone(frontend) (Avdhesh-Varshney#550)
Browse files Browse the repository at this point in the history 
* clone-commit

* another-commit
  • Loading branch information
@meetarora10
meetarora10 authored Jul 19, 2024
1 parent 36d4338 commit 35dbcc9
Show file tree
Hide file tree
Showing 9 changed files with 409 additions and 0 deletions.
66 changes: 66 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Zomato-Clone/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<h1 align='center'><b>💥 Zomato Clone 💥</b></h1>

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h3 align='center'>Tech Stack Used 🎮</h3>

<div align='center'>

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
</div>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Description 📃

<div>
<p>This is a frontend layout of Zomato Website which is completely responsive with an attractive UI !</p>
</div>

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: How to run it? 🕹️

<div >
<p>To run this project locally, follow these steps:

1. Fork the repository.

2. Clone the repository to your local computer:
git clone https://github.com/your-username/Weather-App-Clone.git

3. Open the project folder in your preferred code editor, now you can view website in live.

</p>
</div>

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Screenshots 📸
<!-- add the screenshot of the project (Mandatory) -->

<img src='./screenshot.webp'>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h4 align='center'>Developed By <b><i>Meet Arora</i></b></h4>
<p align='center'>
<a href='https://www.linkedin.com/in/meet-arora-603682296'>
<img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
</a>
<a href='https://github.com/meetarora10'>
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
</a>
</p>

<h4 align='center'>Happy Coding 🧑‍💻</h4>

<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
Binary file added Vanilla-JS-Projects/Intermediate/Zomato-Clone/images/cake-1971552_1280.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Vanilla-JS-Projects/Intermediate/Zomato-Clone/images/pizza-3010062_1280.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...S-Projects/Intermediate/Zomato-Clone/images/strawberry-dessert-2191973_1280.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 92 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Zomato-Clone/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zomato</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar background nav-h">
<a href="#" class="heading">Zomato</a>
<ul type="none" class="nav vis-h">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#contact">Contact Us</a>
</li>
</ul>
<form class="nav-search vis-h">
<input placeholder="Search" aria-label="Search" id="search">
<button type="submit" class="btn">Search</button>
</form>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<section class="background firstSec">
<div class="box">
<div class="first">
<h1>Welcome to <span id="dyna">Zomato</span></h1>
<p>Your delicious meal awaits you! </p>
<div class="btns">
<button>Order Now</button>
</div>
</div>
</div>
</section>
<section class="seRight" id="about">
<div class="para">
<p class="big">We build your trust.</p>
<p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur totam doloremque cumque vel, eos facilis sint ad quidem fuga voluptatem ullam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque voluptatum laborum quas optio consectetur velit reiciendis magni dignissimos dolorem, repellendus dolores sunt.</p>
</div>
<div class="food">
<img src="./images/strawberry-dessert-2191973_1280.jpg" alt="cake" srcset="">
</div>
</section>
<section class="seLeft" id="services">
<div class="food">
<img src="./images/pizza-3010062_1280.jpg" alt="cake" srcset="">
</div>
<div class="para">
<p class="big">How we are different?</p>
<p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur totam doloremque cumque vel, eos facilis sint ad quidem fuga voluptatem ullam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque voluptatum laborum quas optio consectetur velit reiciendis magni dignissimos dolorem, repellendus dolores sunt.</p>
</div>
</section>
<section class="seRight">
<div class="para">
<p class="big">Available at more than 1500+ restraunts and food places.</p>
<p class="small">Lorem ipsum dolor sit amet consectetur adipam doloremque cumque vel, eos facilis sint ad quidem fuga voluptatem ullam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque voluptatum laborum quas optio consectetur velit reiciendis magni dignissimos dolorem, repellendus dolores sunt.</p>
</div>
<div class="food">
<img src="./images/cake-1971552_1280.jpg" alt="cake" srcset="">
</div>
</section>
<hr>
<section class="contact" id="contact">
<h2>Contact Us</h2>
<form action="" class="form">
<input type="text" placeholder="Enter your name" id="name">
<input type="email" name="" id="" placeholder="Enter your email">
<input type="text" placeholder="Enter your phone number">
<button type="submit" class="btms">Submit</button>
</form>
</section>
<footer>
Copyright &copy; 2024 www.zwigato.in-All rights reserved.
</footer>
<script src="script.js"></script>
</body>
</html>
Binary file added Vanilla-JS-Projects/Intermediate/Zomato-Clone/screenshot.webp
View file
Binary file not shown.
21 changes: 21 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Zomato-Clone/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
let word=document.querySelector("#dyna");
word.style='color:orange'
let count=0;
update();
function update(){
count++;
word.innerHTML=`Zomato`.slice(0,count);
if(count=='Zomato'.length){
count=0;
}
setTimeout(update,775);
}
const hamburger=document.querySelector('.hamburger');
const navbar=document.querySelector('.navbar');
const nav=document.querySelector('.nav');
const search=document.querySelector('.nav-search');
hamburger.addEventListener('click',()=>{
navbar.classList.toggle('nav-h');
nav.classList.toggle('vis-h');
search.classList.toggle('vis-h');
})
Loading

0 comments on commit 35dbcc9

Please sign in to comment.