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

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!