-4

I am a beginner (just started learning). I'm creating this web page to practice HTML / CSS /JS. So I'm facing some trouble here. I need to get that "Creative web designer" text under to the header. I tried different ways. But I couldn't do that properly.

The p tag with the 'topic' class is the element I want to move <p class = "topic">...<p />

  body {
    background-color: #D8D9DA;
  }
  .header h1 {
    color:rgb(13, 2, 0);
    font-family:"verdana", sans-serif ;
    padding-left: 30px;

  }
  .header {
  background-color: #FFF6E0;
  padding:30px;
  align-items: center;
  border-radius: 70px;
  display: flex;
  justify-content: space-between;
}
.social {
  list-style-type: none;
  display: inline;
  padding: 0px;
  margin-right: 10px;
  object-position: 10px;
  margin-top: 20px;
}
.navi{
  list-style-type:none;
  padding: 8px 16px;
  font-family:"verdana", sans-serif  ;
  font-size: 25px;
  display: block;
  width:20%;
}
.nav {
  list-style-type:none;
  padding: 8px 16px;
  font-family:"verdana", sans-serif  ;
  font-size: 25px;
  display: block;
  color: rgb(0, 0, 0);
  background-color: #61677A ;
  width:20%;
}
.navi:hover{
  color:rgb(248, 246, 246);
  background-color: rgb(0, 5, 7);
}

.line {
  width:1px;
  height: 100%;
  background-color: black;
  position: absolute;
  left:28%;
  top: 20%;


}


.quote {
  font-style: italic;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  display:flex;
  flex-direction: column;
  width: 27%;
  padding-top: 120px;

}

.image1 {
  position: relative;
  max-width: 28%;
  height: 100px;
}

.image1 img {
  position: absolute;
  width:50%;
  left:69px;
  padding-top: 50px;
}

.topic {
  padding-left: 30%;

}

#topic {
  position: relative;
  margin-top: 0%;
}
<header class="header"><h1>WELCOME</h1>
  <ul>
    <li class="social"><img class="insta" src="instagram.png" width="20px" ></li>
    <li class="social"><img class="face" src="facebook.png" width="20px"></li>
    <li class="social"><img class="twi" src="twitter.png" width="20px"> </li>
  </ul>
</header>

<br>
<div class="box">
  <ul class="top">
    <li class="nav">HOME</li>
    <li class="navi">NEWS</li>
    <li class="navi">CONTACT</li>
    <li class="navi">ABOUT</li>
  </ul>

</div>
<div class="line"></div>
<br>
<div class="image1">
<img src="Annotation 2021-11-19 141643.png" >
</div>
<br>

<p class="quote">
" Try To Do Something Different " </p>              
<br>
<div id="topic">
<p class="topic" >CREATIVE WEB DESIGNER</p>
</div>

THAT WHAT I EXPECTING

Izebeafe
  • 182
  • 1
  • 4
4U FROM ME
  • 19
  • 2
  • 5
    THIS IS SCREAMING.... all caps makes people not want to answer your question. – epascarello Aug 15 '23 at 18:56
  • 2
    https://stackoverflow.com/questions/48898448/two-columns-with-one-header-layout-with-css3-flexbox or https://stackoverflow.com/questions/50850548/stretch-columns-in-two-columns-layout-with-shared-header-using-flexbox – epascarello Aug 15 '23 at 18:57

1 Answers1

1

All you should have to do is move:

<div id="topic">
<p class="topic" >CREATIVE WEB DESIGNER</p>
</div>

to be right after the </header> line.

<header class="header"><h1>WELCOME</h1>
  <ul>
    <li class="social"><img class="insta" src="instagram.png" width="20px" ></li>
    <li class="social"><img class="face" src="facebook.png" width="20px"></li>
    <li class="social"><img class="twi" src="twitter.png" width="20px"> </li>
  </ul>
</header>

<div id="topic">
<p class="topic" >CREATIVE WEB DESIGNER</p>
</div>

<br>
<div class="box">
  <ul class="top">
    <li class="nav">HOME</li>
    <li class="navi">NEWS</li>
    <li class="navi">CONTACT</li>
    <li class="navi">ABOUT</li>
  </ul>

</div>
<div class="line"></div>
<br>
<div class="image1">
<img src="Annotation 2021-11-19 141643.png" >
</div>
<br>

<p class="quote">
" Try To Do Something Different " </p>              
<br>
Stephan
  • 345
  • 2
  • 14