The Love Hypothesis

<center>
  <style>
    @font-face {
      font-family: 'Kallinsha';
      font-style: normal;
      font-weight: 400;
      src: local('Kallinsha'), url('https://fonts.cdnfonts.com/s/80317/Kallinsha.woff') format('woff');
    }

    @font-face {
      font-family: 'MH Kabel';
      font-style: normal;
      font-weight: 300;
      src: local('MH Kabel'), url('https://fonts.cdnfonts.com/s/72029/MHKABEL.woff') format('woff');
    }

    @font-face {
      font-family: 'Baginda Script';
      font-style: normal;
      font-weight: 400;
      src: local('Baginda Script'), url('https://fonts.cdnfonts.com/s/76566/BagindaScript-rgGa9.woff') format('woff');
    }

    @font-face {
      font-family: 'Abellaice';
      font-style: italic;
      font-weight: 400;
      src: local('Abellaice'), url('https://fonts.cdnfonts.com/s/79786/Abellaice.woff') format('woff');
    }

    .tabcontent {
      overflow: hidden;
      position: relative;
      font-size: 20px;
      display: hidden;
    }

    .background {
      background: url('https://www.colorhexa.com/f08f90.png');
      background-size: cover;
      background-attachment: fixed;
      height: auto;
      width: 90%;
      padding: 5px;
      border: 4px ridge #7286b0;
      border-radius: 30px;
      box-shadow: 5px 10px 5px #000;
    }

    .title {
      font-family: 'Kallinsha';
      font-size: 65px;
      font-weight: bold;
      text-align: center;
      color: #f08f90;
      padding: 10px;
      margin-bottom: 10px;
      margin-left: 70px;
      margin-top: -15px;
      margin-right: -40px;
      text-shadow: 2px 3px 4px #000;
      background: #7286b0;
      height: auto;
      width: 80%;
      text-align: center;
      box-shadow: 5px 5px 5px #000;
      border-radius: 10px;
      overflow: hidden;
    }

    .title1 {
      font-family: 'Kallinsha';
      font-size: 45px;
      font-weight: bold;
      text-align: center;
      color: #f08f90;
      padding: 10px;
      margin-bottom: 10px;
      margin-right: 70px;
      margin-top: -115px;
      margin-left: -40px;
      text-shadow: 2px 3px 4px #000;
      background: #7286b0;
      height: auto;
      width: 80%;
      text-align: center;
      box-shadow: 5px 5px 5px #000;
      border-radius: 10px;
      overflow: hidden;
    }

    .titles {
      font-family: 'Kallinsha';
      font-size: 45px;
      text-align: center;
      font-weight: bold;
      color: #f08f90;
      padding: 10px;
      text-shadow: 2px 3px 4px #000;
      height: auto;
      width: 85%;
      overflow: hidden;
    }

    .body {
      background: #7286b0;
      height: auto;
      width: 90%;
      padding: 10px;
      margin: 10px;
      text-align: justify;
      box-shadow: 5px 5px 5px #000;
      border-radius: 10px;
      overflow: hidden;
    }

    .text {
      text-align: center;
      color: #fff;
      font-family: 'MH Kabel';
      font-size: 20px;
      padding: auto;
      overflow: hidden;
    }

    .tablinks1 {
      background: url("https://i.pinimg.com/736x/21/f7/07/21f707b92be68f24a63e2cd95d0f4cdd.jpg");
      border: none;
      box-shadow: 2px 2px 2px #000;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      background-size: cover;
      margin-left: 5px;
    }

    .tablinks2 {
      background: url("https://i.pinimg.com/originals/4a/f5/12/4af512fb84bfa7134345854b26974cb5.jpg");
      border: none;
      box-shadow: 2px 2px 2px #000;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      background-size: cover;
      margin-left: 5px;
    }

    .tablinks3 {
      background: url("https://pbs.twimg.com/media/FBw8a7HXEAU5BUf.jpg:large");
      border: none;
      box-shadow: 2px 2px 2px #000;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      background-size: cover;
      margin-left: 5px;
    }

    .tablinks4 {
      background: url("https://i.pinimg.com/736x/9a/44/06/9a440668a3ba9fcc6119dca7dc80cbb7.jpg");
      border: none;
      box-shadow: 2px 2px 2px #000;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      background-size: cover;
      margin-left: 5px;
    }

    .tablinks5 {
      background: url("https://i.pinimg.com/736x/ef/96/94/ef96941e6f4f9c2f7547cce135e259b1.jpg");
      border: none;
      box-shadow: 2px 2px 2px #000;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      background-size: cover;
      margin-left: 5px;
    }

    .tablinks6 {
      background: url("https://i.pinimg.com/originals/14/45/a1/1445a1da5cfc6625a24b20ab48a90fb0.jpg");
      border: none;
      box-shadow: 2px 2px 2px #000;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      background-size: cover;
      margin-left: 5px;
    }

    .tablinks7 {
      background: url("https://i.pinimg.com/736x/83/bc/d5/83bcd56b1971044fd58a465ce4fbf5d5.jpg");
      border: none;
      box-shadow: 2px 2px 2px #000;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      background-size: cover;
      margin-left: 5px;
    }

    .tablinksa {
      background: url('https://cdn-icons-png.flaticon.com/512/472/472411.png');
      background-size: cover;
      position: relative;
      height: 30px;
      border: none;
      padding: 10px;
      margin-top: 20px;
      margin-left: 10px;
      float: right;
    }

    * {
      box-sizing: border-box;
    }

    .row1 {
      display: -ms-flexbox;
      /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap;
      /* IE10 */
      flex-wrap: wrap;
      padding: 0 4px;
    }

    .column2 {
      -ms-flex: 25%;
      /* IE10 */
      flex: 25%;
      max-width: 35%;
      padding: 0 4px;
    }

    .column2 img {
      margin-top: 8px;
      vertical-align: middle;
      width: 100%;
    }

  </style>

  <script>
    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";
    }

    window.onload = function(e) {
      document.getElementById("defaultOpen").click();
    }

    $(document).ready(function() { //If you are using jquery then use this other wise you can use normal window.onload
      document.getElementById("defaultOpen").click();
    });
    var header = document.getElementByClassName("body");
    var btns = header.getElementsByClassName("tablinks");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }

  </script>

  <div class="background"><br>

    <img alt="pic1" src="https://i.pinimg.com/originals/49/88/ef/4988efb233a7e408711138eb6f3bb3c8.jpg" style="float:left; object-fit:cover; border-radius:50px; width:100px; height:120px; border-bottom: 5px ridge #7286b0; border-right: 5px ridge #7286b0; border-top: 5px groove #7286b0; border-left: 5px groove #7286b0; margin-right: 25px; margin-top: -10px; margin-bottom: -100px; margin-left: 5px">

    <div class="title">
      The Love Hypothesis
    </div><br>

    <div class="body">
      <div class="text">
        <div style="float:left; margin-right:15px">
          <center><button class="tablinks1" id="defaultOpen" onclick="openCity(event, '1')"></button><br><br>
            <button class="tablinks2" onclick="openCity(event, '2')"></button><br><br>
            <button class="tablinks3" onclick="openCity(event, '3')"></button><br><br>
            <button class="tablinks4" onclick="openCity(event, '4')"></button><br><br>
            <button class="tablinks5" onclick="openCity(event, '5')"></button><br><br>
            <button class="tablinks6" onclick="openCity(event, '6')"></button><br><br>
            <button class="tablinks7" onclick="openCity(event, '7')"></button><br><br></center>
        </div>

        <div class="column">
          <div class="tabcontent" id="1">
            <div class="titles">Character Name
            </div>
            <div class="text">
              <i><b>When a fake relationship between scientists meets the irresistible force of attraction, it throws one woman's carefully calculated theories on love into chaos.</b></i><br><br>

              As a third-year Ph.D. candidate, Olive Smith doesn't believe in lasting romantic relationships but her best friend does, and that's what got her into this situation. Convincing Anh that Olive on her way to a happily ever after was always going to be tough, scientists require proof. So, like any self-respecting woman, Olive panics and kisses the first man she sees.<br><br>

              That man is none other than Adam Carlsen, a young hotshot professor and well-known ass. Which is why Olive is positively floored when he agrees to keep her charade a secret and be her fake boyfriend. But when a big science conference goes haywire and Adam surprises her again with his unyielding support (and his unyielding abs), their little experiment feels dangerously close to combustion.<br><br>

              Olive soon discovers that the only thing more complicated than a hypothesis on love is putting her own heart under the microscope.<br><br>

              <img alt="pic1" src="https://i.pinimg.com/236x/ff/d3/66/ffd366a298225b77d775d0ad9d7bf5c5.jpg" style="float: right; object-fit:cover; border-radius:50px; width:350px; height:420px; margin-right: 5px; margin-top: -10px; margin-bottom: 10px; margin-left: 50px">
            </div>
          </div>

          <div class="column">
            <div class="tabcontent" id="2">
              <div class="titles">Family
              </div>
              <div class="text">
              “Carry yourself with the confidence of a mediocre white man”<br>
― Ali Hazelwood, The Love Hypothesis<br><br>

“I wish you could see yourself the way I see you"<br>
- Adam, The Love Hypothesis
              </div>
              <button class="tablinksa" style="width:30px; height:30px; margin-right:5px;" onclick="openCity(event, '1')"></button>
            </div>

            <div class="tabcontent" id="3">
              <div class="titles">Birth
              </div>
              <div class="text">
              “Ssh.” His arm slid around her waist, his hand coming to rest on her hip in a gesture that should have been unpleasant but just felt reassuring. His voice was low when he added, “It’s fine.” The words vibrated in her ear, rich and warm. “More material for my Title IX complaint.”<br>
― Adam, The Love Hypothesis<br><br>

“I'm starting to wonder if this is what being in love is. Being okay with ripping yourself to shreds, so the other person can stay whole.”<br>
― Olive, The Love Hypothesis
              </div>

              <button class="tablinksa" style="width:30px; height:30px; margin-right:5px;" onclick="openCity(event, '1')"></button>
            </div>

            <div class="tabcontent" id="4">
              <div class="titles">
                Childhood
              </div>
              <div class="text">
              “And then I'll come find you, and I'll take care of you."<br>
          - Adam, The Love Hypothesis<br><br>

“You can fall in love: someone will catch you.”<br>
― Ali Hazelwood, The Love Hypothesis<br><br>

“Expiration dates are for the weak.”<br>
― Olive, The Love Hypothesis<br><br>

“It wasn’t until a few minutes later, when she was sitting on her bed staring at the Boston skyline and chewing on her lunch, that Olive realized that the protein bar Adam had given her was covered in chocolate.”<br>
― Ali Hazelwood, The Love Hypothesis
              </div>
              <button class="tablinksa" style="width:30px; height:30px; margin-right:5px;" onclick="openCity(event, '1')"></button>
            </div>

            <div class="tabcontent" id="5">
              <div class="titles">
                Youth
              </div>
              <div class="text">
              “Did you… Did you just kiss me?” He sounded puzzled, and maybe a little out of breath. His lips were full and plump and… God. Kissed. There was simply no way Olive could get away with denying what she had just done.<br><br>
Still, it was worth a try.<br><br>
“Nope.”<br><br>
Surprisingly, it seemed to work.
“Ah. Okay, then.” Carlsen nodded and turned around, looking vaguely disoriented. He took a couple of steps down the hallway, reached the water fountain - maybe where he’d headed in the first place.<br><br>
Olive was starting to believe that she might actually be off the hook when he halted and turned back with a skeptical expression.
“Are you sure?”<br><br>
― Ali Hazelwood, The Love Hypothesis
              </div>
              <button class="tablinksa" style="width:30px; height:30px; margin-right:5px;" onclick="openCity(event, '1')"></button>
            </div>

            <div class="tabcontent" id="6">
              <div class="titles">
                Life
              </div>
              <div class="text">
                As a third-year Ph.D. candidate, Olive Smith doesn't believe in lasting romantic relationships--but her best friend does, and that's what got her into this situation. Convincing Anh that Olive is dating and well on her way to a happily ever after was always going to take more than hand-wavy Jedi mind tricks: Scientists require proof. So, like any self-respecting biologist, Olive panics and kisses the first man she sees.<br><br>

                That man is none other than Adam Carlsen, a young hotshot professor--and well-known ass. Which is why Olive is positively floored when Stanford's reigning lab tyrant agrees to keep her charade a secret and be her fake boyfriend. But when a big science conference goes haywire, putting Olive's career on the Bunsen burner, Adam surprises her again with his unyielding support and even more unyielding... six-pack abs.<br><br>

                Suddenly their little experiment feels dangerously close to combustion. And Olive discovers that the only thing more complicated than a hypothesis on love is putting her own heart under the microscope.
              </div>
              <button class="tablinksa" style="width:30px; height:30px; margin-right:5px;" onclick="openCity(event, '1')"></button>
            </div>

            <center>
              <div class="tabcontent" id="7">
                <div class="titles">
                  Aesthetic
                </div>
                <center>
                  <div style="height:390px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:'one four' 'two five' 'three six';grid-gap:10px;margin:0 0 20px 0;">

                    <div style="grid-area:one;background: url(https://i.pinimg.com/originals/f5/5c/cc/f55cccd30047a482743dd987d840e576.jpg)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>

                    <div style="grid-area:two;background: url(https://pbs.twimg.com/media/FGUJAAHVQAESQTU.jpg)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>

                    <div style="grid-area:three;background: url(https://64.media.tumblr.com/e7306996029a8325927826d9c2c1ec4b/ee7b5842fbab8672-fe/s1280x1920/899fe3b93aedeaefc462ea096088116b6edd83e3.jpg)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>

                    <div style="grid-area:four;background: url(https://i.etsystatic.com/26199833/r/il/ca4862/3430775764/il_fullxfull.3430775764_1vrg.jpg)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
                    <div style="grid-area:five;background: url(https://preview.redd.it/f6nrzscgrif81.jpg?auto=webp&s=ac32134985be2c11cd8d4d370d84e6b424de9657)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
                    <div style="grid-area:six;background: url(https://www.mayasbookshelves.com/wp-content/uploads/2022/07/image-4.png)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)">
                    </div>
                  </div>
                </center>

                <button class="tablinksa" style="width:30px; height:30px; margin-right:5px;" onclick="openCity(event, '1')"></button>
              </div>
            </center>
          </div>
        </div>
      </div>
    </div><br>

    <img alt="pic1" src="https://i.pinimg.com/originals/d4/f7/35/d4f7357bc9e295efd358d876050fa9a3.jpg" style="float: right; object-fit:cover; border-radius:50px; width:100px; height:120px; border-bottom: 5px ridge #7286b0; border-right: 5px ridge #7286b0; border-top: 5px groove #7286b0; border-left: 5px groove #7286b0; margin-right: 5px; margin-top: -10px; margin-bottom: -100px; margin-left: 50px"><br><br><br><br><br><br>
    <div class="title1">
      "Ik hou van jou, Adam"
    </div>

    <center><a href="https://alacodes.tumblr.com/" target="_blank" style="text-decoration:none; color:#7286b0; text-shadow:1px 1px 1px #000; font-family:'Magneto'">Coded by Ala</a></center>
  </div>
</center><br><br>