Merge pull request #48 from vedansh2001/main2

added cart section
AbhineshJha · Oct 28, 2023 · caf3898 · caf3898
2 parents cd8a7eb + ccc1340
commit caf3898
Show file tree

Hide file tree

Showing 6 changed files with 398 additions and 6 deletions.
diff --git a/Css/cart.css b/Css/cart.css
@@ -0,0 +1,207 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.nav {
+    background-color:aliceblue;
+    padding: 15px 12px;
+    position: sticky;
+     top: 0%; 
+     z-index: 999;
+    box-shadow: 0px 4px 6px rgb(0, 0, 0.1); 
+ } 
+
+a {
+    text-decoration: none;
+    color: rgb(242, 49, 49);
+    /* padding: 18px ; */
+}
+
+
+ul,
+li {
+    display: inline;
+    padding: 20px;
+}
+
+button {
+    float: right;
+}  
+
+ a.ac{
+    background-color: blue;
+    color: beige;
+    padding: 18px;
+    border-top-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+
+}
+
+a:hover {
+    /* background-color: blue; */
+    color:red;
+    font-weight: bold;
+    /* padding: 19px; */
+    /* color: aliceblue; */
+
+}
+button {
+    float: right;
+
+}
+
+
+.inp{
+    padding: 3px 40px;
+    border: 2px solid rgb(215, 233, 250);
+    width: 300px;
+    height: 35px;
+    border-radius: 20px;
+    background-color: transparent;
+    box-shadow: 2px 3px;
+    box-shadow: 7px 7px 7px grey;
+    margin-right:-4px;
+}
+
+.search_bar{
+    margin-left:20px;
+}
+
+.why {
+    background-color: lightgrey;
+    width: 100%;
+    height: 180px;
+    margin-top: 80px;
+    /* display: inline-flex; */
+    padding: 10px;
+    margin-bottom: 15px;
+
+}
+
+.free {
+    background-color: rgb(13, 32, 89);
+    width: 200px;
+    height: 150px;
+    color: aliceblue;
+    border-bottom-left-radius: 12px;
+    border-top-right-radius: 12px;
+    padding-left: 8px;
+    position: relative;
+    bottom: 60px;
+    box-shadow: 10px 10px 10px red;
+
+}
+
+.Fast {
+    background-color: rgb(18, 37, 88);
+    width: 200px;
+    height: 150px;
+    color: aliceblue;
+    border-bottom-left-radius: 12px;
+    border-top-right-radius: 12px;
+    padding-left: 8px;
+    position: relative;
+    bottom: 60px;
+     box-shadow: 10px 10px 10px red;
+
+}
+
+.Best {
+    background-color: rgb(22, 39, 93);
+    width: 200px;
+    height: 150px;
+    position: relative;
+    bottom: 60px;
+    color: aliceblue;
+    border-bottom-left-radius: 12px;
+    border-top-right-radius: 12px;
+    padding-left: 8px;
+     box-shadow: 10px 10px 10px red;
+
+}
+
+.psd {
+    margin-left: 250px;
+    display: flex;
+
+}
+
+.smedias{
+    font-size: 30px;
+}
+.blaa{
+    color: aliceblue;
+}
+.blaa:hover{
+    color: aqua;
+}
+
+/* Footer styles */
+
+.footer{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content:space-around;
+    padding: 20px 30px;
+    color: aliceblue;
+    background-color: black;
+}
+.footer-secondary {
+    width: 40%;
+    display: flex;
+}
+.address{
+    width: 50%;
+    /* padding-left: 10px; */
+    /* background-color: rgb(182, 182, 194); */
+}
+.imgl{
+    width: 200px;
+    background: white;
+}
+.menu{
+    width: 50%;
+    /* background-color: rgb(119, 119, 122); */
+}
+.account{
+    width: 20%;
+    /* background-color: blue; */
+}
+.footer1{
+    width: 100%;
+    height: 50px;
+    background-color: black;
+    text-align: center;
+    padding-top: 14px;
+}
+.menu1 a{
+    color: white;
+}
+.acc1 a{
+    color: white;
+}
+.acc1 a:hover{
+    color: white;
+}
+@media only screen and (max-width: 600px)  {
+    .footer{
+        flex-direction: column-reverse;
+    }
+    .footer-secondary, .address {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+    .footer-secondary {
+        margin-bottom: 40px;
+    }
+}
+
+
+
+
+
+
+
diff --git a/about.html b/about.html
@@ -13,8 +13,9 @@
             <STRONG>
                 <li><a href="index.html" ><i class="fa-solid fa-house"></i>&nbsp;Home</a></li>
             <li><a href="product.html" target="_blank"><i class="fa-brands fa-product-hunt"></i>&nbsp;Products</a></li>
-            <li><a href="" class="ac"><i class="fa-solid fa-address-card"></i>&nbsp;About</a></li>
+            <li><a href="about.html" class="ac"><i class="fa-solid fa-address-card"></i>&nbsp;About</a></li>
             <li><a href="contactform.html" target="_blank"><i class="fa-solid fa-phone"></i>&nbsp;Contact</a></li>
+            <li><a href="cart.html" target="_blank"><i class="fas fa-shopping-cart"></i>&nbsp;Cart</a></li>
 
         <li class="search_bar"><input type="text" placeholder=" search products " class="inp"><i style="font-size: 20px; 
             position: relative;right: 28px;top: 4px;