Radios
Radios - Electronics Store WooCommerce Template
- Created: 09/28/2022
- Latest Update: 09/28/2022
- by: Themexriver
- email: wabidullahsharif@gmail.com
Installation
Follow the steps below to get started with Radios - Electronics Store WooCommerce Template :
-
Open the
Package/RadiosFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
Radios HTML/css, js, fonts- Stylesheets, JavaScript, Fonts etc Folder -
Radios HTML/img- Images Folder -
Radios HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Bootstrap 5.x
- Fontawesome Used
- Google Font Used
- Fixed Menu
- Google Map
- Eye Catching Design
- W3C Validate Code
HTML Structure
Radios has follows a simple coding structure. here is the sample:
<!doctype html> <html class="no-js" lang="zxx"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Radios - Electronics Store WooCommerce Template > <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png"> <!-- Place favicon.png in the root directory --> <!-- CSS here --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <link rel="stylesheet" href="css/themify-icons.css"> <link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/aos.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/meanmenu.css"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <!-- preloader start --> <div id="preloader"> <div class="preloader"> <span></span> <span></span> </div> </div> <!-- preloader end --> <!-- header start --> <header class="main-header"> <div class="header-top-area"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-xl-2 col-lg-4"> <div class="logo d-none d-lg-block"> <a href="#"><img src="img/logo/logo.png" alt="logo"></a> </div> <div class="logo-mobile d-none"> <a href="#"><img src="img/logo/logo-2.png" alt="logo"></a> </div> </div> <div class="col-xl-4"> <div class="header-top-right f-right"> <div class="header-social-icon"> <a href="#"><i class="ti-facebook"></i></a> <a href="#"><i class="ti-twitter-alt"></i></a> <a href="#"><i class="ti-google"></i></a> <a href="#"><i class="ti-instagram"></i></a> <a href="#"><i class="ti-linkedin"></i></a> </div> <div class="header-btn"> <a href="donation-form.html" class="thm-btn thm-btn-2">Donate Now</a> </div> </div> <div class="mobile-menu"></div> </div> </div> </div> </div> </header> <!-- header end --> <!-- All js here --> <script src="js/vendor/modernizr-3.5.0.min.js"></script> <script src="js/vendor/jquery-1.12.4.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script> <script src="js/jquery.slick.js"></script> <script src="js/jquery.scrollUp.min.js"></script> <script src="js/jquery.meanmenu.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
CSS Structure
We are using several CSS files in this Template. Mitem Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Animate css used
- Bootstrap css used
- slick used
- Favicon used
- Fontawesome used
- Style.css used
- and some other necessary css files
style.css situated on Radios/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
Project Name: Radios - Electronics Store WooCommerce Template Author: Mitem -->> (https://themeforest.net/user/themexriver) Support: wabidullahsharif@gmail.com Description: Electronics Store WooCommerce Template Developer: Wasim Mia Version: 1.0 /* CSS Index ----------------------------------- 1. Theme default css 2. header 3. slider 4. feature 5. about 6. counter 7. causes 8. campaign 9. video 10. testimonial 11. team 12. volenteer 13. gallery 14. news 15. footer 16. cta 17. info bar 18. page title 19. events 20. faq 21. contact 22. header search 23 preloader */
/* 2. header */ .header-top-area { background: #051f33; padding-left: 200px; padding-right: 200px; padding-top: 30px; padding-bottom: 65px; } .header-top ul li { float: left; margin-right: 35px; display: flex; align-items: center; } .header-top ul li:last-child { margin-right: 0; } .header-top ul li span { float: left; } .header-top-content { float: left; margin-left: 13px; max-width: 210px; } .header-top-content p { margin-bottom: 2px; line-height: 1.4; color: #a2bacc; font-weight: 500; font-size: 15px; } .header-top-content h6 { font-size: 16px; line-height: 1.5; color: #fff; font-weight: 500; margin: 0; font-family: 'Roboto', sans-serif; } .header-top-right { display: flex; align-items: center; justify-content: end; }
Js Structure
We are using several Js files in this Template. Mitem Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- fontawesome.js used
- jquery-ui.js used
- bootstrap.min.js used
- slick.js used
- scrollUp.min.js used
- counterup.min.js used
- and some other necessary css files
main.js situated on js/ contain the the all necessary custom style which is well organized and following are the main.js file structure :
(function ($) { "use strict"; // preloader $(window).on('load', function () { $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({ 'overflow': 'visible' }); }) // side-bar $(".bar").on("click", function () { $(".btn-menu-main,.offcanvas-overly").addClass("btn-menu-main-right"); return false; }); $(".crose,.offcanvas-overly").on("click", function () { $(".btn-menu-main,.offcanvas-overly").removeClass("btn-menu-main-right"); }); // meanmenu jQuery('#mobile-menu').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: "991" }); //data background $("[data-background]").each(function () { $(this).css("background-image", "url(" + $(this).attr("data-background") + ") ") }) //counterUp $('.counter').counterUp({ delay: 10, time: 1000 }); /* magnificPopup img view */ $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } }); /* magnificPopup video view */ $('.popup-video').magnificPopup({ type: 'iframe' }); // brand active $('.brand-active').owlCarousel({ loop:true, margin:0, items:1, dots:false, autoplay:true, smartSpeed: 1000, autoplayTimeout:5000, autoplayHoverPause:true, responsive:{ 0:{ items:1 }, 500:{ items:2 }, 767:{ items:3 }, 992:{ items:3 }, 1200:{ items:5 } } }) // testimonial active $('.testimonial-active').owlCarousel({ loop:true, margin:0, items:1, nav:false, dots:true, autoplay:true, smartSpeed: 1000, autoplayTimeout:5000, autoplayHoverPause:true, responsive:{ 0:{ items:1 }, 767:{ items:1 }, 992:{ items:1 } } }) })(jQuery);
Customization
How to Change Logo
How to Change Copyright
