HTML/CSS Assessment - Attempt 1, Asking for Feedback

App Academy Open Curriculum Feedback
#1 
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="site.css">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>App Academy HTML/CSS Assessment</title>
  <link href="site.css" rel="stylesheet">
</head>

<body>
  <!-- Your markup goes here. -->
  <form action="/pets" method="post">
    <fieldset>

    <div>
      <label for="name">Name</label>
      <input type="text" id="name" name="pet_name" placeholder="Name">
    </div>

    <div>
      <label for="type">Type</label>
      <select id="type" name="pet_type">
        <option value="cat">Cat</option>
        <option value="dog">Dog</option>
        <option value="hamster">Hamster</option>
        <option value="other">Other</option>
        <option value="zebra">Zebra</option>
    </select>
    </div>

    <div>
      <label for="biography">Biography</label>
      <textarea id="bio" name="pet_bio"></textarea>
    </div>

    <div>
      <label for="owner email">Owner's Email</label>
      <input id="owner-email" type="email" name="pet_owner_email">
    </div>

    <div>
      <button id="new-pet-submit-button" type="submit">Create new pet</button>
      <button type="reset">Reset</button>
    </div>

    </fieldset>
  </form>

    <div class="card">
      <div>
      <img id="desert" src="/home/pumi28/prep-work/html-css-assessment-1.3/html-css-assessment/images/desert.jpg">
      </div>
      <div id="avatar">
      <img id="profile" src="/home/pumi28/prep-work/html-css-assessment-1.3/html-css-assessment/images/person-avatar.jpg">
      </div>
      <h1>Title goes here</h1>
      <h2>Secondary text</h2>
      <body>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</body>
    </div>

</body>

</html>

/* Your styles go in here. */
form {
    max-width: 600px;
    margin: auto;
}

label,
input,
select,
button,
textarea {
    width: 100%;
    grid-template-columns: 0px;
}

@media screen and (max-width: 600px) {
    form {
        max-width: 600px;
        text-align: left;
        width: 100%;
    }
    input,
    select,
    textarea {
        width: 100%;
    }
}

label {
    width: 100%;
    max-width: 600px;
}



@media screen and (min-width: 600px;) {
    form {
        width: 600px;
        display: grid;
        grid-template-columns: auto;
    }
}

label {
    display: grid;
}


.card {
    max-width: 344px;
    height: 335px;
    margin: 0 auto;
    float: left;
    border: lightgray solid 8px;
    border-sizing: border-box;
    border-radius: 0;
    transition: box-shadow;
    padding: 16px;
}

.card:hover {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}

#desert {
    height: 194px;
    float: left;
    margin: 0 auto;
    border-sizing: border-box;
    border-radius: 5px 5px 0px 0px;
    object-fit: cover;
}

#avatar {
    justify-items: center;
    padding: 16px;
}

#profile {
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 50%;
    margin: 0 1rem;
}

h1 {
    color: #000;
    font-size: 22px;
    display: inline;
    padding: 10px;
}

h2 {
    color: #232F34;
    display: inline;
    padding: 10px;
}

body {
    max-width: 300px;
    color: #232F34;
    font-size: 11px;
    padding: 16px;
}