How to move up this picture next to the text "EMAIL :"-CodePudding

I want to move the photo to top of the site and next to the text: "EMAIL :" Create a BITLAB NEWS layout web page using HTML CSS

.top-bar {
  background-color: #00008B;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.top-bar .left {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.top-bar .right {
  color: white;
}

.login-bar {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}

.login-bar .left {
  color: black;
}

.input {
  padding-left: 10px;
  margin-bottom: 20px;
}

.password-bar {
  display: flex;
  justify-content: flex-start;
}

.password-bar .left {
  color: black;
  padding-left: 10px;
}

.input2 {
  padding-left: 10px;
  padding-top: 10px;
}

.button {
  background-color: green;
  margin-top: 20px;
  margin-left: 10px;
  color: white;
  width: 60px;
  border-radius: 5px;
  height: 15px;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

.blue {
  color: #0000FF;
}

.center {
  float: left;
  width: 33.33%;
  padding: 5px;
  margin-left: 300px;
  margin-bottom: 800px;
}

<div >
  <div >BITLAB NEWS</div>
  <div >About&nbsp;&nbsp;&nbsp;&nbsp; Contacts&nbsp;&nbsp;&nbsp;&nbsp; FAQ&nbsp;&nbsp;&nbsp;&nbsp; Login&nbsp;&nbsp;</div>
</div>

<body>
  <div >
    <div >EMAIL :</div>
  </div>
  <div ><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
  </div>
  <div >
    <div >PASSWORD :</div>
  </div>
  <div ><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
  </div>
  <div >
    <div >SIGN IN</div>
  </div>
  <p>&nbsp;&nbsp;&nbsp;I want to create <span >new account</span></p>
  <div >
    <p>Boeing 777: Dozens grounded after Denver engine failure</p>
    <img src="3a.jpg" style="width: 100%;">
  </div>
</body>

CodePudding user response：

Try using a flexbox

.top-bar {
  background-color: #00008B;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.top-bar .left {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.top-bar .right {
  color: white;
}

.login-bar {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}

.login-bar .left {
  color: black;
}

.input {
  padding-left: 10px;
  margin-bottom: 20px;
}

.password-bar {
  display: flex;
  justify-content: flex-start;
}

.password-bar .left {
  color: black;
  padding-left: 10px;
}

.input2 {
  padding-left: 10px;
  padding-top: 10px;
}

.button {
  background-color: green;
  margin-top: 20px;
  margin-left: 10px;
  color: white;
  width: 60px;
  border-radius: 5px;
  height: 15px;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

.blue {
  color: #0000FF;
}

.login-flex{
  display: flex;
}

<body>
  <div >
    <div >BITLAB NEWS</div>
    <div >About&nbsp;&nbsp;&nbsp;&nbsp; Contacts&nbsp;&nbsp;&nbsp;&nbsp; FAQ&nbsp;&nbsp;&nbsp;&nbsp; Login&nbsp;&nbsp;</div>
  </div>
  <div >
    <div >
    <div >
      <div >EMAIL :</div>
    </div>
    <div ><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
    </div>
    <div >
      <div >PASSWORD :</div>
    </div>
    <div ><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
    </div>
    <div >
      <div >SIGN IN</div>
    </div>
    <p>&nbsp;&nbsp;&nbsp;I want to create <span >new account</span></p>
    </div>
    <div >
      <p>Boeing 777: Dozens grounded after Denver engine failure</p>
      <img src="3a.jpg" style="width: 100%;">
    </div>
   </div>
</body>

CodePudding user response：

I'm not quite sure of the positioning you want, but you can easily obtain your result by using display: flex

You can check some documentation about it here on css-tricks and practice with this quick mini game flexboxfroggy so that you can obtain the result you want.

.top-bar {
    background-color: #00008B;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.top-bar .left {
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.top-bar .right {
    color: white;
}

.login-bar {
    display: flex;
    width: 90%;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    padding: 10px;
}

.login-bar .left {
    color: black;
}

.input {
    padding-left: 10px;
    margin-bottom: 20px;
}

.password-bar {
    display: flex;
    justify-content: flex-start;
}

.password-bar .left {
    color: black;
    padding-left: 10px;
}

.input2 {
    padding-left: 10px;
    padding-top: 10px;
}

.button {
    background-color: green;
    margin-top: 20px;
    margin-left: 10px;
    color: white;
    width: 60px;
    border-radius: 5px;
    height: 15px;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.blue {
    color: #0000FF;
}

<div >
  <div >BITLAB NEWS</div>
  <div >About&nbsp;&nbsp;&nbsp;&nbsp; Contacts&nbsp;&nbsp;&nbsp;&nbsp; FAQ&nbsp;&nbsp;&nbsp;&nbsp;
    Login&nbsp;&nbsp;</div>
</div>
<body>

  <div >
    <div>
      <div >EMAIL :</div>
      <div ><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
      </div>
      <div >
        <div >PASSWORD :</div>
      </div>
      <div ><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
      </div>
      <div >
        <div >SIGN IN</div>
      </div>
      <p>&nbsp;&nbsp;&nbsp;I want to create <span >new account</span></p>
    </div>
    <div>
      <p>Boeing 777: Dozens grounded after Denver engine failure</p>
      <img src="https://nationwideradiojm.com/wp-content/uploads/2021/02/Capture-2.jpg" style="width: 120px;">
    </div>
  </div>

</body>