Added Security Page

arghadipmanna101 · Jul 28, 2024 · 4ec00cd · 4ec00cd
1 parent 3ba3c12
commit 4ec00cd
Show file tree

Hide file tree

Showing 4 changed files with 250 additions and 0 deletions.
diff --git a/pages/Security_Page/images/flipkart_logo.png b/pages/Security_Page/images/flipkart_logo.png
diff --git a/pages/Security_Page/index.html b/pages/Security_Page/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="./style.css">
+ <title>Flipkart - Security</title>
+</head>
+<body>
+ <nav>
+ <div class="nav-left">
+ <a class="navbar-brand" href="https://flipkart-clone-seven-azure.vercel.app/">
+ <img src="../../img/flipcartlogo.PNG" width=auto height="40" title="Flipkart" alt="Flipkart" />
+ </a>
+ <div class="search">
+ <input type="search" placeholder="Search for products, brands and more...">
+ <i class="fa fa-search" aria-hidden="true"></i>
+ </div>
+ </div>
+ <a href="../account/login-signup.html"><button>Login</button></a>
+ </nav>
+ <main>
+ <h2 id="safe-and-secure-shopping">Safe and Secure Shopping</h2>
+ <p><strong>Is making online payment secure on Flipkart?</strong></p>
+ <p>Yes, making the online payment is secure on Flipkart</p>
+ <p><strong>Does Flipkart store my credit/debit card infomation?</strong></p>
+ <p>No. Flipkart only stores the last 4 digits of your card number for the purpose of card identification.</p>
+ <p><strong>What credit/debit cards are accepted on Flipkart?</strong></p>
+ <p>We accept VISA, MasterCard, Maestro, Rupay, American Express, Diner&#39;s Club and Discover credit/debit cards.</p>
+ <p><strong>Do you accept payment made by credit/debit cards issued in other countries?</strong></p>
+ <p>Yes! We accept VISA, MasterCard, Maestro, American Express credit/debit cards issued by banks in India and in the following countries:
+ Australia, Austria, Belgium, Canada, Cyprus, Denmark, Finland, France, Germany, Ireland, Italy, Luxembourg, the Netherlands, New Zealand, Norway, Portugal, Singapore, Spain, Sweden, the UK and the US.
+ Please note that we do not accept internationally issued credit/debit cards for eGV payments/top-ups.</p>
+ <p><strong>What other payment options are available on Flipkart?</strong></p>
+ <p>Apart from Credit and Debit Cards, we accept payments via Internet Banking (covering 44 banks), Cash on Delivery, Equated Monthly Installments (EMI), E-Gift Vouchers, Flipkart Pay Later, UPI, Wallet, and Paytm Postpaid.</p>
+ <p><strong>Privacy Policy</strong></p>
+ <p>Flipkart.com respects your privacy and is committed to protecting it. For more details, please see our <a href="http://www.flipkart.com/s/privacypolicy">Privacy Policy</a></p>
+ <p><strong>Contact Us</strong></p>
+ <p>Couldn&#39;t find the information you need? Please <a href="http://www.flipkart.com/s/contact">Contact Us</a></p>
+ </main>
+ <footer>
+ <div id="footer-inner-container">
+ <div><img id="logo-footer" src="./images/flipkart_logo.png" alt="flipkart_seller_hub_logo"></div>
+ <div><p>&copy; 2023 Flipkart. All Rights Reserved</p></div>
+ <div id="tnc-container">
+ <div>
+ <a href="sell_online.html">Privacy Policy</a>
+ </div>
+ <div id="bullet-point"></div>
+ <div>
+ <a href="sell_online.html">Terms Of Use</a>
+ </div>
+ </div>
+ </div>
+ </footer>
+ <script src="./script.js"></script>
+</body>
+</html>
diff --git a/pages/Security_Page/script.js b/pages/Security_Page/script.js
@@ -0,0 +1,5 @@
+// to apply styling to the first paragraph that is immediately followed by a ul element
+
+document.querySelectorAll('p + ul').forEach(ul => {
+ ul.previousElementSibling.classList.add('highlight');
+});
diff --git a/pages/Security_Page/style.css b/pages/Security_Page/style.css
@@ -0,0 +1,187 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ /* border: 1px solid red; */
+}
+
+body {
+ background-color: #f1f3f6;
+}
+
+nav {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 5%;
+ background-color: #2874F0;
+}
+
+.nav-left {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+input {
+ width: 40vw;
+ padding: 10px;
+}
+
+button {
+ padding: 10px 20px;
+ width: 150px;
+ color: rgb(75, 75, 255);
+ background-color: white;
+ font-weight: 600;
+ border: none;
+}
+
+.search {
+ position: relative;
+}
+
+i {
+ position: absolute;
+ top: 30%;
+ right: 0;
+ color: rgb(75, 75, 255);
+ height: 100%;
+ width: 30px;
+
+}
+
+#footer-inner-container
+{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: rgb(113, 113, 113);
+ font-size: 13px;
+ font-family: sans-serif;
+ padding: 1em 3em;
+ background-color: white;
+ height: 4rem;
+}
+#tnc-container
+{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+#tnc-container > div
+{
+ margin-right: 0.5em;
+}
+#tnc-container > div a
+{
+ text-decoration: none;
+ color: rgb(113, 113, 113);
+}
+#bullet-point
+{
+ height: 4px;
+ width: 4px;
+ background-color: rgb(113, 113, 113);
+ border-radius: 50%;
+}
+
+#logo-footer
+{
+ height: 3.125rem;
+}
+
+main
+{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 2rem 5%;
+}
+
+main > div > a::after
+{
+ content: " | ";
+}
+
+main > div > a:last-of-type::after
+{
+ content: "";
+}
+
+p
+{
+ margin: 1rem 0rem;
+}
+
+p > strong
+{
+ font-weight: 700;
+}
+
+ul
+{
+ padding: 1rem;
+}
+
+li
+{
+ margin: 1rem 0rem;
+}
+
+.highlight
+{
+ color: #2874F0;
+ font-weight: 700;
+ font-style: italic;
+}
+
+a:visited, a:link
+{
+ text-decoration: none;
+ color: black;
+}
+a:hover, a:active
+{
+ color: #2455f4;
+ text-decoration: underline;
+}
+
+h2
+{
+ margin: 2rem 0rem;
+}
+
+@media screen and (max-width : 890px) {
+
+ input {
+ width: 40vw;
+ padding: 5px;
+ font-size: 12px;
+ }
+
+ nav button {
+ padding: 5px;
+ width: 100px;
+ font-size: 12px;
+ }
+
+ .nav-left {
+ gap: 10px;
+ }
+}
+
+@media screen and (max-width : 670px) {
+ nav img {
+ height: 20px;
+ }
+
+ input,
+ nav button {
+ font-size: 8px;
+ }
+
+}