022 - on wednesdays, we wear pink [PT]

<style>
/* scrollbar */
::-webkit-scrollbar {display:none}

/* fonts */
@font-face { font-family: Bumblebee; src: url("https://dl.dropboxusercontent.com/s/hwq6prhn55huc1g/MARIOSA.ttf"); }
@font-face { font-family: Kingthing; src: url("https://dl.dropboxusercontent.com/s//n6vvys9ur99dind/Kingthing.ttf"); }
@font-face { font-family: Class; src: url("https://dl.dropboxusercontent.com/s/1zedoy2s5cj48kl/Class.ttf"); }

/* container */
.box {
  display:flex;
  padding:20px;
  justify-content:space-between;
  width:840px;
}

.flex {
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
}

.infobox {
  width:40%;
  text-align:center;
}

.tabcontent {
  font:14px 'Karma';
  text-align:justify;
}

.chapterbox {
  background-attachment:fixed;
  background-size:cover x;
  height:625px;
  padding:20px;
  border:3px solid #3F3C3C;
  border-radius:15px 50px;
}

/* titles */
.name {
  font:60px Kingthing;
  -webkit-text-stroke-width:0.1px;
  -webkit-text-stroke-color:#000;
  display:block;
  text-align:center;
  margin-left:-5px;
  margin-right:auto;
  margin-top:15px;
}

.title {
  font:45px Kingthing;
  text-align:center;
}

/* face claim */
.fc {
  width:320px;
  height:320px;
  border-radius:15px 50px;
  background-attachment:fixed;
  margin:auto;
}

.fc:hover {
  transition:all .20s linear;
  transform:scale(1.01);
  box-shadow:5px 5px 1px rgba(0, 0, 0, .35);
}

/* buttons */
.tabbox {
  width:100%;
  display:flex;
  flex-direction:row;
}

.tab {
  overflow: hidden;
  width:100%;
}

.tab > button {
  border:none;
  outline:none;
  cursor:pointer;
  padding:10px;
  transition:0.3s;
  background-color: rgba(255, 255, 255, 0);
}

.tab > button > img {
  width:40px;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.tab button.active {
  background-color:none;
}

/* tab content */
.passage {
  text-align:justify;
  background-color:rgba(0,0,0,0.09);
  border-radius:8px;
  height:240px;
  margin-top:-18px;
  padding:20px 20px 15px 20px;
  overflow-y:auto;
}

.subtitle {
  font:30px Class;
  text-align:left;
  margin-left:20px;
}

/* about */
.identity {
  width:50%;
  text-align:center;
}

.identity > i {
  font:16px Playfair Display SC;
  font-weight:bold;
}

.identity > p {
  font:14px Karma;
}

/* appearance & aesthetics */
.pic1 { grid-area:one;height:150px; }
.pic2 { grid-area:two; height:150px; }
.pic3 { grid-area:three;height:150px; }
.pic4 { grid-area:four;height:150px; }
.pic5 { grid-area:five;height:150px; }
.pic6 { grid-area:six;height:150px; }

.aesthetics-container {
  display:grid;
  grid-template-areas:
  'one two three'
  'four five six';
  grid-gap:5px;
  width:100%;
}

.aesthetics-container > div {
  margin-top:-5px;
  background-size:cover;
  box-shadow:3px 3px 1px rgba(0,0,0,0.2);
}

/* photo gallery */
.pic7 { grid-area:seven;height:285px; }
.pic8 { grid-area:eight; height:120px; }
.pic9 { grid-area:nine;height:162px; }
.pic10 { grid-area:ten;height:285px; }
.pic11 { grid-area:eleven;height:115px; }
.pic12 { grid-area:twelve;height:135px; }

.grid-container {
  display:grid;
  grid-template-areas:
  'seven eight eight'
  'seven nine ten'
  'eleven eleven ten'
  'twelve twelve twelve';
  grid-gap:7px;
  width:100%;
}

.grid-container > div {
  margin-top:-5px;
  background-size:cover;
  box-shadow:3px 3px 1px rgba(0,0,0,0.2);
}

/* relations */
.person {
  width:35%;
  height:210px;
  border-radius:20px 0 0 20px;
}

.relationpassage {
  text-align:justify;
  background-color:rgba(0,0,0,0.09);
  border-radius:0 20px 20px 0;
  width:65%;
  height:175px;
  padding:20px 20px 15px 20px;
  overflow-y:auto;
}

.relationsubtitle {
  font:30px Class;
  text-align:right;
  margin-right:20px;
}

.rflex {
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
  margin-top:-17px;
}

.person2 {
  width:35%;
  height:210px;
  border-radius:0 20px 20px 0;
}

.relationpassage2 {
  text-align:justify;
  background-color:rgba(0,0,0,0.09);
  border-radius:20px 0 0 20px;
  width:65%;
  height:175px;
  padding:20px 20px 15px 20px;
  overflow-y:auto;
}

.relationsubtitle2 {
  font:30px Class;
  text-align:left;
  margin-left:20px;
}

/* playlist */
.songphoto {
  width:35%;
  height:110px;
  border-radius:15px 50px;
}

.songpassage {
  text-align:justify;
  background-color:rgba(0,0,0,0.09);
  border-radius:50px 15px;
  width:65%;
  height:75px;
  padding:20px 20px 15px 20px;
  margin-left:5px;
  margin-bottom:10px;
  overflow-y:auto;
}

.songname {
  font:30px Class;
  text-align:center;
}

/* credit */
.credit {
  font:35px Bumblebee;
  color:#000;
  text-align:center;
  letter-spacing:1px;
}

.credit:hover {
  letter-spacing:2px;
  text-shadow: 2px 1px 5px #71928d;
  transition:0.5s;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Karma:wght@500&display=swap" rel="stylesheet">

<center><br />
<div class="box">

<!-- NAME! -->
<div class="infobox">
<div class="name" style="color:#b5a900;">first last</div><br><br>

<!-- face claim -->
 <div class="fc" style="background:url(URL)center;background-size:cover;"></div><br>

<!-- buttons -->
<div class="tabbox">
<div class="tab">
<button class="tablinks" onclick="openCity(event, '1')"><img src="https://cdn-icons-png.flaticon.com/512/545/545336.png"></button>
<button class="tablinks" onclick="openCity(event, '2')"><img src="https://cdn-icons-png.flaticon.com/512/545/545336.png"></button>
<button class="tablinks" onclick="openCity(event, '3')"><img src="https://cdn-icons-png.flaticon.com/512/545/545336.png"></button>
<button class="tablinks" onclick="openCity(event, '4')"><img src="https://cdn-icons-png.flaticon.com/512/545/545336.png"></button>
<button class="tablinks" onclick="openCity(event, '5')"><img src="https://cdn-icons-png.flaticon.com/512/545/545336.png"></button>
</div>
</div>
<!----></div>

<!-- CONTENT! -->
<div class="chapterbox" style="background-color:#f0c5cf;width:50%;overflow:auto;">

<!-- 01: about -->
<div class="tabcontent" id="1">
 <div class="title">About</div><br>

<!-- info -->
<div class="subtitle">information</div><div class="passage">
 <div class="flex">

  <div class="identity">
  <i style="color:#b5415d;">name</i>
  first last
  <br><br>
  <i style="color:#b5415d;">nicknames</i>
  info
  <br><br>
  <i style="color:#b5415d;">birthday</i>
  info
  <br><br>
  <i style="color:#b5415d;">orientation</i>
  info
  <br><br>
  <i style="color:#b5415d;">age</i>
  info
  </div>

  <div class="identity">
  <i style="color:#b5415d;">occupation</i>
  info
  <br><br>
  <i style="color:#b5415d;">house</i>
  info
  <br><br>
  <i style="color:#b5415d;">pronouns</i>
  info
  <br><br>
  <i style="color:#b5415d;">gender</i>
  info
  <br><br>
  <i style="color:#b5415d;">zodiac</i>
  info
  </div>

 </div>
</div><br>

<!-- info -->
<div class="subtitle">personality</div><div class="passage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, mauris a diam maecenas sed enim ut sem. Varius morbi enim nunc faucibus a pellentesque sit. Volutpat blandit aliquam etiam erat velit scelerisque. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Id cursus metus aliquam eleifend. Est lorem ipsum dolor sit amet consectetur adipiscing elit.
</div>

</div>

<!-- 02: appearance & aesthetics -->
<div class="tabcontent" id="2">
 <div class="title">Appearance &amp; Aesthetics</div><br>

<!-- aesthetics -->
<div class="subtitle">aesthetics</div><div class="passage" style="height:auto;padding:20px;">
 <div class="aesthetics-container">
<!-- photo #1 -->
<div class="pic1" style="background:url(URL)center;background-size:cover"></div>

<!-- photo #2-->
<div class="pic2" style="background:url(URL)center;background-size:cover"></div>

<!-- photo #3 -->
<div class="pic3" style="background:url(URL)center;background-size:cover;"></div>

<!-- photo #4 -->
<div class="pic4" style="background:url(URL)center;background-size:cover;margin-top:0px;"></div>

<!-- photo #5 -->
<div class="pic5" style="background:url(URL)center;background-size:cover;margin-top:0px;"></div>

<!-- photo #6 -->
<div class="pic6" style="background:url(URL)center;background-size:cover;margin-top:0px;"></div>
</div></div><br>

<!-- appearance -->
<div class="subtitle">appearance</div><div class="passage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, mauris a diam maecenas sed enim ut sem. Varius morbi enim nunc faucibus a pellentesque sit. Volutpat blandit aliquam etiam erat velit scelerisque. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Id cursus metus aliquam eleifend. Est lorem ipsum dolor sit amet consectetur adipiscing elit.
</div><br>

<!-- style -->
<div class="subtitle">style</div><div class="passage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, mauris a diam maecenas sed enim ut sem. Varius morbi enim nunc faucibus a pellentesque sit. Volutpat blandit aliquam etiam erat velit scelerisque. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Id cursus metus aliquam eleifend. Est lorem ipsum dolor sit amet consectetur adipiscing elit.
</div>

</div>

<!-- 03: photo gallery -->
<div class="tabcontent" id="3">
 <div class="title">Photo Gallery</div><br>

<div class="grid-container">
<!-- photo #1 -->
<div class="pic7" style="background:url(URL)center;background-size:cover"></div>

<!-- photo #2-->
<div class="pic8" style="background:url(URL)center;background-size:cover"></div>

<!-- photo #3 -->
<div class="pic9" style="background:url(URL)center;background-size:cover;margin-top:-2px"></div>

<!-- photo #4 -->
<div class="pic10" style="background:url(URL)center;background-size:cover;margin-top:-2px"></div>

<!-- photo #5 -->
<div class="pic11" style="background:url(URL)center;background-size:cover;margin-top:-2px"></div>

<!-- photo #6 -->
<div class="pic12" style="background:url(URL)center;background-size:cover;margin-top:-2px"></div>
</div>

</div>

<!-- 04: relations -->
<div class="tabcontent" id="4">
 <div class="title">Relations</div><br>

<!-- relation 1 -->
<div class="relationsubtitle">first last</div><div class="rflex">
<div class="person" style="background:url(URL)center;background-size:cover;"></div>
<div class="relationpassage">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Hendrerit dolor magna eget est lorem ipsum. Ut sem viverra aliquet eget sit amet tellus cras. Vulputate dignissim suspendisse in est ante in nibh. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Imperdiet proin fermentum leo vel orci porta non pulvinar. Semper viverra nam libero justo laoreet sit amet cursus sit. Gravida in fermentum et sollicitudin ac orci phasellus. Eu turpis egestas pretium aenean pharetra magna ac placerat. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Pharetra convallis posuere morbi leo urna molestie at. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Nunc scelerisque viverra mauris in aliquam. At tempor commodo ullamcorper a lacus.</div>
</div><br>

<!-- relation 2 -->
<div class="relationsubtitle2">first last</div><div class="rflex">
<div class="relationpassage2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Hendrerit dolor magna eget est lorem ipsum. Ut sem viverra aliquet eget sit amet tellus cras. Vulputate dignissim suspendisse in est ante in nibh. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Imperdiet proin fermentum leo vel orci porta non pulvinar. Semper viverra nam libero justo laoreet sit amet cursus sit. Gravida in fermentum et sollicitudin ac orci phasellus. Eu turpis egestas pretium aenean pharetra magna ac placerat. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Pharetra convallis posuere morbi leo urna molestie at. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Nunc scelerisque viverra mauris in aliquam. At tempor commodo ullamcorper a lacus.</div>
<div class="person2" style="background:url(URL)center;background-size:cover;"></div>
</div><br>

<!-- relation 3 -->
<div class="relationsubtitle">first last</div><div class="rflex">
<div class="person" style="background:url(URL)center;background-size:cover;"></div>
<div class="relationpassage">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Hendrerit dolor magna eget est lorem ipsum. Ut sem viverra aliquet eget sit amet tellus cras. Vulputate dignissim suspendisse in est ante in nibh. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Imperdiet proin fermentum leo vel orci porta non pulvinar. Semper viverra nam libero justo laoreet sit amet cursus sit. Gravida in fermentum et sollicitudin ac orci phasellus. Eu turpis egestas pretium aenean pharetra magna ac placerat. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Pharetra convallis posuere morbi leo urna molestie at. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Nunc scelerisque viverra mauris in aliquam. At tempor commodo ullamcorper a lacus.</div>
</div><br>

<!-- relation 4 -->
<div class="relationsubtitle2">first last</div><div class="rflex">
<div class="relationpassage2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Hendrerit dolor magna eget est lorem ipsum. Ut sem viverra aliquet eget sit amet tellus cras. Vulputate dignissim suspendisse in est ante in nibh. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Imperdiet proin fermentum leo vel orci porta non pulvinar. Semper viverra nam libero justo laoreet sit amet cursus sit. Gravida in fermentum et sollicitudin ac orci phasellus. Eu turpis egestas pretium aenean pharetra magna ac placerat. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Pharetra convallis posuere morbi leo urna molestie at. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Nunc scelerisque viverra mauris in aliquam. At tempor commodo ullamcorper a lacus.</div>
<div class="person2" style="background:url(URL)center;background-size:cover;"></div>
</div>

</div>

<div class="tabcontent" id="5">
 <div class="title">Playlist</div><br><br>

<!-- song 1 -->
<div class="rflex">
<div class="songphoto" style="background:url(URL)center;background-size:cover;"></div>
<div class="songpassage"><div class="songname">song by artist</div></div>
</div><br>

<!-- song 2 -->
<div class="rflex">
<div class="songphoto" style="background:url(URL)center;background-size:cover;"></div>
<div class="songpassage"><div class="songname">song by artist</div></div>
</div><br>

<!-- song 3 -->
<div class="rflex">
<div class="songphoto" style="background:url(URL)center;background-size:cover;"></div>
<div class="songpassage"><div class="songname">song by artist</div></div>
</div><br>

<!-- song 4 -->
<div class="rflex">
<div class="songphoto" style="background:url(URL)center;background-size:cover;"></div>
<div class="songpassage"><div class="songname">song by artist</div></div>
</div>

</div>

</div>

</div>
</center>

<!-- Credits; DO NOT REMOVE.-->
<div class="credit" style="margin-top:-10px;">
<a href="https://ellesfruitcart.tumblr.com" style="color:#000;text-decoration:none;">elle's codes</a></div>

<script>
document.getElementsByClassName('tablinks')[0].click()
function openCity(evt, cityName) {

var i,
        tabcontent,
        tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>