
Check out the dark demo. Check out the light demo.
Find the template Here.
Â
This template was created by Julien.
How to use this Template
- Click the template link above.
- Duplicate the template in the top right corner.
- Use your new Notion Url for the page in the Potion Dashboard when setting up the site.
- After creating the site, in the Potion dashboard under Snippet Injection, copy and paste the following code 👇
- More instructions in the Getting Started part of the Notion template
<style> /*--- THEME ---*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --bg-color: #000000; --fg-color: #FFFFFF; --color-background: #000000; --color-card: #0A0A0A; --color-text-shade: #676767; --color-black: #0A0A0A; --color-white: #FFFFFF; /* Fonts variables */ font-size: 16px; font-family: 'Poppins', sans-serif; } .notion-page { width: 400px; } .notion { font-size: 16px; } .notion-frame { min-height: 100vh; } .notion-full-page { padding-bottom: 0; } .notion-page-no-cover { margin-top: 0!important; } /*--- RESET ---*/ .notion-header, .notion-title, .notion-callout, .notion-collection-header-title, .notion-page-title .notion-page-icon-inline { display: none!important; } /*--- CARD ---*/ .notion-gallery-grid { padding: 0; border-top: 0; animation: fadein 1s ease-in; cursor: none; } .notion-collection-card { border-radius: 1.25rem!important; } .notion-gallery-grid-size-large { background-color: var(--color-card); font-family: 'Poppins', sans-serif; border-radius: 1.25rem; } .notion-collection-card-body { background-color: var(--color-card); align-items: center; padding: 2rem 0; } .notion-collection-card:hover { background: var(--color-card); } /*--- AVATAR ---*/ .notion-collection-card-cover { height: auto!important; } .notion-collection-card-cover img { aspect-ratio: 1/1; object-fit: cover; object-position: center top!important; } .notion-collection-card-cover:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 68.46%, var(--color-card) 96.41%); box-shadow: inset 0px 5px 5px rgba(255, 255, 255, 0.1); } /*--- TEXT ---*/ .notion-page-title-text { font-size: 2.5rem; font-weight: 600!important; color: var(--color-white); } .notion-collection-card-property:nth-of-type(2) { font-size: 1.5rem; font-weight: 400; color: var(--color-text-shade); } .notion-collection-card-property:nth-of-type(3) { font-size: 1rem; font-weight: 400; color: var(--color-text-shade); display: flex; } .notion-collection-card-property:nth-of-type(3)::before { content: url("https://img.icons8.com/pastel-glyph/20/676767/place-marker--v1.svg"); margin: 0 .25rem 0 0; } .notion-collection-card-property:nth-of-type(4) { background-color: var(--color-white); color: var(--color-black); padding: .75rem 1.5rem; border-radius: .5rem; display: flex; align-items: center; box-shadow: inset 0px 5px 5px rgba(10, 10, 10, 0.1); transition: .3s ease-in-out; margin-top: 1rem; } .notion-collection-card-property:nth-of-type(4):hover { opacity: .7; } .notion-collection-card-property:nth-of-type(4)::after { content: "Get in touch"; text-decoration: none!important; font-size: 1rem; font-weight: 600; } .notion-collection-card-property:nth-of-type(4) .notion-property.notion-property-text form { display: flex; align-items: center; } .notion-collection-card-property:nth-of-type(4)::before { content: url("https://img.icons8.com/fluency-systems-regular/24/000000/filled-message.svg"); margin: .15rem .5rem 0 0; } /*--- ANIMATIONS ---*/ @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } </style>