style.css

@font-face { font-family: 'Brandon Text'; src: url(fonts/BrandonText-Regular.ttf); font-style: normal; font-weight: 400; } @font-face { font-family: 'Brandon Text'; src: url(fonts/BrandonText-Medium.ttf); font-style: normal; font-weight: 500; } @font-face { font-family: 'Brandon Text'; src: url(fonts/BrandonText-Bold.ttf); font-style: normal; font-weight: 700; } @font-face { font-family: 'Brandon Text'; src: url(fonts/BrandonText-Black.ttf); font-style: normal; font-weight: 900; } /*common */ body, h1, h2, h3, h4, h5, h5, ul, p{ margin: 0; padding: 0; } ul{list-style: none;} a{text-decoration: none;} body{ font-family: 'Brandon Text'; } /*header css*/ header { box-shadow: 0 0 10px #0000008c; margin-bottom: 2px; } .top_header { border-bottom: 1px solid #0000003b; margin-bottom: 1.5rem; } .mobile { margin-top: 5px; margin-bottom: 2px; } .mobile span { margin-right: 4px; } .top_content { float: right; } .top_content ul li { display: inline-block; margin: 0px 10px; margin-top: 5px; margin-bottom: 2px; } .top_content ul li a { color: black; text-decoration: none; } .top_content ul li a span { margin-right: 6px; } .middle_header { border-bottom: 1px solid #0000003b; padding-bottom: 1rem; } .logo_area img { width: 85%; } serch_br{ position: relative; } .input_serch p input { width: 100%; padding: 2px 12px; border: 1px solid #0000002b; border-radius: 40px; } .login_content { display: flex; float: right; } .login_content p { margin: 0 3px; font-size: 16px; text-transform: uppercase; font-weight: 500; } .login_content p a{ color: rgba(0, 0, 0, 0.863); text-decoration: none; } .line { background: #00000057; width: 2px; height: 17px; margin: 0 7px; margin-top: 5px; } .serch_icon { position: absolute; top: 10%; right: 4%; background: transparent; border: none; } .manu_area { margin: 6px 0; } .manu_area ul li { display: inline-block; margin: 0 6px; } .manu_area ul li a { color: #000000b5; text-decoration: none; text-transform: capitalize; } .manu_area ul li a span { font-size: 13px; } .cart_content { display: flex; float: right; margin-top: 2px; } .cart { text-transform: capitalize; font-weight: 500; } .cart span { margin-right: 3px; } .cart_speccial { margin: 0 4px; background: red; width: 21px; height: 22px; border-radius: 50%; text-align: center; margin-top: 2px; color: white; font-weight: 600; } .banner_slider .owl-prev span { background: white; font-size: 46px; padding: 0 25px; position: absolute; top: 34%; left: 1%; border: 2px solid #0000008c; } .banner_slider .owl-next span { background: white; font-size: 46px; padding: 0 25px; position: absolute; top: 34%; right: 1%; border: 2px solid #0000008c; } .banner_slider .owl-prev span:hover, .banner_slider .owl-next span:hover{ color: black; } .owl-dots { display: none; } .reco_heading { text-align: center; margin-bottom: 4rem; } .reco_heading h2 { text-transform: capitalize; font-size: 36px; font-weight: 700; color: #000000b8; } .reco_content { text-align: center; background: white; box-shadow: 0 0 3px #0006; position: relative; cursor: pointer; } .reco_section { padding: 50px 0; } .reco_img img { width: 100%; } .offer { font-size: 13px; line-height: 1.1; position: absolute; top: 3%; right: 10%; background: red; padding: 8px 9px; border-radius: 50%; color: white; font-weight: 900; } .reco_content h5 { text-transform: uppercase; margin: 1rem 0; font-weight: 600; font-size: 17px; } .reco_content p { padding: 1rem 0; color: red; font-weight: 500; } .reco_hover { background: #000000a3; position: absolute; width: 100%; top: 72%; padding: 15px 0; opacity: 0; transition: 0.3s; } .reco_hover p { color: white; text-transform: capitalize; border: 2px solid white; padding: 0; width: 43%; margin: 1rem auto; } .reco_content:hover .reco_hover{ opacity: 1; } .ins_content { display: flex; } .ins_left img { width: 100%; border: 4px solid white; position: relative; } .ins_right img { width: 100%; border: 4px solid white; position: relative; } .ins_section { padding: 50px 0; margin-bottom: 10rem; } .ins_bg { background-image: url('img/ins-bg.png'); height: 40rem; } .ins_heading { margin: 4rem 0; } .ins_heading h2 { color: white; font-size: 50px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; } .ins_heading p { color: white; font-weight: 400; } .ins_img_1{ position: relative; cursor: pointer; } .ins_offer_1 { background: #0000002e; position: absolute; top: 1%; width: 99%; opacity: 0; left: 0.6%; height: 98%; transition: 0.3s; } .ins_offer_1 h1, .ins_offer_2 h1 { margin-left: 30rem; letter-spacing: 11px; margin-top: 1rem; color: #272b65; font-weight: 900; } .ins_offer_1 p, .ins_offer_2 p { margin-left: 32rem; border: 4px solid white; width: 20%; text-align: center; margin-top: 2rem; padding: 2px; text-transform: capitalize; font-weight: 600; } .ins_img_1:hover .ins_offer_1{ opacity: 1; } .ins_mg_2{ position: relative; cursor: pointer; } .ins_offer_2 { background: #0000003d; position: absolute; width: 99%; height: 99%; top: 1%; left: 0.6%; opacity: 0; transition: 0.3s; } .ins_mg_2:hover .ins_offer_2{ opacity: 1; } .ins_img_3{ position: relative; cursor: pointer; } .ins_offer_3 { background: #00000045; position: absolute; top: 1%; left: 1.6%; width: 97%; height: 98%; opacity: 0; transition: 0.3s; } .ins_offer_3 h1, .ins_offer_4 h1 { margin-left: 4rem; letter-spacing: 11px; margin-top: 2rem; color: #272b65; font-weight: 900; } .ins_offer_3 p, .ins_offer_4 p { margin-left: 5rem; border: 4px solid white; width: 51%; text-align: center; margin-top: 2rem; padding: 2px; text-transform: capitalize; font-weight: 600; color: white; } .ins_img_3:hover .ins_offer_3{ opacity: 1; } .ins_img_4{ position: relative; cursor: pointer; } .ins_offer_4 { background: #00000042; position: absolute; top: 1.5%; left: 1.6%; width: 97%; height: 97%; opacity: 0; transition: 0.3s; } .ins_offer_4 h1{ color: white; } .ins_img_4:hover .ins_offer_4{ opacity: 1; } .bestsell_section { padding: 50px 0; } .offer_co { background: #272b65; } .sin_section { background: url('img/sin_sec_bg.png'); padding: 50px 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .sin_content { text-align: center; } .sin_content h2 { color: white; font-size: 40px; font-weight: 900; margin-bottom: 1rem; } .sin_content p { color: white; margin-bottom: 2rem; font-weight: 400; } .sin_btn { border: 3px solid white; width: 23%; padding: 2px 0; margin: 0 auto; } .sin_btn a { color: white; text-transform: capitalize; font-weight: 600; text-decoration: none; } .sin-img img { width: 100%; } .testi-section { padding: 50px 0; } .testi_heading { text-align: center; margin-bottom: 3rem; } .testi_heading h2 { font-size: 40px; color: black; font-weight: 400; text-transform: capitalize; } .testi_heading p { font-size: 18px; text-transform: capitalize; font-weight: 400; } .testi-img img { position: absolute; top: 0%; left: 7%; } .single_testi { position: relative; } .single_testi p { width: 85%; margin: 0 auto; text-align: center; color: black; font-weight: 400; } .single_testi h6 { text-align: center; margin-top: 2rem; text-transform: capitalize; } .single_testi h3 { text-align: center; text-transform: capitalize; font-weight: 700; } .owl-carousel .owl-item .testi-img img { display: block; width: 7%; } .testi_slider .owl-prev span { background: white; font-size: 46px; padding: 0 25px; position: absolute; top: 2%; left: 0%; border: 2px solid #0000008c; } .testi_slider .owl-next span { background: white; font-size: 46px; padding: 0 25px; position: absolute; top: 2%; right: 0%; border: 2px solid #0000008c; } .testi_slider .owl-prev span:hover, .testi_slider .owl-next span:hover{ color: black; } .insta_section { background: #e4e4e4; padding: 50px 0; position: relative; } .insta_heading{ margin-bottom: 4rem; } .insta_heading h3 { text-transform: uppercase; font-size: 25px; background: #f05d4d; width: 16%; text-align: center; color: white; font-weight: 700; padding: 4px 0; position: absolute; left: 42.5%; margin-top: -5.5%; } .insta_left { border-top: 12px solid #f05d4d; border-bottom: 12px solid black; border-left: 12px solid green; border-right: 12px solid rebeccapurple; width: 0%; position: absolute; margin-top: -73px; left: 40.4%; } .insta_left { border-top: 12px solid transparent; border-bottom: 14px solid #f05d4d; border-left: 9px solid transparent; border-right: 0px solid transparent; width: 0%; position: absolute; margin-top: -76px; left: 41.8%; } .insta_right { border-top: 12px solid transparent; border-bottom: 14px solid #f05d4d; border-left: 0px solid transparent; border-right: 9px solid transparent; width: 0%; position: absolute; margin-top: -76px; right: 40.8%; } .insta_slider .owl-prev span { background: white; font-size: 46px; padding: 0 25px; position: absolute; top: 24%; left: -3%; border: 2px solid #0000008c; } .insta_slider .owl-next span { background: white; font-size: 46px; padding: 0 25px; position: absolute; top: 24%; right: -3%; border: 2px solid #0000008c; } .insta_slider .owl-prev span:hover, .testi_slider .owl-next span:hover{ color: black; } .top_footer { background: #272b65; padding: 10px 0; } .top_footer_social { margin-top: 5px; } .top_footer_social ul li { display: inline-block; margin: 0 5px; } .top_footer_social ul li a { color: white; text-transform: uppercase; } .t_text { color: white; text-transform: uppercase; font-size: 14px; margin-top: 5px; } .t_serch_ber input { width: 90%; margin-left: -27px; background: white; border: none; border-radius: 4px; padding: 4px 7px; color: black; } .t_btn { background: #f05d4d; border: none; color: white; border-radius: 3px; padding: 4px 7px; position: absolute; right: 1%; text-transform: capitalize; } .middle_footer { padding: 20px 0; } .m_conetent h2 { color: black; text-transform: uppercase; font-weight: 500; font-size: 25px; border-bottom: 1px solid #00000026; margin-bottom: 1rem; } .m_conetent p a { color: black; margin-left: 1rem; text-transform: capitalize; text-decoration: none; } .owner { margin-left: 1rem; text-transform: capitalize; color: #272b65; } .m_conetent p a img { width: 28%; } .m_conetent p a:hover{ color: #272b65; } .bottom_footer { border-top: 1px solid #0000002e; padding: 15px; } .copyright_text p { margin-top: 12px; text-transform: capitalize; } .payment { margin: 0; float: right; } .payment ul li { display: inline-block; margin: 0 6px; } .payment ul li a { color: #272b65; font-size: 30px; }