I’m looking for feedback about my work on the Fundamental CSS Comprehension exercise. I’m not sure if my footer is aligned perfectly but I can’t figure out how to fix it. Also my background colors seem a bit off.
body, h2, p, article, img, section {
margin: 0;
padding: 0;
}
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
article {
height: 12em;
background-color: rgba(0,0,0,.2);
}
article p {
color: white;
padding: 1em;
}
h2 {
font-size: 2em;
}
/* Rulesets to be matched up with selectors */
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
/* Rulesets for header and footer */
.card header {
height: 3em;
margin: 0;
}
.card header {
background-image: linear-gradient(to bottom,rgba(255,0,0,0.4), rgba(255,0,0,0));
border-radius: 1.5em 1.5em 0 0;
padding: 1em;
}
.card footer {
background-image: linear-gradient(to bottom,rgba(255,0,0,0), rgba(255,0,0,0.4));
border-radius: 0 0 1.5em 1.5em;
height: 3em;
padding: 1em;
margin: 0;
}
.card footer p {
margin: 0;
font-size: 1.5em;
}
/* Rulesets for main card content */
.card article img {
max-height: 100%;
float: right;
}