Test Page – Saturn Design

Heading 2

Heading 3

Spacer above here

This will be the html Anchor of the practice page “toptest”. Select advanced and add html anchor name. And on the links just #{htmlanchorname} or websitecom/#{htmlanchorname} to bring it to this page as is done with Reviews link in the footer. Also custom CSS added “toptest” to change color gradualy to right (can be to left up or down). CSS included in the CSS section

Spacer Below here

This is all custom css used on this website with some explanations. The codes came from Animista, Youtube as well as ChatGptBing.

::selection{
background:#F4DFC8;
color:#7743DB;
}
"Came from Youtube makes highlighting anything on the website a custom color."

h6.wp-block-heading {
	-webkit-animation: text-pop-up-top 5s ease-in-out infinite alternate both;
	        animation: text-pop-up-top 5s ease-in-out infinite alternate both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-11-13 18:15:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
"Animation of the Services paragraph"


h6.wp-block-heading {
  border-radius: 25px;
  padding: 10px;
  background-color: #f2f2f2;
}
"Shape creation and background color use on a paragraph block"



p.tsub-1 {
  width: px;
  height: px;
  background-color: #F5F7F8;
  animation: color-change 4s infinite;
border-radius: 20px;
  padding: 4px;
  background-color: #f2f2f2;
}

@keyframes color-change {
  0% {
    background-color: #F5F7F8;
  }
  50% {
    background-color: #F4DFC8;
  }
  100% {
    background-color: #F5F7F8;
  }

}
"Given By Bing AI gradual change of the color within timeframe, with shape of the paragraph box adjusted."

p.toptest {
  width: px;
  height: px;
  background: linear-gradient(to right, #F5D6BA, #A2D2FF);
}
Color change Bing Ai code. Had to inspect element and + to get the right name. 

-----
.page-id-66 header { 
display: none; 
}  (this to remove header from a specified page, page id can be found while inspecting the website)

.page-id-66 footer { display: none; } (Same for the footer.)  Chat GPT Bing Ai