/* 1. 2.

3.

4.

5. @media query */ /* ---------------------------------------------------------------------- */ /* !!! 1. !!! */ body { margin: 0; display: grid; grid-template: repeat(3, minmax(min-content, 100vh)) / minmax(min-content, 1fr); grid-template-areas: "header" "main" "footer" } a { text-decoration: none; color: black; } a:hover { color: blue; } svg { max-width: 2em; height: auto; fill: currentColor; } /* ---------------------------------------------------------------------- */ /* !!! 2.

!!! */ header { grid-area: header; background-color: #0080ff; display: flex; justify-content: center; align-items: center; } header h1 { color: white; position: absolute; z-index: 10; left: 11%; bottom: 10%; font-size: 3em; } header img { max-width: 30%; height: auto; padding-left: 5%; } header section { padding: 2em; background-color: white; } header section ul { margin: 0; } header section div { padding-top: 1.5em; text-align: right; } header section div a { padding: 0.5em; } /* ---------------------------------------------------------------------- */ /* !!! 3.

!!! */ main { grid-area: main; padding: 0 2em; } main .container { display: grid; grid-template: repeat(2, minmax(min-content, 1fr)) / repeat(3, minmax(min-content, 1fr)); grid-auto-flow: row; grid-auto-rows: minmax(min-content, 1fr); gap: 1em; text-align: center; } main .container img { max-width: 20em; height: auto; } /* ---------------------------------------------------------------------- */ /* !!! 4.

!!! */ footer { grid-area: footer; background-color: #0080ff; color: white; display: grid; grid-template: minmax(min-content, 1fr) / minmax(min-content, 0.6fr) minmax(min-content, 1fr); grid-template-areas: "footerSection footerImg"; align-items: center; } footer section { grid-area: footerSection; margin: auto; } footer section address { padding-top: 0.2em; } footer section address p svg { max-width: 1em; height: auto; } footer section address p a { color: white; } footer section address div { padding-top: 1.5em; } footer section address div a { padding-right: 1em; } footer img { grid-area: footerImg; max-width: 90%; height: auto; } /* ---------------------------------------------------------------------- */ /* !!! 5. @media query !!! */ @media (max-width: 59.99em) { header h1 { top: 5%; left: 15%; } header img { max-width: 50%; float: left; } main .container { display: grid; grid-template: repeat(3, minmax(min-content, 1fr)) / repeat(2, minmax(min-content, 1fr)); grid-auto-flow: row; grid-auto-rows: minmax(min-content, 1fr); gap: 1em; text-align: center; } footer section { padding: 2em; } } @media (max-width: 39.99em) { h2 { text-align: center; } header { flex-direction: column; } header h1 { top: 80%; left: 30%; } header img { max-width: 80%; padding: 0; } main .container { display: grid; grid-template: repeat(6, minmax(min-content, 1fr)) / minmax(min-content, 1fr); grid-auto-flow: row; grid-auto-rows: minmax(min-content, 1fr); gap: 1em; text-align: center; } footer { display: flex; flex-direction: column; } }