HTML/CSS/JS Exercise

by Shirly Manor

HTML

<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <div id="exercise1" class="exercises">
      <h2>Exercise #1</h2>
      <p>
        This image should be displayed with width 300 pixels. but still display original size. How to fix it?
      </p>
      <img id="flower" src="https://res.cloudinary.com/demo/image/upload/sample.jpg" />
    </div>
    <div id="exercise2" class="exercises">
      <h2>Exercise #2</h2>
      <p>
        This image does not look right. What's wrong with it and how to fix it?
      </p>
      <img id="couple" src="https://res.cloudinary.com/demo/image/upload/couple.jpg" />
    </div>
    <div id="exercise3" class="exercises">
      <h2>Exercise #3</h2>
      <p>
        Implement the following transformation with Cloudinary:<br />
        <img src="https://res.cloudinary.com/elukas/image/upload/v1580779075/exercise/sample-circle.png" /><br />
        Use the following original asset: <br />
        <img id="circle" src="https://res.cloudinary.com/elukas/image/upload/v1580779040/exercise/circle.jpg" />
      </p>
    </div>
     <div id="exercise4" class="exercises">
      <h2>Exercise #4</h2>
      <p>
        Following an original image, Can you check the size and share an optimized image:<br />
        <img src="https://res.cloudinary.com/demo/image/upload/sample.jpg" /><br />
       
      </p>
    </div>
  </body>
</html>

CSS

.exercises {
  border: 1px solid #333;
  border-radius: 25px;
  padding: 10px;
  margin: 10px 0;
}

#flower {
  width: 300;
}

#couple {
  width: 300px;
  height: 400px;
}

#circle {
  height: 263px;
}