Hey 🖐, welcome to this guide.

Starter HTML file

Use this code as your starter HTML file, then add your blocks in the body.


Starter CSS file

Use this code as your starter CSS file, then add your blocks after it.


Remove translation dropdown

How to give the top sticky navbar a full width

Paste this code in your CSS file near after the Hero's CSS


How to change screenshots inside the MackBook & iPhone

For iPhone, you must resize your browser and take screenshot at 378px width and 825px height.

For MackBook, you must resize your browser and take screenshot at 1920px width and 1200px height.


How to change logo in the sticky navbar

Near to `src` attribute in HTML, you'll find another attribute called `change-src-onscroll`.


How to change the sticky navbar to not sticky

Search: `.hero-nav--is-sticky` then change this line: `position: fixed !important;` To `position: static !important;`


How to style your icons

Go to your CSS file and open the search input in your code editor, enter `fr-icon` and you'll find the CSS code of all your icons.

Check these examples for more info.


FREE resources to change your icons
SVG icons


Font icons

to use font icons, remove the SVG code and replace it with `<i class="fas fa-{icon name}"></i>`


Image icons

You can use image icons only in block-12 (this blocks is built to use images as icons)


How to include VideoJS
Note: You need this only if you are using a block contains a video.

You have to include the CSS & JavaScript files of this library like the example down below.


How to add blocks that contain a slider.
Note: You need this only if you are using a block contains a slider.

You have to include the CSS file of this library like the example down below.

🤔 If you have any questions or suggestions, do not hesitate to contact us at ✉️ hello@frontendor.com

}