Luique - Personal Portfolio HTML5 Template
by: bslthemes
Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com
File structure
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──assets/
│──│──│──css/
│──│──│──│──vendors/
│──│──│──│──│──animate.css
│──│──│──│──│──bootstrap.css
│──│──│──│──│──magnific-popup.css
│──│──│──│──│──splitting.css
│──│──│──│──│──swiper.css
│──│──│──│──dark.css
│──│──│──│──style.css
│──│──│──fonts/
│──│──│──│──font-awesome/
│──│──│──images/
│──│──│──js/
│──│──│──│──bootstrap.js
│──│──│──│──common.js
│──│──│──│──imagesloaded.pkgd.js
│──│──│──│──isotope.pkgd.js
│──│──│──│──jarallax.min.js
│──│──│──│──jquery.min.js
│──│──│──│──jquery.cookie.js
│──│──│──│──jquery.scrolla.js
│──│──│──│──jquery.validate.min.js
│──│──│──│──magnific-popup.js
│──│──│──│──skrollr.js
│──│──│──│──splitting.js
│──│──│──│──swiper.js
│──│──│──│──typed.js
│──│──mailer/
│──│──│──feedback.php
│──│──│──form_setting.php
│──│──index.html
│──│──works.html
│──│──works-list.html
│──│──blog.html
│──│──blog-single.html
│──│──work-single.html
-
css/ - all CSS for pages
- /vendors/ - plugins styles for template
- style.css - main CSS for template
-
js/ - all JS library for template
- common.js - main JS for template
Settings
Include of fonts
To use fonts, you must add one tag 'link' from section below to head section.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik%3A300%2C300i%2C400%2C400i%2C500%2C500i%2C600%2C600i%2C700%2C700i%2C800%2C800i%2C900%2C900i%7CSorts+Mill+Goudy&display=swap" type="text/css" media="all" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto" type="text/css" media="all" />
Next step is to replace "font-family: '...';" to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free, use search and select icons.
Copy icon class (for example "fas fa-code") and add to tag in html file like this:
<i class="fas fa-pencil-ruler"></i>
Contact Form PHP
To modify the form is submitted, you can use the following settings, folders "/mailer/form_setting.php" and "/mailer/feedback.php"
HTML structure
<!doctype html>
<html lang="en-US">
<head>
<title>Luique - Personal Portfolio HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
<meta name="author" content="bslthemes" />
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost%3A0%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B0%2C900%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800%3B1%2C900%7CCaveat%3A400%3B500%3B600%3B700&display=swap" type="text/css" media="all" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto" type="text/css" media="all" />
<!-- CSS STYLES -->
<link rel="stylesheet" href="assets/css/vendors/bootstrap.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/magnific-popup.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/splitting.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/swiper.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/vendors/animate.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/dark.css" type="text/css" media="all" />
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body class="home light-skin">
<div class="container-page">
<!-- Preloader -->
<div class="preloader">
...
</div>
<!-- Header -->
<header class="header">
...
</header>
<!-- Wrapper -->
<div class="wrapper">
<!-- Section - Hero Started -->
<section class="lui-section lui-section-hero lui-gradient-top" id="started-section">
...
</section>
<!-- Section - Services -->
<section class="lui-section lui-gradient-bottom" id="services-section">
...
</section>
<!-- Section - Skills -->
<section class="lui-section lui-gradient-center" id="skills-section">
...
</section>
<!-- Section - Works -->
<section class="lui-section lui-gradient-top" id="works-section">
...
</section>
<!-- Section - Resume -->
<section class="lui-section lui-gradient-bottom" id="resume-section">
...
</section>
<!-- Section - Testimonials -->
<section class="lui-section lui-gradient-center" id="testimonials-section">
...
</section>
<!-- Section - Pricing -->
<section class="lui-section lui-gradient-center" id="pricing-section">
...
</section>
<!-- Section - Blog -->
<section class="lui-section lui-gradient-top" id="blog-section">
...
</section>
<!-- Section - Contacts -->
<section class="lui-section lui-gradient-bottom" id="contact-section">
...
</section>
</div>
<!-- Footer -->
<div class="footer">
...
</div>
</div>
<!-- cursor -->
<div class="cursor"></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/splitting.js"></script>
<script src="assets/js/jarallax.min.js"></script>
<script src="assets/js/magnific-popup.js"></script>
<script src="assets/js/imagesloaded.pkgd.js"></script>
<script src="assets/js/isotope.pkgd.js"></script>
<script src="assets/js/jquery.scrolla.js"></script>
<script src="assets/js/skrollr.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<script src="assets/js/typed.js"></script>
<script src="assets/js/common.js"></script>
</body>
</html>
HTML structure of "Home" pages
<!-- Wrapper -->
<div class="wrapper">
<!-- Section - Hero Started -->
<section class="lui-section lui-section-hero lui-gradient-top" id="started-section">
...
</section>
<!-- Section - Services -->
<section class="lui-section lui-gradient-bottom" id="services-section">
...
</section>
<!-- Section - Skills -->
<section class="lui-section lui-gradient-center" id="skills-section">
...
</section>
<!-- Section - Works -->
<section class="lui-section lui-gradient-top" id="works-section">
...
</section>
<!-- Section - Resume -->
<section class="lui-section lui-gradient-bottom" id="resume-section">
...
</section>
<!-- Section - Testimonials -->
<section class="lui-section lui-gradient-center" id="testimonials-section">
...
</section>
<!-- Section - Pricing -->
<section class="lui-section lui-gradient-center" id="pricing-section">
...
</section>
<!-- Section - Blog -->
<section class="lui-section lui-gradient-top" id="blog-section">
...
</section>
<!-- Section - Contacts -->
<section class="lui-section lui-gradient-bottom" id="contact-section">
...
</section>
</div>
Icons
In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free
Sourse & Credits
Scripts
Fonts
Images
Any Images or logos used in previews are not included in this item or final purchase.