Mixvoip Elements by Maksym

This is the playground and sandbox of Maksym

The Header Image

Notion View

notion image

What should be done in Notion

  1. Click Add cover
  1. Chose the image
    The image should be 3840 × 561px,
    Format webp,
    Name the same as Heading 1 of the Page.
  1. Save.

Website View

notion image

What should be done in Super

  1. Type the name of the page.
  1. Ensure that all words in the title are Capitalized in the correct case.
 
 

The Heading 1 for pages WITH Images

Notion View

notion image

What should be done in Notion

  1. Type the name of the page.
  1. Ensure that all words in the title are Capitalized in the correct case.
  1. Save.
 

Website View

Global CSS section
Global CSS section
Select Edit custom code
Select Edit custom code
Page-Specific CSS
Page-Specific CSS

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
  1. Go to the specific page you edit.
  1. Select Edit custom code.
  1. Insert Page-Specific CSS code in the CSS section
Global CSS (expand the toggle list)
/*Heading rules H1
by Maksym*/
h1.notion-header__title {
color: #414141;
font-family: "Open Sans";
font-size: 56px;
font-style: normal;
font-weight: 700;
line-height: 110%;
text-align: left;
}
@media only screen and (max-width: 680px)
{h1.notion-header__title{
 color: #414141;
font-family: "Open Sans";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 110%; 
text-align: left;
}}
Page-Specific CSS
(expand the toggle list)
 
 
 

The Heading 1 for pages WITHOUT Images

Notion View

notion image

What should be done in Notion

  1. Type the name of the page.
  1. Ensure that all words in the title are Capitalized in the correct case.
  1. Save.
 

Website View

notion image

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Heading rules H1
by Maksym*/
h1.notion-header__title {
color: #414141;
font-family: "Open Sans";
font-size: 56px;
font-style: normal;
font-weight: 700;
line-height: 110%;
text-align: left;
}
@media only screen and (max-width: 680px)
{h1.notion-header__title{
 color: #414141;
font-family: "Open Sans";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 110%; 
text-align: left;
}}
 
 

The Heading 2

Notion View

notion image

What should be done in Notion

  1. Type the text.
  1. Turnthe text into Heading 2
  1. Save.

Website View

notion image

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Heading rules H2
by Maksym*/
h2.notion-heading {
color: #414141;
font-family: "Open Sans";
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: 110%;
text-align: left;
margin: 84px 0px 8px 0px !important;
}
@media only screen and (max-width: 680px)
{h2.notion-heading{
color: #414141;
font-family: "Open Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 110%;
text-align: left;
margin: 40px 0px 12px 0px !important;
}}
 
 

The Heading 3

Notion View

notion image

What should be done in Notion

  1. Type the text.
  1. Turn the text into Heading 3
  1. Save.

Website View

notion image
 

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Heading rules H3
by Maksym*/
h3.notion-heading {
color: #414141;
font-family: Roboto;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 110%;
text-align: left;
}
@media only screen and (max-width: 680px)
{h3.notion-heading{
color: #414141;
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 110%;
text-align: left;
}}
 

Paragraph text

Notion View

Type the text.
Type the text.
Set the color the default.
Set the color the default.

What should be done in Notion

  1. Type the text.
  1. Set the color for the paragraph text as the default. Take advantage of this step.
  1. Save.

Website View

notion image

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Paragraph text
BY Maksym*/
.notion-text.color-default, .notion-text, .notion-semantic-string {
 color: #unset;
font-family: "Roboto";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
text-align: left;
}
/*Right Border for the text block 
BY Maksym*/
.notion-text.color-default {
border-right: #CDCDCD solid 3px;
border-radius: 5px;
padding: 0px 20% 0px 0; 
margin-bottom: 16px;
}
@media only screen and (max-width: 680px)
{.notion-text.color-default, .notion-text {
 color: #unset;
font-family: "Roboto";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
}}
/*Right Border for the text block
BY Maksym*/
@media only screen and (max-width: 680px)
{.notion-text.color-default {
border-right: #CDCDCD solid 0px;
border-radius: 5px;
padding: 0px 0px 0px 0; 
}}
 
 
 

Colorful table section with icons with the hover effect

Notion View

notion image

What should be done in Notion

  1. Type the text for the heading of the cell.
  1. Turn the text into two or three columns.
  1. Press Enter to switch on the line below and type the paragraph text of the cell.
  1. Turn the first line of the text into Heading 3
  1. Add the Icon above Heading 3. It is essential to use icons in Mixvoip’s style. You can find many icons following the link: https://mixvoip.box.mixvoip.cloud/d/8302b12c84eb414cacd2/.
    Use SVG format.
  1. Repeat it for the rest of the cells.
 

Website View

Page-Specific CSS code
Page-Specific CSS code
Developer mode
Developer mode
Copy ID for the first cell.
Copy ID for the first cell.
Past ID in the Page-Specific CSS code
Past ID in the Page-Specific CSS code

What should be done in Super

  1. Open the Page in Super.
  1. Go to the specific page you edit.
  1. Select Edit custom code.
  1. Insert Page-Specific CSS code in the CSS section. The following steps will show how to adjust the code.
  1. Open developer mode in your browser.
    Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) on your keyboard.
  1. Copy ID for the first cell.
  1. Past ID of the cell in the Page-Specific CSS code instead of Past Green Cell ID. Past the ID in three places in the code for each cell.
  1. This code includes six cells; if you want to use less quantity of the cells, choose the color you want to use. We recommend using colors in the following order: Green, Purple, Blue, Orange, Yellow, and Pink.
Page-Specific CSS
(expand the toggle list
/*background colors for)
Green Cell*/
#Past Green Cell ID {
background-color: #D0F2Cc !important;
position: relative;
z-index: 1;
}
/*Apply the Hover effect to the background colors
Green Cell*/
#Past Green Cell ID :before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: 5px;
z-index: -1;
background-color: #D0F2Cc;
transition: background-color 0.3s ease;
}
#Past Green Cell ID :before {
background-color: #E3F7E0;
Border: #CDCDCD solid 1px;
}
/*background colors for)
Purple Cell*/
#Past Purple Cell ID {
background-color: #F7CCFA !important;
position: relative;
z-index: 1;
}
/*Apply the Hover effect to the background colors
Purple Cell*/
#Past Purple Cell ID: before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: 5px;
z-index: -1;
background-color: #F7CCFA;
transition: background-color 0.3s ease;
}
#Past Purple Cell ID:hover::before {
background-color: #FAE0FC;
Border: #CDCDCD solid 1px;
}
/*Background colors for)
Blue Cell*/
#Past Blue Cell ID{
background-color: #D4ECF8 !important;
position: relative;
z-index: 1;
}
/*Apply the Hover effect to the background colors
Blue Sell*/
#Past Blue Cell ID:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
Border: #CDCDCD solid 0px;
border-radius: 5px;
z-index: -1;
background-color: #D4ECF8;
transition: background-color 0.3s ease;
}
#Past Blue Cell ID:hover::before {
background-color: #DDF0F9;
Border: #CDCDCD solid 1px;
}
/*Background colors for)
Orange Cell/*
#Past Orange Cell ID {
background-color: #FFD8B1 !important;
position: relative;
z-index: 1;
}
/*Apply the Hover effect to the background colors
Orange Cell*/
#Past Orange Cell ID :before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
Border: #CDCDCD solid 0px;
border-radius: 5px;
z-index: -1;
background-color: #FFD8B1;
transition: background-color 0.3s ease;
}
#Past Orange Cell ID :hover::before {
background-color: #FFE0C1;
Border: #CDCDCD solid 1px;
}
/*Background colors for)
Yellow Cell*/
#Past Yellow Cell ID {
background-color: #FAF7B4 !important;
position: relative;
z-index: 1;
}
/*Apply the Hover effect to the background colors
Yellow Cell*/
#Past Yellow Cell ID :before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
Border: #CDCDCD solid 0px;
border-radius: 5px;
z-index: -1;
background-color: #FAF7B4;
transition: background-color 0.3s ease;
}
#Past Yellow Cell ID :hover::before {
background-color: #FCFAD2;
Border: #CDCDCD solid 1px;
}
/*Background colors for)
Pink Cell*/
#Past Pink Cell ID {
background-color: #FADADD !important;
position: relative;
z-index: 1;
}
/*Apply the Hover effect to the background colors
Pink Cell*/
#Past Pink Cell ID:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
Border: #CDCDCD solid 0px;
border-radius: 5px;
z-index: -1;
background-color: #FADADD;
transition: background-color 0.3s ease;
}
#Past Pink Cell ID:hover::before {
background-color: #FCE9EB;
Border: #CDCDCD solid 1px;
}
 
 

3-column section with the hover effect

 

Notion View

Create the Empty Quote
Create the Empty Quote
Drag Heading 3 into the Quote
Drag Heading 3 into the Quote
Turn the text into 3 columns
Turn the text into 3 columns
Repeat it for the second and third columns
Repeat it for the second and third columns

What should be done in Notion

  1. Ensure that the following code is embedded in the Global CSS section.
 

Website View

notion image

What should be done in Super

  1. Open the Page in Super.
  1. Go to the specific page you edit.
  1. Select Edit custom code.
  1. Insert Page-Specific CSS code in the CSS section. The following steps will show how to adjust the code.
  1. Open developer mode in your browser.
    Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) on your keyboard.
  1. Copy ID for the cell.
  1. Paste the ID of the cell in the Page-Specific CSS code instead of the ID Block. Past the ID in three places in the code for each cell.
Global CSS (expand the toggle list)
/*Three Column Section with the hover effect
BY Maksym*/
blockquote.notion-quote {
border-left-width: 0em !important;
margin: 0;
padding: 0;
}
blockquote.notion-quote.color-default .notion-column  {
  Border: #CDCDCD solid 1px;
  border-radius: 5px;
  padding: 24px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
blockquote.notion-quote.color-default .notion-column :before {
  content: "";
  position: absolute;
  top: -1px; 
  left: -1px;
  right: -1px; 
  bottom: -1px;
  Border: #CDCDCD solid 0px;
  border-radius: 5px;
  z-index: -1;
  background-color: #F1F1F1; 
  transition: background-color 0.3s ease;
}
blockquote.notion-quote.color-default .notion-column :hover::before {
  background-color: #FCFCFC;
  Border: #CDCDCD solid 1px;
}
 
 

Hide some sections for the mobile view

Notion View

 

What should be done in Notion

  1. Describe your action in the Notion
 

Website View

 

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Empty cell with the red don't appear on mobile 
BY Maksym*/
@media only screen and (max-width: 680px)
{.notion-column .notion-text.color-red {
display: none;
}}
 
 

Partners table

Notion View

What should be done in Notion

  1. Describe your action in the Notion
 

Website View

 

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Partners table
BY Maksym*/
.notion-quote.bg-brown .notion-column-list .notion-column .notion-image.align-start.page-width, .normal{
  Border: #CDCDCD solid 1px;
  border-radius: 5px;
  padding: 24px;
}
 
 

Partners table

Notion View

What should be done in Notion

  1. Describe your action in the Notion
 

Website View

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Partners table
BY Maksym*/
.notion-quote.bg-brown  {
background-color: transparent;  
}
.notion-quote.bg-brown .notion-column-list .notion-column .notion-image.align-start.page-width, .normal{
  Border: #CDCDCD solid 1px;
  border-radius: 5px;
  padding: 24px;
}
 

Columns without hover effect

Notion View

 

What should be done in Notion

  1. Describe your action in the Notion
 

Website View

 

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Three Column Section withou the hover effect
BY Maksym*/
blockquote.notion-quote.bg-gray {
background-color: transparent;  
}
blockquote.notion-quote.bg-gray .notion-column {
background-color: #F1F1F1;
Border: #CDCDCD solid 1px;
border-radius: 5px;
padding: 24px;
margin-top: 16px;
}
 
 

Radius for the Call to Action button in the Navbar

Notion View

What should be done in Notion

  1. Preview the button in the Navbar.

Website View

 

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Border radius for call to action in navbar
BY Maksym*/
.super-navbar__actions {
  --navbar-button-border-radii: 5px;
}
 

Primary Green button

Notion View

What should be done in Notion

  1. Preview the button in the Navbar.
 

Website View

 

What should be done in Super

  1. Ensure that the following code is embedded in the Global CSS section.
Global CSS (expand the toggle list)
/*Link on BOLD text with GREEN background */
span.highlighted-background.bg-green a.notion-link.link strong, span.highlighted-background.bg-green strong a.notion-link.link, a.notion-link.link span.highlighted-background.bg-green strong {
    display: inline-block;
    text-decoration: none !important;
    background-color: #16bc00;
    font-size: 14pt !important;
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 0;
    text-transform: lowercase;
    font-size: small;
    padding: 16px 24px 13px 24px;
    color: white !important;
    border: none;
}
span.highlighted-background.bg-green a.notion-link.link strong::first-letter,
span.highlighted-background.bg-green strong a.notion-link.link::first-letter,
a.notion-link.link span.highlighted-background.bg-green strong::first-letter {
    text-transform: uppercase;
}

Partners table

 
Global CSS (expand the toggle list)
/* small galery hover effect  */
.notion-collection-gallery.small .notion-collection-card__content {
    position: absolute !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: white !important;
    width: 100% !important;
    padding: 6px !important;
    opacity: 0 ;
    transition: opacity 0.1s ease-in !important;
    font-size:0.8rem;
}
.notion-collection-card:hover {
    background: #f3f3f3;
}
.notion-collection-card .notion-property__title {
    line-height: 1.5;
    display: flex;
    align-items: flex-start;}



.notion-collection-gallery.small .notion-collection-card:hover .notion-collection-card__content {
    opacity: 1 !important;
}


.notion-collection-gallery.small {
  display:flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
}
.notion-collection-gallery.small .notion-collection-card.gallery{
flex-grow: 1;
flex-basis: 140px;
max-width: 140px;
box-shadow: none;
border-radius: 0;
}

.notion-collection-gallery.small .notion-collection-card__property-list {
    font-size: 0.8rem;
}
 

Database

 
Global CSS (expand the toggle list)
/*Database named “Linked”
BY Maksym*/
.notion-collection-gallery.no-border-top.large {
   display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media only screen and (max-width: 680px)
{.notion-collection-gallery.no-border-top.large {
   display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery  {
  border: #CDCDCD solid 1px;
  border-radius: 5px;
  padding: 24px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  box-shadow: none;
}

.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery {
  border: #CDCDCD solid 1px;
  border-radius: 5px;
  padding: 24px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  box-shadow: none;
}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: #CDCDCD solid 1px !important;
  border-radius: 5px;
  z-index: -1;
  background-color: #F1F1F1 !important;
  transition: background-color 0.3s ease;
}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery:hover::before {
  background-color: #FCFCFC !important;
  border: #CDCDCD solid 1px !important;
}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery.no-click:hover .notion-property.notion-property__file.notion-collection-card__property{
 background-color: #F1F1F1;
 box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__rollup.notion-collection-card__property .notion-property.notion-property__title.notion-semantic-string .notion-link.notion-page.resource .notion-page__icon {
  display: none;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__rollup.notion-collection-card__property .notion-property.notion-property__title.notion-semantic-string .notion-link.notion-page.resource{
  padding: 0 0 0 0;
  margin-bottom: 24px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__rollup.notion-collection-card__property .notion-property.notion-property__text.property-undefined.notion-semantic-string.no-wrap{
 white-space: normal;
 margin-bottom: 16px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-collection-card__property.wrap{
margin-bottom: 24px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-collection-card__property.wrap .notion-pill {
padding: 8px 16px;
border-radius: 5px;
margin-bottom: 12px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__file.notion-collection-card__property{
  border: #CDCDCD solid 1px !important;
  background-color: ;
  border-radius: 50px;
 position: relative;
 width: 42px;
 height: 42px;
 margin-inline-end: 0px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__file.notion-collection-card__property .notion-link{
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}
/*Database named “Linked”
BY Maksym*/
.notion-collection-gallery.no-border-top.large {
   display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media only screen and (max-width: 680px)
{.notion-collection-gallery.no-border-top.large {
   display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery  {
  border: #CDCDCD solid 1px;
  border-radius: 5px;
  padding: 24px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  box-shadow: none;
}

.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery {
  border: #CDCDCD solid 1px;
  border-radius: 5px;
  padding: 24px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  box-shadow: none;
}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: #CDCDCD solid 1px !important;
  border-radius: 5px;
  z-index: -1;
  background-color: #F1F1F1 !important;
  transition: background-color 0.3s ease;
}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery:hover::before {
  background-color: #FCFCFC !important;
  border: #CDCDCD solid 1px !important;
}
.notion-collection-gallery.no-border-top.large .notion-collection-card.gallery.no-click:hover .notion-property.notion-property__file.notion-collection-card__property{
 background-color: #F1F1F1;
 box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__rollup.notion-collection-card__property .notion-property.notion-property__title.notion-semantic-string .notion-link.notion-page.resource .notion-page__icon {
  display: none;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__rollup.notion-collection-card__property .notion-property.notion-property__title.notion-semantic-string .notion-link.notion-page.resource{
  padding: 0 0 0 0;
  margin-bottom: 24px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__rollup.notion-collection-card__property .notion-property.notion-property__text.property-undefined.notion-semantic-string.no-wrap{
 white-space: normal;
 margin-bottom: 16px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-collection-card__property.wrap{
margin-bottom: 24px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-collection-card__property.wrap .notion-pill {
padding: 8px 16px;
border-radius: 5px;
margin-bottom: 12px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__file.notion-collection-card__property{
  border: #CDCDCD solid 1px !important;
  background-color: ;
  border-radius: 50px;
 position: relative;
 width: 42px;
 height: 42px;
 margin-inline-end: 0px;
}
.notion-collection-card__content.notion-collection-card__property-list.no-title .notion-property.notion-property__file.notion-collection-card__property .notion-link{
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}