scroll down for html and style codes!
IMPORTANT PLEASE insert this code into the "about me" editor within settings on janitor.ai for the layout to work properly, otherwise the comments will be removed and the layout will break upon refreshing the page.
OR delete all the green text <!-- that looks like this --> in the HTML section and it will work.
Janitor's sanitization system is dumb and weird; I wish I could change it!
OR delete all the green text <!-- that looks like this --> in the HTML section and it will work.
Janitor's sanitization system is dumb and weird; I wish I could change it!
HTML
<div class="css-layout-by-crowbirdie">
<div class="main-box">
<div class="new-username">
<div class="inner-username">USERNAME HERE</div>
</div>
<div class="picture-section">
<div class="picture-inner">
<!-- BIG LEFT IMAGE GOES HERE!! -->
<img src="https://i.imgur.com/ADYlfAU.png" alt="left image">
</div>
</div><div class="content-section">
<div class="personal-name">TOP NAME</div>
<div class="status-section">
status? <br>
pronouns? <br>
whatever you want!
</div>
<!-- BELOW ARE THE VARIOUS CIRCLE LINKS WITH THEIR PICTURES - just replace "google.com" -->
<div class="link-section">
<div class="link-pic">
<div class="link-img-wrap">
<a href="google.com"><img src="https://i.imgur.com/X8QNoZk.png"></a>
</div>
</div>
<div class="link-pic">
<div class="link-img-wrap">
<a href="google.com"><img src="https://i.imgur.com/X8QNoZk.png"></a>
</div>
</div>
<div class="link-pic">
<div class="link-img-wrap">
<a href="google.com"><img src="https://i.imgur.com/X8QNoZk.png"></a>
</div>
</div>
</div>
<!-- . -->
<!-- . -->
<div class="content-large-scroll">
This is the text that goes into the large scroll!! don't be afraid to put as much text as you'd like here, as it will scroll endlessly.
</div>
<!-- . -->
<!-- . -->
<div class="layout-by-crowbirdie">
<div class="link-credit"><a href="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie">LAYOUT BY CROWBIRDIE</a></div>
<a href="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie">
<!-- IMAGE BELOW IS THE ONE BENEATH THE CROWBIRDIE CREDIT TEXT -->
<img src="https://i.imgur.com/X8QNoZk.png">
</a>
</div>
<div class="scroll-message">scroll right →</div>
<!-- . -->
<!-- . -->
<!-- CREATOR SECTION BELOW; I separated them, so feel free to copy from -- c -- to -- e -- and paste after whichever -- e -- if you want more creators! just make sure to paste them before "end of creator section" and you'll be good! -->
<div class="creator-container">
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- end of creator section -->
</div>
</div>
</div>
</div>
<div class="main-box">
<div class="new-username">
<div class="inner-username">USERNAME HERE</div>
</div>
<div class="picture-section">
<div class="picture-inner">
<!-- BIG LEFT IMAGE GOES HERE!! -->
<img src="https://i.imgur.com/ADYlfAU.png" alt="left image">
</div>
</div><div class="content-section">
<div class="personal-name">TOP NAME</div>
<div class="status-section">
status? <br>
pronouns? <br>
whatever you want!
</div>
<!-- BELOW ARE THE VARIOUS CIRCLE LINKS WITH THEIR PICTURES - just replace "google.com" -->
<div class="link-section">
<div class="link-pic">
<div class="link-img-wrap">
<a href="google.com"><img src="https://i.imgur.com/X8QNoZk.png"></a>
</div>
</div>
<div class="link-pic">
<div class="link-img-wrap">
<a href="google.com"><img src="https://i.imgur.com/X8QNoZk.png"></a>
</div>
</div>
<div class="link-pic">
<div class="link-img-wrap">
<a href="google.com"><img src="https://i.imgur.com/X8QNoZk.png"></a>
</div>
</div>
</div>
<!-- . -->
<!-- . -->
<div class="content-large-scroll">
This is the text that goes into the large scroll!! don't be afraid to put as much text as you'd like here, as it will scroll endlessly.
</div>
<!-- . -->
<!-- . -->
<div class="layout-by-crowbirdie">
<div class="link-credit"><a href="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie">LAYOUT BY CROWBIRDIE</a></div>
<a href="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie">
<!-- IMAGE BELOW IS THE ONE BENEATH THE CROWBIRDIE CREDIT TEXT -->
<img src="https://i.imgur.com/X8QNoZk.png">
</a>
</div>
<div class="scroll-message">scroll right →</div>
<!-- . -->
<!-- . -->
<!-- CREATOR SECTION BELOW; I separated them, so feel free to copy from -- c -- to -- e -- and paste after whichever -- e -- if you want more creators! just make sure to paste them before "end of creator section" and you'll be good! -->
<div class="creator-container">
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- c -->
<div class="creator-pic">
<div class="creator-name">name here</div>
<a href="google.com"><img src="https://i.imgur.com/1IpUIjw.png"></a>
</div>
<!-- e -->
<!-- end of creator section -->
</div>
</div>
</div>
</div>
STYLE
<style>
/* ------LEFT SECTION------ */
/* ---LARGE LEFT IMAGE---*/
.picture-section {
width: 45%;
height: 100%;
position: relative;
border: solid .2vw black;
}
.picture-inner {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.picture-inner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% -10%; /*movement of the image*/
transform: scale(1.3); /*size of image*/
transform-origin: center;
}
/* --- */
/* --- */
/* ---LEFT USERNAME--- */
.inner-username { /*adjust this to make it look different!*/
writing-mode: vertical-lr;
text-orientation: mixed;
font-size: 4.1vw;
transform: rotate(-180deg);
letter-spacing: 4px;
font-family: times;
position: absolute;
left: 1vw;
top: 0;
text-shadow: 1px 1px 5px white;
}
.new-username {
height: 100%;
width: 10%;
position: relative;
}
/* --- */
/* --- */
/* ---JANITOR PROFILE ADJUSTMENTS; essentially to make the default profile div bigger to accommodate and make the layout look nice. I suggest not touching this unless you know what you're doing--- */
.profile-page-flex {
max-width: 100vw !important;
width: 100vw !important;
gap: 0;
position: relative;
}
.profile-uc-background-flex {
max-width: 60% !important;
width: 60% !important;
padding: 1% !important;
position: relative;
}
.profile-page-container-flex-box {
max-width: 40% !important;
width: 40% !important;
padding-right: 2%;
position: relative;
}
.pp-uc-background:hover {
box-shadow: none !important;
}
/* --- */
/* --- */
/* ---JANITOR FOLLOWERS DIV; feel free to mess with these as you desire!--- */
.profile-info-hstack { /*position of the followers, username etc. div*/
position: absolute;
z-index: 500;
gap: 0 !important;
left: 6.5vw;
}
.pp-uc-avatar-container { /*og profile pic; currently hidden*/
display: none;
}
.profile-info-stack-inner-flex { /*og username; currently hidden*/
display: none;
}
.pp-uc-member-since { /*member since; currently hidden*/
display: none;
}
.chakra-button.css-1x04uxb { /*edit profile button*/
border: none;
color: white;
position: absolute;
left: 9vw;
top: -.2vw;
opacity: .5;
}
.pp-uc-followers-count { /*follower count*/
font-family: times;
text-transform: uppercase;
}
/* ------END OF LEFT SECTION------ */
</style>
<style>
/* ------RIGHT SECTION------ */
.personal-name { /* ---VERY TOP NAME--- */
height: 8%;
width: 100%;
font-size: 3.2vw;
text-align: center;
align-content: center;
justify-content: center;
font-family: times;
font-weight: bold;
line-height: 1;
border-bottom: solid 2px black;
}
.status-section { /* ---VERY TOP INTRO SCROLL; pronouns/status/timezone/etc.!--- */
background: grey;
height: 9%;
width: 100%;
overflow-y: auto;
padding: 1%;
border-bottom: solid 2px black;
font-family: times;
text-align: center;
font-size: 1.1vw;
}
/* --- */
/* --- */
/* ---CIRCLE LINKS SECTION--- */
.link-img-wrap img { /* CIRCLE LINK IMAGES */
display: block;
width: 110%;
height: 110%;
object-fit: cover;
transform:
translate(var(--pan-x, -22%), var(--pan-y, 0%))
scale(var(--zoom, 1.7)); /*the sizing and positioning of the circle link images!!*/
transform-origin: center;
will-change: transform;
}
.link-section {
height: 20%;
height: 20%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 2%;
padding: 2%;
padding-bottom: 2%;
margin-bottom: 1%;
overflow: hidden;
position: relative;
}
.link-pic {
width: 28%;
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
position: relative;
border: solid 2px black;
transition: all 0.5s ease;
margin: auto;
}
.link-pic:hover {
transform: scale(1.1);
}
.link-img-wrap {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
}
/* ---end of circle links section--- */
/* --- */
/* --- */
.content-large-scroll { /* ---MIDDLE TEXT BOX SCROLL--- */
height: 30%;
width: 100%;
overflow-y: auto;
background: grey;
padding: 1%;
border-bottom: solid .4vw black;
font-family: times;
font-size: 1vw;
text-align: justify;
}
/* --- */
/* --- */
/* ----CROWBIRDIE CREDIT IMAGE; this is the image that is beneath the "layout by crowbirdie" text; feel free to change the image itself if you so desire!---- */
.layout-by-crowbirdie img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% 28%; /*positioning*/
transform: scale(1); /*size adjustment*/
transform-origin: center;
}
/* --- */
/* --- */
/* ----FELLOW CREATOR PICTURES SCROLL SECTION---- */
.creator-pic {
flex: 0 0 8vw;
height: 100%;
position: relative;
overflow: hidden;
border: solid 3px black;
}
.creator-pic img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
transform: scale(1.9) translateX(10%) translateY(19%); /*this alters the position/sizing of the image chosen for each creator pic*/
will-change: transform;
}
.creator-container::-webkit-scrollbar {
display: none;
}
.creator-name { /*the name of the desired creator that shows up upon hovering over the creator pics!*/
background: black;
color: white;
font-family: times;
font-variant: all-small-caps;
line-height: 8%;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transform: translateY(50%);
opacity: 0;
transition: transform 1.3s ease, opacity 1.3s ease;
z-index: 500;
overflow: hidden;
}
.creator-pic:hover .creator-name {
transform: translateY(0%);
opacity: 1;
}
/* ----end of creator pic section---- */
/* ------END OF RIGHT SECTION------ */
</style>
<style>
/* --- containers for building the layout!! don't touch unless you know what you're doing c: ---*/
.main-box {
display: flex;
flex-direction: row;
width: 100%;
height: 40vw; /*height of the entire layout*/
position: relative;
filter: drop-shadow(1px 1px 6px black);
}
.content-section {
width: 45%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.layout-by-crowbirdie {
height: 13%;
width: 100%;
background: palevioletred;
position: relative;
overflow: hidden;
display: flex;
margin-top: -4%;
margin-bottom: -4%;
filter: drop-shadow(1px 1px 7px black);
border-top: solid .2vw black;
border-bottom: solid .2vw black;
z-index: 2;
Box-shadow: 0 6px 10px -4px rgb(0 0 0 / 77%);
}
.link-credit a {
color: white;
filter: drop-shadow(1px 1px 6px black);
text-shadow: 1px 1px 5px black;
opacity: .5;
}
.layout-by-crowbirdie a {
width: 100%;
height: 100%;
}
.creator-container {
position: relative;
height: 25%;
width: 100%;
justify-content: center;
position: relative;
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
min-width: 0;
align-self: stretch;
justify-content: flex-start;
align-items: stretch;
gap: .6vw;
padding-left: 2%;
padding-right: 1%;
z-index: 1;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .links {
display: none;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .css-layout-by-crowbirdie::before {
content: "please include credit!";
color: red;
font-size: 5vw;
width: 100%;
display: block;
text-align: center;
}
.link-credit {
position: absolute;
z-index: 5;
top: 33%;
left: 2%;
font-size: 1.5vw;
letter-spacing: 5px;
width: 100%;
height: 100%;
font-family: times;
filter: drop-shadow(1px 1px 6px black);
text-shadow: 1px 1px 5px black;
}
.scroll-message {
position: absolute;
bottom: -3%;
right: 1.8%;
z-index: 10;
font-family: times;
font-variant: all-small-caps;
opacity: .3;
font-size: 1vw;
}
</style>
<style>
/* ----MOBILE OPTIMIZATIONS; feel free to modify these if you feel comfortable doing so, as it appears slightly different for everyone's screens due to size---- */
@media (max-width: 768px) {
.pp-uc-about-me {
height: 165vw !important; /*height of the profile div layout*/
}
.main-box {
flex-direction: column;
align-items: center;
height: 120vw; /*height of the layout, itself*/
}
.picture-section { /*the top image*/
width: 92%;
height: 47vw;
}
.picture-inner img { /*positioning and sizing of the top image*/
object-position: -50% 31%;
transform: scale(1.2) scaleX(-1);
}
.content-section {
width: 83%;
}
.personal-name { /*top name*/
height: 10%;
font-size: 8.2vw;
}
.status-section {
height: 7%;
font-size: 4vw;
}
.content-large-scroll {
font-size: 3vw;
height: 23%;
padding-bottom: 9%;
}
.creator-container {
height: 45vw !important;
gap: 2.6vw !important;
padding: 0 !important;
}
.creator-pic {
flex: 0 0 26vw;
}
.layout-by-crowbirdie {
height: 14%;
}
.link-credit {
top: 33%;
left: 6%;
font-size: 3.8vw;
}
.scroll-message {
bottom: -4%;
right: 0;
font-size: 4vw;
}
.profile-page-container-flex-box { /*this fixes the bot cards so they're not squished*/
max-width: 100% !important;
width: 100% !important;
padding: 0 2%;
position: relative;
}
}
</style>
/* ------LEFT SECTION------ */
/* ---LARGE LEFT IMAGE---*/
.picture-section {
width: 45%;
height: 100%;
position: relative;
border: solid .2vw black;
}
.picture-inner {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.picture-inner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% -10%; /*movement of the image*/
transform: scale(1.3); /*size of image*/
transform-origin: center;
}
/* --- */
/* --- */
/* ---LEFT USERNAME--- */
.inner-username { /*adjust this to make it look different!*/
writing-mode: vertical-lr;
text-orientation: mixed;
font-size: 4.1vw;
transform: rotate(-180deg);
letter-spacing: 4px;
font-family: times;
position: absolute;
left: 1vw;
top: 0;
text-shadow: 1px 1px 5px white;
}
.new-username {
height: 100%;
width: 10%;
position: relative;
}
/* --- */
/* --- */
/* ---JANITOR PROFILE ADJUSTMENTS; essentially to make the default profile div bigger to accommodate and make the layout look nice. I suggest not touching this unless you know what you're doing--- */
.profile-page-flex {
max-width: 100vw !important;
width: 100vw !important;
gap: 0;
position: relative;
}
.profile-uc-background-flex {
max-width: 60% !important;
width: 60% !important;
padding: 1% !important;
position: relative;
}
.profile-page-container-flex-box {
max-width: 40% !important;
width: 40% !important;
padding-right: 2%;
position: relative;
}
.pp-uc-background:hover {
box-shadow: none !important;
}
/* --- */
/* --- */
/* ---JANITOR FOLLOWERS DIV; feel free to mess with these as you desire!--- */
.profile-info-hstack { /*position of the followers, username etc. div*/
position: absolute;
z-index: 500;
gap: 0 !important;
left: 6.5vw;
}
.pp-uc-avatar-container { /*og profile pic; currently hidden*/
display: none;
}
.profile-info-stack-inner-flex { /*og username; currently hidden*/
display: none;
}
.pp-uc-member-since { /*member since; currently hidden*/
display: none;
}
.chakra-button.css-1x04uxb { /*edit profile button*/
border: none;
color: white;
position: absolute;
left: 9vw;
top: -.2vw;
opacity: .5;
}
.pp-uc-followers-count { /*follower count*/
font-family: times;
text-transform: uppercase;
}
/* ------END OF LEFT SECTION------ */
</style>
<style>
/* ------RIGHT SECTION------ */
.personal-name { /* ---VERY TOP NAME--- */
height: 8%;
width: 100%;
font-size: 3.2vw;
text-align: center;
align-content: center;
justify-content: center;
font-family: times;
font-weight: bold;
line-height: 1;
border-bottom: solid 2px black;
}
.status-section { /* ---VERY TOP INTRO SCROLL; pronouns/status/timezone/etc.!--- */
background: grey;
height: 9%;
width: 100%;
overflow-y: auto;
padding: 1%;
border-bottom: solid 2px black;
font-family: times;
text-align: center;
font-size: 1.1vw;
}
/* --- */
/* --- */
/* ---CIRCLE LINKS SECTION--- */
.link-img-wrap img { /* CIRCLE LINK IMAGES */
display: block;
width: 110%;
height: 110%;
object-fit: cover;
transform:
translate(var(--pan-x, -22%), var(--pan-y, 0%))
scale(var(--zoom, 1.7)); /*the sizing and positioning of the circle link images!!*/
transform-origin: center;
will-change: transform;
}
.link-section {
height: 20%;
height: 20%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 2%;
padding: 2%;
padding-bottom: 2%;
margin-bottom: 1%;
overflow: hidden;
position: relative;
}
.link-pic {
width: 28%;
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
position: relative;
border: solid 2px black;
transition: all 0.5s ease;
margin: auto;
}
.link-pic:hover {
transform: scale(1.1);
}
.link-img-wrap {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
}
/* ---end of circle links section--- */
/* --- */
/* --- */
.content-large-scroll { /* ---MIDDLE TEXT BOX SCROLL--- */
height: 30%;
width: 100%;
overflow-y: auto;
background: grey;
padding: 1%;
border-bottom: solid .4vw black;
font-family: times;
font-size: 1vw;
text-align: justify;
}
/* --- */
/* --- */
/* ----CROWBIRDIE CREDIT IMAGE; this is the image that is beneath the "layout by crowbirdie" text; feel free to change the image itself if you so desire!---- */
.layout-by-crowbirdie img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% 28%; /*positioning*/
transform: scale(1); /*size adjustment*/
transform-origin: center;
}
/* --- */
/* --- */
/* ----FELLOW CREATOR PICTURES SCROLL SECTION---- */
.creator-pic {
flex: 0 0 8vw;
height: 100%;
position: relative;
overflow: hidden;
border: solid 3px black;
}
.creator-pic img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
transform: scale(1.9) translateX(10%) translateY(19%); /*this alters the position/sizing of the image chosen for each creator pic*/
will-change: transform;
}
.creator-container::-webkit-scrollbar {
display: none;
}
.creator-name { /*the name of the desired creator that shows up upon hovering over the creator pics!*/
background: black;
color: white;
font-family: times;
font-variant: all-small-caps;
line-height: 8%;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transform: translateY(50%);
opacity: 0;
transition: transform 1.3s ease, opacity 1.3s ease;
z-index: 500;
overflow: hidden;
}
.creator-pic:hover .creator-name {
transform: translateY(0%);
opacity: 1;
}
/* ----end of creator pic section---- */
/* ------END OF RIGHT SECTION------ */
</style>
<style>
/* --- containers for building the layout!! don't touch unless you know what you're doing c: ---*/
.main-box {
display: flex;
flex-direction: row;
width: 100%;
height: 40vw; /*height of the entire layout*/
position: relative;
filter: drop-shadow(1px 1px 6px black);
}
.content-section {
width: 45%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.layout-by-crowbirdie {
height: 13%;
width: 100%;
background: palevioletred;
position: relative;
overflow: hidden;
display: flex;
margin-top: -4%;
margin-bottom: -4%;
filter: drop-shadow(1px 1px 7px black);
border-top: solid .2vw black;
border-bottom: solid .2vw black;
z-index: 2;
Box-shadow: 0 6px 10px -4px rgb(0 0 0 / 77%);
}
.link-credit a {
color: white;
filter: drop-shadow(1px 1px 6px black);
text-shadow: 1px 1px 5px black;
opacity: .5;
}
.layout-by-crowbirdie a {
width: 100%;
height: 100%;
}
.creator-container {
position: relative;
height: 25%;
width: 100%;
justify-content: center;
position: relative;
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
min-width: 0;
align-self: stretch;
justify-content: flex-start;
align-items: stretch;
gap: .6vw;
padding-left: 2%;
padding-right: 1%;
z-index: 1;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .links {
display: none;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .css-layout-by-crowbirdie::before {
content: "please include credit!";
color: red;
font-size: 5vw;
width: 100%;
display: block;
text-align: center;
}
.link-credit {
position: absolute;
z-index: 5;
top: 33%;
left: 2%;
font-size: 1.5vw;
letter-spacing: 5px;
width: 100%;
height: 100%;
font-family: times;
filter: drop-shadow(1px 1px 6px black);
text-shadow: 1px 1px 5px black;
}
.scroll-message {
position: absolute;
bottom: -3%;
right: 1.8%;
z-index: 10;
font-family: times;
font-variant: all-small-caps;
opacity: .3;
font-size: 1vw;
}
</style>
<style>
/* ----MOBILE OPTIMIZATIONS; feel free to modify these if you feel comfortable doing so, as it appears slightly different for everyone's screens due to size---- */
@media (max-width: 768px) {
.pp-uc-about-me {
height: 165vw !important; /*height of the profile div layout*/
}
.main-box {
flex-direction: column;
align-items: center;
height: 120vw; /*height of the layout, itself*/
}
.picture-section { /*the top image*/
width: 92%;
height: 47vw;
}
.picture-inner img { /*positioning and sizing of the top image*/
object-position: -50% 31%;
transform: scale(1.2) scaleX(-1);
}
.content-section {
width: 83%;
}
.personal-name { /*top name*/
height: 10%;
font-size: 8.2vw;
}
.status-section {
height: 7%;
font-size: 4vw;
}
.content-large-scroll {
font-size: 3vw;
height: 23%;
padding-bottom: 9%;
}
.creator-container {
height: 45vw !important;
gap: 2.6vw !important;
padding: 0 !important;
}
.creator-pic {
flex: 0 0 26vw;
}
.layout-by-crowbirdie {
height: 14%;
}
.link-credit {
top: 33%;
left: 6%;
font-size: 3.8vw;
}
.scroll-message {
bottom: -4%;
right: 0;
font-size: 4vw;
}
.profile-page-container-flex-box { /*this fixes the bot cards so they're not squished*/
max-width: 100% !important;
width: 100% !important;
padding: 0 2%;
position: relative;
}
}
</style>