task page: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
my work page:
https://codepen.io/sophientaste-163-com/pen/PoONrqm
my css code:
/* General page styles */
body {
margin: 0;
}
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
/* setup of the card container */
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
/* header and footer */
.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; /* to fit in with the container rounged corners */
}
.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; /* to fit in with the container rounged corners */
}
.card header, .card footer {
box-sizing:border-box; /* use the alternate box model */
height: 5em;
}
/* main business card contents */
.card article img {
max-height: 100%;
float: right;
}
.card article {
height:12em;
background-color: rgba(0,0,0,0.5);
}
.card h2,.card p {
margin:0;
padding:1rem;
}
.card h2 {
font-size:2em;
line-height:1.5;
}
.card footer p {
font-size:1.5em;
line-height:2;
}
.card article p {
color:white; /* make the card more readable */
}
my outcome page looks like this:
want assessment on this task
