Thank you for purchasing this template. :)
This template based on Bootstrap 4 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. More information: https://getbootstrap.com/docs/4.6/getting-started/introduction/
This template requires that you are familiar with at least HTML and CSS. If you are not familiar with HTML and CSS, I highly recommend that you hire a specialist. It will save you time and you will get only positive emotions while using this product.
It is also required that you are familiar with Bootstrap 4. If not, then it is strongly recommended that you will familiarize yourself with how the Bootstrap works before you begin to customize this template.
RED - is a simple HTML template. HTML is static, this means no dynamic features (no PHP and MySQL). This template is just a good starting point if you want to create your own web site contains mainly the design elements you can use.
* Some parts may not work properly in your local computer. Upload template to your web server to function properly!
All template files are located in a folder named "UPLOAD".
+-- red / +-- assets / ¦ +-- css / ¦ ¦ +-- helper.css (template helper CSS classes) ¦ ¦ +-- menu.css (header/menu CSS) ¦ ¦ +-- theme.css (template master CSS) ¦ +-- img / ¦ ¦ +-- ...all images used ¦ +-- js / ¦ ¦ +-- theme.js (template master JS) ¦ +-- vendor / ¦ ¦ +-- bootstrap (all Bootstrap files) ¦ ¦ +-- ...all external scripts/plugins ¦ +-- favicon.ico +-- mail.php +-- index.html +-- 404.html +-- about-us.html +-- ...all .html files
Simply upload all template files (can be found in "UPLOAD" folder) to your server using your favorite FTP client (I recommend FileZilla). Once uploaded, point your browser to your site URL and you are done. No any hocus-pocus. :)
This template based on Bootstrap 4 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. More information: https://getbootstrap.com/docs/4.6/getting-started/introduction/
<div class="container"> <div class="row"> <div class="col-md-8">Your content...</div> <div class="col-md-4">Your content...</div> </div> <div class="row"> <div class="col-md-4">Your content...</div> <div class="col-md-4">Your content...</div> <div class="col-md-4">Your content...</div> </div> <div class="row"> <div class="col-md-6">Your content...</div> <div class="col-md-6">Your content...</div> </div> </div>
<!-- ==================== ///// Begin section ///// ==================== --> <section class="your-section-class"> <div class="container"> <div class="row"> <div class="col-lg-6"> <!-- Begin Heading =================== * Use class "heading-center" or "heading-right" to align heading. * Use class "heading-xsm", "heading-sm", "heading-md", "heading-lg" or "heading-xlg" to set heading size. --> <div class="heading heading-xlg"> <h2 class="heading-title"><span class="bg-white text-dark">Wel</span><span class="bg-white text-dark">come</span></h2> </div> <!-- End Heading --> </div> <!-- /.col --> <div class="col-lg-6"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore tempora qui debitis harum sint accusamus deserunt quisquam aperiam. Nulla, illum qui quod quisquam soluta accusantium harum voluptas, similique placeat! Dolorem.</p> </div> <!-- /.col --> </div> <!-- /.row --> </div> <!-- /.container --> </section> <!-- End section -->
jQuery - is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. For more information: http://www.jquery.com
Note: The initialization of the elements, libs and features is made by the file named "theme.js" which is located in the folder named "js".
This template contains some extra prepared helper classes you can use. All helper classes are located in the file "assets/css/helper.css". You are free to use these classes to customize your web site.
It is a good practice that you make a copy of your files before making any customizations.
It is a good practice that you do not edit directly to the template core CSS files. Instead, create a new CSS file (for example "custom.css") and place it in the folder assets/css/, then make your changes there.
Do not forget to add: <link rel="stylesheet" type='text/css' href="assets/css/custom.css"> to <head> part of your HTML file. Make sure it is located below "Template master CSS" section, otherwise it will not work.
<head> part of your HTML file find:
<!-- Template master CSS --> <link rel="stylesheet" type='text/css' href="assets/css/theme.css">Below it add:
<!-- Template custom CSS (all your CSS customizations) --> <link rel="stylesheet" type='text/css' href="assets/css/custom.css">
Now file custom.css overwrites the master CSS files and next time if you update the template then your CSS changes will not be lost.
If you want to add your own custom .JS (JavaScript) code then create a new .JS file (for example "custom.js") and place it in the folder assets/js/, then add your code there.
Do not forget to add: <script src="assets/js/custom.js"></script> to the bottom of your HTML file. Make sure it is located below "Template master JS" section!
<!-- Template master JS --> <script src="assets/js/theme.js"></script>Below it add:
<!-- Template custom JS (all your JS customizations) --> <script src="assets/js/custom.js"></script>
Now you can add your custom .JS code there, and next time if you update the template then your added code will not be lost.
This template includes a working contact form. Proceed as follows in order to configure it.
Open file "contact.html" or whatever file containing the contact form. Find and configure the following code:
<!-- Begin hidden required fields (https://github.com/agragregra/uniMail) --> <input type="hidden" name="project_name" value="yourwebsiteaddress.com"> <!-- Change value to your site name --> <input type="hidden" name="admin_email" value="your@email.com"> <!-- Change value to your valid email address (where a message will be sent) --> <input type="hidden" name="form_subject" value="Message from yourwebsiteaddress.com"> <!-- Change value to your own message subject --> <!-- End Hidden Required Fields -->
More information about uniMail: https://github.com/agragregra/uniMail
Font Awesome - gives you scalable vector icons that can instantly be customized size, color, drop shadow, and anything that can be done with the power of CSS.
<i class="fas fa-search"></i> <i class="far fa-user"></i> <i class="fal fa-folder-open"></i> ...
More information about Font Awesome: https://fontawesome.com/
Google Fonts:
Please take a look in the <head> part of the template .html file, and you will find this code:
<!-- Google fonts - (more info: https://fonts.google.com/) --> <link href="https://fonts.googleapis.com/css?family=Oswald:400,700,300" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css">
In the file "assets/css/theme.css" you will find font-family: 'Oswald', sans-serif; and font-family: 'Open Sans', sans-serif;
To change the fonts, first go to https://fonts.google.com/ choose a font/fonts and use the generated code.
The best way to update the template is to use some file comparison software to compare the differences between the old and new template versions
(I recommend “WinMerge”: ). Then make the necessary changes. Yes, this may be time-consuming, but unfortunately, there is no easier solution.
If you need help with a product please send me a message through my Wrapbootstrap.com profile page.