Cover — Hero Template

Cover — Hero Template

Tell the world a little bit about yourself here, don't be shy. Replace the text, cover photo, and links to make it yours.

Instructions ⚡️

First, duplicate this template. Then, make sure to signup to Super if you haven't already. Although the font and code block below are optional, that's what we used to get the Cover Template Demo to look exactly the way it does. Use and modify it as you wish, and of course, remove this instructions toggle block when you're done with it. Enjoy!

Font:

Montserrat

Code

<style>

  .notion-navbar {
    display: none !important
  }

  .notion-header {
    margin-bottom: 8px !important;
  }

  .notion-header__cover {
    pointer-events: none !important;
    max-height: 100vh !important;
    position: fixed !important;
    height: 100vh !important;
    width: 100% !important;
    z-index: -1 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
  }

  .notion-header__cover-image {
    height: 100% !important;
  }

  #__next > div {
    justify-content: flex-end !important;
    flex-direction: column !important;
    height: 100vh !important;
    display: flex !important;
    width: 100% !important;
  }

  .super-content {
    padding-bottom: 40px !important;
    max-width: 90% !important;
  }

  .notion-link {
    -webkit-transition: all .2s ease-in-out !important;
    transition: all .2s ease-in-out !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    transition: all .2s ease-in-out !important;
    display: inline-block !important;
    margin: 0 4px 8px 0 !important;
    border-radius: 3px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    opacity: 1 !important;
  }

  .notion-link:hover {
    border: 1px solid #000 !important;
  }

  p {
    line-height: 2 !important;
  }

</style>
Copy & paste this into the snippet injection box in your Super site settings. Custom CSS only works on our static site method.