Cards Portfolio

Check out the demo.

Find the template Here.

This template was created by Dr. Gil Pradana.
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 👇

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Spartan:wght@400;600&display=swap" rel="stylesheet">

<style>
    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
	:root {
	    --bg-color: #ffffff;
	    --fg-color: #373530;
	}
	
	html {
      scroll-behavior: smooth;
    }
    
	body {
	    counter-reset: section;
	}
	
	.notion-frame{
	    background: #eaeaea;
	}
	
	.notion-page {
	    width: 840px;
        padding: 48px;
        border-radius: 0px;
        background: #fff;
	}
	
	.notion-title{
	    display: none;
	}
	
	.notion-h1{
	    margin-top: 54px !important;
	    font-family: 'Playfair Display', serif;
        font-size: 39px;
        width: auto;
        margin-left: 0px;
        font-weight: bold;
        margin-bottom: 0px;
        animation: 0.5s ease-out 0s 1 slideInFromLeft;
        line-height: 54px;
	}
	
	.notion-h2 {
        font-size: 28px;
        margin-top: 1em;
        margin-bottom: 14px;
        width: auto;
        padding-right: 36px;
        margin-left: -64px;
        padding-left: 64px;
        padding-top: 16px;
        padding-bottom: 16px;
        background: #fff201;
    }
    
    .notion-h1 .notion-h-title {
        padding-bottom: 8px;
        display: inline;
    }
    
    .notion-h3 .notion-h-title {
        background: linear-gradient(180deg, transparent 64%, #fff201 64%);
        display: inline;
    }
	
	.notion-header{
	    height: 64px;
	    background: transparent;
	}
	
	.notion-header .breadcrumb {
	    font-size: 16px;
        background: #fff201 !important;
        padding: 18px;
        color: #000 !important;
        font-family: 'Playfair Display', serif;
        transition: 250ms;
        border-radius: 0px;
        font-weight: bold;
	}
	
	.notion-header .breadcrumb:hover {
	    background: #000 !important;
	    color: #fff201 !important;
	}
	
	.notion-callout{
	    transform: scale(0.95);
        transition: transform 250ms;
        border-radius: 0px;
        border: 0px;
        background: #ffffff94;
        box-shadow: 5px 5px 10px #e0e0e0,
             -5px -5px 10px #ffffff;
        width: 94%;
	}
	
	.notion-callout:hover{
	    transform: scale(1);
	}
	
	.notion-callout-text {
        font-size: 14px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
    }
    
    .notion-callout-text a{
        font-size: 14px;
        font-weight: bold;
        line-height: 48px;
        color: #050505;
    }
    
    .notion-callout .notion-page-icon {
        margin-top: 12px;
    }
	
	.notion-bookmark{
	    border: none;
        border-radius: 0px;
        transform: scale(0.95);
        transition: transform 250ms;
        background: #ffffff94;
        box-shadow: 5px 5px 10px #e0e0e0,
             -5px -5px 10px #ffffff;
        width: 94%;
        margin-bottom: 16px;
	}
	
	.notion-bookmark:hover{
	    transform: scale(1);
	}
	
	.notion-bookmark-title{
	    font-size: 16px;
        font-weight: bold;
        margin-top: 8px;
        margin-bottom: 12px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
	}
	
	.notion-bookmark-image {
	    flex: 1 1 64px;
	}
	
	.notion-bookmark-description {
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
    }
	
	.notion-bookmark-link>img {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-right: 6px;
    }
    
    .notion-bookmark-link>div {
        margin-top: 8px;
        margin-left: 4px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
    }
    
    .notion-hr {
        width: 113%;
        border: none;
        margin-bottom: 24px;
        margin-top: 48px;
        height: 100px;
        background: #eaeaea;
        margin-left: -48px;
        border-top: 8px solid #fff201;
        

    }
    
    .notion-hr::before{
        content: counter(section);
        counter-increment: section;
        height: auto;
        width: 64px;
        background: #fff201;
        color: #000;
        padding:16px 20px;
        text-align: center;
        position: absolute;
        right: -48px;
        margin-top: -32px;
        font-family: 'Spartan', sans-serif;
	    letter-spacing: -0.02em;
	    font-size: 14px;
	    font-weight: bold;
    }
	
	.notion {
	    font-size: 16px;
	    
	}
	
	.notion-text{
	    font-size: 16px;
	    font-family: 'Spartan', sans-serif;
	    letter-spacing: -0.02em;
        line-height: 30px;
        margin-bottom: 18px;
	}
	
	.notion-list li{
	    font-size: 16px;
	    font-family: 'Spartan', sans-serif;
	    letter-spacing: -0.02em;
        line-height: 30px;
        margin-bottom: 18px;
	}
	
	.notion-text a{
	    font-weight: bold;
	    border-bottom: 3px solid #1DA1F2;
	    color: #1DA1F2;
	    text-decoration: none !important;
	}
	
	.notion-text a:hover{
	    border-bottom: 3px solid #1DA1F2 !important;
	    text-decoration: none !important;
	}
	
	.notion-list li a{
	    font-weight: bold;
	    border-bottom: 3px solid #1DA1F2;
	    color: #1DA1F2;
	    text-decoration: none !important;
	}
	
	.notion-list li a:hover{
	    border-bottom: 3px solid #1DA1F2 !important;
	    text-decoration: none !important;
	}
	
	.notion-quote {
	    font-size: 1.2em;
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        line-height: 1.6em;
        margin-top: 16px;
        margin-bottom: 16px;
	}
	
	.notion-toggle>summary {
        font-family: 'Playfair Display', sans-serif;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 16px;
    }
	
	.notion-page-link{
	    display: none;
	}
	

	.notion-title,
	.notion-h-title {
	    font-family: 'Playfair Display', serif;
	}
	
	.notion-collection-card-body {
	    background: #fafafa;
	}

	.notion-table-of-contents {
        width: 160px;
        display: block;
        position: fixed;
        left: 24px;
        bottom: 16px;
        font-family: 'Spartan', sans-serif;
        font-weight: bold;
        z-index: 99;
        -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
        mask-image: linear-gradient(to right, black 50%, transparent 100%);
        overflow-y: scroll;
    }
    
    .notion-table-of-contents-item {
        font-size: 12px;
    }
    
    @media only screen and (max-width: 1216px) {
        .notion-table-of-contents {
            display: none;
        }
    }
	
	@media only screen and (max-width: 840px) {
	.notion-page {
        padding: 24px !important;
        border: none !important;
	}
	.notion-h1 {
	    margin-left: -12px;
	}
	.notion-page-icon-wrapper{
	    z-index: 99;
	    margin-bottom: 16px;
	}
	.notion-hr {
        width: 128%;
	}
	
    
    }
</style>