TRETO – Personal Portfolio Resume HTML 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/
│──│──css/
│──│──scss/
│──│──img/
│──│──fonts/
│──│──js/
│──│──│──main.js
│──│──|──plugins/
│──│──mailer/
│──│──│──feedback.php
│──│──│──feedback-two.php
│──│──│──forms_settings.php
│──│──|──inc/
│──│──index.html
│──│──index-2.html
│──│──prices.html
│──│──blog.html
│──│──publication.html
│──│──contact.html
│──│──portfolio.html
│──│──project.html
-
css/ - compiled css styles for template
-
scss/ - main .scss styles for template
-
js/ - all JS library for template
- main.js - main JS for template
-
mailer/ - PHP forms and mail settings for template
- forms_settings.php - email settings for forms
- feedback.php, feedback-two.php - contact form settings
Settings
Template Settings
For editing styling, colors, sizes, etc of the template you can use following settings, folder "/scss/_variables.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
$font-1: 'Jost',
sans-serif;
$dark: #101010;
$gray: #202020;
$soft: rgba(16, 16, 16, 0.18);
$light: rgba(255, 255, 255, 1);
$accent: #fa4729;
$accent-light: rgba(250, 71, 41, 0.18);
$black: #010101;
$tr: .4s cubic-bezier(0, 0, 0.3642, 1);
Include of fonts
For editing fonts of the template you can use following settings, folder "/scss/_variables.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
Next step is to replace "$font-1: 'Jost'," to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/v5/search, 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/forms_settings.php" and "/mailer/feedback.php", "/mailer/feedback-two.php"
HTML structure
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Treto - Personal Portfolio Resume 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" />
<!-- bootstrap grid css -->
<link rel="stylesheet" href="css/plugins/bootstrap-grid.css" type="text/css" media="all">
<!-- swiper css -->
<link rel="stylesheet" href="css/plugins/swiper.min.css" type="text/css" media="all">
<!-- magnific-popup css -->
<link rel="stylesheet" href="css/plugins/magnific-popup.css" type="text/css" media="all">
<!-- fontawesome -->
<link rel="stylesheet" href="fonts/font-awesome/css/all.min.css" type="text/css" media="all" />
<!-- treto css -->
<link rel="stylesheet" href="css/style.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="mil-custom-scroll">
<!-- frame -->
<div class="mil-frame">
...
</div>
<!-- frame end -->
<!-- onepage wrapper -->
<div class="mil-onepage">
...
</div>
<!-- onepage wrapper end -->
<!-- pagination -->
<div class="mil-pagination">
<div class="mil-dot mil-active" data-index="-1" data-name="Home"></div>
<div class="mil-dot" data-index="0" data-name="About"></div>
<div class="mil-dot" data-index="1" data-name="Skills"></div>
<div class="mil-dot" data-index="2" data-name="Education"></div>
<div class="mil-dot" data-index="3" data-name="Experience"></div>
<div class="mil-dot" data-index="4" data-name="Services"></div>
<div class="mil-dot" data-index="5" data-name="Testimonials"></div>
<div class="mil-dot" data-index="6" data-name="Contacts"></div>
</div>
<!-- pagination end -->
<!-- jquery js -->
<script src="js/plugins/jquery.min.js"></script>
<script src="js/plugins/jquery.validate.min.js"></script>
<!-- magnific-popup js -->
<script src="js/plugins/magnific-popup.js"></script>
<!-- onepage js -->
<script src="js/plugins/onepage.js"></script>
<!-- swiper js -->
<script src="js/plugins/swiper.min.js"></script>
<!-- isotope js -->
<script src="js/plugins/isotope.min.js"></script>
<!-- treto js -->
<script src="js/main.js"></script>
</body>
</html>
HTML structure of "Wrapper"
<!-- onepage wrapper -->
<div class="mil-onepage">
<!-- banner -->
<div class="mil-section mil-banner mil-banner-right">
...
</div>
<!-- banner end -->
<!-- about -->
<div class="mil-section mil-op-space-90">
...
</div>
<!-- about end -->
<!-- skills -->
<div class="mil-section mil-op-space-90">
...
</div>
<!-- skills end -->
<!-- education -->
<div class="mil-section mil-op-space-90">
...
</div>
<!-- education end -->
<!-- experience -->
<div class="mil-section mil-op-space-90">
...
</div>
<!-- experience end -->
<!-- services -->
<div class="mil-section mil-op-space-90">
...
</div>
<!-- services end -->
<!-- reviews -->
<div class="mil-section mil-op-space-90">
...
</div>
<!-- reviews end -->
<!-- contacts -->
<div class="mil-section mil-op-space-90">
...
</div>
<!-- contacts end -->
</div>
<!-- onepage wrapper end -->
Icons
In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/v5/search
Source & Credits
Scripts
Images
Any Images or logos used in previews are not included in this item or final purchase.