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
![](https://saturndesignagency.com/wp-content/uploads/2023/11/Abstract-Colors-Mixing-in-Oil-like-Way.png)
I wanted this sign in the corner.
Download App
Another heading
para
![](https://saturndesignagency.com/wp-content/uploads/2023/11/main-page-scaled.jpg)
This page AWB plugin plus they have parallax feature.
Cover With Different Background Color that I will try to make gradient.
Go to settings and select overlay and gradient then choose colors.
![](https://saturndesignagency.com/wp-content/uploads/2023/11/onl1-300x300.jpg)
![](https://saturndesignagency.com/wp-content/uploads/2023/11/cropped-saturn-1-300x300.jpg)
![](https://saturndesignagency.com/wp-content/uploads/2023/11/onl3-300x300.jpg)
Heading 4 (H6) that has CSS code setup for this style of headings.
Test object 1
Test object 2
Test Object 3
![](https://saturndesignagency.com/wp-content/uploads/2023/11/onl3.jpg)
![](https://saturndesignagency.com/wp-content/uploads/2023/11/onl1.jpg)
![](https://saturndesignagency.com/wp-content/uploads/2023/11/cropped-saturn-1.jpg)
![](https://saturndesignagency.com/wp-content/uploads/2023/11/onl1.jpg)
![](https://saturndesignagency.com/wp-content/uploads/2023/11/onl3.jpg)
Here We will test out buttons