Thank you for your purchasing this template. If you have any questions that are beyond the scope of this help file, please feel free to email us via ...
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Softwall | Software Bootstrap 4.1 HTML And Sass Template</title>
<!-- Standard -->
<link rel="shortcut icon" href="assets/img/ficon.png">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="loading"> </div>
</div>
<!-- HEADER
============================================= -->
<header id="home">
<!-- nav -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-tra hover-menu">
<div class="container-fluid">
<!-- LOGO IMAGE -->
<!-- For Retina Ready displays take a image with double the amount of pixels that your image will be displayed (e.g 268 x 60 pixels) -->
<a href="#hero-2" class="navbar-brand logo-black"><img src="assets/images/logo.png" alt="header-logo"></a>
<div class="top-search">
<input type="text" placeholder="Search">
</div>
<!-- Responsive Menu Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-bar-icon"><i class="fa fa-bars"></i></span>
</button>
<!-- Navigation Menu -->
<div id="navbarSupportedContent" class="collapse navbar-collapse nav-center">
<ul class="navbar-nav mr-auto">
<li class="nav-item nl-simple"><a class="nav-link" href="#how-it-work">How It Works</a></li>
<li class="nav-item nl-simple"><a class="nav-link" href="#why-choose">Why Softwall</a> </li>
<li class="nav-item nl-simple"><a class="nav-link" href="#about"> About Us</a></li>
<li class="nav-item nl-simple"><a class="nav-link" href="#team">Contact</a></li>
</ul>
<!-- Header Button -->
<div class="navbar-text white-color">
<ul class="navbar-nav">
<li><a class="top-button" href="#services-2">Sign In</a></li>
<!-- Dropdown Link -->
<li class="dropdown">
<a class="dropdown-toggle top-button2" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EN</a>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#content-4">Ar</a></li>
<li><a class="dropdown-item" href="#content-7">SP</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- End Navigation Menu -->
</div>
<!-- End container -->
</nav>
<!-- End navbar -->
<!-- /nav -->
<div class="main-header">
<div class="container">
<div class="row">
<div class="main-header-text animated fadeIn">
</div>
<div class="pan">
</div>
<div class="laptop">
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- how-it-work -->
<section id="how-it-work">
<div class="features">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- / how-it-work -->
<!-- about -->
<section id="about">
<div class="about">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- about -->
<!-- call_to_action -->
<section id="call_to_action">
<div class="call_to_action">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- call_to_action -->
<!-- why_choose -->
<section id="why-choose">
<div class="features">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- / why_choose -->
<!-- preview -->
<section id="preview">
<div class="spicel-features">
<div class="container">
</div>
</div>
</section>
<!-- preview end -->
<!-- prices -->
<section id="prices">
<div class="prices">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- /prices -->
<!-- payment-sections -->
<section>
<div class="payment-sections">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- payment-sections -->
<!-- team -->
<section id="team">
<div class="team">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- /team -->
<!-- progress_bar -->
<section>
<div class="progress-bar">
<div class="container">
<div class="row">
</div>
</div>
</div>
</section>
<!-- /team -->
<!-- download -->
<section id="download">
</section>
<!-- / download -->
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="copy-right text-center">
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery
============================================ -->
<script src="assets/js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap Core JavaScript
============================================ -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<!-- baguetteBox -->
<script src="assets/js/baguetteBox.js" async></script>
<script src="assets/js/plugins.js" async></script>
<!-- countTo JavaScript -->
<script src="assets/js/jquery.countTo.js"></script>
<!-- wow JavaScript
============================================ -->
<script src="assets/js/wow.min.js"></script>
<!-- Custom Theme JavaScript
============================================ -->
<script src="assets/js/custom.js"></script>
</body>
This template uses CSS for stylesheets.
CSS files are located in the assets/css directory.
This template uses CSS for stylesheets.
CSS files are located in the assets/scss directory.
This template imports several JS files.
The Javascript files are loaded in the footer to increase the site speed and rendering.
The Javascript files used in this template are the following:
You just need to add attribute data-[plugin Name] to any place where you want to initialize plugin.
We use owl carousel for all sliders and carousels in this template.
We can make responsive image carousel using Owl Carousel. http://owlgraphic.com/owlcarousel
<div id="owl-demo" class="owl-carousel">
<div class="item">
<div class="imghover" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
<img src="assets/img/gallery/gallery1.jpg" alt="Owl Image"/>
<a href="#" class="link-img"><i class="fa fa-expand"></i></a>
</div>
</div>
</div>
Any Images or logos used in previews are not included in this item or final purchase and you need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects.
We used http://placehold.it/ for placeholders.