Question 394090 in Html Question posted in
Some basic documentation can be found here.

how do I place an image to the right of the html text?

help to place the image on the right of the html text using flex or something else
I am attaching all the html code, I do not know what to do. Please help me

I tried to do it through flex but it didn’t work out

<!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!--=============== CSS ===============-->
      <link rel="stylesheet" href="assets/css/styles.css">

      <title>Responsive portfolio website - Bedimcode</title>
   </head>
   <body>
      <!--==================== MAIN ====================-->
      <main class="main">
         <!--==================== HOME ====================-->
         <section class="home section" id="home">
            <div class="main__section">
               <div class="container">
                  <div class="main__section-content">
                     <h4 class="home__section-title">Best Destinations around the world</h4>
                     <h1 class="home__section-desc">Travel, enjoy</br>
                        and live a new</br>
                        and full life</h1>
                     <p class="home__section-specific">
                        Built Wicket longer admire do barton vanity itself do in it. </br>
                        Preferred to sportsmen it engrossed listening. Park gate</br>
                        sell they west hard for the.
                     </p>
                  </div>
                  <div class="home-section-img">
                     <img src="assets/img/Image.png" alt="Img" class="home__section-image">
                  </div>
               </div>

            </div>

         </section>
      </main>
   </body>
</html>

.main__section{   
display: flex; 
} 
 .home__section-title{ 
  color: #DF6951; 
  font-size: 20px; 
  line-height: 50px; 
} 
 .home__section-desc{ 
  color: #181E4B;  
 font-size: 84px;
 } 
 .home__section-specific{  
 color: #5E6282;  
 font-size: 16px;  
 padding: 30px 0 0; 
  font-weight: 400; 
}

https://codepen.io/Sayranov/pen/BaexRWE

Tags:

2

Answers


  1. 0

    Try this: change .main__section in the CSS to .container.

    .container {
  display: flex;
}
.home__section-title {
  color: #df6951;
  font-size: 20px;
  line-height: 50px;
}
.home__section-desc {
  color: #181e4b;
  font-size: 84px;
}
.home__section-specific {
  color: #5e6282;
  font-size: 16px;
  padding: 30px 0 0;
  font-weight: 400;
}
    Login or Signup to reply.
  2. 0

    use flex in the container and then add flex to both image and text

    .main__section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; 
}

.container {
  display: flex;
  align-items: center; 
}

.main__section-content {
  flex: 1;
  padding-right: 20px;
}

.home-section-img {
  flex: 1;
}

.home__section-title { 
  color: #DF6951; 
  font-size: 20px; 
  line-height: 50px; 
} 

.home__section-desc { 
  color: #181E4B;  
  font-size: 84px;
} 

.home__section-specific {  
  color: #5E6282;  
  font-size: 16px;  
  padding: 30px 0 0; 
  font-weight: 400; 
}

.home__section-image {
  max-width: 100%; 
  height: auto;
}
     <main class="main">
    <!--==================== HOME ====================-->
    <section class="home section" id="home">
      <div class="main__section">
        <div class="container">
          <div class="main__section-content">
            <h4 class="home__section-title">Best Destinations around the world</h4>
            <h1 class="home__section-desc">Travel, enjoy<br> and live a new<br> and full life</h1>
            <p class="home__section-specific">
              Built Wicket longer admire do barton vanity itself do in it. <br>
              Preferred to sportsmen it engrossed listening. Park gate<br>
              sell they west hard for the.
            </p>
          </div>
          <div class="home-section-img">
           <img src="https://sun9-32.userapi.com/impg/BYMCcJkfnWw5X3iIiWLEGEh5Qsxz-v7q6u7gVA/dmwDtkF4K6Y.jpg?size=784x764&quality=96&sign=640231f45be10eb2b9e18a065077d9f1&type=album" alt="Img" class="home__section-image"> 
          </div>
        </div>
      </div>
    </section>
  </main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search