Merge pull request #1506 from ShubhamPaliwal03/corporate-information-…

…page Added Corporate information page
arghadipmanna101 · Aug 1, 2024 · 7709ff7 · 7709ff7
2 parents c3c3024 + 8ef1ad3
commit 7709ff7
Show file tree

Hide file tree

Showing 4 changed files with 222 additions and 0 deletions.
diff --git a/pages/Corporate_Information/corp-info_image.jpeg b/pages/Corporate_Information/corp-info_image.jpeg
diff --git a/pages/Corporate_Information/images/flipkart_logo.png b/pages/Corporate_Information/images/flipkart_logo.png
diff --git a/pages/Corporate_Information/index.html b/pages/Corporate_Information/index.html
@@ -0,0 +1,55 @@
+<!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 - Corporate Information</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>
+        <img src="./corp-info_image.jpeg" alt="corporate-building-image">
+        <div>
+            <h1>Corporate Information</h1>
+            <ul>
+                <li>
+                    <a href="#">Corporate Social Responsibility Policy</a>
+                </li>
+                <li>
+                    <a href="#">Annual Returns</a>
+                </li>
+                <li>
+                    <a href="#">Director's Information</a>
+                </li>
+            </ul>
+        </div>
+    </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>
+</body>
+</html>
diff --git a/pages/Corporate_Information/style.css b/pages/Corporate_Information/style.css
@@ -0,0 +1,167 @@
+* {
+    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;
+}
+main > *
+{
+    width: 50%;
+}
+main > div
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* margin-left: 5rem; */
+}
+h1
+{
+    font-weight: 700;
+    margin-top: -10rem;
+    margin-bottom: 3rem;
+    border-left: 1rem solid #346f8d;
+    padding: 30px 10px;
+}
+li
+{
+    list-style-type: none;
+    font-size: 1.5rem;
+    margin-left: 2rem;
+    margin-bottom: 1rem;
+}
+a:visited, a:link
+{
+    text-decoration: none;
+    color: black;
+}
+a:hover, a:active
+{
+    color: #2455f4;
+    text-decoration: underline;
+}
+
+@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;
+    }
+
+}