Profile Preset templates
- Credit: not required but appreciated a lot done so ⸜(｡˃ ᵕ ˂ )⸝♡
ALL BLUE
ALL BLUE CODE
<div class="topBlocks">
<h4> Pronouns </h4>
<h4> Age </h4>
<h4> Time Fuse </h4>
<h4> Language + Language </h4>
</div>
<details class="custom-dropdown">
<summary class="custom-dropdown-summary">About Bots</summary>
<ul>
<li>YOU REPLACE THESE ITH YOUR TEXT</li>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is another placeholder line</li>
<li>This is a placeholder line</li>
</ul>
</details>
<img src="https://files.catbox.moe/585lxs.jpg" alt="←REPLACE THE LINK WITH YOUR FIRST THIN BANNER" class="BannerImage">
<details class="custom-dropdown">
<summary class="custom-dropdown-summary">Series</summary>
<ul>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is another placeholder line</li>
<li>This is a placeholder line</li>
</ul>
</details>
<img src="https://files.catbox.moe/585lxs.jpg" alt="←REPLACE THE LINK WITH YOUR SECOND THIN BANNER" class="BannerImage">
<details class="custom-dropdown">
<summary class="custom-dropdown-summary">Fellow Creators</summary>
<ul>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is another placeholder line</li>
<li>This is a placeholder line</li>
</ul>
</details>
<img src="https://files.catbox.moe/acqcya.jpg" alt="←REPLACE THE LINK WITH YOUR BIG IMAGE BOTTOM" class="BigBannerImage">
<div class="bottomContainer">
<h4>This is a placeholder text. feel free to replace it with whatever you want!</h4>
<h4>This is another paragraph. You can add more if you want, just follow the HTLM format</h4>
</div>
<style>
.css-1ciz3n {padding: 0.1em 0.6em; position: absolute; top: 24vh; left: 25%; transform: translateX(-50%); font-size: 1rem; color: white; background: #c2d9ff87; border-radius: 12px; font-family: "Raleway";}
@media (max-width: 1000px){
.css-1ciz3n {display: flex; height: 25px; left: 15vw; font-size: 0.8rem; align-items: center;}}
.css-wjj1lc {font-size: 1rem; color: #1916e2; font-family: "Cardo"; mix-blend-mode: color-dodge; transform: translateY(-34vh);}
</style>
<style>.BASIC{}
.css-1o7tvz2{z-index: 1000;}
.css-0{background: transparent; border-radius: 0;}
.css-15vqpxh{background: #000000;}
.css-1uodvt1 {flex-direction: column; justify-content: center; width: 100%;}
.css-18bnokj {width: 100%; height: 100%; border-radius: 0;}
.css-79elbk {position: relative; width: 100%; height: 35vh; mask-image: linear-gradient(to bottom, black 50%, transparent 100%);}
.css-70qvj9 h2 {position: absolute; font-size: 4em; transform: translateX(-50%); font-family: "Cardo"; text-shadow: 0 0 5px rgb(97 107 249), 0 0 10px rgb(44 55 243); top: 30vh; left: 50%;}
.css-8g8ihq{align-items: center;}
.css-hjkukh{transform: translateY(2em);}
.css-1bn1yyx{margin-top: 5%;}
.css-1x04uxb {position: absolute;left: 0; top: 15vh; z-index: 10000;}
@media (max-width: 1000px) {.css-70qvj9 h2 {font-size: 10vw;} .css-hjkukh{transform: translateY(4vw);}}
.glow-logo {color: #29d780; background: #06064978;}
.css-1knepg6 {color: #678bff;}
.css-bda9ez {color: #c7ccff;}
.glow-on-hover:after {background: rgb(0 13 46 / 79%);}
.glow-on-hover:before {background: none;}
a:hover {color: #464ce4;}
.css-11bqp4r {background: rgb(0 22 39 / 85%);}
.css-cizl7n{background: transparent;}
.css-q0xxaj {color: rgb(135 134 247);}
.css-13fz1jm {color: rgb(119 124 252);}
.css-1f84q7v {background-image: linear-gradient(to right, rgb(37 62 255), rgb(79 142 255));}
.css-1yhasuw {color: #c1c9ff;}
.css-11o5hw8 svg{color: #88b1ed !important;}
.css-xl71ch svg{color: #88b1ed !important;}
</style>
<style>.OTHER{}
.css-1fghc3k{background: 0;}
.css-wd8hou {color: #0069ff;}
.Btn2-purple:before{background-color: rgb(223 230 244 / 63%);}
.dark .react-select__menu, .colored .react-select__menu, .transparent .react-select__menu, .react-select__menu-portal .react-select__menu { background: #349df97a; border: none; box-shadow: none; backdrop-filter: brightness(80%);}
.dark .react-select__option, .colored .react-select__option, .transparent .react-select__option, .react-select__menu-portal .react-select__option {color: #3046a6;}
.dark .react-select__option--is-selected, .colored .react-select__option--is-selected, .transparent .react-select__option--is-selected, .react-select__menu-portal .react-select__option--is-selected { background-color: rgb(217 219 240 / 69%); color: #1006d4;}
.dark .react-select__option--is-focused, .colored .react-select__option--is-focused, .transparent .react-select__option--is-focused, .react-select__menu-portal .react-select__option--is-focused {background-color: rgb(31 50 253 / 80%); color: white;}
.css-8mmkcg {fill: rgb(30 72 250); stroke: rgb(13 40 229);}
.transparent .react-select__control {background: #060e56bf; border-radius: 40px; height: 40px; border: 0;}
.css-1n2in4t svg{color: #f2f3ff99 !important;}
</style>
<style>.EXTRANEW{}
.css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] {color: #123dfd;}
.css-i3ef4m{border-color: transparent; background: #bfc5d28a;}
.css-1y3jyt3 {bottom: 0px; height: 2px; background: #0000ff61; box-shadow: none;}
</style>
<style>.CARD{}
.css-0 {border-radius: 0px !important; background: none !important;}
.css-1gg9wg4, .css-1sxhvxh, .css-12vfojg, .css-dltla, .css-1jf56se, .css-19n2nzy {background: transparent;}
.css-1s5evre {background-color: #000e35db; border: 1px solid #0014ff; border-radius: 0; gap: 0;}
.css-1m151rf{opacity: 0;}
.css-nlxhw4 {background: #000022b8; position: absolute; z-index: 10; width: 100%;}
.css-zgqw37 {text-align: center; color: rgb(255, 253, 247); letter-spacing: 0.5px; transition: letter-spacing 0.3s ease, transform 0.3s ease;}
.css-1sxhvxh:hover .css-zgqw37 {letter-spacing: 2px; transform: translateY(-5%);}
.css-1lgnt2x {opacity: 0; margin-top: 0; margin-bottom: 0;}
.css-1m0lwfp{height: 0;}
.css-1q7rmf0 img{ height: 100%; border-radius: 0;}
.css-1sxhvxh, .css-1q7rmf0{height: 450px; border-radius: 0;}
.css-wexxj8 {background: rgb(0 12 255 / 62%);}
.css-1ylu7un{filter: hue-rotate(244deg);}
.css-k1urot{justify-content: center;}
.css-19h42zx {background: rgb(1 0 33 / 67%); backdrop-filter: blur(1px) brightness(0.5);}
.css-15p9u6a {color: rgb(247, 134, 244);}
.css-4ofde4 {padding: 0; margin: 0; position: absolute; bottom: calc(50% - 50px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(calc(100% + 50px)) scale(1);}
.css-1sxhvxh:hover .css-4ofde4 {opacity: 1; transform: translateY(-20px) scale(0.9);}
.css-199gcrh {width: 100%; position: absolute; top: 50%; transform: translateY(calc(-100% + 100px)); padding: 10%; text-align: center; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;}
.css-1sxhvxh:hover .css-199gcrh{opacity: 1; transform: translateY(30px);}
.css-1q7rmf0 {transition: filter 0.3s ease;}
.css-1sxhvxh:hover .css-1q7rmf0 {filter: brightness(35%);}
</style>
<style>
.css-y9k5u7{top: 24vh; left: 50%; width: 100%; transform: translateX(-60px); position: absolute; margin: 0; gap: 1.8rem;}
.Btn{width: 120px; background: none; height: 25px;}
.Btn span{font-family: "Raleway";}
.Btn:before {content: ""; color: #ffd277; width: 100%; height: 100%; background: #c2d9ff87; border-radius: 30px;}
.FranOFranTheme{}
.css-15w88gn{height: 25px; border-radius: 12px; background: #c2d9ff87; font-family: "Raleway";}
@media (max-width: 1000px) {
.css-y9k5u7 {transform: translateX(-45px); position: absolute; top: 24vh; left: 50%; width: 100%; margin: 0; gap: 1vw;}
.Btn {width: 90px; background: none; height: 25px;}
.Btn:before {content: ""; color: #ffd277; width: 100%; height: 100%; transition-duration: 1s; background: #c2d9ff87; border-radius: 12px;}
.Btn span {font-family: "Raleway"; font-size: 0.8rem;}
.css-15w88gn {position: absolute; left: calc(30% + 3vw); font-size: 0.8rem; height: 25px; width: 90px; border-radius: 12px; background: #c2d9ff87; font-family: "Raleway";}}
</style>
<style>.TOP_BLOCKS{}
.topBlocks {width: 90%; left: 5%; top: 1rem; gap: 1rem; position: absolute; display: flex; justify-content: center;}
.topBlocks h4 {display: flex; text-align: center; font-size: 0.6rem; background: #001231b0; padding: 2% 3%; color: white; text-shadow: 0 0 5px rgb(97 107 249), 0 0 10px rgb(44 55 243); border-radius: 30px; align-items: center;}
</style>
<style>.IMAGES{}
.BannerImage {display: block; margin-left: auto; margin-right: auto; object-fit: cover; width: 90%; border-radius: 50px; height: 20px;}
.BigBannerImage {margin-left: auto; margin-right: auto; display: block; object-fit: cover; padding: 1em 0; width: 90%; height: 20vh;}
</style>
<style>.LAST_PARAGRAPHS{}
.bottomContainer{width: 90%; margin-left: auto; margin-right: auto;}
.bottomContainer h4{font-size: 1rem; text-align: center; margin: 1em 0;}
</style>
<style>.MENUS{}
.custom-dropdown-summary {
font-size: 1.4rem;
color: #d7d8ef;
text-align: center;
text-shadow: 0 0 5px rgb(97 107 249), 0 0 10px rgb(44 55 243);
display: flex;
font-family: "Raleway";
justify-content: center;
align-content: center;
align-items: center;
padding: 5px;
}
.custom-dropdown {
border: solid 1px #0f50ff59;
border-radius: 50px;
color: #c6e8f3;
font-family: "Lato";
margin: 1em auto 1em auto;
background: #1263e726;
overflow: hidden;
max-height: 50px;
width: 90%;
transition: max-height 0.6s ease-out, border-radius 0.3s ease-out;
}
.custom-dropdown[open] {max-height: 500px; border-radius: 20px;}
.custom-dropdown ul {padding: 2em; opacity: 0; transition: opacity 0.6s ease-out; transition-delay: 0.1s;}
.custom-dropdown[open] ul {opacity: 1; transition-delay: 0s;}
.custom-dropdown li {margin-bottom: 1em; position: relative; list-style-type: disc; font-family: "Raleway";}
</style><div class="topBlocks">
<h4> Pronouns </h4>
<h4> Age </h4>
<h4> Time Fuse </h4>
<h4> Language + Language </h4>
</div>
<details class="custom-dropdown">
<summary class="custom-dropdown-summary">About Bots</summary>
<ul>
<li>YOU REPLACE THESE ITH YOUR TEXT</li>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is another placeholder line</li>
<li>This is a placeholder line</li>
</ul>
</details>
<img src="https://files.catbox.moe/585lxs.jpg" alt="←REPLACE THE LINK WITH YOUR FIRST THIN BANNER" class="BannerImage">
<details class="custom-dropdown">
<summary class="custom-dropdown-summary">Series</summary>
<ul>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is another placeholder line</li>
<li>This is a placeholder line</li>
</ul>
</details>
<img src="https://files.catbox.moe/585lxs.jpg" alt="←REPLACE THE LINK WITH YOUR SECOND THIN BANNER" class="BannerImage">
<details class="custom-dropdown">
<summary class="custom-dropdown-summary">Fellow Creators</summary>
<ul>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is a placeholder line</li>
<li>This is another placeholder line</li>
<li>This is a placeholder line</li>
</ul>
</details>
<img src="https://files.catbox.moe/acqcya.jpg" alt="←REPLACE THE LINK WITH YOUR BIG IMAGE BOTTOM" class="BigBannerImage">
<div class="bottomContainer">
<h4>This is a placeholder text. feel free to replace it with whatever you want!</h4>
<h4>This is another paragraph. You can add more if you want, just follow the HTLM format</h4>
</div>
<style>
.css-1ciz3n {padding: 0.1em 0.6em; position: absolute; top: 24vh; left: 25%; transform: translateX(-50%); font-size: 1rem; color: white; background: #c2d9ff87; border-radius: 12px; font-family: "Raleway";}
@media (max-width: 1000px){
.css-1ciz3n {display: flex; height: 25px; left: 15vw; font-size: 0.8rem; align-items: center;}}
.css-wjj1lc {font-size: 1rem; color: #1916e2; font-family: "Cardo"; mix-blend-mode: color-dodge; transform: translateY(-34vh);}
</style>
<style>.BASIC{}
.css-1o7tvz2{z-index: 1000;}
.css-0{background: transparent; border-radius: 0;}
.css-15vqpxh{background: #000000;}
.css-1uodvt1 {flex-direction: column; justify-content: center; width: 100%;}
.css-18bnokj {width: 100%; height: 100%; border-radius: 0;}
.css-79elbk {position: relative; width: 100%; height: 35vh; mask-image: linear-gradient(to bottom, black 50%, transparent 100%);}
.css-70qvj9 h2 {position: absolute; font-size: 4em; transform: translateX(-50%); font-family: "Cardo"; text-shadow: 0 0 5px rgb(97 107 249), 0 0 10px rgb(44 55 243); top: 30vh; left: 50%;}
.css-8g8ihq{align-items: center;}
.css-hjkukh{transform: translateY(2em);}
.css-1bn1yyx{margin-top: 5%;}
.css-1x04uxb {position: absolute;left: 0; top: 15vh; z-index: 10000;}
@media (max-width: 1000px) {.css-70qvj9 h2 {font-size: 10vw;} .css-hjkukh{transform: translateY(4vw);}}
.glow-logo {color: #29d780; background: #06064978;}
.css-1knepg6 {color: #678bff;}
.css-bda9ez {color: #c7ccff;}
.glow-on-hover:after {background: rgb(0 13 46 / 79%);}
.glow-on-hover:before {background: none;}
a:hover {color: #464ce4;}
.css-11bqp4r {background: rgb(0 22 39 / 85%);}
.css-cizl7n{background: transparent;}
.css-q0xxaj {color: rgb(135 134 247);}
.css-13fz1jm {color: rgb(119 124 252);}
.css-1f84q7v {background-image: linear-gradient(to right, rgb(37 62 255), rgb(79 142 255));}
.css-1yhasuw {color: #c1c9ff;}
.css-11o5hw8 svg{color: #88b1ed !important;}
.css-xl71ch svg{color: #88b1ed !important;}
</style>
<style>.OTHER{}
.css-1fghc3k{background: 0;}
.css-wd8hou {color: #0069ff;}
.Btn2-purple:before{background-color: rgb(223 230 244 / 63%);}
.dark .react-select__menu, .colored .react-select__menu, .transparent .react-select__menu, .react-select__menu-portal .react-select__menu { background: #349df97a; border: none; box-shadow: none; backdrop-filter: brightness(80%);}
.dark .react-select__option, .colored .react-select__option, .transparent .react-select__option, .react-select__menu-portal .react-select__option {color: #3046a6;}
.dark .react-select__option--is-selected, .colored .react-select__option--is-selected, .transparent .react-select__option--is-selected, .react-select__menu-portal .react-select__option--is-selected { background-color: rgb(217 219 240 / 69%); color: #1006d4;}
.dark .react-select__option--is-focused, .colored .react-select__option--is-focused, .transparent .react-select__option--is-focused, .react-select__menu-portal .react-select__option--is-focused {background-color: rgb(31 50 253 / 80%); color: white;}
.css-8mmkcg {fill: rgb(30 72 250); stroke: rgb(13 40 229);}
.transparent .react-select__control {background: #060e56bf; border-radius: 40px; height: 40px; border: 0;}
.css-1n2in4t svg{color: #f2f3ff99 !important;}
</style>
<style>.EXTRANEW{}
.css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] {color: #123dfd;}
.css-i3ef4m{border-color: transparent; background: #bfc5d28a;}
.css-1y3jyt3 {bottom: 0px; height: 2px; background: #0000ff61; box-shadow: none;}
</style>
<style>.CARD{}
.css-0 {border-radius: 0px !important; background: none !important;}
.css-1gg9wg4, .css-1sxhvxh, .css-12vfojg, .css-dltla, .css-1jf56se, .css-19n2nzy {background: transparent;}
.css-1s5evre {background-color: #000e35db; border: 1px solid #0014ff; border-radius: 0; gap: 0;}
.css-1m151rf{opacity: 0;}
.css-nlxhw4 {background: #000022b8; position: absolute; z-index: 10; width: 100%;}
.css-zgqw37 {text-align: center; color: rgb(255, 253, 247); letter-spacing: 0.5px; transition: letter-spacing 0.3s ease, transform 0.3s ease;}
.css-1sxhvxh:hover .css-zgqw37 {letter-spacing: 2px; transform: translateY(-5%);}
.css-1lgnt2x {opacity: 0; margin-top: 0; margin-bottom: 0;}
.css-1m0lwfp{height: 0;}
.css-1q7rmf0 img{ height: 100%; border-radius: 0;}
.css-1sxhvxh, .css-1q7rmf0{height: 450px; border-radius: 0;}
.css-wexxj8 {background: rgb(0 12 255 / 62%);}
.css-1ylu7un{filter: hue-rotate(244deg);}
.css-k1urot{justify-content: center;}
.css-19h42zx {background: rgb(1 0 33 / 67%); backdrop-filter: blur(1px) brightness(0.5);}
.css-15p9u6a {color: rgb(247, 134, 244);}
.css-4ofde4 {padding: 0; margin: 0; position: absolute; bottom: calc(50% - 50px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(calc(100% + 50px)) scale(1);}
.css-1sxhvxh:hover .css-4ofde4 {opacity: 1; transform: translateY(-20px) scale(0.9);}
.css-199gcrh {width: 100%; position: absolute; top: 50%; transform: translateY(calc(-100% + 100px)); padding: 10%; text-align: center; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;}
.css-1sxhvxh:hover .css-199gcrh{opacity: 1; transform: translateY(30px);}
.css-1q7rmf0 {transition: filter 0.3s ease;}
.css-1sxhvxh:hover .css-1q7rmf0 {filter: brightness(35%);}
</style>
<style>
.css-y9k5u7{top: 24vh; left: 50%; width: 100%; transform: translateX(-60px); position: absolute; margin: 0; gap: 1.8rem;}
.Btn{width: 120px; background: none; height: 25px;}
.Btn span{font-family: "Raleway";}
.Btn:before {content: ""; color: #ffd277; width: 100%; height: 100%; background: #c2d9ff87; border-radius: 30px;}
.FranOFranTheme{}
.css-15w88gn{height: 25px; border-radius: 12px; background: #c2d9ff87; font-family: "Raleway";}
@media (max-width: 1000px) {
.css-y9k5u7 {transform: translateX(-45px); position: absolute; top: 24vh; left: 50%; width: 100%; margin: 0; gap: 1vw;}
.Btn {width: 90px; background: none; height: 25px;}
.Btn:before {content: ""; color: #ffd277; width: 100%; height: 100%; transition-duration: 1s; background: #c2d9ff87; border-radius: 12px;}
.Btn span {font-family: "Raleway"; font-size: 0.8rem;}
.css-15w88gn {position: absolute; left: calc(30% + 3vw); font-size: 0.8rem; height: 25px; width: 90px; border-radius: 12px; background: #c2d9ff87; font-family: "Raleway";}}
</style>
<style>.TOP_BLOCKS{}
.topBlocks {width: 90%; left: 5%; top: 1rem; gap: 1rem; position: absolute; display: flex; justify-content: center;}
.topBlocks h4 {display: flex; text-align: center; font-size: 0.6rem; background: #001231b0; padding: 2% 3%; color: white; text-shadow: 0 0 5px rgb(97 107 249), 0 0 10px rgb(44 55 243); border-radius: 30px; align-items: center;}
</style>
<style>.IMAGES{}
.BannerImage {display: block; margin-left: auto; margin-right: auto; object-fit: cover; width: 90%; border-radius: 50px; height: 20px;}
.BigBannerImage {margin-left: auto; margin-right: auto; display: block; object-fit: cover; padding: 1em 0; width: 90%; height: 20vh;}
</style>
<style>.LAST_PARAGRAPHS{}
.bottomContainer{width: 90%; margin-left: auto; margin-right: auto;}
.bottomContainer h4{font-size: 1rem; text-align: center; margin: 1em 0;}
</style>
<style>.MENUS{}
.custom-dropdown-summary {
font-size: 1.4rem;
color: #d7d8ef;
text-align: center;
text-shadow: 0 0 5px rgb(97 107 249), 0 0 10px rgb(44 55 243);
display: flex;
font-family: "Raleway";
justify-content: center;
align-content: center;
align-items: center;
padding: 5px;
}
.custom-dropdown {
border: solid 1px #0f50ff59;
border-radius: 50px;
color: #c6e8f3;
font-family: "Lato";
margin: 1em auto 1em auto;
background: #1263e726;
overflow: hidden;
max-height: 50px;
width: 90%;
transition: max-height 0.6s ease-out, border-radius 0.3s ease-out;
}
.custom-dropdown[open] {max-height: 500px; border-radius: 20px;}
.custom-dropdown ul {padding: 2em; opacity: 0; transition: opacity 0.6s ease-out; transition-delay: 0.1s;}
.custom-dropdown[open] ul {opacity: 1; transition-delay: 0s;}
.custom-dropdown li {margin-bottom: 1em; position: relative; list-style-type: disc; font-family: "Raleway";}
</style>Container Open
On Mobile
Bot card animation
Last updated