style.css

/*common css*/ body, h1, h2, h3, h4, h5, h6, ul, p{ margin: 0; padding: 0; } li{list-style: none;} a{text-decoration: none;} body{ font-family: 'Ubuntu', sans-serif; background-image: url('img/bodybg.png'); background-repeat: repeat-y; overflow-x: hidden; } html { scroll-behavior: smooth; } /*body css*/ /*navigation css*/ nav { position: fixed; top: 0; left: 0; background: transparent; z-index: 99; width: 100%; padding: 1.5rem 6.5rem; transition: 0.8s; } .sticy_logo { display: none; } .logo_area { width: 15%; float: left; } .nav_links { width: 70%; float: left; text-align: center; } .nav_social { width: 15%; float: left; text-align: right; } .nav_links ul li { display: inline-block; margin: 0 20px; position: relative; } .nav_links ul li a { color: white; text-transform: capitalize; font-size: 17px; font-weight: 600; text-decoration: none; transition: 0.3s; } .nav_social ul li { display: inline-block; margin-left: 25px; } .nav_social ul li a { font-size: 17px; color: white; text-decoration: none; transition: 0.3s; } .common_logo img { width: 100%; } .sticky_nav { background: white; border-bottom: 1px solid #0000002e; } .sticky_nav .nav_links ul li a{ color: #000000b5; } .sticky_nav .nav_social ul li a{ color: #000000b5; } .sticky_nav .common_logo { display: none; } .sticky_nav .sticy_logo { display: block; } .nav_links ul li::after { content: ""; width: 0; height: 2px; background: white; position: absolute; top: -94%; left: 0; transition: 0.3s; } .sticky_nav .nav_links ul li::after { background: #4466c9; } .nav_links ul li:hover a, .nav_links ul li.active a{ color: tomato; } .nav_links ul li:hover::after, .nav_links ul li.active::after{ width: 100%; } .nav_social ul li:hover a { color: tomato; } .mobile_bar{ display: none; } /*home section*/ .home_section { background-image: url('img/homebg.png'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 100px 0; position: relative; } .home_body_content h2 { color: white; text-transform: capitalize; font-weight: 700; font-size: 52px; margin-top: 7rem; margin-bottom: 1rem; } .home_body_content p { color: white; font-weight: 300; font-size: 16px; } .red_btn { background: #fc6a42; width: 32%; float: left; text-align: center; margin-top: 5rem; padding: 8px 0; border-radius: 5px; transition: 0.3s; cursor: pointer; } .red_btn:hover{ background: white; } .red_btn:hover a{ color: #fc6a42; } .red_btn a { color: white; font-size: 18px; text-transform: capitalize; font-weight: 700; text-decoration: none; transition: 0.3s; } .blue_btn { width: 32%; float: left; margin-top: 5rem; margin-left: 1rem; background: #4466c9; padding: 8px 0; text-align: center; border-radius: 5px; transition: 0.3s; cursor: pointer; } .blue_btn:hover { background: white; } .blue_btn:hover a { color: #4466c9; } .blue_btn a { color: white; text-transform: capitalize; font-weight: 700; font-size: 18px; text-decoration: none; transition: 0.3s; } .header_body_img { margin-top: 7rem; text-align: center; } .header_body_img img { width: 90%; } .home_down_bnt { font-size: 12px; font-weight: bold; background: white; width: 28px; height: 28px; text-align: center; border-radius: 50%; padding-top: 6px; color: #ff000096; margin: 0 auto; margin-top: 4rem; animation: home_down_bnt 1s infinite ; } @keyframes home_down_bnt { 25%{ transform: translate(0, -8PX); } 100%{ transform: translate(0, 0); } } .hdeg { background: white; position: absolute; width: 52px; height: 52px; text-align: center; border-radius: 50%; color: #648cff; font-size: 18px; padding-top: 10px; top: 24%; right: 10%; } .sunny { background: #fc6a42; position: absolute; font-size: 17px; text-transform: uppercase; font-weight: 400; color: white; width: 90px; height: 90px; border-radius: 50%; text-align: center; padding-top: 31px; top: 46%; left: 48%; } .london { background: #4466c9; position: absolute; font-size: 17px; color: white; text-transform: uppercase; width: 92px; height: 92px; border-radius: 50%; text-align: center; padding-top: 33px; top: 43%; right: 7%; } .rio { background: #fcec64; color: #5b81ec; position: absolute; text-align: center; width: 45px; height: 45px; border-radius: 50%; text-transform: uppercase; font-size: 18px; padding-top: 8px; bottom: 18%; right: 9%; } /*features section*/ .features_section { padding: 90px 0; } .features_heading { text-align: center; margin-bottom: 5rem; } .features_heading h2 { text-transform: capitalize; color: #648cff; font-size: 40px; } .features_heading p { color: #0000008f; text-transform: capitalize; font-weight: 500; margin-top: 0.3rem; } .features_icon { width: 28%; float: left; font-size: 4rem; color: #fc6a42; margin-top: -12px; } .features_content { width: 70%; float: left; } .features_content h4 { text-transform: capitalize; margin-bottom: 1rem; } .features_content p { font-weight: 400; } /*loading screen*/ #loading_main{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fc6a42; z-index: 1000000; } #loading-screen { width: 100%; height: 100%; position: relative; } .loading_absolute { position: absolute; top: 50%; left: 50%; height: 50px; width: 50px; margin-top: -25px; margin-left: -25px; transform: rotate(45deg); animation: loading_absolute 1.5s infinite; } .object { width: 25px; height: 25px; background: white; float: left; } #object_one { animation: object_one 1.5s infinite; } #object_two { animation: object_two 1.5s infinite; } #object_three { animation: object_three 1.5s infinite; } #object_four { animation: object_four 1.5s infinite; } @keyframes loading_absolute{ 0%{ transform: rotate(0); } 100%{ transform: rotate(-45deg); } } @keyframes object_one{ 25%{ transform: translate(0, -50px) rotate(-180deg); } 100%{ transform: translate(0, 0) rotate(-180deg); } } @keyframes object_two{ 25%{ transform: translate(50px, 0) rotate(-180deg); } 100%{ transform: translate(0, 0) rotate(-180deg); } } @keyframes object_three{ 25%{ transform: translate(-50px, 0) rotate(-180deg); } 100%{ transform: translate(0, 0) rotate(-180deg); } } @keyframes object_four{ 25%{ transform: translate(0, 50px) rotate(-180deg); } 100%{ transform: translate(0, 0) rotate(-180deg); } } /*slide Section*/ .slide_sction { overflow-x: hidden; padding: 70px 0; } .hi-slide.testi_slider { width: 55.5%; } .slide_heading { text-align: center; margin-bottom: 7rem; } .slide_heading h2 { text-transform: uppercase; color: #648cff; font-size: 38px; font-weight: 700; } .slide_heading p { text-transform: capitalize; color: #00000096; } .hi-next.testi_next { font-size: 35px; color: #c3cfe5; } .hi-prev.testi_prev { font-size: 35px; color: #c3cfe5; } /*screen Shot section*/ .screenshot_section { padding: 90px 0; } .shot_heading { text-align: center; margin-bottom: 5rem; } .shot_heading h2 { text-transform: uppercase; font-size: 40px; color: #648cff; font-weight: 600; } .shot_heading p { text-transform: capitalize; color: #000000b3; } .screen { padding: 80px 0; position: relative; } .shot_img img { width: 100%; } .shot_content img { margin-bottom: 2rem; } .shot_content h3 { text-transform: capitalize; font-size: 40px; margin-bottom: 0.7rem; color: #648cff; } .shot_content p { color: #000000a3; font-size: 21px; } .shot_content { margin-top: 6rem; } .shot_special { margin-top: 3rem; text-transform: capitalize; color: #0000003d; font-weight: 600; } .shot_special span { margin-left: 12px; } .shot_01_cloudy { background: #fcec64; position: absolute; width: 88px; height: 88px; text-align: center; text-transform: capitalize; font-size: 18px; color: white; font-weight: 600; border-radius: 50%; padding-top: 25px; top: 32%; left: 28%; } .shot_01_15 { background: #6ca3ff; position: absolute; width: 68px; height: 68px; border-radius: 50%; text-align: center; font-size: 18px; font-weight: 600; color: white; padding-top: 16px; top: 60%; left: 3.5%; } .shot_02_sunny { background: #f2a14e; position: absolute; width: 88px; height: 88px; border-radius: 50%; text-align: center; font-size: 18px; text-transform: capitalize; font-weight: 600; color: white; padding-top: 28px; top: 28%; right: 11%; } .shot_02_20 { background: #fc6a42; position: absolute; width: 64px; height: 65px; border-radius: 50%; text-align: center; font-size: 20px; font-weight: 600; color: white; padding-top: 15px; top: 60%; right: 38%; } .shot_03_rainy { background: #b8faee; position: absolute; width: 80px; height: 80px; text-align: center; border-radius: 50%; text-transform: capitalize; font-size: 18px; color: #0000005e; font-weight: 600; padding-top: 22px; top: 31%; left: 26.6%; } .shot_03_9 { background: #7693c8; position: absolute; width: 60px; height: 60px; text-align: center; border-radius: 50%; font-size: 20px; font-weight: 600; color: white; padding-top: 12px; top: 60%; left: 5%; } /*reviews section*/ .reviews_section { padding: 90px 0; } .reviews_heading { text-align: center; margin-bottom: 5rem; } .reviews_heading h2 { color: #648cff; text-transform: uppercase; font-weight: 600; font-size: 35px; } .reviews_heading p { text-transform: capitalize; color: #000000c9; } .review_icon { font-size: 85px; display: block; width: 100%; margin-bottom: -56px; color: #648cff; } .single_reviews { margin-bottom: 3rem; } .single_reviews h3 { font-size: 25px; color: #000000c4; } .single_reviews h5 { margin-top: 2rem; text-transform: capitalize; font-size: 20px; color: #0000008c; } .review_icon1 { width: 100%; font-size: 85px; color: #648cff; transform: rotate(-180deg); float: right; margin-top: -70px; } /*download section*/ .download_section { background-image: url('img/downloadbg.png'); padding-top: 105px; } .download_content h2 { color: white; text-transform: capitalize; font-size: 37px; margin-bottom: 1rem; } .download_content p { color: white; font-size: 20px; margin-bottom: 3rem; } .istore { width: 32%; float: left; } .istore img { width: 100%; } .playStore { width: 32%; float: left; margin-left: 2rem; } .playStore img { width: 100%; } .down_img img { width: 100%; } /*footer Section*/ .top_footer { padding: 50px 0; } .footer_logo img { width: 100%; } .footer_nav_links { text-align: center; } .footer_nav_links ul li { display: inline-block; margin: 0 20px; } .footer_nav_links ul li a { color: white; text-transform: capitalize; font-size: 18px; font-weight: 500; text-decoration: none; } .footer_social { float: right; } .footer_social ul li { display: inline-block; margin-left: 23px; } .footer_social ul li a { color: white; text-decoration: none; font-size: 20px; } footer { background: #353854; } .footer_nav { border-bottom: 1px solid #ffffff4a; padding-bottom: 3rem; } .copyright_text { text-align: center; padding-bottom: 3rem; color: #ffffff70; text-transform: capitalize; } .copyright_text span { color: red; margin: 0 5px; } .copyright_text a { color: white; margin-right: 5px; text-decoration: none; } /*goto btn*/ .go_to_btn { position: fixed; bottom: 4%; right: 2%; background: #0000007d; width: 35px; height: 35px; text-align: center; border-radius: 50%; animation: goto_btn 1s infinite; display: none; } .go_to_btn a svg { color: #ffffffb3; font-size: 15px; margin-top: 9px; } @keyframes goto_btn { 25%{ transform: translate(0, -8px); } 100%{ transform: translate(0, 0); } }