From ab64c8c6ad776ee72ccdf66289318527a7cc6bd3 Mon Sep 17 00:00:00 2001 From: Yash Verma <114978813+Rajput-xv@users.noreply.github.com> Date: Sun, 8 Oct 2023 11:37:02 +0530 Subject: [PATCH] update html css --- index.css | 173 +++++++++++++++++++---- index.html | 31 +++-- index.js | 3 + productAir-Conditioner.html | 266 +++++++++++++++++++++++++++++++++++ productDSLR-Camera.html | 265 +++++++++++++++++++++++++++++++++++ productLaptop.html | 266 +++++++++++++++++++++++++++++++++++ productRefrigerator.html | 265 +++++++++++++++++++++++++++++++++++ productSmartphone.html | 267 ++++++++++++++++++++++++++++++++++++ productTelevision.html | 266 +++++++++++++++++++++++++++++++++++ shopping-cart (1).svg | 3 +- 10 files changed, 1762 insertions(+), 43 deletions(-) create mode 100644 productAir-Conditioner.html create mode 100644 productDSLR-Camera.html create mode 100644 productLaptop.html create mode 100644 productRefrigerator.html create mode 100644 productSmartphone.html create mode 100644 productTelevision.html diff --git a/index.css b/index.css index 1660980..86d107b 100644 --- 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 index 2732497..5fbe2ae 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@