Elison Portfolio/Resume/CV/vCard Documentation
Thank you for your purchase! If you have any questions feel free to ask me through comment section on ThemeForest.
For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme.
Page Head :-
Page head contains Title, Metadata, Favicon and CSS.
<head> <meta name="author" content=""> <meta name="description" content=""> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="theme-color" content="#FF1493"> <title>:: Elison - Portfolio/Resume/CV/vCard HTML Template ::</title> <!-- Favicon --> <link rel="shortcut icon" type="image/png" href="img/favicon.png"> <!-- Stylesheet CSS --> <link rel="stylesheet" href="css/bootstrap-custom.css"> <link rel="stylesheet" href="css/ionicons.min.css"> <link rel="stylesheet" href="css/tiny-slider.css"> <link rel="stylesheet" href="css/lity.min.css"> <link rel="stylesheet" href="css/simplebar.min.css"> <link rel="stylesheet" href="css/jquery.mb.YTPlayer.min.css"> <!-- Main Stylesheet CSS --> <link rel="stylesheet" href="css/stylesheet-dark.css"> <!-- Select Color CSS --> <link rel="stylesheet" href="css/color/aqua_color.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet"> </head>
CSS Structure :-
You can change it to your stylesheet-dark.css / stylesheet-dark.css file favorite theme.
<link rel="stylesheet" href="css/stylesheet-dark.css" type="text/css">
HTML Structure :-
Elison is based on Bootstrap Grid that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.
<!-- Home-->
<section class="hero-area-block element-cover-bg" id="home" style="background-image:url(img/hero_one.jpg)">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center">
<div class="col-12 col-lg-8 home-content text-center">
<h5 class="mb-3">Looking for a Designer!</h5>
<h1 class="hero-name"><span>Richard</span> Joselin</h1>
<p class="hero-sub-text">I'm a Freelance UI/UX Designer and Developer based in London, England. I strives to build immersive & beautiful web applications through design.</p>
<h4 class="cd-headline clip home-headline">Hello! I Am <span class="cd-words-wrapper single-headline"><b class="is-visible">Freelancer.</b><b>Web Developer.</b><b>Mobile App Developer.</b><b>Photographer.</b></span></h4>
<a class="btn button-main button-scheme mt-1 mr-2" href="#" role="button">About Me <i class="icon ion-md-person"></i></a>
<a class="btn button-main button-scheme mt-1" href="#" role="button">Get in Touch <i class="icon ion-md-mail-open"></i></a>
</div>
</div>
</div>
</section>
<!-- Info section-->
<div class="utf-info-section utf-single-section">
<div class="row align-items-center">
<!-- Picture part-->
<div class="col-12 col-lg-5 info-img"><img class="img-fluid img-thumbnail" src="img/abou-user-img-1.jpg" alt="About Picture"></div>
<!-- Content part-->
<div class="col-12 col-lg-7 info-content">
<div class="utf-content-block">
<h6 class="utf-content-title">HI, I'M Richard Joselin iOS Developer</h6>
<div class="utf-content-description">
<p>- It's My Pleasure to Introduce About Myself.</p>
<p>I'M Richard Joselin Australia. Impossible considered invitation him men instrument saw celebrated unpleasant. Put rest and must set kind next many near nay. He exquisite continued explained middleton am.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Ut enim ad minim veniam.</p>
</div>
<address class="utf-content-info">
<div class="row">
<div class="col-12 col-md-6 single-info"><span>Name:</span>
<p>Richard Joselin</p>
</div>
<div class="col-12 col-md-6 single-info"><span>Phone:</span>
<p>(+12) 3467-890-123</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 single-info"><span>Email:</span>
<p><a href="mailto:info@example.com">info@example.com</a></p>
</div>
<div class="col-12 col-md-6 single-info"><span>From:</span>
<p>Univercity of Chicago</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 single-info"><span>Birthday:</span>
<p>12 March, 1991</p>
</div>
<div class="col-12 col-md-6 single-info"><span>Freelance:</span>
<p>Available</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 single-info"><span>Study:</span>
<p>Chicago University</p>
</div>
<div class="col-12 col-md-6 single-info"><span>Website:</span>
<p><a href="#">www.mywebsite.com</a></p>
</div>
</div>
</address>
<div class="d-block d-sm-flex align-items-center mb-4">
<ul class="list-unstyled list-inline content-follow">
<li class="list-inline-item"><a href="#"><i class="icon ion-logo-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="icon ion-logo-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="icon ion-logo-linkedin"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="icon ion-logo-github"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="icon ion-logo-facebook"></i></a></li>
</ul>
</div>
<div class="d-block d-sm-flex align-items-center">
<a class="btn content-download button-main button-scheme" href="#" role="button">Download CV <i class="plan-icon icon ion-md-cloud-download"></i></a>
<a class="btn content-download button-main button-scheme" href="#" role="button">HIRE ME! <i class="plan-icon icon ion-md-document"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Services section-->
<div class="utf-services-section utf-single-section">
<div class="row">
<div class="col-12">
<div class="utf-section-heading utf-page-heading">
<h2 class="utf-section-title">What I Do <span class="featured"><span>Services</span></span></h2>
<div class="animated-bar"></div>
<p class="text-max-700">Lorem ipsum dolor sit amet, consect adipisic elit, sed do eiusmod tempor incididunt ut labore et d magna aliqua enim sed do sit.</p>
</div>
</div>
</div>
<div class="row">
<!-- Single service-->
<div class="col-12 col-md-6 col-lg-4">
<div class="utf-single-service"><i class="icon service-icon ion-logo-buffer"></i>
<h6 class="utf-service-title">Creative Designer</h6>
<p class="utf-service-description">Lorem ipsum dolor sit amet, consect incididunt ut labore et d magna aliqua Ut enim ad sed do sit...</p>
</div>
</div>
<!-- Single service-->
<div class="col-12 col-md-6 col-lg-4">
<div class="utf-single-service"><i class="icon service-icon ion-ios-bug"></i>
<h6 class="utf-service-title">User Experience</h6>
<p class="utf-service-description">Lorem ipsum dolor sit amet, consect incididunt ut labore et d magna aliqua Ut enim ad sed do sit...</p>
</div>
</div>
<!-- Single service-->
<div class="col-12 col-md-6 col-lg-4">
<div class="utf-single-service"><i class="icon service-icon ion-md-basketball"></i>
<h6 class="utf-service-title">Branding Design</h6>
<p class="utf-service-description">Lorem ipsum dolor sit amet, consect incididunt ut labore et d magna aliqua Ut enim ad sed do sit...</p>
</div>
</div>
<!-- Single service-->
<div class="col-12 col-md-6 col-lg-4">
<div class="utf-single-service"><i class="icon service-icon ion-md-clipboard"></i>
<h6 class="utf-service-title">UI/UX Design</h6>
<p class="utf-service-description">Lorem ipsum dolor sit amet, consect incididunt ut labore et d magna aliqua Ut enim ad sed do sit...</p>
</div>
</div>
<!-- Single service-->
<div class="col-12 col-md-6 col-lg-4">
<div class="utf-single-service"><i class="icon service-icon ion-ios-bulb"></i>
<h6 class="utf-service-title">Software Engineers</h6>
<p class="utf-service-description">Lorem ipsum dolor sit amet, consect incididunt ut labore et d magna aliqua Ut enim ad sed do sit...</p>
</div>
</div>
<!-- Single service-->
<div class="col-12 col-md-6 col-lg-4">
<div class="utf-single-service"><i class="icon service-icon ion-ios-contact"></i>
<h6 class="utf-service-title">Media Marketing</h6>
<p class="utf-service-description">Lorem ipsum dolor sit amet, consect incididunt ut labore et d magna aliqua Ut enim ad sed do sit...</p>
</div>
</div>
</div>
</div>
<!-- Testimonials section-->
<div class="utf-testimonials-section utf-single-section">
<div class="row">
<div class="col-12">
<div class="utf-section-heading utf-page-heading">
<h2 class="utf-section-title">Clients <span class="featured"><span>Say</span></span></h2>
<div class="animated-bar"></div>
<p class="text-max-700">Lorem ipsum dolor sit amet, consect adipisic elit, sed do eiusmod tempor incididunt ut labore et d magna aliqua enim sed do sit.</p>
</div>
</div>
</div>
<div class="utf-testimonial-slider">
<div class="utf-slider-item">
<!-- Single review-->
<div class="utf-single-review utf-swiper-slide">
<div class="utf-review-header d-flex justify-content-between">
<div class="utf-review-client">
<div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-1.jpg" alt="Client">
<div class="utf-client-details">
<h6 class="utf-client-name">Kewin Bidwell</h6>
<span class="utf-client-role">Web Designer</span>
</div>
</div>
</div>
</div>
<p class="utf-client-review-content">It is a long established fact that a reader will be distracted by the readable content It is a long established fact that a reader will be of a page when looking at its layout.</p>
</div>
</div>
<div class="utf-slider-item">
<!-- Single review-->
<div class="utf-single-review utf-swiper-slide">
<div class="utf-review-header d-flex justify-content-between">
<div class="utf-review-client">
<div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-2.jpg" alt="Client">
<div class="utf-client-details">
<h6 class="utf-client-name">Kelvin Valerio</h6>
<span class="utf-client-role">UI/UX Designer</span>
</div>
</div>
</div>
</div>
<p class="utf-client-review-content">It is a long established fact that a reader will be distracted by the readable content It is a long established fact that a reader will be of a page when looking at its layout.</p>
</div>
</div>
<div class="utf-slider-item">
<!-- Single review-->
<div class="utf-single-review utf-swiper-slide">
<div class="utf-review-header d-flex justify-content-between">
<div class="utf-review-client">
<div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-3.jpg" alt="Client">
<div class="utf-client-details">
<h6 class="utf-client-name">Charles Roth</h6>
<span class="utf-client-role">Photographer</span>
</div>
</div>
</div>
</div>
<p class="utf-client-review-content">It is a long established fact that a reader will be distracted by the readable content It is a long established fact that a reader will be of a page when looking at its layout.</p>
</div>
</div>
<div class="utf-slider-item">
<!-- Single review-->
<div class="utf-single-review utf-swiper-slide">
<div class="utf-review-header d-flex justify-content-between">
<div class="utf-review-client">
<div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-3.jpg" alt="Client">
<div class="utf-client-details">
<h6 class="utf-client-name">John William</h6>
<span class="utf-client-role">Web Developer</span>
</div>
</div>
</div>
</div>
<p class="utf-client-review-content">It is a long established fact that a reader will be distracted by the readable content It is a long established fact that a reader will be of a page when looking at its layout.</p>
</div>
</div>
<div class="utf-slider-item">
<!-- Single review-->
<div class="utf-single-review utf-swiper-slide">
<div class="utf-review-header d-flex justify-content-between">
<div class="utf-review-client">
<div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-1.jpg" alt="Client">
<div class="utf-client-details">
<h6 class="utf-client-name">Charles Roth</h6>
<span class="utf-client-role">Photographer</span>
</div>
</div>
</div>
</div>
<p class="utf-client-review-content">It is a long established fact that a reader will be distracted by the readable content It is a long established fact that a reader will be of a page when looking at its layout.</p>
</div>
</div>
<div class="utf-slider-item">
<!-- Single review-->
<div class="utf-single-review utf-swiper-slide">
<div class="utf-review-header d-flex justify-content-between">
<div class="utf-review-client">
<div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-2.jpg" alt="Client">
<div class="utf-client-details">
<h6 class="utf-client-name">John William</h6>
<span class="utf-client-role">Web Developer</span>
</div>
</div>
</div>
</div>
<p class="utf-client-review-content">It is a long established fact that a reader will be distracted by the readable content It is a long established fact that a reader will be of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>
<!-- Pricing section-->
<div class="utf-pricing-section utf-single-section">
<div class="row">
<div class="col-12">
<div class="utf-section-heading utf-page-heading">
<h2 class="utf-section-title">Pricing <span class="featured"><span>Plans</span></span></h2>
<div class="animated-bar"></div>
<p class="text-max-700">Lorem ipsum dolor sit amet, consect adipisic elit, sed do eiusmod tempor incididunt ut labore et d magna aliqua enim sed do sit.</p>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center">
<!-- Single plan-->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="utf-single-plan mb-3 mb-sm-5">
<h3 class="utf-plan-type">Basic Plan</h3>
<i class="plan-icon icon ion-md-flash"></i>
<h2 class="utf-plan-price">$199<span>/Month</span></h2>
<p>Basic User Membership</p>
<ul class="list-unstyled plan-list">
<li><i class="icon ion-md-checkmark-circle-outline"></i> 1 GB Disk Space</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 2 Domain Names</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 1 Email Address</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Enhanced Security</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Customer Service</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 24/7 Support</li>
</ul>
<a class="btn button-main button-scheme utf-plan-btn" href="#0" role="button">Purchase Now <i class="icon ion-md-cart"></i></a>
</div>
</div>
<!-- Single plan-->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="utf-single-plan mb-3 mb-sm-5">
<h3 class="utf-plan-type">Premium Plan</h3>
<i class="plan-icon icon ion-ios-help-buoy"></i>
<h2 class="utf-plan-price">$299<span>/Month</span></h2>
<p>Premium User Membership</p>
<ul class="list-unstyled plan-list">
<li><i class="icon ion-md-checkmark-circle-outline"></i> 50 GB Disk Space</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 5 Domain Names</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 10 Email Address</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Enhanced Security</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Customer Service</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 24/7 Support</li>
</ul>
<a class="btn button-main button-scheme utf-plan-btn" href="#0" role="button">Purchase Now <i class="icon ion-md-cart"></i></a>
</div>
</div>
<!-- Single plan-->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="utf-single-plan mb-3 mb-sm-5">
<h3 class="utf-plan-type">Platinum Plan</h3>
<i class="plan-icon icon ion-md-list-box"></i>
<h2 class="utf-plan-price">$399<span>/Month</span></h2>
<p>Platinum User Membership</p>
<ul class="list-unstyled plan-list">
<li><i class="icon ion-md-checkmark-circle-outline"></i> 120 GB Disk Space</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 30 Domain Names</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 20 Email Address</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Enhanced Security</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Customer Service</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 24/7 Support</li>
</ul>
<a class="btn button-main button-scheme utf-plan-btn" href="#0" role="button">Purchase Now <i class="icon ion-md-cart"></i></a>
</div>
</div>
<!-- Single plan-->
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="utf-single-plan mb-3 mb-sm-5">
<h3 class="utf-plan-type">Extension Plan</h3>
<i class="plan-icon icon ion-logo-buffer"></i>
<h2 class="utf-plan-price">$699<span>/Month</span></h2>
<p>Extension User Membership</p>
<ul class="list-unstyled plan-list">
<li><i class="icon ion-md-checkmark-circle-outline"></i> 240 GB Disk Space</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 60 Domain Names</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 40 Email Address</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Enhanced Security</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> Customer Service</li>
<li><i class="icon ion-md-checkmark-circle-outline"></i> 24/7 Support</li>
</ul>
<a class="btn button-main button-scheme utf-plan-btn" href="#0" role="button">Purchase Now <i class="icon ion-md-cart"></i></a>
</div>
</div>
</div>
</div>
For more information, please visit http://getbootstrap.com/css/#grid
Javascript Intialization :-
Core javascript initialization implemented in thorugh object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics.
You can call any of the available functions by objects.
<!-- Scripts--> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> <script src="js/animatedModal.js"></script> <script src="js/tiny-slider.js"></script> <script src="js/lity.min.js"></script> <script src="js/simplebar.min.js"></script> <script src="js/jquery.mb.YTPlayer.min.js"></script> <script src="js/custom_jquery.js"></script> <!--Map Js--> <script src="js/map.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4JwWo5VPt9WyNp3Ne2uc2FMGEePHpqJ8&callback=initMap" async="" defer=""></script>
Source Credits :-
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Best Regards
Elison