MAINHACK

Viewing / Editing File: style.css

body{ width: 100%; padding: 0; margin: 0; background-color: rgba(0,0,0,0.1); }
h1, h2, h3, h4, h5, h6, p{ padding: 0; margin: 0; font-family: 'Roboto', sans-serif; }
ul{ padding: 0; margin: 0; }
li{ list-style: none; }
a{ text-decoration: none !important ; outline: none !important ; color: red; }
*{ padding: 0; margin: 0; font-family: 'Roboto', sans-serif; }
.container{ width: 1300px; }

/*Header-top Satrt*/
.header-top{ width: 100%; position: relative; background: #fff; display: block; padding: 8px 0 4px; margin: 0; z-index: 99; }
.header-top .logo{ width: 100%; padding: 0; margin: 0; }
.header-top .logo img{ width: 100%; }
.header-top .search{ width: 90%; padding: 0; margin: 0 auto; display: block; overflow: hidden; }
.header-top .search form{ width: 100%; }
.header-top .search form .search-category{ width: 100%; float: left; background-color: rgba(0,0,0,0.1); border-radius: 30px; padding: 5px; border: 1px solid #19addb; }
.header-top .search form .search-category input{ border: none; background: none; outline: none; width: 80%; float: left; font-size: 17px; line-height: 19px; color: #11426d; padding: 4px 10px; margin: 0; font-weight: 400; }
.header-top .search form .search-category input::placeholder {
  color: #11426d;
  opacity: 1; /* Firefox */
}

.header-top .search form .search-category input::-ms-input-placeholder { /* Edge 12-18 */
  color: #11426d;
}

.header-top .search form .search-category button{ width: 10%; float: right; color: #19addb; background: none; outline: none; border: none; padding: 3px 0; }
.header-top .search form .search-category button i{ font-size: 18px; }
 .header-top .wishing-cart{ float: left; width: 25%; height: 38px; display: inline-block; text-align: center; border-left: 1px solid rgba(0,0,0,0.07); }
.header-top .wishing-cart a{ text-decoration: none; font-size: 15px; display: block; vertical-align: text-top; padding:10px 0; color: #ededed; line-height: 9px; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out; font-weight: 400; }
  .header-top .wishing-cart a:hover{ color: #fff;}
    .header-top .wishing-cart a i{ font-size: 18px; padding: 0 0 0 7px; color: #11426d; }

.header-top .computer-cart{ float: left; width: 30%; height: 38px; display: inline-block; text-align: center; border-right: 1px solid rgba(0,0,0,0.07); border-left: 1px solid rgba(0,0,0,0.07); }
    .header-top .computer-cart a{ text-decoration: none; font-size: 15px; display: block; vertical-align: text-top; padding:10px 0; color: #ededed; line-height: 9px; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out; font-weight: 400; }
    .header-top .computer-cart a:hover{ color: #fff;}
    .header-top .computer-cart a i.fa{ font-size: 18px; padding: 0; color: #11426d; }
    .header-top .computer-login{float: right; width: 70%; display: inline-block;  text-align: center;  }
    .header-top .computer-login .dropbtn { color: white; background: none; font-size: 16px; border: none; }
    .header-top .computer-login .dropbtn img{ width: 90%; }
    .header-top .computer-login .dropbtn { border: none; outline: none; text-decoration: none; font-size: 15px; vertical-align: text-top; padding: 15px 0; color: #11426d; line-height: 9px; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out; font-weight: 400;  display: block; width:100%; }
    .header-top .computer-login .dropdown { position: relative; display: inline-block; width: 100%;}
    .header-top .computer-login .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 400px; box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%); z-index: 1; transition: color 0.25s ease-in-out, border-radius: 4px 0px 4px 4px; background-color: #333; left: -200px; top: 40px;}
    .header-top .computer-login .dropdown-content ul { list-style-type: none; z-index: 9999; width: 100%; float: left; padding: 10px 0px; }
    .header-top .computer-login .dropdown-content ul li { margin: 0; float: left !important; width: 100%; text-align: left !important; padding: 5px 10px; text-transform: uppercase; }
    .header-top .computer-login .dropdown-content ul li a { width: 100%; display: block; line-height: 32px; padding-left: 15px; color: #ededed; text-transform: capitalize; font-size: 13px; text-decoration: none; border-radius: 0px !important; padding: 0 0 0 20px; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out; font-weight: 400; }
    .header-top .computer-login .dropdown-content ul li a:hover{ color: #fff; background: #292929; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, }
    .header-top .computer-login .dropdown-content ul li a i { margin-right: 15px; font-size: 14px; line-height: 30px; color: #75a5c3; }
    
    .header-top .computer-login .dropdown-content ul.log-sing { margin: 0; list-style-type: none; z-index: 100; width: 50%; float: left;padding: 4px 0 10px; border: 2px solid #75a5c3; }
    .header-top .computer-login .dropdown-content ul.log-sing li { float: left !important; width: 100%; text-align: left !important; color: #fff;  }
    .header-top .computer-login .dropdown-content ul.log-sing li a { width: 100%; display: block; line-height: 32px; color: #19addb; font-size: 13px; text-decoration: none; border-radius: 0px !important; padding: 0 0 0 0; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out; font-weight: bold; text-transform: uppercase; }
    .header-top .computer-login .dropdown-content ul.log-sing li a:hover{ color: #fff; background: #292929; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, }
    .header-top .computer-login .dropdown-content ul.log-sing li a i { margin-right: 15px; font-size: 14px; line-height: 30px; color: #fff; }

.header-top .computer-login .dropdown:hover .dropdown-content {display: block; transition: color 0.25s ease-in-out, }
    /*.header-top .computer-login .dropbtn i.fa{ width: 30px; height: 30px; border-radius: 50px; padding: 5px; background-color: rgba(0,0,0,0.1); color: #19addb; font-size: 17px; line-height: 19px; margin: 0 0 0 10px; border: 1px solid #19addb; }*/

/*Header Start*/
.header-bottom{ width: 100%; display: block; background: #fff; padding: 0 0; margin:0 0; z-index: 9; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.header-bottom .logo{ width: 45%; padding: 9px 0; margin: 0; }
.header-bottom .logo img{ width: 100%; }

.header-bottom .menu{ width: 100%; float: right; display: inline-block; padding: 10px 0 16px; margin:0; }

/*Banner Start*/
.banner{ width: 100%; position: relative; display: block; padding: 0; margin: 0; }
.banner img{ width: 100%; }
.banner .banner-left-content{ width: 55%; position: absolute; content: ""; top: 170px; left: 0; right: 0; padding: 0; margin: 0 auto; z-index: 9; text-align: center; }
.banner .banner-left-content h2{ font-size: 40px; line-height: 44px; color: #fff; padding: 0; margin: 0; }
.banner .banner-left-content p{ font-size: 18px; line-height: 24px; color: #fff; padding: 10px 0 20px; margin: 0; }
.banner .banner-left-content a{ webkit-box-shadow: 0px 3px 22px -6px rgba(0, 0, 0, 0.79); -moz-box-shadow: 0px 3px 22px -6px rgba(0, 0, 0, 0.79); box-shadow: 0px 3px 22px -6px rgba(0, 0, 0, 0.43); display: inline-block; vertical-align: middle; padding: 10px 0; background: #0088ff; color: #fff; margin: 10px 0 0 0; width: 30%; text-align: center; font-weight: bold; transition: .3s ease; -webkit-transition: .3s ease; -moz-transition: .3s ease; border: 2px solid #ffffffbd; font-size: 16px; letter-spacing: 0px; font-weight: 400; }
.banner .banner-left-content a:hover{ letter-spacing: 2px; transition:all 500ms ease-in-out; font-weight: 400; }

.banner .banner-right{ width: 35%; height: 485px; float: right; }
.banner .banner-right img{ width: 100%; height: 100%; }

/*Catagory*/
.catagory{ width: 100%; position: relative; display: block; background: #F8F8F8; padding: 30px 0; margin: 0; }
.catagory .catagory-item-content{ width: 12.71%; float: left; padding: 0; margin: 0 10px; text-align: center; }
.catagory .catagory-item-content img{ width: 100%; filter: grayscale(100%); transition: all 400ms ease-in-out; }
.catagory .catagory-item-content img:hover{ filter: grayscale(0%); transition: all 400ms ease-in-out; }
.catagory .catagory-item-content h4{ font-size: 18px; line-height: 20px; color: #000; padding: 20px 0; margin: 0;  }

/*trending*/
.trending{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; }
.trending h2{ font-size: 30px; line-height: 32px; color: #000; padding: 0 0 30px; margin: 0; }
.trending #trending-slider .item{ position: relative; border: 1px solid #ccc; border-radius: 6px; margin: 0 15px; overflow: hidden; padding: 10px; }
.trending #trending-slider .item img{ width: 100%; }
.trending #trending-slider .item .trending-content-dec{ width: 100%; padding: 0; margin: 0; }
.trending #trending-slider .item .trending-content-dec h4{ font-size: 18px; line-height: 20px; color: #11426d; font-weight: bold; padding: 0; margin: 0; width: 100%; }
.trending #trending-slider .item .trending-content-dec h3{ font-size: 22px; line-height: 24px; color: #19addb; font-weight: bold; padding: 10px 0; margin: 0; }
.trending #trending-slider .item .trending-content-dec h3 b{ color: #19addb; }
.trending #trending-slider .item .trending-content-dec h3 del{ font-size: 16px; line-height: 18px; color: #11426d; padding: 0 0 0 20px; margin: 0; font-weight: 400; }
.trending #trending-slider .item .trending-content-dec p{ font-size: 16px; line-height: 20px; color: #11426d; font-weight: 300; padding: 0 0 20px; margin: 0; }
.trending #trending-slider .item .trending-content-dec ul{ padding: 0; margin: 0; }
.trending #trending-slider .item .trending-content-dec ul li{ display: inline-block; float: left; width: 47%; padding: 10px 0; margin: 0 15px 0 0; text-align: center; background-color: #19addb; }
.trending #trending-slider .item .trending-content-dec ul li a{ font-size: 14px; line-height: 16px; color: #fff; }
.trending #trending-slider .item .trending-content-dec ul li:nth-child(2){ margin-right: 0; }
.trending #trending-slider .item .trending-content-dec ul li a i{ font-size: 18px; padding: 0 5px 0 0; }

/*About Start*/
.about{ width: 100%; position: relative; display: block; background: #F8F8F8; padding: 30px 0; margin: 0; }
.about .about-content{ width: 100%; padding: 0; margin: 0; }
.about .about-content h2{ font-size: 30px; line-height: 32px; color: #000; padding: 0; margin: 0;  }
.about .about-content p{ font-size: 18px; line-height: 24px; color: #11426d; font-weight: 300; padding: 10px 0 20px; margin: 0; text-align: justify; }
.about .about-content a{ webkit-box-shadow: 0px 3px 22px -6px rgba(0, 0, 0, 0.79); -moz-box-shadow: 0px 3px 22px -6px rgba(0, 0, 0, 0.79); box-shadow: 0px 3px 22px -6px rgba(0, 0, 0, 0.43); display: inline-block; vertical-align: middle; padding: 10px 0; background: linear-gradient(to bottom, #fff0, #0088ff45); color: #000; margin: 10px 0 0 0; width: 30%; text-align: center; font-weight: bold; transition: .3s ease; -webkit-transition: .3s ease; -moz-transition: .3s ease; border: 2px solid #ffffffbd; font-size: 16px; letter-spacing: 0px; font-weight: 400; }
.about .about-content a:hover{ letter-spacing: 2px; transition:all 500ms ease-in-out; font-weight: 400; }

.about .about-content-image{ width: 100%;  border: 2px solid #19addbd6;  padding: 10px;  margin: 0;  background: none;  box-shadow: 0 0 20px #19addb42; }
.about .about-content-image img{ width: 100%; border: 1px solid #19addb; padding: 0px; filter: drop-shadow(0 0 5px #19addb); }

/*product*/
.deal{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; }
.deal h2{ font-size: 30px; line-height: 32px; color: #000; padding: 0 0 30px; margin: 0; }
.deal #deal-slider .item{ position: relative; border: 1px solid #ccc; border-radius: 6px; margin: 0 15px; overflow: hidden; padding: 10px; }
.deal #deal-slider .item img{ width: 100%; }
.deal #deal-slider .item .trending-content-dec{ width: 100%; padding: 0; margin: 0; }
.deal #deal-slider .item .trending-content-dec h4{ font-size: 18px; line-height: 20px; color: #11426d; font-weight: bold; padding: 0; margin: 0; width: 100%; }
.deal #deal-slider .item .trending-content-dec h3{ font-size: 22px; line-height: 24px; color: #19addb; font-weight: bold; padding: 10px 0; margin: 0; }
.deal #deal-slider .item .trending-content-dec h3 b{ color: #19addb; }
.deal #deal-slider .item .trending-content-dec h3 del{ font-size: 16px; line-height: 18px; color: #11426d; padding: 0 0 0 20px; margin: 0; font-weight: 400; }
.deal #deal-slider .item .trending-content-dec p{ font-size: 16px; line-height: 20px; color: #11426d; font-weight: 300; padding: 0 0 20px; margin: 0; }
.deal #deal-slider .item .trending-content-dec ul{ padding: 0; margin: 0; }
.deal #deal-slider .item .trending-content-dec ul li{ display: inline-block; float: left; width: 47%; padding: 10px 0; margin: 0 15px 0 0; text-align: center; background-color: #19addb; }
.deal #deal-slider .item .trending-content-dec ul li a{ font-size: 14px; line-height: 16px; color: #fff; }
.deal #deal-slider .item .trending-content-dec ul li:nth-child(2){ margin-right: 0; }
.deal #deal-slider .item .trending-content-dec ul li a i{ font-size: 18px; padding: 0 5px 0 0; }

/*Click Banner*/
.click-banner{ width: 100%; position: relative; display: block; padding: 0; margin: 0; }
.click-banner .banner-content{ width: 50%; float: left; padding: 0; margin: 0; }
.click-banner .banner-content img{ width: 100%; }

/*product*/
.product{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; }
.product h2{ font-size: 30px; line-height: 32px; color: #000; padding: 0 0 30px; margin: 0; }
.product #product-slider .item{ position: relative; border: 1px solid #ccc; border-radius: 6px; margin: 0 15px; overflow: hidden; padding: 10px; }
.product #product-slider .item img{ width: 100%; }
.product #product-slider .item .trending-content-dec{ width: 100%; padding: 0; margin: 0; }
.product #product-slider .item .trending-content-dec h4{ font-size: 18px; line-height: 20px; color: #11426d; font-weight: bold; padding: 0; margin: 0; width: 100%; }
.product #product-slider .item .trending-content-dec h3{ font-size: 22px; line-height: 24px; color: #19addb; font-weight: bold; padding: 10px 0; margin: 0; }
.product #product-slider .item .trending-content-dec h3 b{ color: #19addb; }
.product #product-slider .item .trending-content-dec h3 del{ font-size: 16px; line-height: 18px; color: #11426d; padding: 0 0 0 20px; margin: 0; font-weight: 400; }
.product #product-slider .item .trending-content-dec p{ font-size: 16px; line-height: 20px; color: #11426d; font-weight: 300; padding: 0 0 20px; margin: 0; }
.product #product-slider .item .trending-content-dec ul{ padding: 0; margin: 0; }
.product #product-slider .item .trending-content-dec ul li{ display: inline-block; float: left; width: 47%; padding: 10px 0; margin: 0 15px 0 0; text-align: center; background-color: #19addb; }
.product #product-slider .item .trending-content-dec ul li a{ font-size: 14px; line-height: 16px; color: #fff; }
.product #product-slider .item .trending-content-dec ul li:nth-child(2){ margin-right: 0; }
.product #product-slider .item .trending-content-dec ul li a i{ font-size: 18px; padding: 0 5px 0 0; }

/*Request for Quote Start*/
.quote{ width: 100%; position: relative; display: block; background: #F8F8F8; padding: 30px 0; margin: 0; }
.quote .quote-content-dec{ width: 100%; padding: 0; margin: 0; }
.quote .quote-content-dec h2{ font-size: 30px; line-height: 32px; color: #000; padding: 0; margin: 0;  }
.quote .quote-content-dec p{ font-size: 18px; line-height: 24px; color: #11426d; font-weight: 300; padding: 10px 0; margin: 0; text-align: justify; }

.quote .quote-content-img{ width: 80%; float: right; padding: 0; margin: 0; }
.quote .quote-content-img img{ width: 100%; }

/*Testimonial Start*/
.testimonial{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0 50px; margin: 0; }
.testimonial h2{ font-size: 30px; line-height: 32px; color: #000; padding: 0 0 30px; margin: 0; text-align: center;  }
.testimonial .testimonial-left-content{ width: 100%; float: left; padding: 0; margin: 0; }
.testimonial .testimonial-left-content #testimonial-slider .item{ margin: 0 15px; }
.testimonial .testimonial-left-content .testi-img{ width: 100%; position: relative; display: block; padding: 0; margin: 0; }
.testimonial .testimonial-left-content .testi-img img{ width: 100%; }
.testimonial .testimonial-left-content .testimonial-content{ width: 100%; position: absolute; content: ""; top: 0; left: 0; padding: 30px; margin: 0; text-align: center; }
.testimonial .testimonial-left-content .testimonial-content img{ width: 15%; }
.testimonial .testimonial-left-content .testimonial-content h5{ font-size: 18px; line-height: 24px; color: #19addb; padding: 5px 0 0; margin: 0; font-weight: bold; }
.testimonial .testimonial-left-content .testimonial-content p{ font-size: 18px; line-height: 24px; color: #282828; padding: 5px 0 0; margin: 0; font-weight: 300; }

/*Why Choose Us*/
.why{ width: 100%; position: relative; display: block; background: #F8F8F8; padding: 30px 0; margin: 0; }
.why h2{ font-size: 30px; line-height: 32px; color: #000; padding: 0 0 30px; margin: 0; text-align: center;  }
.why .why-content-box{ width: 25%; float: left; border-right: 1px solid #ccc; padding: 10px; text-align: center; height: 260px; }
.why .why-content-box:nth-child(5){ border-right: none; }
.why .why-content-box .why-img{ width: 20%; background: #19addb; border-radius: 60px; padding: 10px; display: block; margin: 0 auto; }
.why .why-content-box img{ width: 100%; }
.why .why-content-box h4{ font-size: 18px; line-height: 20px; color: #11426d; padding: 10px 0; margin: 0; }
.why .why-content-box p{ font-size: 18px; line-height: 24px; color: #11426d; font-weight: 300; padding: 10px 0; margin: 0; text-align: center; }

/*Footer Start*/
.footer{ width: 100%; position: relative; background: #3B3B3B; padding: 30px 0; margin: 0; }
.footer .footer-box{ width: 100%; padding: 0; margin: 0; }
.footer .footer-box h4{ font-size: 22px; line-height: 24px; color: #fff; padding: 0 0 15px; margin: 0; font-weight: bold; }
.footer .footer-box p{ font-size: 18px; line-height: 26px; color: #fff; font-weight: 300; padding: 0 0 15px; margin: 0; }
.footer .footer-box ul.footer-social{ padding: 0; margin: 0; }
.footer .footer-box ul.footer-social li{ display: inline-block; float: left; padding: 0 15px 0 0; margin: 0; }
.footer .footer-box ul.footer-social li a{ background: #19addb; padding: 5px 0 0; border-radius: 30px; height: 30px; width: 30px; display: inline-block; text-align: center; border: 1px solid #fff; color: #fff; transition: all 400ms ease-in-out; }
.footer .footer-box ul.footer-social li a:hover{ background: #fff; color: #19addb; border: 1px solid #19addb; transition: all 400ms ease-in-out; }
.footer .footer-box ul.footer-quick-link{ padding: 0; margin: 0; }
.footer .footer-box ul.footer-quick-link li{ display: block; padding: 0 0 15px; margin: 0; }
.footer .footer-box ul.footer-quick-link li i{ font-size: 15px; color: #fff; font-weight: bold; margin: 0 10px 0 0; }
.footer .footer-box ul.footer-quick-link li a{ font-size: 18px; line-height: 20px; padding: 0; display: inline-block; color: #fff; transition: all 400ms ease-in-out; font-weight: 300; }
.footer .footer-box ul.footer-quick-link li a:hover{ color: #19addb; transition: all 400ms ease-in-out; }
.footer .footer-box ul.footer-contact{ padding: 0; margin: 0; }
.footer .footer-box ul.footer-contact li{ font-size: 18px; line-height: 24px; color: #fff; font-weight: 300; padding: 0 0 15px; margin: 0; }
.footer .footer-box ul.footer-contact li i{ font-size: 15px; color: #fff; font-weight: bold; margin: 0 10px 0 0; }
.footer .footer-box ul.footer-contact li a{ font-size: 18px; line-height: 20px; padding: 0; display: inline-block; color: #fff; transition: all 400ms ease-in-out; font-weight: 300; }
.footer .footer-box ul.footer-contact li a:hover{ color: #19addb; transition: all 400ms ease-in-out; }

.footer .footer-box .map{ width: 100%; height: 200px; border: 2px solid #19addb; padding: 5px }
.footer .footer-box .map iframe{ width: 100%; height: 100%; border: none !important; }

/*copyright*/
.copyright{ width: 100%; position: relative; background: #1D1D1D; padding: 15px 0; margin: 0; }
.copyright p{ font-size: 16px; line-height: 18px; font-weight: 300; text-align: center; color: #fff; padding: 0; margin: 0; }
.copyright p a{ color: #19addb; transition: all 400ms ease-in-out; }
.copyright p a:hover{ color: #ccc; transition: all 400ms ease-in-out; }

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: style.css

Server Info

System Features

User Info