Hello everyone. I need an assist with CSS assessment.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
Please let me know if I did something wrong.
Thank you
/* Selectors to be matched up with rulesets
.card article img (0-1-1-1)
.card footer (0-1-0-1)
.card header (0-1-0-1)
.card (0-1-0-0) */
/* Rulesets to be matched up with selectors */
body {
margin: 0em;
}
html {
font-family: ‘Helvetica neue’, Arial, ‘sans serif’;
font-size: 1em;
background-color: #ccc;
}
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
.card header {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
border-radius: 1.5em 1.5em 0 0;
}
.card footer {
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
border-radius: 0 0 1.5em 1.5em;
font-size: 1.5em;
padding: 0.5em;
text-align: center;
height: 1.8em;
width: 22.5em;
}
.card header .card footer {
height: 3em;
padding: 1em;
font-size: 1.5em;
}
.card h2, p {
margin: 0;
}
.card article img {
max-height: 100%;
float: right;
}
.card article p {
font-size: 1.5em;
padding-left: 0.8em;
padding-top: 0.3em;
color: #ccc;
}
.card article {
height: 13.5em;
background-color:rgba(0,0,0,0.1);
}
.card h2 {
font-size: 2em;
text-align: left;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
}