geneva suggestion | backstory

<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto+Mono&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; background: #bbb}
::-webkit-scrollbar-thumb {background: #000;}

.body{
background: linear-gradient(90deg, #B0BC98 35%, #1c1c1c 35%);
border: 1px solid rgba(0,0,0,0.2);
width: 850px;
height: 600px;
margin: auto;
padding: 20px;
position: relative;
font-family: 'Montserrat'
}

.quote{
    padding: 20px;
    font-family:'Roboto Mono';
    font-size: 15px;
    text-transform: uppercase;
    color: #8C1A1A;
    display: flex;
    font-weight: 800;
    align-items: center;
}
.imgbg {
background: url(https://i.pinimg.com/originals/2b/cb/35/2bcb35b777da14f7cb1a6df704ef1ed7.gif)center;
filter: grayscale(50%);
background-size: cover;
width: 312px;
height: 400px;
clip-path: polygon(0 0, 80% 0%, 100% 0, 100% 100%, 100% 100%, 0 58%, 0 57%, 0% 20%);
margin-top:-20px;
margin-left:-20px;}


.list {
width: 310px;
height: 200px;
margin-left:-20px;
margin-top: -50px;
padding:10px;
overflow: auto;
position: absolute;
color: #f5f7f1;
font-size: 16px}

.bold{
        display:inline-block;
        margin:3px 3px -1px 0px;
        color:#fff;
        background-color:#8C1A1A;
        padding:3px;
}
    ul {
    padding-left:15px;
    font-size: 20px;
    margin-top:5px
}
    ul li {
        list-style-type:none;
        font-size: 14px
    }
    ul li:before {
          content: "— ";
          text-indent: -5px
    }
.content {
background:#f5f7f1;
width: 550px;
height: 600px;
margin-left:305px;
margin-top:-380px;
overflow: auto;
position: absolute;
border-radius: 5px;
text-align: justify
}
.blurb{
    padding: 20px;
    width: 250px;
    height: 100px;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    outline: 1px solid #B0BC98;
    outline-offset: -10px;
    border: 1px solid rgba(0,0,0,0.2);
    position: absolute;
    margin-top: -200px;
    margin-left: -10px;
    color: #f5f7f1;
    font-size: 16px;
    text-align: center;
    transition: all 1s;
}
.blurb:hover{
        transform: scale(1.05);
        animation-fill-mode: both;
}
.container {
background-color:#f5f7f1;
width: 890px;
height: 80px;
border: 1px solid rgba(0,0,0,0.2);
margin: auto}

.tabcontent{
    overflow: hidden;
    padding: 20px;
    font-size: 13px
}
.tablinks{
    border: 1px solid rgba(0,0,0,0.2);
    background: #B0BC98;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    height: 40px;
    width: 40px;
    font-size: 14px;
    transition: all 1s;
    font-family: 'Roboto Mono'
}
.cred{
    font-family:'Montserrat';
    font-size: 13px;
    text-decoration: none!important;
    color: #000;
    transition: all 1s;
}
.cred:hover{
    letter-spacing: 2px
}
.butts{
    margin-top: -60px;
    margin-left: 50px;
    position: absolute;
    }
.tablinks:hover, .active{
    background: #1c1c1c;
}
h2{
    color: #8C1A1A;
    margin:0px;
    margin-bottom: 5px;
    font-family:'Roboto Mono';
    text-transform: uppercase;
    font-size: 20px
}
h3{
    background: #8C1A1A;
    color: #fff;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    margin: 5px 0px
}
.header{
    text-style: underline
}
img{
    object-fit: cover;
    outline: 1px solid #B0BC98;
    outline-offset: -10px;
    border-radius: 5px
}

i,b, legend, a{
    color: #8C1A1A;
    text-decoration: none;
}

fieldset{
    margin-bottom: 10px;
    border:1px solid rgba(0,0,0,0.2);
    text-align:justify
}
</style>
<div class="body">
   <div class="imgbg"></div>
   <div class="blurb">
   <h2>i ate some food and shat it out</h2>
   who's this lady she's a hottie, meow</div>
  <div class="list"><div class="bold">list goes here</div> i've done nothing wrong in my life i swear
  <ul>
       <li><b>Age:</b> this color is ew</li>
       <li><b>Height:</b> blurb</li>
       <li><b>Weight:</b> blurb</li>
       <li><b>House:</b> blurb</li>
       <li><b>Year:</b> blurb</li>
       <li><b>Occupation:</b> blurb</li>
       <li><b>Sexuality:</b> blurb</li>
    </ul>
  </div>
  <div class="content">
<div class="tabcontent" id="1">
<h2>more like, geneva suggestion </h2>
<h3>title or something</h3>
Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
<div class="tabcontent" id="2">
<h2>more like, geneva suggestion </h2>
<h3>title or something</h3>
Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
<div class="tabcontent" id="3">
<h2>more like, geneva suggestion </h2>
<h3>title or something</h3>
Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
<div class="tabcontent" id="4">
<h2>more like, geneva suggestion </h2>
<h3>title or something</h3>
Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
<div class="tabcontent" id="5">
<h2>more like, geneva suggestion </h2>
<h3>title or something</h3>
Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.

</div>
</div>
</div>
  <div class="container"><div class="butts"><button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">i</button>
<button class="tablinks" onclick="openCity(event, '2')">ii</button>
<button class="tablinks" onclick="openCity(event, '3')">iii</button>
<button class="tablinks" onclick="openCity(event, '4')">iv</button>
<button class="tablinks" onclick="openCity(event, '5')">v</button>
</div><div class="quote">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="float: left; margin-right: 20px; fill:#1c1c1c"><path d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z"/></svg>
hi mom i'm on tv, i'm going to jail for a funny, i commited several breachs of the geneva convention
</div></div>
  <center><div class="cred">
CODED BY <a style="text-decoration: none; color: #000" href="https://alyscodes.tumblr.com" >ALY</a> & <a  style="text-decoration: none; color: #000" href="https://finchscodes.tumblr.com">FINCH </a></div>
</center>

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