Jestem studentem studiów z zakresu mediów cyfrowych, który próbuje stworzyć witrynę z portfolio dla mojej pracy za pośrednictwem WordPress. Próbowałem dostosować moją stronę główną, aby wyglądała jak makieta, którą zrobiłem poniżej:

Oto kod HTML, który mam dla mojej strony głównej poniżej:

/* materiał na stronę HOME */ .two_columns { box-sizing: border-box; wyświetlacz: elastyczny; } .autoportret { szerokość: 100%; wysokość: automatyczna; obramowanie: 3px jednolita czerń; } .emailbutton { justify-content: flex-end; wyświetlacz: elastyczny; wyrównanie tekstu: środek; margines: 5; góra: 50%; obramowanie: 2 piksele jednolita czerń; } .dwie_kolumny div { szerokość: 50%; wzrost: 300%; } .nazwa { pozycja: statyczna; justify-content: elastyczny koniec; wyświetlacz: elastyczny; wyrównanie tekstu: do lewej; margines: 0,5em; góra: 50%; } .title { justify-content: flex-end; wyświetlacz: elastyczny; wyrównanie tekstu: do lewej; margines: 0,5em; góra: 50%; } .panel-content { obraz tła: url (rozmiar tła: 100% auto; powtarzanie tła: brak powtórzeń; renderowanie obrazu: piksele; } . treść-wejściowa { kolor tła: #fdb81e; } .left_col { text-align: right; padding: 1em; padding-top: 6em; padding-right: 6em; } .right_col { obraz tła: url (powtórzenie tła: brak powtórzeń; rozmiar tła: 33%; dopełnienie: 1em; dopełnienie-góra: 6em; dopełnienie-lewo: 6em; }

<!--HTML for Home Page-->
<div class="leftside">
<div>
<div class="two_columns">
<div class="left_col"><img class="self-portrait" src=" alt="" width="300" height="169" />
<p class="name">Cesaire Talom (he/him)</p>
&nbsp;
<p class="title">Digital Marketing</p>
<a class="emailbutton" href=" 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=" Resume </a>
<a class="buttontwo" href=" Portfolio </a>
<!-- <button class="teal" onclick=" Button</button>
<button onclick=" type="button">
www.example.com</button> -->

</div>
</div>
</div>
</div>

Oto jak wygląda moja strona główna:

Czy ktoś ma jakieś porady jak to naprawić? Staram się to zrobić przed wtorkiem, kiedy muszę zaprezentować moją witrynę pracodawcom.