Верстка сайта с текстом справа

Question

Как сверстать, чтобы эти надписи были вот так вот справа:

Answer 1

Накидаю один из возможных вариантов решения, для наглядности смотрите на весь екран (:

*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   margin: 0;
   color: #fff;
   font-size: 36px;
}

.container {
   max-width: 1920px;
   padding: 0 20px;
   margin: 0 auto;
}

.hero {
   background-image: url("https://cdn.pocket-lint.com/r/s/1200x/assets/images/147767-tv-feature-what-order-should-you-watch-all-the-star-wars-films-image1-1wdfjceytb.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.hero__inner {
   display: flex;
   align-items: center;

   /* place some height */
   min-height: 600px;
   height: 100vh;
}

.hero__slide {
   width: 100%;
   max-width: 500px;
   margin-left: auto;
}

.hero__title {
   margin: 0 0 150px;
   font-size: 4rem;
}

.hero__title-small {
   display: block;
   font-size: 2rem;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Example</title>
      <link href="style.css" rel="stylesheet">
   </head>
   <body>
      <div class="wrapper">
         <section class="hero">
            <div class="hero__inner container">
               <!-- place in slider slide if needed -->
               <div class="hero__slide">
                  <h2 class="hero__title title">
                     Star Wars
                     <span class="hero__title-small">Battlefront II</span>
                  </h2>

                  <div class="hero__buttons">
                     <button class="hero__button button">
                        Watch Trailer
                     </button>
                     <button class="hero__button button">
                        Explore Games
                     </button>
                  </div>
               </div>
            </div>
         </section>
      </div>
   </body>
</html>

БЛОГ НА HUSL

Верстка сайта с текстом справа

Ответы (1 шт):