Create your own landing page¶

Create your landing page¶

a great way to welcome your visitors and provide clear directions.

Check out the full documentation

A landing page is the first page that a visitor of your website will see. Hence, you want to make sure it has the right vibe and contains the right information. As in books, the cover can be set differently than its content.

In Jupyter Book you have the option to:

• create a custom landing page using a split image.

• create sections using blocks

• hide table of contents

• add a custom footer.

• add cards in a grid to link to specific pages or other websites.

---
site:
  hide_outline: true
  hide_toc: true
  hide_title_block: true
---

Create specific blocks¶

You can create specific blocks which are styled differently. For instance, we used split-image at the top of the page. And justified for the section on hiding the outline and table of contents.

To create a split image on your landing page, you can use the split-image directive. This allows you to have an image on one side and text on the other side. You can customize the content and layout to fit your needs, e.g. include a button that links to some other page or website.

+++ { "kind": "split-image" }

# Create your landing page

a great way to welcome your visitors and provide clear directions.

{button}`Check out the full documentation <https://mystmd.org>`

![](../figures/delft.png)

+++

In a similar we used the justified block which creates a block that spans the full width of the screen:

+++ {"kind": "justified"}

Cards¶

Often cards are used at the landing page to link to specific pages or websites. For instance, using the justified: