Carrd-Inspired profile layout for janitor.ai

✮ — Carrd-Inspired profile card layout for janitor.ai! — ✮
✮ Original by: @factory_paper on Pinterest!
✮ Adapted for janitor from sracth by: @tigerdropped!

Notes:

- THIS IS ONLY FOR THE PROFILE CARD, not a full profile template, it is compatible with templates for other elements like: Bot Cards or other menus, however, I CAN'T GUARANTEE IT WILL WORK WITH OTHER FULL TEMPLATES.

- Fully responsive, compatible with Desktop (+ ultrawide), Mobile and Tablets!

- You can mix and match any of the present html elements and even add more, but DO NOT and I repeat, DO NOT write outside of the first two columns (<section>) or "new-bio-wrapper" (<article>) ALL your new HTML needs to be contained inside these or else EVERYTHING WILL BREAK.

- DO NOT use the built-in text editor or ALL the CSS will be DELETED.

- The code is fully labelled and hopefully straight-forward to understand where to modify stuff, however using the CSS editor on your profile will REMOVE all the labels I wrote. The alternative is the editor in your profile settings page.

- DO NOT remove the credits footnote, the goal is to reach as many profiles as possible and make the CSS/HTML process easier for everyone. Thanks in advance!

- If you have any questions or find any errors, you can reach me directly on discord: .radicaloptimism (yes, with the period at the start).


✮ — COPY THE CODE BELOW THE LINE — ✮

————————————————————————————————————————————————————————

<section class="headline-bar bar-one">
  <h2>Welcome to somewhere!</h2>
</section>
<section class="headline-bar bar-two">
  <h2>NOTE: This is a template.</h2>
</section>
<section class="column column-one">
  <hr>
  <div class="box-wrapper box-type-one">
    <h3>About you.</h3>
    <div class="box-text-content">
      <p>Hey! You can write something here, so tell the world what you want them to know about you!</p>
      <p>You can make text <strong>bold</strong>. Or <em>italics</em>.</p>
      <h1>Or you can...</h1>
      <h2>Use headings!</h2>
      <h3>There are...</h3>
      <h4>So many!</h4>
      <h5>Six of them.</h5>
      <h6>To be exact.</h6>
    </div>
  </div>
  <div class="box-wrapper box-type-one">
    <h3>Another box title.</h3>
    <div class="box-text-content">
      <p>You have another box here! <strong>Use it wisely...</strong> Or you can even <em>add more boxes!</em> Seriously!</p>
    </div>
  </div>
</section>
<section class="column column-two">
  <div class="box-wrapper box-type-two">
    <h3>What do you like?</h3>
    <div class="box-text-content">
      <p>One, two, three, four...</p>
    </div>
  </div>
  <div class="box-wrapper box-type-two">
    <h3>Dislikes?</h3>
    <div class="box-text-content">
      <p>Four, three, two, one...</p>
    </div>
  </div>
  <hr>
  <div class="clickable-flex-box">
    <a href="#">
      <div class="clickable-icon-wrapper">
        <img src="https://file.garden/aHyZBiS6Z0y3EBK6/yareli.png">
      </div>
      <h4>Item 1</h4>
      <p>Yareli from Warframe!</p>
    </a>
    <a href="#">
      <div class="clickable-icon-wrapper">
        <img src="https://file.garden/aHyZBiS6Z0y3EBK6/seonhee.png">
      </div>
      <h4>Item 2</h4>
      <p>Seonhee from Like a Dragon!</p>
    </a>
    <a href="#">
      <div class="clickable-icon-wrapper">
        <img src="https://file.garden/aHyZBiS6Z0y3EBK6/yareli.png">
      </div>
      <h4>Item 3</h4>
      <p>Yareli from Warframe, again!</p>
    </a>
  </div>
  <div class="column-footer">
    <p>Even more text... You can even add more stuff!</p>
  </div>
</section>
<article class="new-bio-wrapper">
  <section class="headline-bar bar-one">
    <h2>More yapping!</h2>
  </section>
  <section class="two-column-flex-box">
    <div class="column column-left">
      <div class="box-wrapper box-type-two">
        <h3>What do you like?</h3>
        <div class="box-text-content">
          <p>Yeah, even more text...</p>
        </div>
      </div>
      <hr>
      <div class="standalone-image-wrapper">
        <img src="https://file.garden/aHyZBiS6Z0y3EBK6/yareli.png">
      </div>
    </div>
    <div class="column column-right">
      <div class="box-wrapper box-type-one">
        <h3>Yet another box title.</h3>
        <div class="box-text-content">
          <p>You have another box here! <strong>Woah...</strong></p>
          <hr>
          <p>this one has a divider though.... Woah.</p>
        </div>
      </div>
    </div>
  </section>
  <div style="display: none; white-space: pre;">
  - #204907 dark green.
  - #6b845b light green.
  - #fdf9de lighter something beige thing?.
  - #7b6a3e foreground.
  - #999a7b light background.
  - #eaa35a yellowish.
  - #f9f9f9 main white.
  - #181818 main black.
  </div>
</article>

<style>

/* Page fixes for layout to work */
.profile-about-me,
.profile-info-hstack { display: contents; }
#root { background: #181818 !important; }

.profile-page-flex {
  flex-direction: column;
  align-items: center;
}

/* Main profile card container */
.profile-uc-background-flex {
  width: 100%;
  max-width: 1200px;
  padding: 0;
}

/* Even background fix */
.profile-uc-background-flex,
:has(~ .profile-info-wrapper-box),
#root > div,
footer,
main { background: transparent !important; }

/* Initial grid for carrd-like layout */
.profile-info-stack {
  position: relative;
  background: #999a7b;
  border: 4px solid #181818;
  align-items: start;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}

.profile-info-stack > * > * { z-index: 2; }

/* Background for first section */
.profile-info-stack::after {
  content: "";
  background: #fdf9de;
  position: absolute;
  inset: 0;
  border: 4px solid #181818;
  z-index: 1;
  grid-row: 3 / 7;
  grid-column: 1 / -1;
}

/* Bot card container padding fix
.profile-page-container-flex-box {
  padding: 1rem;
} */

/* GRID ITEM ARRANGEMENT & STYLES */
/* APPEAR IN ORDER OF GRID LEFT TO RIGHT AND TOP TO BOTTOM */



/* Headline bars */
/* General style */
.headline-bar {
  grid-column: 1 / -1;
  background-color: #446133;
  border: 4px solid #181818;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
}


body:not(:has([class="credits"])) .chakra-portal::after {
  pointer-events: none;
  content: "I told you not to remove the credits :(";
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  padding: clamp(1rem, 4vw, 2rem);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f9f9f9;
  color: #181818;
  font: 600 clamp(2rem, 5vw, 3rem) Jua, sans-serif;
}

/* First bar specific */
.bar-one {
  order: -6;
  background:
    linear-gradient(to right, transparent 0 calc(50% - 2px), #13280140 0 calc(50% + 2px), transparent 0)
      50% 50% / 24px 24px,
    linear-gradient(transparent 0 calc(50% - 2px), #13280140 0 calc(50% + 2px), transparent 0)
      50% 50% / 24px 24px
    #446133;
}

/* Second bar specific */
.bar-two {
  order: -5;
  border: unset;
}

/* Headline text */
/* General style */
.headline-bar :where(h1, h2, h3, h4, h5, h6, p, span, div)  {
  color: #181818;
  font: 500 1.5rem Jua, sans-serif;
}

/* Bar specific */
.bar-one :where(h1, h2, h3, h4, h5, h6, p, span, div)  {
  /* Will inherit the prior ruleset */
}

.bar-two :where(h1, h2, h3, h4, h5, h6, p, span, div) {
  color: #f9f9f9;
  font: 500 1.5rem Caveat, sans-serif;
}

/* PFP */
/* Container */
.profile-avatar-container {
  padding:
    calc(0.5rem + 4px)
    0
    0
    calc(0.5rem + 4px); /* compensation */
  order: -4;
  grid-row: span 3;
  height: 100%;
  width: 100%;
}

/* Avatar */
.profile-avatar {
  border-radius: 1rem;
  box-shadow: unset;
  height: 100%;
  width: 100%;
  object-fit: cover; /* either cover or contain */
}


/* User info */
/* Container */
.profile-info-stack-inner {
  padding:
    calc(0.5rem + 4px)
    calc(0.5rem + 4px)
    0
    0; /* compensation */
  order: -3;
}

/* Styles */

/* Username */
/* Container */
.profile-info-stack-inner-flex {
  container-type: inline-size;
  justify-content: center;
}

/* Text style */
.profile-title-heading {
  font: 1000 0 'Abril Fatface', serif;
  color: #204907;
  text-shadow: 2px 2px 0 #6b845b;
  text-transform: uppercase;
  font-style: italic;
  line-height: 0.825;
}

.profile-title-heading::after {
  font-size: 11.5cqi; /* ADJUST THE CQI NUMBER UNTIL YOUR USERNAME FITS. IT WILL ADAPT AUTOMATICALLY AFTER THAT. */
  content: "Tigerdropped!";
}


/* Follower count */
/* Container + text style */
.profile-followers-count {
  font: 700 1.25rem Jua, sans-serif;
  color: #181818;
  text-align: center;
}

/* Replacing "followers" */
.profile-followers-count span + span { display: none; }

.profile-followers-count span::after {
  content: " people from somewhere!"; /* leave a space at the start of whatever you write here */
}


/* Badges */
/* Container */

.profile-followers-count + div {
  justify-content: center;
  height: auto;
}


/* Member since */
.profile-member-since-box {
  font: 700 1.25rem Jua, sans-serif;
  color: #181818;
  text-align: center;
}






/* Follow & options button */
/* Container */
.profile-about-me + div {
  order: -2;
  z-index: 5;
  padding-right: calc(0.5rem + 4px);
  width: 100%;
}

/* Flex container */
div:has(> .profile-uc-follow-flex) {
  margin: 0;
  align-items: center;
  flex-flow: column nowrap;
  gap: 0.5rem;
  width: 100%;
}

/* Fixes */
.pp-uc-follow-button::before { display: none; }
div:has(> .pp-uc-follow-button) { display: contents; }

/* General Button style */
.pp-uc-follow-button,
.pp-uc-options-menu {
  width: 100%;
  padding: 0.25rem 0.5rem;
  color: #acb67c;
  border-radius: 1rem;
  background: #204907;
  transition: transform 500ms, background 500ms;
}

/* Button specific background */
.pp-uc-follow-button {

}

.pp-uc-options-menu {
  background: #132801;
}

/* General cursor styles */
:is(.pp-uc-follow-button, .pp-uc-options-menu):is(:hover, :focus, [data-hover], [data-focus]) {
  background: #181818;
  transform: scale(1.025);
  transition: transform 500ms, background 500ms;
}


/* Fixes */
:is(.pp-uc-follow-button, .pp-uc-options-menu) > span + span { display: none; background: #181818; }
:is(.pp-uc-follow-button, .pp-uc-options-menu):is(:active, [data-active]) { transform: unset; }

/* General Text style */
:is(.pp-uc-follow-button, .pp-uc-options-menu) > span {
  font: 600 1.5rem 'Abril Fatface', serif;
  font-style: italic;
  text-align: center;
  letter-spacing: 4px;
  text-transform: lowercase;
}

/* Button specific text style */
.pp-uc-follow-button > span {

}

.pp-uc-options-menu > span {

}

/* Block button fix */

#menu-list-public-profile-block-menu {
  z-index: 100;
}


/* Mixed info containers & style */

/* Divider line style */
.profile-about-me hr {
  border-width: 0;
  height: 4px;
  margin: 0;
  opacity: 1;
  background-color: #0000;
  background-image: linear-gradient(to right, #0000 25%, #eaa35a 0 75%, #0000 0); /* change middle value to change color of dashed lines */
background-position: 50% 50%;
background-size: 2rem 4px; /* adjust 1st value for width of dashed line, make 2nd value match the height of the divider. */
background-repeat: repeat-x;
}

/* Column general style */
.column {
  min-width: 300px;
  flex: 1 1 40%;
  display: flex;
  flex-flow: column;
  color: #181818;
  gap: 0.5rem;
}

/* Column specific relative to non-mobile */
/* Left column */
.column-one {
  padding:
    0
    0
    calc(0.5rem + 4px)
    calc(0.5rem + 4px); /* compensation */
}

.column-two {
  order: -1;
  grid-row: span 2;
  padding:
    0
    calc(0.5rem + 4px)
    calc(0.5rem + 4px)
    0; /* compensation */
}

/* Box styles */
/* General */
.box-wrapper {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  gap: 0.5rem;
}

/* First style */
.box-type-one > h3 {
  font: 600 1.5rem 'Abril Fatface', serif;
  font-style: italic;
  text-align: center;
  letter-spacing: 2px;
  text-transform: lowercase;
  padding: 0.25rem 0.5rem;
  color: #eaa35a;
  border-radius: 1rem;
  background: #204907;
}

/* Second style */
.box-type-two > h3 {
  font: 600 1.5rem 'Jua', sans-serif;
  text-align: left;
  color: #eaa35a;
  border-radius: 1rem;
}

/* Readable text */
/* SIMPLE FIX, DO NOT ADD STYLE TO THIS */
#root .profile-about-me p {
  line-height: 1.2;
  margin: 0;
}

.box-text-content {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
}

.box-text-content :is(h1, h2, h3, h4, h5, h6, p, span, div) {
  font-family: Jua, sans-serif;
}

/* Readable text only (paragraphs) */
.profile-about-me p {
  font: 400 1rem 'Jua', sans-serif;
  color: #181818;
}

.profile-about-me strong {
  font: 1000 1rem 'Jua', sans-serif;
  color: #181818;
}

/* Box for clickable images */
.clickable-flex-box {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.clickable-flex-box > a {
  flex: 1 1 30%;
  display: flex;
  flex-flow: column;
  align-items: stretch;
  color: #181818;
  gap: 0.5rem;
}
.clickable-flex-box > a :is(h1, h2, h3, h4, h5, h6, p, span, div) {
  font-family: Jua;
  text-align: center;
}

.clickable-icon-wrapper {
  overflow: hidden;
  max-height: 200px;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.clickable-icon-wrapper img {
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
}

/* New bio container */
.new-bio-wrapper {
  grid-column: 1 / -1;
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
}

.two-column-flex-box {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #fdf9de;
  border: 4px solid #181818;
}

.standalone-image-wrapper {
  overflow: hidden;
  border-radius: 1rem;
  width: 100%;
  aspect-ratio: 1;
}

.standalone-image-wrapper img {
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
}


/* MEDIA QUERIES FOR RESPONSIVENESS DO NOT MODIFY */
@media only screen and (max-width: 799px) {
  .profile-info-stack {
    grid-template-columns: 100%;
  }

  .profile-info-stack::after {
    grid-row: 3 / 10;
  }
  .profile-avatar-container,
  .profile-info-stack-inner,
  .profile-about-me + div { padding: 0 calc(0.5rem + 4px); }
  .profile-avatar-container { padding-top: calc(0.5rem + 4px); }

  .column-one {
    padding: 0 calc(0.5rem + 4px);
  }
  .column-two {
    order: unset;
    grid-row: unset;
    padding: 0 calc(0.5rem + 4px);
    padding-bottom: calc(0.5rem + 4px);
  }

}

</style>

<!-- You can modify the following but DO NOT REMOVE THIS, EVERYTHING WILL BREAK OTHERWISE. -->
<div class="credits">
  <a href="https://pin.it/4YyRNqLJJ">Inspired by @factory_paper on Pinterest.</a>
  <a href="https://pastebin.com/GWud3YyB">Profile layout adapted by @tigerdropped!</a>
</div>

<style>

.credits {
  position: absolute;
  bottom: -4px;
  display: flex;
  left: 0; right: 0;
  flex-flow: row wrap;
  transform: translateY(100%);
}

.credits a {
  min-width: 300px;
  flex: 1 1 50%;
  text-align: left;
  color: #f9f9f980;
  font: 300 0.8rem Jua, sans-serif;
}

.credits a + a {
  text-align: right;
}

.credits a:is(:hover, :focus) {
  color: #f9f9f9;
  text-decoration: underline 2px;
}


</style>