Hi mungocherry33. Welcome to SitePoint.
My son who is a web designer/developer gave me the page in the attached .pdf file and told me to reproduce it
So is this an exam question? :lol:
Probably the way to go here would be to have an outer wrapper that is centered with a white background. Center it with margin: 0 auto (or change the 0 to a value equivalent to the required gap at the top).
Then have your heading, with perhaps a paragraph below it for the subheading.
Then perhaps a content div to hold the rest, with a black border and either a big margin around the outside or have this centered with margin: 0 auto once again. Also give it padding to keep the text away from the border.
Inside that content div you might have an h2 with left padding for the image to sit as a background image, or just set the image inside the h2 text.
Actually, on seconds thoughts (I'm thinking aloud here), since the image is hard up against the border, it might be better to position it absolutely in the top left corner (giving the container position: relative as well) and then give the header text a big left margin to stop it overlapping that image.
The "Learn more" para will just have a special class and a black background.
Finally, the buttons at the bottom could just be three floated paragraphs.
Anyhow, that;s one way to approach it.
Then you have your paragraphs underneath.