The absolute position is not separating the flow of the images-CodePudding

My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="images/icon2.ico">
  <title>Farhan Sadiq</title>
</head>
  <body >
    <div >
      <img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
      <h1>Farhan Sadiq</h1>
      <p><span >WebDevloper</span> and <span >GameDevloper</span></p>
      <img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
      <img src="images/mountain.png" alt="mountain-img">
    </div>
    <div >

    </div>
    <div >

    </div>
  </body>
</html>

.body {
  margin: 0;
  text-align: center;
}

h1 {
  margin-top: 0;
}

.top-container {
  background-color: #CEE5D0;
}

.middle-container {
  background-color: pink;
  width: 200px;
  height: 200px;
}

.bottom-container {
  background-color: yellow;
  width: 200px;
  height: 200px;
}
.underline {
  text-decoration: underline;
}

.bottom-cloud {
  position: absolute;
}

CodePudding user response：

you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?

CodePudding user response：

There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this .