PasteShr

New Paste Browse

✮ — 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>

<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>

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Recent Pastes

the strongest battlegrounds script delta
Plaintext | 1 | 3 minutes ago
zamex hub
Plaintext | 0 | 3 minutes ago
pressure roblox script
Plaintext | 0 | 3 minutes ago
combat warrior scripts
Plaintext | 0 | 3 minutes ago
special character fortnite
Plaintext | 0 | 3 minutes ago
flag wars script roblox
Plaintext | 2 | 8 minutes ago
codehs snowman
Plaintext | 2 | 8 minutes ago

Paste Settings

Site Languages