Thank you for choosing "Nuur - Multipurpose HTML5 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>Nuur</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/scrollcue/scrollcue.css" rel="stylesheet">
<link href="assets/plugins/swiper/swiper-bundle.min.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">
<link href="assets/plugins/themify/themify-icons.css" rel="stylesheet">
</head>
<body data-preloader="light">
<!-- Header -->
<div class="header header-dark transparent-light sticky-autohide">
<div class="container">
..
</div><!-- end container -->
</div>
<!-- end Header -->
<main>
...
</main>
<!-- Cursors -->
<div class="cursors">
<div class="cursor-inner"></div>
</div>
<!-- end Cursors -->
<!-- Scroll to Top -->
<div class="scrolltotop icon-lg">
<i class="bi bi-arrow-up-short"></i>
</div>
<!-- end Scroll to Top -->
<!-- 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:
Nuur uses Open Sans sans-serif, Outfit sans-serif, Lora serif, and Poppins sans-serif fonts from Google Fonts Library. And the fonts are 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=Outfit:wght@200;300;400;500;600;700;800&family=Lora:wght@400;500;600;700&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
Click here to learn more about the template's typography.
Bootstrap Icons, FontAwesome and, Themify sets are included in the template.
By default, icons will appear at 1em(16px). And you can change the icon size by using classes:
Icon size classes can be added to the parent element, or directly to the icon element:
<div class="icon-lg">
<i class="bi bi-check"></i>
</div>
<i class="bi bi-check icon-lg"></i>
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.
Note: Choose a webhosting that allows PHP functions to run. Github doesn't allow PHP functions. Therefore, the contact form will not work on a Github page.
Basic Contact form:
<div class="contact-form">
<form class="form-border-radius" 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 button-rounded button-gradient-1 button-hover-slide" 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>
Nuur 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>
Page Preloader has a light & dark mode. In order to use the page preloader, add data-preloader="light" or data-preloader="dark" to the body tag. And if you don't want to use the preloader, simply remove the 'data-preloader' attribute from the body tag.
To use a light mode:
<body data-preloader="light">
To use a dark mode:
<body data-preloader="dark">
No preloader:
<body>
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 "assets/images/my-picture.jpg" and the markup for this image looks like this:
<img src="assets/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="assets/images/picture@2x.jpg" alt="">
Apply data-rjs="2" to the image you want to activate the retina.js on:
<img src="assets/images/picture.jpg" alt="" data-rjs="2">
Huge thanks to all this great plugins and resources.
| Term | Link |
|---|---|
| Bootstrap | getbootstrap.com |
| FontAwesome | fontawesome.com |
| GLightbox | biati-digital.github.io/glightbox/ |
| Particles | vincentgarreau.com/particles.js/ |
| Prism | prismjs.com/ |
| Retina | imulus.github.io/retinajs |
| ScrollCue | prjct-samwest.github.io/scrollCue |
| Swiper | swiperjs.com |
| Themify Icons | themify.me/themify-icons |