After that, inside the styles.css file, add the final CSS code.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #E4F0FF;
}
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-gap: 12px;
grid-template-areas:
"header header header"
"nav content side"
"footer footer footer";
height: 100vh;
}
app-header {
color: white;
font-size: 14px;
grid-area: header;
text-align: center;
background-color: #a5282898;
}
app-nav {
grid-area: nav;
margin-left: 0.6rem;
background-color: #167299a4;
}
app-privacy-policy,
app-main {
grid-area: content;
background-color: #89ebbd70;
padding: 25px;
}
app-aside {
grid-area: side;
margin-right: 0.6rem;
background-color: #167299a4;
}
app-footer {
grid-area: footer;
background-color:#2ca159c2;
color: white;
text-align: center;
padding: 25px 0;
}
ul li {
color: white;
}
ul li a {
color: white;
text-decoration: none;
display: inline-block;
margin-bottom: 15px;
}
@media (max-width: 991px) {
app-nav,
app-aside {
margin: 0;
}
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"content"
"side"
"footer";
grid-template-rows:auto minmax(60px, auto) 1fr minmax(70px, auto) auto;
}
}
The finished app.module.ts file can be seen here.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavComponent } from './nav/nav.component';
import { MainComponent } from './main/main.component';
import { AsideComponent } from './aside/aside.component';
import { FooterComponent } from './footer/footer.component';
import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
NavComponent,
MainComponent,
AsideComponent,
FooterComponent,
PrivacyPolicyComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }