Question: Please help me to write appropriate code according to given comment in below .css file /***************************************************************************/ /***************************************************************************/ /***************************************************************************/ /* PART 1 - LAYOUT */ /***************************************************************************/
Please help me to write appropriate code according to given comment in below .css file
/***************************************************************************/
/***************************************************************************/
/***************************************************************************/
/* PART 1 - LAYOUT */
/***************************************************************************/
body {
width : 960px;
margin : 10px auto;
font-size : 87.5%; /* 14 point */
}
h1, h2, h3, h4, h5, h6 {
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
p {
font-family : Georgia, "Times New Roman", Times, serif;
line-height : 1.25em;
}
/***************************************************************************/
/* Header layout */
/***************************************************************************/
header {
width : 100%;
margin : 0 auto;
padding : 0;
display : flex;
flex-direction : ; /* 1. specify vertical distribution */
justify-content : space-between;
}
header #hgroup {
margin : 0 auto;
padding : 0 10px;
display : flex;
flex-direction : ; /* 1. specify horizontal distribution */
justify-content : space-between;
}
/***************************************************************************/
/* Header nav layout */
/***************************************************************************/
nav {
height : 22px;
align-items : center;
}
nav ul {
margin : 0;
padding : 0;
display : flex;
}
nav li {
height : 20px;
list-style : none;
margin-right : 1px; /* Background bleed-through */
}
nav a {
padding : 5px 20px;
font-size : 1.1em;
font-weight : bold;
text-decoration : none;
}
/***************************************************************************/
/* Main section and aside layout */
/***************************************************************************/
main {
display : flex;
margin : 0 1px;
align-items : ; /* 2. Specify top alignment */
}
section, aside {
vertical-align : top;
}
section {
width : 80%;
}
article {
padding : 0 10px;
}
section article {
margin : 10px;
}
/***************************************************************************/
/* Used to float images and text left and right */
/***************************************************************************/
.article-contents {
display : flex;
flex-direction : ; /* 1. Specify Horizontal layout */
}
figcaption {
text-align : center; /* Under image */
}
/***************************************************************************/
/* Aside layout */
/***************************************************************************/
aside article {
margin : 10px;
}
aside ul {
list-style : none;
margin : 10px 5px;
padding : 0;
}
aside li {
margin : 5px 0;
}
/***************************************************************************/
/* Footer layout */
/***************************************************************************/
footer {
margin : 0 auto;
padding : 0 10px;
display : flex;
align-items : ; /* 2. Specify top alignment */
justify-content : space-between;
}
footer span {
padding : 1px 3px;
}
/***************************************************************************/
/* PART 2 - COLORS */
/* */
/* 3 New CSS Features to Learn in 2017: Native Variables, 2017-01-10, */
/* https://bitsofco.de/3-new-css-features-to-learn-in-2017/ */
/* */
/* NOTE: Colors must be specified in HTML file before this style sheet */
/***************************************************************************/
body {
background-color : ; /* 3. Set to var(--color-4) */
}
#container {
background-color : ; /* 3. Set to var(--color-w) */
color : ; /* 3. Set to var(--color-b) */
}
header, footer {
background-color : ; /* 3. Set to var(--color-0) */
color : ; /* 3. Set to var(--color-1) */
}
nav a {
background-color : ; /* 3. Set to var(--color-1) */
color : ; /* 3. Set to var(--color-4) */
}
body#home_page a.home_page,
body#about_me a.about_me,
body#my_courses a.my_courses,
body#contact_me a.contact_me {
background-color : ; /* 3. Set to var(--color-3) */
color : ; /* 3. Set to var(--color-1) */
}
article {
background-color : ; /* 3. Set to var(--color-1) */
color : ; /* 3. Set to var(--color-4) */
}
img {
background-color : ; /* 3. Set to var(--color-2) */
}
footer span {
background-color : ; /* 3. Set to var(--color-1) */
color : ; /* 3. Set to var(--color-4) */
}
/***************************************************************************/
/* Borders */
/***************************************************************************/
body {
border-width : 5px;
border-style : solid;
border-color : ; /* 3. Set to var(--color-1) */
}
header {border-bottom : 1px solid ;} /* 3. Set to var(--color-g) */
section {border-right : 1px solid ;} /* 3. Set to var(--color-g) */
section article, aside article {border : 1px solid ;} /* 3. Set to var(--color-g) */
footer {border-top : 1px solid ;} /* 3. Set to var(--color-g) */
img {border : 5px solid ;} /* 3. Set to var(--color-w) */
/***************************************************************************/
/* PART 3 - BEHAVIOR */
/***************************************************************************/
nav a:hover {
background-color : ; /* 3. Set to var(--color-4) */
color : ; /* 3. Set to var(--color-1) */
}
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
