Dolio - Personal Portfolio Template
- Version: 1.0.0
- Last Updated: July 02 2020
- Author: themesflat
Template features:
- HTML5 & CSS3
- Responsive Template
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Free Google Fonts.
- Free Font Based Icons.
- Retina Ready
- Clean and beautiful line Icons
- Well organized psd file
- Easy Customization
- & much more...
HTML Structure
Dolio - Personal Portfolio Template
Below is Dolio basic structure:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Dolio Template</title>
<!-- Mobile Specific Metas -->
<!-- Bootstrap -->
<!-- Template Style -->
</head>
<body>
<!-- Header -->
<!-- Banner -->
<!-- Section -->
<section class="find-customer "> </section>
<section class="services "> </section>
<section class="best-business "> </section>
<section class="portfolio "> </section>
<section class="team-members "> </section>
<section class="testimonial "> </section>
<section class="faq "> </section>
<section class="blog-post "> </section>
<!-- Footer -->
<footer class="footer"> </footer>
<!-- Bottom -->
<div class="bottom"> </bottom>
<!-- Go Top -->
<a class="go-top">
<i class="show"></a>
</a>
<!-- Javascript -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/plugins.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/gmap3.min.js"></script>
<script type="text/javascript" src="assets/js/https://maps.googleapis.com/maps/api/js?key=AIzaSyCo_pcAdFNbTDCAvMwAD19oRTuEmb9M50c.js"></script>
<script type="text/javascript" src="assets/js/jquery-fancybox.js"></script>
<script type="text/javascript" src="assets/js/jquery-countTo.js"></script>
<script type="text/javascript" src="assets/js/wow.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
CSS System
The Dolio CSS System contains 3 parts:
- Template style
- Shortcodes style
- Responsive style
- Javascript - Fonts - Animation - Bootstrap style
Style.css ( Template style )
/**
* Reset
* Repeatable Patterns
* Hover
* loading-overlay
* mg
* pd
* lt-sp
* color
* background-color
* header
* menu
* custom-animation
* banner-section
* custom-slider
* testimonial
* profile
* specilizing-in
* fact
* flat-case-study
* flat-education
* get-project
* footer
* about-me
* experienced
* sponsor
* page-title
* blog-single
* flat-pagination
*/
Shortcodes.css ( Shortcodes - Elements style )
You can easily use the shortcodes to create your own page.
/**
* custom-body
* title-section
* site-list
* font-weight
* button
* form
* iconbox
* image-box
*/
Javascript - Fonts - Animation - Bootstrap style
/**
* font-awesome.css
* animate.css
* shortcodes.css
* bootstrap.css
*/
Javascript Custom
Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)
Main.js ( js/main.js )
/**
* header_sticky();
* flatRetinaLogo();
* menu_Mobile();
* flatOwl();
* spacer();
* flatCounter();
* wowanimation();
* pp_custom2();
* pp_nav();
* w_w2();
* removePreloader();
*/
Shortcodes System
You can easily use the shortcodes to create your own page.
/**
* custom-body
* title-section
* site-list
* font-weight
* button
* form
* iconbox
* image-box
*/
Credits
-
Photos
- All images are just used for preview purpose only and NOT included in the final purchase files.
-
Fonts & Icons
- Poppins
- Icon:FontAwesome
-
Javascript
- Gmap3 (http://gmap3.net)
- jquery (http://jquery.com/)
- jquery-ui (https://jqueryui.com/)
- owl.carousel (https://owlcarousel2.github.io/OwlCarousel2/)
- equalize (http://tsvensen.github.com/equalize.js)
- Wow (https://wowjs.uk/docs)
- Fancybox (http://fancybox.net/)
- Countdown (http://hilios.github.io/jQuery.countdown/)