I’m an undergrad with a digital media major who has been trying to develop a portfolio website for my work through WordPress. I’ve been trying to adjust my homepage to look like the mockup I made below:

Here is the html code I have for my home page below:

<style>
    /* stuff for HOME page */
    .two_columns {
      box-sizing: border-box;
      display: flex;
    }
    .self-portrait {
      width: 100%;
      height: auto;
      border: 3px solid black;
    }
    .emailbutton {
      justify-content: flex-end;
      display: flex;
      text-align: center;
      margin: 5;
      top: 50%;
      border: 2px solid black;
    }
    .two_columns div {
      width: 50%;
      height: 300%;
    }
    .name {
      position: static;
      justify-content: flex-end;
      display: flex;
      text-align: left;
      margin: 0.5em;
      top: 50%;
    }
    .title {
      justify-content: flex-end;
      display: flex;
      text-align: left;
      margin: 0.5em;
      top: 50%;
    }
    .panel-content {
      background-image: url(https://talom.dima358.com/wp-content/uploads/2023/05/Portfolio-Website-Design-Ideas.jpg);
      background-size: 100% auto;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }
    .entry-content {
      background-color: #fdb81e;
    }
    .left_col {
      text-align: right;
      padding: 1em;
      padding-top: 6em;
      padding-right: 6em;
    }

    .right_col {
      background-image: url(https://talom.dima358.com/wp-content/uploads/2023/04/simplified-mughal-motif-corner-border.png);
      background-repeat: no-repeat;
      background-size: 33%;
      padding: 1em;
      padding-top: 6em;
      padding-left: 6em;
    }
    </style>
    
    <!--HTML for Home Page-->
    <div class="leftside">
    <div>
    <div class="two_columns">
    <div class="left_col"><img class="self-portrait" src="https://talom.dima358.com/wp-content/uploads/2023/05/Portfolio-Website-Design-Ideas-10-300x169.png" alt="" width="300" height="169" />
    <p class="name">Cesaire Talom (he/him)</p>
    &nbsp;
    <p class="title">Digital Marketing</p>
    <a class="emailbutton" href="https://talom.dima358.com/illustration/"> Email Me </a>
    
    </div>
    <div class="right_col">
    <h2>About Me</h2>
    Being a student, I am undergoing a journey of finding my voice and style within design. I am constantly absorbing new information by studying skilled artists from diverse backgrounds.
    
    <a class="buttonone" href="https://talom.dima358.com/about/"> Resume </a>
    <a class="buttontwo" href="https://talom.dima358.com/design-portfolio/"> Portfolio </a>
    <!-- <button class="teal" onclick="https://talom.dima358.com/photography'">Clickable Button</button>
    <button onclick="https://talom.dima358.com/contact-me/'" type="button">
    www.example.com</button> -->
    
    </div>
    </div>
    </div>
    </div>

Here is what my home page looks like:

Does anyone have any advice on how to fix this? I’m trying to get this done before Tuesday which is when I have to present my site to employers.