[QUOTE=eldritchBLAST,Dec 30 2022, 01:11 PM]used [URL=https://www.shapedivider.app/]this site[/URL] for the triangles/inverted triangle

[dohtml]<div id="lokiloki">
  <div class="lk-topcontainer">
    
    <div class="lk-maintitle"> Loki</div>
  
  </div>
<div class="lk-divider-top">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M1200 0L0 0 598.97 114.72 1200 0z" class="shape-fill"></path>
    </svg>
</div>
  
  <div class="lk-divider-bottom">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
    </svg>
</div>
  <div class="lk-bottomcontainer">
    
    <div class="lk-lowerquote">  You Can Trust One Thing. <br>I Love To Be Right.</div>
  
  </div>
  
  <div class="lk-centercontainer">

<div class="lk-tabs">


<div class="lk-tab">
<input type="radio" id="lk-tab-1" name="lk-tab-group-1" checked>
<label for="lk-tab-1"> I </label>
<div class="lk-content">
<img src="https://www.cnet.com/a/img/ym6yC-HDpfopxLgBuUFjRmI7MYA=/0x0:1920x1079/1200x675/2021/04/23/6efae7ef-4936-4348-a7b1-6ac158660ac6/7c6df1c8-0ec9-4d36-ac86-6211196d218a-loki-tom-hiddleston.png" class="lk-mainpic">
</div>
</div>


<div class="lk-tab">
<input type="radio" id="lk-tab-2" name="lk-tab-group-1">
<label for="lk-tab-2"> II </label>
<div class="lk-content">
  <div class="lk-tab-title">basics</div>
   <div class="lk-tab-text"><ul>
    <li><div class="lk-tab-info">full name</div> <div class="lk-info-back">Loki Something</div></li>
    <li><div class="lk-tab-info">Age</div> <div class="lk-info-back">immortal</div></li>
  <li><div class="lk-tab-info">gender</div> <div class="lk-info-back">male</div></li>
  <li><div class="lk-tab-info">sexuality</div> <div class="lk-info-back">bisexual</div></li>
  <li><div class="lk-tab-info">occupation</div> <div class="lk-info-back">god of mischief</div></li>
</ul>
    
  <div class="lk-tab-title">family</div>
    
   <p> <div class="lk-tab-info">father</div> <div class="lk-info-back">odin (adopted)</div>
    <br><div class="lk-tab-info">mother</div> <div class="lk-info-back">freya (adopted)</div>
    <br><div class="lk-tab-info">brother</div> <div class="lk-info-back">thor (adopted)</div>
    <br><div class="lk-tab-info">sister</div> <div class="lk-info-back">hela (adopted)</div>
    
</div>
</div>
</div>


<div class="lk-tab">
<input type="radio" id="lk-tab-3" name="lk-tab-group-1">
<label for="lk-tab-3"> III </label>
<div class="lk-content">
<div class="lk-tab-title">freeform</div>
  
  <div class="lk-tab-text">When <b>Thanos</b> snapped his fingers, Earth became ground zero for a <i>power surge</i> of ridiculously cosmic proportions. No one's ever seen anything like it... Until two days ago. Nothing. Yet. They're not trying to stop something I'm going to do in our time. They're trying to undo something I've already done in theirs.  Everybody wants a happy ending, right? But it doesn't always roll that way. Maybe this time. I'm hoping if you play this back, it's in celebration. I hope families are reunited, I hope we get it back, and something like a normal version of the planet has been restored. If there ever was such a thing. God, what a world. Universe, now. If you told me ten years ago that we weren't alone, let alone, you know, to this extent, I mean, I wouldn't have been surprised. But come on, you know? The epic forces of darkness and light that have come into play. And, for better or worse, that's the reality Morgan's gonna have to find a way to grow up in. </div>
  
</div>
</div>
  
  <div class="lk-tab">
<input type="radio" id="lk-tab-4" name="lk-tab-group-1">
<label for="lk-tab-4"> IV </label>
<div class="lk-content">
<div class="lk-tab-title">romantic</div>
  <div class="lk-tab-text">A female version of himself</div>
 <p><div class="lk-tab-title">platonic</div>
  <div class="lk-tab-text">Mobius 4eva</div>
   <p><div class="lk-tab-title">antagonistic</div>
  <div class="lk-tab-text">Avengers, He Who Remains, TVA</div>
    <p><div class="lk-tab-title">other</div>
  <div class="lk-tab-text">lots of loose acquaintances</div>
</div>
</div>

<div class="lk-tab">
<input type="radio" id="lk-tab-5" name="lk-tab-group-1">
<label for="lk-tab-5"> V </label>
<div class="lk-content">
<div class="lk-tab-title">played by</div>
  <p> <div class="lk-tab-info">name</div> <div class="lk-info-back">emilie</div>
    <br><div class="lk-tab-info">timezone</div> <div class="lk-info-back">EST</div>
    <br><div class="lk-tab-info">age</div> <div class="lk-info-back">old enough</div>
    <br><div class="lk-tab-info">triggers</div> <div class="lk-info-back">nicholas cage</div>
  <br><div class="lk-tab-info">other</div> <div class="lk-info-back">idk what i'm doing</div>
</div>
</div>

    </div>
      
    
    </div>
  
  <div class="lk-icons">
    
    <a href=""> <i class="cp cp-knife" title="link1"></i></a> <a href=""> <i class="cp cp-hourglass" title="link2"></i></a> <a href=""><i class="cp cp-drop" title="link3"></i></a> <a href="https://shadowplayers.jcink.net/index.php?showuser=5360"><i class="cp cp-crown" title="credit"></i></a>
  
  </div>
  
</div>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<script src="//pull.cappuccicons.com/cpf.js"></script>

<style>#lokiloki {width:400px;
height:600px;
overflow:hidden;
position:relative;
margin: 0 auto;
background:#000;
font-family: 'Rubik', sans-serif;}

:root {
  --deepgreen:#436228;
  --lightgreen:#99B927;
  --gold:#ECBA3D;
  --lightyellow:#FDE581;
}

#lokiloki .lk-divider-top {
    position: absolute;
    margin-top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

#lokiloki .lk-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

#lokiloki .lk-divider-top .shape-fill {
    fill: var(--deepgreen);
}

#lokiloki .lk-topcontainer {width:100%;
height:70px;
background:var(--deepgreen);}

#lokiloki .lk-divider-bottom {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

#lokiloki .lk-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

#lokiloki .lk-divider-bottom .shape-fill {
    fill: var(--deepgreen);
}

#lokiloki .lk-bottomcontainer {height:70px;
background:var(--deepgreen);
position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;}

#lokiloki .lk-tabs {
 margin: 0px auto; 
 position: relative;
 width: 80%; 
 height:  90%;
}

#lokiloki .lk-tab {
 float: left;
}

#lokiloki .lk-tab label {
 display: block;
 width:64px;
 height: 30px;
 background: #000;
  color:#FFF;
 margin: 0px;
 position: relative;
 left: 0px;
 top: 0px;
 z-index: 3;
  text-align:center;
  line-height:30px;
  text-transform:lowercase;
}

#lokiloki .lk-tab input[type=radio]:checked ~ label {
 background: var(--gold);
 z-index: 2;
   transtion:0.8s linear;
}

#lokiloki .lk-tab input[type=radio] {
 display: none;
  transtion:0.8s linear;
}

#lokiloki .lk-content {
   transtion:0.8s linear;
 position: absolute;
 top: 20px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 background: #000;
  color:#fff;
  font-size:12px;
   text-align: justify;
  text-justify: inter-word;
 padding: 20px;
 border: 1px solid #000;
  overflow:auto;
}

#lokiloki .lk-tab input[type=radio]:checked ~ label ~ .lk-content {
 z-index: 1;
  transtion:0.8s linear;
}


#lokiloki .lk-centercontainer{width:100%;
  height:250px;
position:absolute;
margin-top:120px;}

#lokiloki .lk-mainpic{width:100%;
  height:100%;
object-fit:cover;
overflow:hidden;}

#lokiloki .lk-tab-title {line-height:30px;
font-size:28px;
text-transform:lowercase;
display:block;
width:100%;
border-bottom: 3px dotted #FFF;
padding-bottom:5px;
color:var(--lightgreen);
font-family: 'Old Standard TT', serif;
font-style: italic;}

#lokiloki .lk-tab-text{margin-top:10px;
overflow:auto;
line-height:120%;}

#lokiloki .lk-tab-info{display:inline-block;
text-transform:uppercase;
padding: 2px;
margin-bottom:10px;
color:#000;
line-height:20px;
background:var(--gold);
border:1px solid var(--gold);}

#lokiloki .lk-info-back{border: 1px #fff solid;
display:inline-block;
padding: 2px;
margin-left:-4px;
line-height:20px;
width:auto;
letter-spacing: 2px;
text-transform:capitalize;}

#lokiloki ::-webkit-scrollbar {
  display: none;
}

#lokiloki b {color:var(--gold);}

#lokiloki i {color:var(--lightyellow);}

#lokiloki .lk-maintitle{font-size:70px;
line-height:80px;
width:80%;
position:absolute;
margin-left:10%;
margin-top:30px;
z-index:5;
text-align:center;
overflow:hidden;
text-transform:uppercase;
text-shadow: 2px 2px var(--gold);
font-family: 'Old Standard TT', serif;
font-style: italic;
color:#000;}

#lokiloki .lk-lowerquote{width:80%;
position:absolute;
margin-left:10%;
z-index:5;
text-align:center;
margin-top:5px;
font-family: 'Old Standard TT', serif;
font-style: italic;
text-transform:lowercase;
font-size:20px;
height:50px;
overflow:hidden;
color:var(--gold);}

#lokiloki a {text-decoration:none;
color:var(--gold);}

#lokiloki .lk-icons{font-size:20px;
width:70%;
position:absolute;
margin-left:15%;
text-align:center;
line-height:30px;
margin-top:360px;
letter-spacing:5px;}</style>[/dohtml][/QUOTE]