Colmar Academy Project

Get Help Codecademy
#1

Hello,

I would like assistance with creating the second page of this: (https://content.codecademy.com/courses/freelance-1/capstone-2/colmar-academy-spec.png) - where it says “doesn’t hurt to keep practicing,” that whole page - I don’t know how to input the correct HTML/CSS in order to position the smaller images, in that order next to the biggest one: and how to align the smaller image’s text next to it, ex: “Orientation date”/ “Read More” etc. All the trial and error previously has led to haphazard outcomes. I would appreciate help on how to create this page. Thank you.

Here are copies of my current HTML/CSS:

  • HTML:
       <div class="guymain">

  <img class="guy" src="./resources/images/information-main.jpg">

  <h1>It doesn't hurt to keep practicing</h1>

  <span>"Curabitur vitae libero in ipsum porttitor consequat. Aliquam et commodo lectus,<br>

nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam<br>

eget magna laoreet, efficitur dolor consequat, tristique ligula."</span>

  <h6>Emanuel, Sr Strategist at Hiring.com</h6>    

</div>



<div class="orientation">

  <img src="./resources/images/information-orientation.jpg">

    <div class="content">

      <h2>Orientation date</h2>

      <span>Tue 10/11 & Wed 10/12: 8am-3pm</span>

    </div>  

</div>

- CSS:

/* Main section */

#main {
width: 1700px;
length: 2000px;
display: block;
}

.guymain {
padding: 5px;
display: inline-block;
}

.orientation {
display: inline;
}

.orientation .content {
display: inline;
}

.guy {
padding-top: 61px;
padding-bottom: 32px;
padding-left: 24px;
padding-right: 24px;
display: block;
}

#main h1 {
padding-left: 39px;
font-size: 37px;
font-family: Tahoma;
color: darkslategrey;
position: relative;
bottom: 1px;
}

#main span {
font-size: 23px;
font-weight: lighter;
color: darkslategrey;
padding-left: 39px;
display: block;
}

#main h6 {
color: rgb(45, 56, 56);
font-size: 20px;
font-family: Tahoma;
font-weight: lighter;
padding-left: 39px;
}