Denti – Landing page HTML Template

We hope you will enjoy it!

If you have any questions that are beyond the scope of this documentation, please feel free to contact us via our Support System and our support team will be glad to help you out.

• Documentation Created: February 2020
• Documentation Last Update: April 2023
• View Changelog

• You can find all files in “app” folder
• In “app” folder you will see “dist” and “src” folders
• “dist” folder contains all compiled and ready-to-use files
• “src” folder contains all sources for your work
• CSS, JS, images, fonts, icons files you can find in “assets” folder
• CSS files you can find in “dist/assets/css” folder or “src/assets/sass” folder with sources
• You can find JS files in “dist/assets/js folder” or “src/assets/js folder” with sources
• You can find fonts in “assets/fonts” folder
• You can find all UI elements in “ui.html” file

• Professional and creative design
• Free Google fonts
• Clean typography
• Vector icons
• HTML5 & CSS3
• Bootstrap 4 framework
• Fully responsive pages
• Ajax forms
• Compile SASS with Gulp
• W3C validated code
• Clean & Friendly code
• Easy to customize
• Easy to find the files name, folder, layers, groups
• All files are well commented
• Professional support
• Lifetime updates

• JQuery ( https://jquery.com )
• Bootstrap ( https://getbootstrap.com )
• Bootstrap custom file input ( https://bs-custom-file-input.netlify.com )
• Animate.css ( https://daneden.github.io/animate.css )
• Swiper ( https://swiperjs.com )
• Malihu scrollbar ( http://manos.malihu.gr )
• Custom

• DM Sans ( https://fonts.google.com/specimen/DM+Sans )

• Font Awesome ( https://fontawesome.com/cheatsheet?from=io )
• Custom

• Unsplash ( https://unsplash.com )
• Freepik ( https://www.freepik.com )

Please note: All images are just used for preview purpose only and not included in the final purchase files.

A better way is to use sources in “src” folder, but if you don’t know all technologies you can simply edit “dist” files.

Images: Upload your image to “assets/img/” folder. Open “index.html” file and find “img” tag. Change the URL to your image path.

Background: The background of elements can be changed by using different background classes in “.html” files. These classes are described in “ui.html” documentation.

Texts: All texts can be changed in “.html” files.

Watch “ui.html” file to see how you can change buttons’ color, sizes etc.

If you want to edit some html, css, js files, the best way is to use sources in “src” folder. You need “node.js”, “gulp” installed.

1. Open “cmd” and go to the projects folder
2. Run “npm i” to install all gulp dependencies
3. Run “gulp” to clean dist folder, dist the new project, run the local server and start watching changes:
   1. Run “gulp dist” to dist project
   2. Run “gulp watch” to watch changes
   3. Run “gulp html:build” to dist only html files
   4. Run “gulp css:build” to dist only css files
   5. Run “gulp fonts:build” to dist only fonts
   6. Run “gulp icons:build” to dist only icons
   7. Run “gulp image:build” to dist only images
   8. Run “gulp clean” to delete dist folder

How to work with html

• Find “src” folder which includes all “.html” files

How to change css

• To change css open “src/assets/sass” folder
• “style.scss” – the main file which imports all files
• You can find blocks files in “blocks” folder
• You can find components files in “components” folder
• You can find content files in “content” folder
• You can find layout files in “layout” folder
• You can find utilities files in “utilities” folder
• You can change the colors, padding of global components in “_variables.scss” file. The file is well documented
• You can change fonts globally in “_font.scss” file. The file is well-documented
• You can change font-size, line-height and all of the typography parameters in “content/_typography.scss”. The file is well documented
• Some of the default Bootstrap variables are rewritten in “_bootstrap-style-rewrite.scss”. Your own values can be defined. The file is well documented

Watch “ui.html” file to see how you can change buttons’ color, sizes etc.

How to change js

• To change js open “src/assets/js” folder
• “main.js” – the main file which imports all components
• You can find all files in “components” folder

If you have any questions or need customization, please contact us via our Support System. We will help you as soon as possible!

Support Link: https://store.adveits.com/my-account/tickets/