Avdhesh-Varshney · Damini2004 · Jun 20, 2024 · Jun 20, 2024 · Jun 21, 2024 · Jun 22, 2024
diff --git a/Front-end-Projects/Basic/PhonePe/README.MD b/Front-end-Projects/Basic/PhonePe/README.MD
@@ -0,0 +1,65 @@
+<h1 align='center'><b>💥 PhonePe 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)
+
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <p>This project is a simple HTML and CSS implementation of a PhonePe Clone website clone. It aims to replicate the basic structure and styling of the popular  website PhonePe Clone.This project Showcases the power of HTML and CSS.</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 machine:
+    git clone https://github.com/your-username/Amazon-Prime-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>Damini Chachane</i></b></h4>
+<p align='center'>
+ <a href='https://linkedin.com/in/damini-chachane-82a210252'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Damini2004'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Front-end-Projects/Basic/PhonePe/ScreenShot.webp b/Front-end-Projects/Basic/PhonePe/ScreenShot.webp
diff --git a/Front-end-Projects/Basic/PhonePe/assests/appstore.jpg b/Front-end-Projects/Basic/PhonePe/assests/appstore.jpg
diff --git a/Front-end-Projects/Basic/PhonePe/assests/bg.png b/Front-end-Projects/Basic/PhonePe/assests/bg.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/free.jpg b/Front-end-Projects/Basic/PhonePe/assests/free.jpg
diff --git a/Front-end-Projects/Basic/PhonePe/assests/get.png b/Front-end-Projects/Basic/PhonePe/assests/get.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/image.png b/Front-end-Projects/Basic/PhonePe/assests/image.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/ins.png b/Front-end-Projects/Basic/PhonePe/assests/ins.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/logo.jpg b/Front-end-Projects/Basic/PhonePe/assests/logo.jpg
diff --git a/Front-end-Projects/Basic/PhonePe/assests/logo.png b/Front-end-Projects/Basic/PhonePe/assests/logo.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/manage.jpg b/Front-end-Projects/Basic/PhonePe/assests/manage.jpg
diff --git a/Front-end-Projects/Basic/PhonePe/assests/market.jpg b/Front-end-Projects/Basic/PhonePe/assests/market.jpg
diff --git a/Front-end-Projects/Basic/PhonePe/assests/money.png b/Front-end-Projects/Basic/PhonePe/assests/money.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/phn.png b/Front-end-Projects/Basic/PhonePe/assests/phn.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/pluse.jpg b/Front-end-Projects/Basic/PhonePe/assests/pluse.jpg
diff --git a/Front-end-Projects/Basic/PhonePe/assests/pos.jpg b/Front-end-Projects/Basic/PhonePe/assests/pos.jpg
diff --git a/Front-end-Projects/Basic/PhonePe/assests/pyment.mp4 b/Front-end-Projects/Basic/PhonePe/assests/pyment.mp4
diff --git a/Front-end-Projects/Basic/PhonePe/assests/secure.png b/Front-end-Projects/Basic/PhonePe/assests/secure.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/sisa.png b/Front-end-Projects/Basic/PhonePe/assests/sisa.png
diff --git a/Front-end-Projects/Basic/PhonePe/assests/sut.png b/Front-end-Projects/Basic/PhonePe/assests/sut.png
diff --git a/Front-end-Projects/Basic/PhonePe/index.html b/Front-end-Projects/Basic/PhonePe/index.html
@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PhonePe: UPI Payments, Investment, Insurance, Recharges, DTH & More</title>
+    <link rel="icon" href="logo.jpg">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</head>
+<body>
+            <div class="header">
+                <div class="nav">
+                <a href="#"><img src="assests/phn.png" height="70px"></a>
+                <h2><a href="#"><b>BUSINESS SOLUTIONS</b></a></h2>                
+                <h2><a href="#"><b>PRESS</b></a></h2>
+                <h2><a href="#"><b>CAREERS</b></a></h2>
+                <h2><a href="#"><b>ABOUT US</b></a></h2>
+                <h2><a href="#"><b>BLOG</b></a></h2>
+                <h2><a href="#"><b>CONTACT US</b></a></h2>
+                <h2><a href="#"><b>TRUST & SAFETY</b></a></h2>
+            </div>
+            </div>
+
+
+    <div class="main">
+        <div id="carouselExampleCaptions" class="carousel slide mb-5 w-300">
+
+            <div class="carousel-inner">
+              <div class="carousel-item active">
+                <img src="assests/appstore.jpg" class="d-block w-100" height="600px">
+                <div class="carousel-caption d-flex">
+                    <!--  -->
+                    <div>   <h2  > <span style="color: plum;" >Download all your favourite apps</span><br>
+                         <h2>from india's very own <br>Android app store </h2>
+                    <button>Download Indus Appstore</button>
+                    </div>
+               <div></div>
+               <!--  -->
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img src="assests/pos.jpg" class="d-block w-100" height="600px">
+                <div class="carousel-caption d-flex">
+                    <!--  -->
+                    <div>   <h5> <span style="color:#4c2a96;font-size: 40px;font-weight: 600; " >One Device,</span> <span style="color:#321d61;font-size: 40px;font-weight: 600;" >One App, </span>  <br> <span style="color: #3a908f;font-size: 40px;font-weight: 500;">Any Payment Method</span> </h5>
+
+                    <button class="btn-2 pt-0 mt-0" style="margin-top: 0;"  >Get your Phonepe POS</button>
+                    </div>
+               <div></div>
+               <!--  -->
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img src="assests/free.jpg" class="d-block w-100" height="600px">
+                <div class="carousel-caption d-flex">
+                    <!--  -->
+                    <div>   <h5>Free</h5>
+                        <p>Accept payment for your online business at zero cost</p>
+                        <p>sign up for Phonepe Payment Gateway</p>
+                    <button class="btn-2">Get Started</button>
+                    </div>
+               <div></div>
+               <!--  -->
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img src="assests/pluse.jpg" class="d-block w-100" height="600px">
+                <div class="carousel-caption d-flex">
+                    <!--  -->
+                    <div>   <h5>Phonepe plus</h5>
+                        <p>Beat of Progress</p>
+                        <p>Find out how many moves in a country of <br> 140 crore! Now updated with the 
+                        latest <br> data for Q1 2024(jan-mar)</p>
+                    <button class="btn-2">Explore Now</button>
+                    </div>
+               <div></div>
+               <!--  -->
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img src="assests/manage.jpg" class="d-block w-100" height="600px">
+                <div class="carousel-caption d-flex">
+                    <!--  -->
+                    <div>   <h5>View statement & <br> manage financial <br> data consents</h5>
+                        <p>Register on Phonepe Account <br> Aggregator now! </p>
+                    <button class="btn-2">Know More</button>
+                    </div>
+               <div></div>
+
+                </div>
+            </div>
+          </div>
+        <br>
+    </div>
+    <div class="carousel-indicators ">
+      <button type="button"  data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
+      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
+    </div>
+    </div>
+    <br><br><br>
+
+
+    <div class="cards">
+    <!-- <div class="card" style="width: 25rem;height: 25rem">
+        <img src="insurance.jpg" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Insurance &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-solid fa-arrow-right"></i></h5>
+        </div>
+      </div> -->
+      <div class="card" style="width: 20rem; height: 18rem;">
+        <img src="assests/ins.png" class="card-img-top" alt="..." height="300px" >
+        <div class="card-body">
+          <h5 class="card-text"> <span>Insurance</span> <i class="fa-solid fa-arrow-right"></i> </h5>
+
+        </div>
+      </div>
+      <div class="card" style="width: 20rem; height: 18rem;">
+        <img src="assests/sut.png" class="card-img-top" alt="..." height="300px">
+        <div class="card-body">
+          <h5 class="card-text"> <span>Investmets</span> <i class="fa-solid fa-arrow-right"></i> </h5>
+
+        </div>
+      </div>
+      <div class="card" style="width: 20rem; height: 18rem;">
+        <img src="assests/money.png" class="card-img-top" alt="..." height="300px">
+        <div class="card-body">
+          <h5 class="card-text"> <span>Lending</span> <i class="fa-solid fa-arrow-right"></i> </h5>
+
+        </div>
+      </div>
+    </div><br><br><br><br><br>
+    <div class="main-2 container"> 
+    <div>
+        <h1>Simple, Fast & Secure</h1><br><br>
+        <h2>One app for all things money.</h2><br>
+        <p>Pay bills, recharge, send money, buy gold, invest and shop at your favourite stores.</p>
+        <hr>
+
+    <br>
+        <h2>Pay whenever you like, wherever you like.
+        </h2><br>
+        <p>Choose from options like UPI, the PhonePe wallet or your Debit and Credit Card.</p>
+        <hr>
+    <br>
+
+
+        <h2>Find all your favourite apps on PhonePe Switch.
+        </h2>
+        <p>Book flights, order food or buy groceries. Use all your favourite apps without downloading them.</p>
+  </div>
+    <div class="video" title="PhonePe - India’s Payments App">
+            <video autoplay loop muted src="assests/pyment.mp4" height="700px"></video>
+        </div>
+    </div>
+
+    <div class="sub-2">
+        <img src="assests/secure.png" height="600px" width="1000px" style="padding-bottom: 150px;">
+    </div>
+    <div class="part pt-5" style="background-color: plum;">
+        <div class="sub-3 pt-5"><br><br><br><br><br><br> <h1>At 3.9+ Crore<br>
+            stores, apps, websites & more</h1>
+            <br><br><br><br>
+            <button class="design">
+
+                Partner with us <i class="fa-solid fa-arrow-right"></i>
+
+          </button>
+        </div><br><br><br><br>
+          <img id="slide" src="assests/bg.png" height="1000px">
+</div>
+<br>
+<div class="main-3">
+    <img src="assests/image.png" > 
+  <div class="submain3" >
+      <h2>For Business</h2> <h6>Find the digital payment solution that fits your business needs</h6>
+      <h6></h6><br>
+
+
+      <div class="subsub">
+        <h3>I want to: </h3>
+        <h1>Be on PhonePe Switch <i class="fa-solid fa-angle-right"></i> </h1>
+
+      <p>Get new users for your app</p>
+      <hr>
+      <h1>Accept payments at stores  <i class="fa-solid fa-angle-right"></i>    
+      </h1>
+      <p>Help your business go cashless </p>
+      <hr>
+      <h1>Integrate PhonePe Payment Gateway &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-solid fa-angle-right"></i>
+      </h1>
+      <p>Process online payments seamlessly</p>
+      <hr>
+      <h1>Advertise on PhonePe  <i class="fa-solid fa-angle-right"></i>
+      </h1>
+      <p>Advertise & let customers know about you </p>
+    </div>
+</div>
+
+  </div>
+</div>
+<div class="sec-2">
+</div>
+  <footer>
+      <div class="main2-footer">
+        <div>
+          <img src="assests/phn.png" height="60px">
+        </div>
+          <div class="footer-2">
+              <ul>
+                  <li><p><b>Business Solutions</b></p></li>
+                  <li><p>Payment Gateway</p></li>
+                  <li><p>Guardian by PhonePe</p></li>
+                  <li><p>Express Checkout</p></li>
+                  <li><p>PhonePe Switch</p></li>
+                  <li><p>Offline Merchant</p></li>
+                  <li><p>Advertise on PhonePe </p></li>
+                  <li><p>SmartSpeaker</p></li>
+                  <li><p>PhonePe Lending</p></li>
+                  <li><p>POS Machine</p></li>
+                  <li><p>Payment Links</p></li>
+              </ul>
+          </div>
+          <div class="footer-2">
+            <ul>
+              <li><p><b>Insurance</b></p></li>
+              <li><p>Motor Insurance</p></li>
+              <li><p>Bike Insurance</p></li>
+              <li><p>Car Insurance</p></li>
+              <li><p>Health Insurance</p></li>
+              <li><p>Arogya Sanjeevani Policy</p></li>
+              <li><p>Life Insurance</p></li>
+              <li><p>Term Life Insurance</p></li>
+              <li><p>Porsonal Accident Insurance</p></li>
+              <li><p>Travel Insurance</p></li>
+              <li><p>Domestic Travel Insurance</p></li>
+              <li><p>International Travel Insurance</p></li>
+          </ul>
+          </div>
+          <div class="footer-2">
+              <ul>
+                  <li><p><b>Investment</b></p></li>
+                  <li><p>24K Gold </p></li>
+                  <li><p>Liquid Funds</p></li>
+                  <li><p>Tax Saving Funds</p></li>
+                  <li><p>Equity Funds</p></li>
+                  <li><p>Debt Funds</p></li>
+                  <li><p>Hybrid Funds</p></li>
+              </ul>
+          </div>
+          <div class="footer-2">
+            <ul>
+              <li><p><b>General</b></p></li>
+              <li><p>About US</p></li>
+              <li><p>Career</p></li>
+              <li><p>Contact US</p></li>
+              <li><p>Press</p></li>
+              <li><p>Ethics</p></li>
+              <li><p>Report Vulnerability</p></li>
+              <li><p>Merchant Partner</p></li>
+              <li><p>Blog</p></li>
+              <li><p>Tech Blog</p></li>
+              <li><p>PhonePe Pluse</p></li>
+          </ul>
+          </div>
+          <div class="footer-2">
+              <ul>
+                  <li><p><b>Legal</b></p></li>
+                  <li><p>Terms & Condition</p></li>
+                  <li><p>Privacy Policy</p></li>
+                  <li><p>Grievance Policy</p></li>
+                  <li><p>How to Pay</p></li>
+                  <li><p>E-Waste Policy</p></li>
+                  <li><p>Trust & Saftey</p></li>
+                  <li><p>Global Anti-Corruption Policy</p></li>
+              </u>  </div>
+              <div class="sec-3">
+                <ul>
+                    <b>Certification</b>
+                    <li><img src="assests/sisa.png" height="100px"></li>
+                </ul>
+              <ul>
+                  <p><b>See All Apps</b></p>
+                  <li><button><b>DOWNLOAD NOW</button></li>
+              </ul>
+
+          </div>
+          </div>
+</footer>
+<div class="down-1">
+<p>
+  <button><i class="fa-brands fa-linkedin"></button></i>
+  <button><i class="fa-brands fa-twitter"></button></i>
+  <button><i class="fa-brands fa-facebook"></button></i>
+  <button><i class="fa-brands fa-youtube"></button></i>
+</p>
+
+</div>
+<div class="down-2">
+  <h6>© 2024, All rights reserved</h6>
+</div>
+</body>
+</html>