update html css

Rajput-xv · Oct 8, 2023 · ab64c8c · ab64c8c
1 parent a140ba5
commit ab64c8c
Show file tree

Hide file tree

Showing 10 changed files with 1,762 additions and 43 deletions.
diff --git a/index.css b/index.css
@@ -81,7 +81,6 @@
 
 
 .hero{
-    /* background: rgb(160, 54, 54); */
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
     height: 60vh;
     width: 100%;
@@ -136,22 +135,7 @@
     box-sizing: border-box;
 }
 
-@media (max-width: 768px) {
-    .text {
-        width: 400px; 
-        height: auto;
-        top: 9rem;
-        left: 5%;
-    }
 
-    .text h4 {
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    .indicator{
-        top: 80%;
-    }
-}
 
 .text p{
     font-size: 20px;
@@ -197,11 +181,7 @@
     width: 100% !important;
     height: 100% !important;
     overflow: hidden;
-    position: absolute;
-
-    /* min-width: 50%; */
-
-
+    position: absolute; 
 }
 
 
@@ -211,7 +191,6 @@
 
 .dropdown-menu.product {
     position: absolute !important;
-    /* left: 350px !important; */
 }
 
 #product-nav{
@@ -261,11 +240,7 @@
     padding-top: 70px; 
 }
 
-@media (max-width: 768px) {
-    .carousel-item {
-        padding-top: 70px; 
-    }
-}
+
 
 .card-body{
     /* background-color: #81baba; */
@@ -284,3 +259,147 @@
 #e-smart a{
     text-decoration: none ;
 }
+
+
+
+#feature-product{
+    display: flex;
+    justify-content: center;
+    font-size: 50px;
+    font-weight: lighter
+}
+
+#prodetails{
+    display: flex;
+    margin-top: 50px;
+    margin-bottom: 100px;
+}
+
+#prodetails .single-pro-imgage{
+    width: 40% ;
+    /* margin-right: 50px ; */
+}
+#big-image{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.small-img-group{
+    display: flex;
+    justify-content: center;
+
+}
+
+.small-img-col {
+    flex-basis: 20% ;
+    cursor: pointer ;
+    padding-right: 10px;
+}
+
+#prodetails .single-pro-details{
+    width: 50% ;
+    padding-top: 100px ;
+}
+
+#prodetails .single-pro-details h4{
+    padding: 50px 0 20px 0;
+}
+
+#prodetails .single-pro-details h2{
+    font-size: 26px ;
+    margin-top: 50px;
+}
+
+#prodetails .single-pro-details input{
+    width: 50px;
+    height: 47px;
+    padding-left: 10px;
+    font-size: 16px;
+    margin-right: 10px;
+    margin-top: 30px;
+}
+
+#prodetails .single-pro-details input:focus {
+    outline: none;
+}
+
+#prodetails .single-pro-details button{
+    background-color: #088178 ;
+    color: white;
+}
+
+#prodetails .single-pro-details span{
+    line-height: 25px;
+}
+
+
+
+
+
+
+
+@media (max-width: 768px) {
+    .text {
+        width: 400px; 
+        height: auto;
+        top: 9rem;
+        left: 5%;
+    }
+
+    .text h4 {
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+    .indicator{
+        top: 80%;
+    }
+
+
+
+    .carousel-item {
+        padding-top: 70px; 
+    }
+    .navbar-toggler .dropdown-menu{
+        height: 100vh !important;
+
+    }
+    .navbar-toggler .dropdown-menu li{
+        margin: 20px !important;
+    }
+    /* .navbar-toggler .dropdown-menu a :hover{
+        color: #FE6868 !important ;
+        background-color: #FE6868 !important;
+    } */
+    .navbar-toggler .dropdown-menu .last-login{
+        position: absolute !important;
+        top: 90% !important;
+    }
+}
+@media (max-width: 477px){
+    .text{
+        width: 45%;
+        left: 6.5% ;
+    }
+    .hero h2{
+        color: white;
+        width: 100%;
+        left: 0;
+    }
+    .indicator{
+        top: 85%;
+    }
+
+
+    #prodetails{
+        display: flex;
+        flex-direction: column;
+    }
+    #prodetails .single-pro-image{
+        width: 100%;
+        margin-right:  0px ;
+    }
+    #prodetails .single-pro-details{
+        width: 100%;
+    }
+}
diff --git a/index.html b/index.html
@@ -18,8 +18,8 @@
   <section class="header " id="nav">
 
     <nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
-      <div class="container">
-        <a class="navbar-brand d-md-none" href="#">
+      <div class="container ">
+        <a class="navbar-brand d-md-none" href="./index.html">
           <img src="./icons8-technology-64.svg" alt="E-smart logo" /> 
           E-Smart
         </a>
@@ -29,12 +29,13 @@
               <span class="navbar-toggler-icon"></span>
             </a>
 
-            <ul class="dropdown-menu dropdown-menu-end px-5 box-1" aria-labelledby="navbarDropdown" >
+            <ul class="dropdown-menu dropdown-menu-end px-5 box-1 " aria-labelledby="navbarDropdown" >
               <li><a class="dropdown-item" href="./index.html">Home</a></li>
               <li><a class="dropdown-item" href="#product">Product</a></li>
               <li><a class="dropdown-item" href="#footer-about">Features</a></li>
               <li><a class="dropdown-item" href="#footer-about">About</a></li>
-              <li><a class=""dropdown-item href="./login.html" >Login</a></li>
+              <li><a class="dropdown-item last-cart " href="./cart.html" > <img src="./shopping-cart (1).svg" > </a></li>
+              <li><a class="dropdown-item last-login " href="./login.html" > Login</a></li>
 
             </ul>
 
@@ -58,7 +59,7 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>
               <li class="nav-item product-li" id="product-nav" ><a class="nav-link p-0  " data-bs-toggle="dropdown"  id="navbarDropdown-1" role="button"  aria-expanded="false">
                 Product
                 <ul class="dropdown-menu product dropdown-menu-start px-5 mt-2 " aria-labelledby="navbarDropdown" >
-                  <li><a class="dropdown-item" href="#Smartphone">Smartphones</a></li>
+                  <li><a class="dropdown-item" href="#Smartphone1">Smartphones</a></li>
                   <li><a class="dropdown-item" href="#Laptop">Laptops</a></li>
                   <li><a class="dropdown-item" href="#Television">Televisions</a></li>
                   <li><a class="dropdown-item" href="#Refrigerator">Refrigerators</a></li>
@@ -70,7 +71,7 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>
               <li class="nav-item"><a class="nav-link" href="#footer-about">Features</a></li>
               <li class="nav-item"><a class="nav-link" href="#footer-about">About</a></li>
               <li id="cart" class="nav-item"><a class="nav-link" href="./cart.html">
-                <svg xmlns="http://www.w3.org/2000/svg" id="Isolation_Mode" data-name="Isolation Mode" viewBox="0 0 24 24" width="24" height="30" fill="white"><circle cx="7" cy="22" r="2"/><circle cx="17" cy="22" r="2"/><path d="M5.654,5,5.391,2.938A3.328,3.328,0,0,0,2.087,0H0V3H2.087a.331.331,0,0,1,.326.3l1.5,11.759A3.327,3.327,0,0,0,7.217,18H20.4L23.974,5ZM18.112,15H7.217a.329.329,0,0,1-.325-.3L6.037,8h14Z"/></svg>
+              <img src="shopping-cart (1).svg" >
               </a></li>
               <form class="col-12 col-lg-auto col-md-auto mb-3 me-lg-3">
                 <div class="input-group">
@@ -140,13 +141,13 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>
         <div class="pack-card row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 " >
 
 
-          <div class="col Smartphones" id="Smartphone" >
+          <div class="col Smartphones" id="Smartphone1" onclick = "window.location.href='productSmartphone.html'">
             <div class="card shadow-sm " >
               <img class="product-image" src="./Smartphones/1/OnePlus-Nord-CE-2-Lite-5G-Mobile-Phones.png" height="250px" width="250px">
               <div class="card-body ">
                 <p class="card-text">OnePlus Nord CE 2 Lite 5G,128 GB,6 GB RAM,Blue Tide,Mobile Phone</p>
                 <div class="d-flex justify-content-between align-items-center">
-                  <h3>₹ 1500</h3>
+                  <h3>₹ 16,499</h3>
 
                   <div class="star" >
                     <img src="./reshot-icon-complete-star-R8YXZ3FU7E-081ac.svg" height="25px" width="25px" >
@@ -170,7 +171,7 @@ <h3>₹ 1500</h3>
               <div class="card-body">
                 <p class="card-text">Tecno Pop 7 Pro 64 GB, 2 GB, Black, <br>Smartphone</p>
                 <div class="d-flex justify-content-between align-items-center">
-                  <h3>₹ 1500</h3>
+                  <h3>₹ 5,999</h3>
 
                   <div class="star" >
                     <img src="./reshot-icon-complete-star-R8YXZ3FU7E-081ac.svg" height="25px" width="25px" >
@@ -209,7 +210,7 @@ <h3>₹ 1500</h3>
           </div>
 
 
-          <div class="col Laptops" id="Laptop" >
+          <div class="col Laptops" id="Laptop" onclick = "window.location.href='productLaptop.html'" >
             <div class="card shadow-sm">
               <img class="product-image" src="./Laptops/1/Dell.jpeg" height="250px" width="250px">
               <div class="card-body">
@@ -275,7 +276,7 @@ <h3>₹ 1500</h3>
           </div>
 
 
-          <div class="col Televisions" id="Televisions" >
+          <div class="col Televisions" id="Televisions" onclick = "window.location.href='productTelevision.html'">
             <div class="card shadow-sm">
               <img class="product-image" src="./Televisions/1/Sony.jpeg" height="250px" width="250px">
               <div class="card-body">
@@ -341,7 +342,7 @@ <h3>₹ 1500</h3>
             </div>
           </div>
 
-          <div class="col Refrigerators" id="Refrigerator"  >
+          <div class="col Refrigerators" id="Refrigerator"  onclick = "window.location.href='productRefrigerator.html'">
             <div class="card shadow-sm " >
               <img class="product-image" src="./Refrigerator/1/LG.jpeg" height="250px" width="250px">
               <div class="card-body ">
@@ -407,7 +408,7 @@ <h3>₹ 1500</h3>
           </div>
 
 
-          <div class="col DSLR-Cameras" id="DSLR-Camera">
+          <div class="col DSLR-Cameras" id="DSLR-Camera" onclick = "window.location.href='productDSLR-Camera.html'">
             <div class="card shadow-sm " >
               <img class="product-image" src="./DSLR-Camera/1/Canon.jpeg" height="250px" width="250px">
               <div class="card-body ">
@@ -474,7 +475,7 @@ <h3>₹ 1500</h3>
           </div>
 
 
-          <div class="col Air-Conditioners" id="Air-Conditioner">
+          <div class="col Air-Conditioners" id="Air-Conditioner" onclick = "window.location.href='productAir-Conditioner.html'">
             <div class="card shadow-sm " >
               <img class="product-image" src="./Air-Conditioners/1/Haier.jpeg" height="250px" width="250px">
               <div class="card-body ">
@@ -637,7 +638,7 @@ <h4>NAME-4</h4>
           <div class="col mb-3">
             <h5>Appliances</h5>
             <ul class="nav flex-column">
-              <li class="nav-item mb-2"><a href="#Smartphone" class="nav-link p-0 text-body-secondary">Smartphones</a></li>
+              <li class="nav-item mb-2"><a href="#Smartphone1" class="nav-link p-0 text-body-secondary">Smartphones</a></li>
               <li class="nav-item mb-2"><a href="#Laptop" class="nav-link p-0 text-body-secondary">Laptops</a></li>
               <li class="nav-item mb-2"><a href="#Television" class="nav-link p-0 text-body-secondary">Televisions</a></li>
               <li class="nav-item mb-2"><a href="#Refrigerator" class="nav-link p-0 text-body-secondary">Refrigerators</a></li>

diff --git a/index.js b/index.js
@@ -45,3 +45,6 @@ btnTestimonial[3].onclick=function(){
     this.classList.add("active");
 }
 
+
+
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -45,3 +45,6 @@ btnTestimonial[3].onclick=function(){
		this.classList.add("active");
		}