I'm currently trying to mimic a mockup and I am having trouble designing the top portion of this website. The Lorem Ipsum seems as if its in a container with everything else where its evenly distributed. I'm unsure how to put these titles as well as paragraph in a container as shown in the picture in which it will eventually be responsive. Can anyone help?

CodePudding user response：

To give you somewhat idea of how to deal with such requirements. I have added an example. Make sure you change all the font face, font size, spacing, element placement, etc properties as per your requirement.

  .banner {
  width: 100%;
  max-width: 600px;
  min-height: 450px;
  background: url(https://images.pexels.com/photos/3575282/pexels-photo-3575282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2) no-repeat 50% 50% / cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 90%;
  text-align: center;
}

.content .title {
  color: #ff0000;
  font-size: 65px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.content .subTitle {
  color: #ffffff;
  font-size: 42px;
  font-weight: 600;
  text-transform: uppercase;
}

.content .sentence {
  color: #ffffff;
  font-size: 16px;
  margin: 30px 0 0 0;
}

<div >
    <div >
      <div >Lorem Ipsum</div>
      <div >Dolar sit amet aran</div>
      <div >Rerum quas delectus non ab eveniet nihil, eaque tempora incidunt blanditiis, molestias sit,
        unde id? Tempora eius illo labore officiis quis quae.</div>
    </div>
  </div>