-
Notifications
You must be signed in to change notification settings - Fork 514
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1244 from anandachanta19/main
Created Notifications Page (Same as Flipkart's)
- Loading branch information
Showing
5 changed files
with
434 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="theme-color" content="#2874F0" id="themeColor" /> | ||
| <title> | ||
| Flipkart | Online Shopping Site for Mobiles, Electronics, Furniture, | ||
| Grocery, Lifestyle, Books & More. Best Offers! | ||
| </title> | ||
| <link rel="icon" type="image/x-icon" href="../img/flipkart_lite.png" /> | ||
| <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="../css/notifications.css" /> | ||
| </head> | ||
|
|
||
| <header id="header-orders" class="text-center text-secondary fs-4"> | ||
| This is Header | ||
| </header> | ||
|
|
||
| <main> | ||
| <div class="main-content"> | ||
| <div class="options"> | ||
| <div class="options-hello"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 50 50"><defs><path id="a" d="M50 0v50H0V0z"/><path id="c" d="M0 50h50V0H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#EBCFB9" d="M23.05 39.873h4.02v-5.357h-4.02z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#FFE11B" d="M50 25c0 13.807-11.192 25-25 25C11.193 50 0 38.807 0 25S11.193 0 25 0c13.808 0 25 11.193 25 25" mask="url(#b)"/><path fill="#FADDC5" d="M11.418 45.78s-.166-5.062 5.118-7.024c1.96-.727 5.776-.654 8.393-.654 2.54 0 7.468-.107 9.404.596 5.435 1.97 4.635 7.07 4.635 7.07s-4.83 4.06-14.04 4.06c-10.832 0-13.512-4.047-13.512-4.047"/><path fill="#47C3CF" d="M11.418 45.78s-.166-5.062 5.118-7.024c1.106-.41 2.802-.565 4.54-.624 0 0 .088 4.137 4.252 4.137 4.184 0 4.318-4.14 4.318-4.14 1.866.056 3.682.202 4.688.568 5.435 1.97 4.635 7.07 4.635 7.07s-4.83 4.06-14.04 4.06c-10.832 0-13.512-4.047-13.512-4.047"/><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#FADDC5" d="M23.27 39.873h4.02v-5.357h-4.02z" mask="url(#d)"/><path fill="#D3B8A3" d="M23.257 35.083h4.03s-.54 1.764-2.008 1.774c-1.468.01-2.023-1.774-2.023-1.774" mask="url(#d)"/><path fill="#FADDC5" d="M36.154 23.76c0 6.41-5.027 11.608-11.224 11.608-6.2 0-11.226-5.197-11.226-11.61 0-6.41 5.027-11.61 11.226-11.61 6.197 0 11.224 5.2 11.224 11.61" mask="url(#d)"/><path fill="#FFF" d="M26.64 32.27s-.163 1.294-1.28 1.294c-1.116 0-1.46-1.295-1.31-1.295" mask="url(#d)"/><path fill="#A56826" d="M18.204 19.192s1.665 5.688 7.124 4.148c7.347-2.073 10.62 2.023 10.826.715v-.296s1.81-13.04-11.225-13.04c-13.036 0-11.225 13.04-11.225 13.04s3.903-.937 4.5-4.568" mask="url(#d)"/></g></svg> | ||
| <h4>Hello</h4> | ||
| </div> | ||
| <div class="options-myorders"> | ||
| <i class="fa-solid fa-boxes-packing"></i> | ||
| <a href="orders.html">MY ORDERS</a> | ||
| <i class="fa-solid fa-angle-right"></i> | ||
| </div> | ||
| <div class="options-account"> | ||
| <div class="heading"> | ||
| <i class="fa-solid fa-user"></i> | ||
| <div class="options-heading">ACCOUNT SETTINGS</div> | ||
| </div> | ||
| <ul class="lists"> | ||
| <li><a href="">Personal Information</a></li> | ||
| <li><a href="">Manange Addresses</a></li> | ||
| <li><a href="">PAN Card Information</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="options-payments"> | ||
| <div class="heading"> | ||
| <i class="fa-solid fa-credit-card"></i> | ||
| <div class="options-heading">PAYMENTS</div> | ||
| </div> | ||
| <ul class="lists"> | ||
| <li><a href="">Gift Cards</a> | ||
| <p>₹0</p></li> | ||
| <li><a href="">Saved UPI</a></li> | ||
| <li><a href="">Saved Cards</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="options-mystuff"> | ||
| <div class="heading"> | ||
| <i class="fa-solid fa-folder"></i> | ||
| <div class="options-heading">MY STUFF</div> | ||
| </div> | ||
| <ul class="lists"> | ||
| <li><a href="">My coupons</a></li> | ||
| <li><a href="">My reviews & Ratings</a></li> | ||
| <li><a href="">All Notifications</a></li> | ||
| <li><a href="">My wishlist</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="options-logout"> | ||
| <div class="heading"> | ||
| <i class="fa-solid fa-power-off"></i> | ||
| <div class="options-heading">LOGOUT</div> | ||
| </div> | ||
| </div> | ||
| <div class="options-frequently_visited"> | ||
| <div class="row-heading">Frequently Visited:</div> | ||
| <div class="row-contents"><span id="one">Track Order</span><span>Help Center</span></div> | ||
| </div> | ||
| </div> | ||
| <div class="notifications"> | ||
| <div class="notifications-heading">All Notifications</div> | ||
| <div class="n1"> | ||
| <div class="n-img"> | ||
| <img src="/images/upi_img.webp" alt="notifi"> | ||
| </div> | ||
| <div class="n-info"> | ||
| <div class="info-details">Sign-up for Flipkart UPI & get guaranteed reward on 1st Payment!</div> | ||
| <div class="info-date">30 May, 2024</div> | ||
| </div> | ||
| <div class="n-details"> | ||
| <div class="details-content"> | ||
| More Details | ||
| <i class="fa-solid fa-angle-right"></i> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
|
|
||
| <footer id="footer-orders" style="background-color: #293649 !important"></footer> | ||
| <script src="../js/bootstrap.bundle.min.js"></script> | ||
| <script src="../js/notifications.js"></script> | ||
|
|
||
| <body></body> | ||
|
|
||
| </html> |
Oops, something went wrong.