How to display the picture and text in the same horizontal line?

user_14901362 0
Viewed 107

I'm a newbie with web pages development. How can I put the writing and the picture in a horizontal line as the attached picture?

enter image description here

Now it's appeared like this:

enter image description here

I tried several ways and modified the CSS file but, I couldn't put them together. Besides, when I minimize the screen to display on mobiles, for example, the writing remains and, the graphics disappear. Also when I minimized the screen logo cutoff only logo On some types of devices. Please can anyone help me?

My HTML Code and CSS

body {
  display: flex;
  flex-direction:column; 
  font-family: Arial, Helvetica, sans-serif; 
}
.wave { position: fixed;
  bottom: 0; left: 0;
height: 100%; z-index: -1;}

.img {display: flex; justify-content: flex-end;
  align-items: center;
}
header { display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}

.logo { cursor: pointer;
  margin-right: auto;
}
.navLinks{
  list-style: none;
  padding: 2px;
  margin-right: 5px;
}
.navLinks li {
  display: inline-block;
  padding: 6px 20px;
}
.navLinks li a {
  color: black;
  transition: all 0.3s ease 0s;
}
.navLinks li a:hover {
  color: aqua;
}
.divone {
  justify-content: flex-end;
}
.divone .img {
  justify-content: flex-end;
}
.headerContent {
  margin-bottom: 50px;
  color: black;
  text-align: inherit;
  justify-content: flex-start;
}
.headerContent h2 {
  font-size: 4vmin;
}
.headerContent h1 {
  font-size: 7vmin;
  margin-top: 50px;
  margin-bottom: 30px;
}
.line { 
width: 150px; 
height: 4px;
position: absolute;
background: #fc036b;
margin: 10px auto;
border-radius: 5px;}
<header>
    <h1 class="logo">LOGO LOGO LOGO</h1>
    <nav>
        <ul class="navLinks">
            <li><a href="#">Home</a>
            <li><a href="#">Program</a>
            <li><a href="#">Staff</a>
            <li><a href="#">Events</a>
            <li><a href="#">Blog</a>
            <li><a href="#">Contact us</a>
        </ul>
    </nav>
    <button onclick="document.getElementById('buId').style.display='block'" style="width:auto;">Login</button>
</header>
<img class="wave" src="wave.png">

<div class="divone">
    <div class="img">
        <img src="undraw-teaching.svg">
    </div>
<div class="headerContent">
    <h2>Explore</h2>
    <div class="line"></div>
    <h1>Welcome to </h1>
</div>

css html javascript
2 Answers

You can try use flex-box

.divone {
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.divone .img {
  order:2;
}
user_46044570

Remove the flex on the image. That is not needed. Then set flex on divone and use flex-direction: row-reverse; to get the desired order and use align-items: center; to get them inline horizontally. Frankly, you have a bit "too much" CSS which is what is causing the flex-box to need a row-reverse flex-direction, meaning flex isn't working as intended.

I used a dummy image to demonstrate.

body {
  display: flex;
  flex-direction:column; 
  font-family: Arial, Helvetica, sans-serif; 
}
.wave { position: fixed;
  bottom: 0; left: 0;
height: 100%; z-index: -1;}


header { display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}

.logo { cursor: pointer;
  margin-right: auto;
}
.navLinks{
  list-style: none;
  padding: 2px;
  margin-right: 5px;
}
.navLinks li {
  display: inline-block;
  padding: 6px 20px;
}
.navLinks li a {
  color: black;
  transition: all 0.3s ease 0s;
}
.navLinks li a:hover {
  color: aqua;
}
.divone {
  justify-content: flex-end;
}
.divone .img {
  justify-content: flex-end;
}
.headerContent {
  margin-bottom: 50px;
  color: black;
  text-align: inherit;
  justify-content: flex-start;
}
.headerContent h2 {
  font-size: 4vmin;
}
.headerContent h1 {
  font-size: 7vmin;
  margin-top: 50px;
  margin-bottom: 30px;
}
.line { 
width: 350px; 
height: 4px;
position: absolute;
background: #fc036b;
margin: 10px auto;
border-radius: 5px;}

.divone {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 50%;
}
<header>
    <h1 class="logo">LOGO LOGO LOGO</h1>
    <nav>
        <ul class="navLinks">
            <li><a href="#">Home</a>
            <li><a href="#">Program</a>
            <li><a href="#">Staff</a>
            <li><a href="#">Events</a>
            <li><a href="#">Blog</a>
            <li><a href="#">Contact us</a>
        </ul>
    </nav>
    <button onclick="document.getElementById('buId').style.display='block'" style="width:auto;">Login</button>
</header>
<img class="wave" src="wave.png">

<div class="divone">
    <div class="img">
        <img src="https://dummyimage.com/400x400/000/fff">
    </div>
<div class="headerContent">
    <h2>Explore</h2>
    <div class="line"></div>
    <h1>Welcome to </h1>
</div>

user_164963570
Related