Copyright © 2024. Securix All Rights Reserved.
Created: 25 May 2024
Latest Update: 25 May 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Securix - Security And CCTV Services HTML Template. If you have any question, please feel free to contact us.
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Securix" folder.
You will find the
two folder one is for lite version and other is for dark version
file on the root that will be edited.
Also you will see 5 directories, css, js, fonts, logo, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
appside/
├── assets/css/
| ├── bootstrap.min.css
| ├── fontawesome.css
| ├── mobile.css
| ├── aos.css
| ├── sidebar.css
| ├── magnific-popup.css
| ├── owlcarousel.min.css
| ├── slick-slider.css
| ├── nice-select.css
| ├── typhograpy.css
| ├── main.css
|
├── style.css
|
|
├── assets/fonts/
| ├── fa-brands-300
| ├── fa-brands-300.woff2
| ├── fa-brands-400
| ├── fa-brands-400.woff2
| ├── fa-regular-400
| ├── fa-regular-400.woff2
| ├── fa-solid-900
| ├── fa-solid-900.woff2
| ├── fa-v4compatibility
| ├── fa-v4compatibility.woff2
|
├── assets/js/
│ ├── bootstrap.min.js
| ├── fontawesome.js
│ ├── mobilemenu.js
│ ├── counter.js
│ ├── magnific-popup.js
│ ├── aos.js
│ ├── sidebar.js
│ ├── jquery-3-6-0.min.js
│ ├── owlcarousel.min.js
│ ├── ScrollTrigger.min.js
│ ├── Splitetext.js
│ ├── gsap.min.js
│ ├── gsap-animation.js
│ ├── slick-slider.js
| ├── nice-select.js
| ├── circle-progress.js
| ├── waypoints.js
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── single-index1.html
├── single-index2.html
├── single-index3.html
├── single-index4.html
├── about.html
├── blog.html
├── blog-left.html
├── blog-right.html
├── blog-single.html
├── service.html
├── service-left.html
├── service-right.html
├── service-single.html
├── project.html
├── project-left.html
├── project-right.html
├── project-single.html
├── shop.html
├── shop-left.html
├── shop-right.html
├── shop-single.html
├── contact.html
├── team.html
├── testimonials.html
├── 404.html
├── pricing-plan.html
├── faq.html
├── cart.html
├── empty-cart.html
├── checkout.html
<!--===== HERO AREA STARTS =======--> <div class="hero1-section-area"> <img src="assets/img/elements/elements1.png" alt="" class="elements1 aniamtion-key-5"> <img src="assets/img/elements/elements2.png" alt="" class="elements2 aniamtion-key-1"> <img src="assets/img/elements/elements3.png" alt="" class="elements3 aniamtion-key-5"> <img src="assets/img/elements/elements4.png" alt="" class="elements4 aniamtion-key-1"> <img src="assets/img/elements/elements5.png" alt="" class="elements5 keyframe5"> <img src="assets/img/elements/elements6.png" alt="" class="elements6 aniamtion-key-2"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="hero-main-area heading1"> <h5><img src="assets/img/icons/finger1.svg" alt="">Top #1 Security Expert In The World </h5> <h1 class="text-anime-style-3">24/7 Protection CCTV Security Systems</h1> <p data-aos="fade-up" data-aos-duration="800" data-aos-delay="300" data-aos-offset="50">We offer peace of mind by keeping a vigilant eye on what matters most to <br class="d-lg-block d-none"> you. Whether it's deterring intruders, monitoring activity, or providing</p> <div class="btn-area" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300" data-aos-offset="50"> <a href="contact.html" class="header-btn2">Get a Free Quote <span><i class="fa-solid fa-arrow-right"></i></span></a> <a href="contact.html" class="header-btn1">Book a Demo <span><i class="fa-solid fa-arrow-right"></i></span></a> </div> <div class="others-area"> <div class="img1"> <img src="assets/img/all-images/others-img1.png" alt=""> </div> <h4><span class="counter">4.8</span>k</h4> <p>Satisfied Clients With Securix</p> </div> </div> </div> <div class="col-lg-6"> <div class="header-images"> <div class="image reveal"> <img src="assets/img/all-images/header-img1.png" alt=""> </div> <img src="assets/img/elements/elements8.png" alt="" class="elements8 keyframe5"> <img src="assets/img/elements/elements7.png" alt="" class="elements7 keyframe5"> </div> </div> </div> </div> <div class="bg reveal"> <img src="assets/img/elements/elements9.png" alt="" class="elements9"> </div> </div> <!--===== HERO AREA ENDS =======--> <!--===== ABOUT AREA STARTS =======--> <div class="about1-section-area sp1"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="about-images reveal"> <img src="assets/img/all-images/about-img1.png" alt=""> </div> </div> <div class="col-lg-6"> <div class="about-content-area heading2"> <h5 data-aos="fade-up" data-aos-duration="800" data-aos-delay="300" data-aos-offset="50"><img src="assets/img/icons/finger2.svg" alt="">Who We Are</h5> <h2 class="text-anime-style-3">Safeguarding Your Peace Mind</h2> <p>Crafting a persuasive paragraph to describe your security and CCTV services on your landing page is crucial for informing visitors about the value </p> <div class="counter-area" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="400" data-aos-offset="60"> <div class="counter-box"> <h2><span class="counter">21</span>%</h2> </div> <div class="pera"> <p>From deterring potential threats to providing valuable evidence in case of incidents, our solutions offer unparalleled peace of mind.</p> </div> </div> <div class="counter-area" data-aos="fade-left" data-aos-duration="1100" data-aos-delay="500" data-aos-offset="60"> <div class="counter-box"> <h2><span class="counter">30</span>%</h2> </div> <div class="pera"> <p>Our expert team specializes in the installation, maintenance, and monitoring of cutting-edge CCTV systems tailored to your specific needs.</p> </div> </div> <div class="counter-area" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="600" data-aos-offset="60"> <div class="counter-box"> <h2><span class="counter">12</span>K</h2> </div> <div class="pera"> <p>We offer a comprehensive suite of security & CCTV services designed to protect your home or business around the clock.</p> </div> </div> </div> </div> </div> </div> </div> <!--===== ABOUT AREA ENDS =======-->
// HOMEPAGE1 HEADER STARTS // .homepage1-body,html { overflow-x: hidden !important; } .homepage1-body{ overflow-x: hidden; .header-area.homepage1.single-page1 { nav#navbar-example2 { display: block !important; padding: 0 !important; } .header-elements { .main-menu{ ul { li { a.nav-link.active { &::after { width: 50% !important; } } } } .tp-submenu { left: -370px; } } } } .header-area.homepage1 { position: absolute; width: 100%; z-index:9999; padding: 16px 0; transition: all .4s; .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all .4s; background: var(--ztc-bg-bg-3); padding: 24px; border-radius: 4px; height: 82px; .main-menu{ position: relative; ul { &:hover > li { color: var(--ztc-text-text-3) !important; } li { display: inline-block; position: relative; .tp-submenu { background: var(--ztc-text-text-1) !important; .homemenu-thumb { transition: all .4s; position: relative; z-index: 1; &:hover { .img1 { &::after { transform: scale(1); transition: all .4s; visibility: visible; opacity: 0.7; } } .homemenu-btn { top: 38%; visibility: visible; opacity: 1; transition: all .6s; } } .img1 { position: relative; z-index: 1; overflow: hidden; &::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all .4s; background: var(--ztc-text-text-3); opacity: 0; border-radius: 4px; transform: scale(0.8); z-index: 1; visibility: hidden; } img { height: 100%; width: 100%; border-radius: 4px; transition: all .4s; border: 1px solid #E5E7EB; } } .homemenu-btn { position: absolute; top: 30%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all .6s; margin: 0 auto; left: 20%; right: 20%; .header-btn1 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-1); color: var(--ztc-text-text-3); transition: all .4s; border-radius: 4px; padding: 16px 20px; position: relative; i { margin-left: 4px; transform: rotate(-45deg); } &:hover { color: var(--ztc-text-text-3); transition: all .4s; &::after { top: 0; left: 0; transition: all .4s; } } &::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all .4s; top: -4px; border: 1px solid var(--ztc-text-text-1); background: none !important; border-radius: 4px; z-index: -1; } } } } .homemenu-content { a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); transition: all .4s; margin-top: 20px; text-align: center; } } } &:hover { .tp-submenu { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 50px; position: absolute; transition: all .4s; } ul.dropdown-padding{ visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 50px; position: absolute; transition: all .4s; } } a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color:var(--ztc-text-text-1); line-height: var(--ztc-font-size-font-s18); display: block; transition: all .4s; padding: 0 20px; position: relative; z-index: 1; &:hover { &::after { width: 60%; transition: all .4s; } } &::after { position: absolute; content: ""; height: 1px; width: 0; left: 20px; bottom: 0; transition: all .4s; background: var(--ztc-text-text-1); } } &:hover > a{ transition: all .4s; color:var(--ztc-text-text-1)!important; &::after { width: 60%; left: 20px; } } .tp-submenu { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background:var(--ztc-text-text-1); top: 100px; z-index: 1; transition: all .4s; border-radius: 5px; padding: 15px; left: -330px; width: 1300px; overflow: hidden; } ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background:var(--ztc-text-text-1); top: 100px; width: 225px; z-index: 1; transition: all .4s; border-radius: 5px; padding: 15px; li.main-small-menu { position: relative; &:hover { color: var(--ztc-text-text-3) !important; transition: all .4s; } &:hover > a{ transition: all .4s; padding-left: 25px; color: var(--ztc-text-text-3) !important; } &:hover > a::after{ background: var(--ztc-text-text-3); transition: all .4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-3); } } li { display: block; color: var(--ztc-text-text-3) !important; &:hover > a{ color: var(--ztc-text-text-3) !important; transition: all .4s; } a { font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-medium); transition: all .4s; padding: 8px; display:block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-3); &::after{ position: absolute; content: ""; height: 25px; width: 3px; transition: all .4s; z-index: -1; left: -10px; top: 20%; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-text-text-3); } &:hover{ padding-left: 25px; color: var(--ztc-text-text-3) !important; &::after{ border-radius: 4px; visibility: visible; transition: all .4s; opacity: 1; left: 0; } } } } } } } } } } } .header-area.homepage1.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; -webkit-animation-name: fade-in-down; animation-name: fade-in-down; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background: var(--ztc-text-text-2); transition: all .4s; padding: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; .header-elements { padding: 0; transition: all .4s; background: none; } } // HOMEPAGE1 HEADER ENDS //
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
Vikinglab