Write code in.CSS file according to instruction and comment have given in template:

Part 1 - LAYOUT

In this part, you will specify the body dimensions and layout for all the main sections of your web pages.

Use the numbered comments to help you decide what to put on each line.

For details on the flex box commands, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (Links to an external site.)Links to an external site.

Specify the body style to include the width, margin, font information

Specify the #page style flex-direction

Specify the header flex-direction

Specify the header group flex-direction and how to justify the contents

Specify the main alignment as top

Specify the section and aside flex-direction

Specify the footer layout

Part 2 - COLORS

The colors are specified in PART 3 of the main-styles.css file. This solution is simpler that putting color class names in your HTML file.

Based on the colors.css stylesheet you saved from paletton, do the following:

In the :root style, enter the hex values for your paletton colors 0 through 4.

For each of the following var(), enter the --color-X of the corresponding color. For example, the background-color would be var(--color-4);. DO NOT PUT ANY SPACES INSIDE THE ().

/**********************************************************/

/* File: homework31-styles.css */

/* Course: CS597 Multimedia and Web Development SP17 AH1 */

/* Author: PUT YOUR NAME HERE */

/* History: 2016-01-04 Created by Course Instructor */

/* YYYY-MM-DD Modified by Your Name Here */

/**********************************************************/

/**********************************************************/

/* PART 1 - LAYOUT */

/**********************************************************/

/**********************************************************/

/* HTML 5 specific */

/**********************************************************/

header,main,section,article,aside,footer {

display : block;

}

/**********************************************************/

/* 1.1 Specify main body size and font */

/**********************************************************/

body {

width : /* 1.1.1 960 pixels wide */

margin : /* 1.1.2 Top 10 pixels, left-right auto */

font : /* 1.1.3 10 points with 1.5em leading. sans-serif

families */

}

/**********************************************************/

/* 1.2 Specify outer container layout */

/**********************************************************/

#page {

display : flex;

flex-direction : /* 1.2.1 top-to-bottom */

}

/**********************************************************/

/* 1.3 Specify header layout */

/**********************************************************/

header {

width : 100%;

margin : 0 auto;

padding : 0;

display : flex;

flex-direction : /* 1.3.1 top-to-bottom */

justify-content : space-between;

}

header .hgroup {

padding : 0 10px;

display : flex;

justify-content : /* 1.3.3 space between */

margin : 0px 10px 10px 10px;

}

/**********************************************************/

/* 1.4 Specify navigation layout - MAKE NO CHANGES! */

/**********************************************************/

nav {

height : 25px;

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;

}

/**********************************************************/

/* 1.5 Specify content, section, article and aside layout */

/**********************************************************/

main {

display : flex;

margin : 0 1px;

align-items : top;

}

p {

padding : 0 10px;

}

section, aside {

display : flex;

flex-direction : /* 1.5.2 Top-to-bottom */

padding : 5px 10px;

}

section {

width : 80%;

}

.article-contents {

display : flex;

flex-direction : row; /* Horizontal layout */

}

article {

padding : 0 10px;

}

/* Specify how to display article image */

article figure img{

border : 1px solid #aaa;

padding : 5px;

background-color : white;

}

figcaption {

text-align : center;

}

aside ul {

margin : 0 10px;

padding : 0;

}

aside li {

list-style : none;

margin-bottom : 10px;

}

/**********************************************************/

/* 1.6 Specify footer layout */

/**********************************************************/

footer {

margin : 0 auto;

padding : 0 10px;

display : flex;

flex-direction : /* 1.6.1 Left-to-right */

justify-content : /* 1.6.2 Space between */

align-content : /* 1.6.2 Center */

}

/**********************************************************/

/* PART 2 - BORDERS */

/**********************************************************/

section {

border-right : 1px dotted #ccc;

}

/*************************************************************************

**/

/* 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/

*/

/*************************************************************************

**/

:root {

--color-0 : #; /* Paletton color 0 */

--color-1 : #; /* Paletton color 1 */

--color-2 : #; /* Paletton color 2 */

--color-3 : #; /* Paletton color 3 */

--color-4 : #; /* Paletton color 4 */

--color-b : #000000; /* black */

--color-w : #FFFFFF; /* white */

--color-g : #CCCCCC; /* gray */

}

body {

background-color : var(); /* color-4 */

}

#container {

background-color : var(); /* White; */

color : var(); /* Black; */

}

header, footer {

background-color : var(); /* color-0 */

color : var(); /* color-1 */

}

nav a {

background-color : var(); /* color-1 */

color : 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 : var(); /* color-3 */

color : var(); /* color-1 */

}

article {

background-color : var(); /* color-1 */

color : var(); /* color-4 */

}

img {

background-color : var(); /* color-2 */

border-color : var(); /* White */

border-style : solid;

border-width : 5px;

}

footer span {

background-color : var(); /* color-1 */

color : var(); /* color-4 */

}

/*************************************************************************

**/

/* Borders

*/

/*************************************************************************

**/

header {border-bottom : 1px solid var(); } /* gray */

section {border-right : 1px dotted var(); } /* gray */

section article, aside article {border : 1px solid var(); } /* gray */

footer {border-top : 1px solid var(); } /* gray */

img {border : 5px solid var(); } /* white */