Thank you for choosing "Naru - Personal Portfolio Template". This documentation will help you to familiarise how the template is structured and how to use the features. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here.
If you like this template please don't forget rate it 5 :)
themeforest.net/downloads
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Naru - Personal Portfolio Template</title>
<!-- Favicon -->
<link href="assets/images/favicon.png" rel="shortcut icon">
<!-- CSS -->
<link href="assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/glightbox/glightbox.min.css" rel="stylesheet">
<link href="assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<!-- Fonts/Icons -->
<link href="assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/plugins/fontawesome/css/all.css" rel="stylesheet">
</head>
<body data-preloader="true">
<header>
<div class="header with-placeholder">
..
</div>
</header>
<main>
...
</main>
<footer>
..
</footer>
<!-- Cursors -->
<div class="cursors">
<div class="cursor-inner"></div>
</div>
<!-- JavaScripts -->
<script src="assets/plugins/jquery.min.js"></script>
<script src="assets/plugins/plugins.js"></script>
<script src="assets/js/functions.js"></script>
</body>
</html>
SCSS is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
"SCSS" (for "Sassy CSS") is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss
We recommend you to use an application called Scout-App (v2.12.12) for converting SCSS to CSS. Scout-App can run in windows, linux and mac.
Click here to download the application.
This video demonstrates how to use Scout-App application:
Naru uses Open Sans sans-serif, Poppins sans-serif and, Lora serif fonts from Google Fonts Library. And it's included through assets/css/scss/theme.scss
theme.scss(line 4)
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Lora:wght@400;500;600;700&display=swap');
You can use the following classes to set the font family of an element:
Bootstrap Icons and, FontAwesome sets are included in the template.
By default, icons will appear at 1em(16px). And you can change the icon size by using classes:
You should add the size class to the parent element of an icon:
<div class="icon-lg">
<i class="bi bi-check"></i>
</div>
Basic Contact form:
<div class="contact-form">
<form method="post" id="contactform">
<div class="row gx-3 gy-0">
<div class="col-12 col-md-6">
<input type="text" id="name" name="name" placeholder="Name" required>
</div>
<div class="col-12 col-md-6">
<input type="email" id="email" name="email" placeholder="E-Mail" required>
</div>
</div>
<input type="text" id="subject" name="subject" placeholder="Subject" required>
<textarea name="message" id="message" placeholder="Message"></textarea>
<button class="button button-lg" type="submit">
<span data-text="Send Message">Send Message</span>
</button>
</form>
<!-- Submit result -->
<div class="submit-result">
<span id="success">Thank you! Your Message has been sent.</span>
<span id="error">Something went wrong, Please try again!</span>
</div>
</div>
The template has ready to use AJAX/PHP contact form built in it. In order to recieve emails directly to your email address, replace your-email@example.com with your email address in assets/php/contact-form.php file.
Naru uses gmaps plugin to show Google Maps. By default, the maps width is set to 100% and height is set to 0 and you can set the height of the map using classes.
You can use multiple maps on one page. And every single map should have different id's (#map1, #map2 etc.).
Basic Map:
<div id="map1" class="gmap gmap-md" data-latitude="51.513569" data-longitude="-0.123443"></div>
Click here to find your Latitude and Longitude.
In order to use Google Maps, you need to get Google API Key first. Click here to get your API Key.
Then place your API Key in 'YOUR_API_KEY' in your HTML:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
retina.js checks the retina activated images on the page to see if there is a high-resolution version of that image on the server. If a high-resolution variant exists, the script will swap in that image in-place.
For example, if your picture is located at "/images/my-picture.jpg" and the markup for this image looks like this:
<img src="images/picture.jpg" alt="" data-rjs="2">
retina.js will look for a corresponding image located at "/images/my-picture@2x.jpg" when it's activated. If it finds the @2x image on your server then it will load that onto your web page, effectively transforming your picture's markup to look like this:
<img src="images/picture@2x.jpg" alt="">
Apply data-rjs="2" to the image you want to activate the retina.js on:
<img src="images/picture.jpg" alt="" data-rjs="2">
Huge thanks to all this great plugins and resources that helped to make the template great and powerful.
| Term | Link |
|---|---|
| Bootstrap | getbootstrap.com |
| FontAwesome | fontawesome.com |
| GLightbox | biati-digital.github.io/glightbox/ |
| Magnific Popup | dimsemenov.com/plugins/magnific-popup |
| Retina | imulus.github.io/retinajs |
| ScrollCue | prjct-samwest.github.io/scrollCue |
| Swiper | swiperjs.com |