💻

Code for Website

Global Code

All Current Head

<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-P4SP6PZ');</script> <!-- End Google Tag Manager -->

All Current Body

<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P4SP6PZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->

<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="demetripanici" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting our website! You can buy me a coffee / support us here!" data-color="#4d4d4d" data-position="Right" data-x_margin="18" data-y_margin="18"></script>

All Current Global CSS

.notion-toggle { display: none !important; }

.notion-callout { background-color: #f9f9f9 !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 6px; margin-bottom: 4px; margin-top: 6px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.notion-callout:hover { -webkit-transform: scale(1.020); transform: scale(1.020); }

p { font-weight: 500; }

.notion-collection-card { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 1px; } .notion-collection-card:hover { -webkit-transform: scale(1.020); transform: scale(1.020); }

.notion-collection__header { color: #fefefe; font-size: 0px }

.notion-collection-card__content { font-weight: 500; }

.notion-collection-card { padding: 6px; }

.notion-table-of-contents { font-weight: 600; font-size: 18px; padding: 10px; }

a { color: grey; }

.notion-bookmark { background-color: #f9f9f9 !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 6px; margin-bottom: 4px; margin-top: 6px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.notion-bookmark:hover { -webkit-transform: scale(1.020); transform: scale(1.020); }

.notion-embed { background-color: #f9f9f9 !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 6px; margin-bottom: 4px; margin-top: 6px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.notion-embed:hover { -webkit-transform: scale(1.020); transform: scale(1.020); }

Condensed Global CSS

.notion-toggle { display: none !important; }

p { font-weight: 500; }

.notion-collection-card { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 1px; }

.notion-collection__header { color: #fefefe; font-size: 0px }

.notion-collection-card__content { font-weight: 500; }

.notion-collection-card { padding: 6px; }

.notion-table-of-contents { font-weight: 600; font-size: 18px; padding: 10px; }

a { color: grey; }

a:hover { color: black; }

.notion-callout,.notion-bookmark,.notion-embed { background-color: #f9f9f9 !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 6px; margin-bottom: 4px; margin-top: 6px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.notion-callout:hover,.notion-collection-card:hover,.notion-bookmark:hover,.notion-embed:hover { -webkit-transform:scale(1.020); transform:scale(1.020); }

Footer HTML

<script> window.onload = function() {

	/* COPYRIGHT INFO */
	const copyright = document.createElement('p')
	copyright.innerHTML = '<a href="about-me">About</a> - <a href="contact">Contact</a> - <a href="disclaimer">Disclaimer</a> - <a href="privacy-policy">Privacy</a> - <a href="terms-of-service">Terms</a>'
	copyright.style.textAlign = "center";
	copyright.style.marginTop = "20px";
	copyright.style.color = "#333";
	copyright.style.marginBottom = '50px';

	/* LEGAL NOTICE */
	const legal = document.createElement('p')
	legal.innerHTML = 'Copyright @ 2021 - Rise Productive'
	legal.style.textAlign = "center";
	legal.style.fontSize = "13px";
	legal.style.opacity = "50%";
	legal.style.color = "#333";

	/* LOGO */
	img = document.createElement("img");
	img.setAttribute('src', '<https://riseproductive.com/_next/image?url=https%3A%2F%2Fsuper-static-assets.s3.amazonaws.com%2Ffc764c97-fcc6-43e9-b117-3e52b6bf658f%2Fuploads%2Flogo%2Febbdd537-4b53-404f-a22f-97b41c51ded5.png&w=1920&q=80>');
	img.style.width = ('250px');
	img.style.margin = '30px auto';
	img.style.display = 'block';

	/* Set up the Footer */
	const footerContainer = document.createElement("div");
	footerContainer.style.maxWidth = "720px";
	footerContainer.style.margin = "0 auto"

	/* Style the footer background */
	const footer = document.createElement("div");
	footer.style.background = "#eee";
	footer.style.height = "auto";
	footer.style.padding = "50px";

	/* Assemble the extra HTML for the footer */
	footerContainer.appendChild(img)
	footerContainer.appendChild(copyright)
	footerContainer.appendChild(legal)

	footer.appendChild(footerContainer)

	/* Add the footer to the bottom of the body */
	document.body.appendChild(footer);
}

</script>

Mailchimp signup form

<!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;} /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <style type="text/css"> #mc-embedded-subscribe-form input[type=checkbox]{display: inline; width: auto;margin-right: 10px;} #mergeRow-gdpr {margin-top: 20px;} #mergeRow-gdpr fieldset label {font-weight: normal;} #mc-embedded-subscribe-form .mc_fieldset{border:none;min-height: 0px;padding-bottom:0px;} </style> <div id="mc_embed_signup"> <form action="https://riseproductive.us4.list-manage.com/subscribe/post?u=abf18d695c8d636f58943a694&amp;id=c3a7d62964" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll">

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_abf18d695c8d636f58943a694_c3a7d62964" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>

</form> </div>

<!--End mc_embed_signup-->

Find link hover CSS for images
Opacity Code

.notion-image { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover img { opacity: .9; }

Zoom in Code

.notion-image img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover img { -webkit-transform: scale(1.020); transform: scale(1.020); }

Callout background CSS
Background, rounded corners

.notion-callout { background-color: #f9f9f9 !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 6px;

margin-bottom: 4px;

margin-top: 6px;

}

Zoom in code

.notion-callout { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-callout:hover { -webkit-transform: scale(1.025); transform: scale(1.025); }

Opacity Code
Gallery CSS
Hover, shadow and border CSS

.notion-collection-card { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 1px; } .notion-collection-card:hover { -webkit-transform: scale(1.020); transform: scale(1.020); }

Gallery Text weight CSS

.notion-collection-card__content { font-weight: 500; }

Gallery Padding

.notion-collection-card { padding: 6px; }

Paragraph text css
500 weight code

p { font-weight: 500; }

Hiding Database header
Code

.notion-collection__header { color: #fefefe; font-size: 0px }

Table of content CSS
Code

.notion-table-of-contents { font-weight: 600; font-size: 18px; padding: 10px; }

Hyperlink grey css
Code

a { color: grey; }

a:hover { color: black; }

Home Page Image CSS
Code

.notion-image img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover img { opacity: .9; } .notion-image img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover img { -webkit-transform: scale(1.025); transform: scale(1.025); }

.notion-image { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover { opacity: .9; } .notion-image { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover { -webkit-transform: scale(1.025); transform: scale(1.025); }

.notion-image { background-color: #f9f9f9 !important; box-shadow: 0 6px 12px rgb(0 0 0 / 0.2); border-radius: 6px; }

Bookmark CSS
Code

.notion-bookmark { background-color: #f9f9f9 !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 6px; margin-bottom: 4px; margin-top: 6px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.notion-bookmark:hover { -webkit-transform: scale(1.020); transform: scale(1.020); }

Notion Embed CSS
Code

.notion-embed { background-color: #f9f9f9 !important; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); border-radius: 6px; margin-bottom: 4px; margin-top: 6px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.notion-embed:hover { -webkit-transform: scale(1.020); transform: scale(1.020); }

Google Tag Manager

Head

<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-P4SP6PZ');</script> <!-- End Google Tag Manager -->

Body

<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P4SP6PZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->

Buy Me a Coffee Widget

Overlay widget code

<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="demetripanici" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting our website! You can buy me a coffee / support us here!" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>

Proper blue color overlay widget code

<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="demetripanici" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting our website! You can buy me a coffee / support us here!" data-color="#0a8fc9" data-position="Right" data-x_margin="18" data-y_margin="18"></script>

Grey widget

<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="demetripanici" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting our website! You can buy me a coffee / support us here!" data-color="#4d4d4d" data-position="Right" data-x_margin="18" data-y_margin="18"></script>

Button code

<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="demetripanici" data-color="#525252" data-emoji="" data-font="Inter" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>

Specific Pages:

Notion Template Image CSS:

Image hover opacity and zoom CSS

.notion-image { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover img { opacity: .9; } .notion-image { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .notion-image:hover img { -webkit-transform: scale(1.025); transform: scale(1.025); }