Complete the below .css file according to comment given in code. <!-- Local Styl
ID: 3920799 • Letter: C
Question
Complete the below .css file according to comment given in code.
<!-- Local Styles -->
<style type="text/css">
section {
/* 03. Reset counter named figures */
}
figcaption {
background-color : var(--color-2);
padding : 5px 0;
/* 04. Increment counter named figures */
}
figcaption:before {
/* 05. Specify the text 'Figure ', the counter figures, followed by ' - ' */
content : ;
}
/* 06. Wrap the next 3 lines in @media screen { with ending } */
h1, h2, h3, h4 { font-family : 'Libre Franklin', sans-serif; }
header h3 { display : none; }
p { font-family : 'Libre Baskerville', serif; }
@media print {
header h3 {text-align : center; }
figcaption {background-color : var(--color-w); }
}
/* 07. Specify screen layout for max-width 768 pixels */
/* Don't forget { and } */
body {
width : 100%;
display : flex;
height : 100%;
color : black;
}
#content {
flex : 1;
flex-direction : ; /* 08. Specify top-to-bottom direction */
}
header {
height : 90px;
}
main {
flex : 1;
}
article {
color : black;
}
article h2, article h3 {
text-align : center;
}
nav, aside {
flex : 1 1 12em;
}
nav {
margin-top : 70px;
}
/* 09. Specify screen layout for max-width 640 pixels */
/* Don't forget { and } */
body, article {
color : ; /* 10. Set text color to blue */
}
header #hgroup {
flex-direction : ; /* 11. Change to top-to-bottom direction */
}
section {
width : 100%;
}
h1, h2, h3 {
text-align : center;
margin : 4px auto;
}
nav, aside, footer {
display : none;
}
.article-contents {
flex-direction : ; /* 12. Top-to-bottom */
}
figure {
text-align : ; /* 13. Center figure */
}
</style>
Explanation / Answer
FInd below Modifications. Comment for any doubt
<!-- Local Styles -->
<style type="text/css">
section {
counter-reset: figures;
}
figcaption {
background-color : var(--color-2);
padding : 5px 0;
counter-increment: figures;
}
figcaption:before {
/* 05. Specify the text 'Figure ', the counter figures, followed by ' - ' */
content: "Figure " counter(figures) "- ";
}
/* 06. Wrap the next 3 lines in @media screen { with ending } */
@media screen{
h1, h2, h3, h4 { font-family : 'Libre Franklin', sans-serif; }
header h3 { display : none; }
p { font-family : 'Libre Baskerville', serif; }
}
@media print {
header h3 {text-align : center; }
figcaption {background-color : var(--color-w); }
}
/* 07. Specify screen layout for max-width 768 pixels */
/* Don't forget { and } */
@media screen and (max-width: 768px) {}
body {
width : 100%;
display : flex;
height : 100%;
color : black;
}
#content {
flex : 1;
flex-direction : column; /* 08. Specify top-to-bottom direction */
}
header {
height : 90px;
}
main {
flex : 1;
}
article {
color : black;
}
article h2, article h3 {
text-align : center;
}
nav, aside {
flex : 1 1 12em;
}
nav {
margin-top : 70px;
}
/* 09. Specify screen layout for max-width 640 pixels */
/* Don't forget { and } */
@media screen and (max-width: 640px) {}
body, article {
color : ; /* 10. Set text color to blue */
}
header #hgroup {
flex-direction : column; /* 11. Change to top-to-bottom direction */
}
section {
width : 100%;
}
h1, h2, h3 {
text-align : center;
margin : 4px auto;
}
nav, aside, footer {
display : none;
}
.article-contents {
flex-direction : column; /* 12. Top-to-bottom */
}
figure {
text-align : center; /* 13. Center figure */
}
</style>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.