Hi Chris,
Here is my code and its result (just a quick look and mark it!). Thank you so much in advance
/*General Page Style*/
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: darkkhaki;
border: 0.2em solid black;
border-radius: 1.5em;
padding: 1em;
}
.card h2, .card p {
margin: 0;
}
.card header, .card footer {
box-sizing: border-box;
height: 5em;
padding: 1em;
}
/*Header styles*/
.card header{
background-image: linear-gradient(to bottom,rgba(0,0,0,0.5), rgba(0,0,0,0));
border-radius: 0.5em;
}
.card header h2 {
font-size: 2em;
line-height: 1.5;
}
/*Main styles*/
.card article img {
max-height: 100%;
float: right;
}
.card article {
background-color: rgba(0,0,0,0.1);
height: 12em;
}
.card article p {
padding: 1em;
line-height: 1.3em;
font-size: 1.1em
}
/*Footer styles*/
.card footer {
background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
border-radius: 0.5em;
}
.card footer p {
font-size: 1.5em;
line-height: 2;
}