problem 1

by sofie_anne13

HTML

<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <link rel="stylesheet" href="styles.css">
  <body>
    <div class='wrapper'>
      <div class="sel-btns">
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {
  background-color: #eb3477;
}

.sel-btns {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.box {
  margin-top: 100px;
}

.box {
  display: flex;
  border: solid;
  color: white;
  height: 50px;
  width: 65px;
  align-items: flex-end;
  border-radius: .5em;
  background: #d94c74;
}

img {
  position: relative;
  right: 45px;
  top: 5px;
  height: 150px;
  width: 150px;
}