Welcome To Frontendor Guide 🖐

Using this quick guide, you can build a landing page for your product or startup quickly by copy-paste and without using page builders or having to hire someone.


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.


How to make sticky navigation (menu) 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 for sticky navigation

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


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.

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