Cardile - Minimal Profile

Check out the dark demo. Check out the light demo.

Find the template Here.

How to use this Template

1. Click the template link above.

2. Duplicate the template in the top right corner.

3. Use your new Notion Url for the page in the Potion Dashboard when setting up the site.

4. After creating the site, in the Potion dashboard under Snippet Injection, copy and paste the following code 👇

5. 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>