App Academy

HTML / CSS assessment help

I feel like my HTML code is pretty much complete, ill post it in here as well. My CSS however is struggling. The picture card has no border, and the pictures don’t display at all. And help would be greatly appreciated.

<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">
<form action="/pets" method="POST">

    <fieldset>

        <div>

            <label for="name">Name</label>

            <input type="text" id="name" name="pet_name">

        </div>

        <div>

            <label for="type">Type</label>

            <select name="pet_type" id="type">

                <option value="cat">Cat</option>

                <option value="dog">Dog</option>

                <option value="hamster">Hamster</option>

                <option value="zebra">Zebra</option>

                <option value="other">Other</option>

            </select>

        </div>

        <div>

            <label for="biography">Biography</label>

            <textarea name="pet_bio" id="bio"></textarea>

        </div>

        <div>

            <label for="owner-email">Owner's Email</label>

            <input type="email" id="owner-email" name="pet_owner_email">

        </div>

        <div>

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

        </div>

        <div>

            <button type="reset">Reset</button>

        </div>

    </fieldset>

</form>

<div class="card" width="344px">

    <img src=".\images\desert.jpg" alt="desert" height="194px" width="344px">

    <div class="profile">

        <img class="avatar" src=".\images\person-avatar.jpg" alt="profile picture" width="40px">

        <div>

            <h1 class="title">Title goes here</h1>

        </div>

        <div>

            <p class="secondary-text">Secondary text</p>

        </div>

        <p class="body-text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>

    </div>

</div>

And my css
form{

max-width: 600px;

margin: auto;

}

label,

input,

select,

button,

textarea {

width: 100%;

grid-template-columns: 0px;

}

.card{

max-width: 344px;

height: 335px;

margin-left: auto;

margin-right: auto;

transition: box-shadow;

}

.card:hover{

box-shadow: 0 2px 4px 0 rgba(0,0,0,.3);

}

.avatar{

float: left;

border-radius: 50%;

margin: 0 1rem;

}

.title{

display: inline;

color: #000;

font-size: 22px;

padding: 10px;

}

.secondary-text{

color:#232F34 ;

display: inline;

padding: 10px;

}

.body-text{

color: #232F34;

font-size: 11px;

max-width: 300px;

padding: 16px;

}

.profile{

padding: 10px;

justify-items: center;

}

Hi, and welcome to the community!
It looks like you must have figured out these issues - I can see that you passed your assessment. Congratulations!
Jesse