html - 我将如何构建这个？（带有头像和过渡的图片卡）

Question

这就是我想要构建的。但我对 css 很糟糕，不知道如何开始。我对 html 很好，这就是我到目前为止所拥有的，但是我从这里去哪里呢？

<!--cards -->

<section>
  <div class="container">
    <div class="card-wrapper">
      <div class="card">
        <img src="images/desert.jpg" alt="card background" class="desert.img">
        <img src="images/person-avatar.jpg" alt="profile image" class="profile.img">
        <h1 class="heading">Title goes here</h1>
        <h2 class="sub-heading">Secondary text</h2>
        <p class="sub-text">Greyhound divisively hello coldly wonderfully marginally far upon excluding</p>
      </div>
    </div>
  </div>
</section>

<!--cards -->

.card {
  border: 1px solid #dadada;
  box-shadow: 2px, 4px rgba(0, 0, 0, 0.3);
  transition: 0.2s;
  width: 50%;
  }
.card h1 {
  padding: 16px;
  font-size: 22px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #000
  }
.card h2 {
  padding: 16px;
  font-size: 11px;
  font-family:Georgia, 'Times New Roman', Times, serif;
  color: #232f34
  }

好吧我做错了什么？？？请帮助

标题是“Title goes here”，次要文本是“Secondary text”，正文是“Greyhound divisively hello coldly wonderfully very far on exclude”。

卡片的根元素是带有“卡片”类的 a。
卡片宽 344 像素。
沙漠图片高 194 像素。
正文和其他所有内容之间的填充是 16px。
标题文本的颜色是#000。
次要文本和正文的颜色是#232F34。
人物图片的大小为直径40px。
正文的大小为 11px。
标题的大小为 22px。
对于任何其他元素周围的填充或边距，请使用您的最佳判断使其看起来像屏幕截图。

过渡

当一个人将他们的指针移到一张图片卡片上时，卡片会得到rgba(0, 0, 0, .3)一个 0px 水平偏移、2px 垂直偏移和4px.

我用来帮助我通过的 CSS

.card-wrapper {
  padding          : 10pt;
  height           : auto;
  width            : 320px;
  background-color : white;
  border-radius    : 10pt;
  box-shadow       : 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
  }
.desertimg {
  border           : 1px solid black;
  width            : auto;
  height           : 196px;
  text-align       : center;
  margin-left      : 5px;
  margin-right     : auto;
  border-radius    : 10px;
  }
.profileimg {
  text-align       : left;
  width            : 40px;
  margin-left      : 5px;
  border-radius    : 100pt;
  }
.midcard {
  display          : flex;
  }
.headings {
  width            : auto;
  margin-left      : 10px;
  }
.card h1 {
  padding          : 16px;
  font-size        : 22px;
  font-family      : Georgia, 'Times New Roman', Times, serif;
  color            : #000
  }
.card h2 {
  padding          : 16px;
  font-size        : 11px;
  font-family      : Georgia, 'Times New Roman', Times, serif;
  color            : #232f34
  }

标签： htmlcss