/* 1. 2.

3.

4.

5. index.html

6.

7. @media query */ /* ---------------------------------------------------------------------- */ /* !!! 1. !!! */ body { margin: 0; overflow: auto; text-align: justify; background-color: #555; color: #fff; font-family: 'Lucida Console', 'Courier New', monospace; } a { text-decoration: none; color: #fff; } a:hover, a:focus, a:active { color: #ff0; cursor: pointer; } h1 { color: #ff0; text-align: center; } h2 { color: #ff9; text-align: center; } h2:hover { color: #ff0; } h3 { color: #ff9; padding-left: 4em; } img { max-width: 20em; height: auto; } /* ---------------------------------------------------------------------- */ /* !!! 2.

!!! */ header { background-color: #999; position: fixed; z-index: 2; top: 0; width: 100%; height: 3em; overflow: hidden; transition: top 0.3s; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } header a { padding-left: 4em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } header img { width: 2em; height: auto; padding: 0 0.5em; } header p { color: #ff0; } header nav { list-style-type: none; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; } header nav a { display: block; padding: 0 1.5em; } /* ---------------------------------------------------------------------- */ /* !!! 3.

!!! */ aside { background-color: #555; color: #ccc; position: fixed; z-index: 1; top: 0; right: 0; width: 13em; height: 100%; overflow: auto; text-align: left; } /*

- for vertical line between

and right

*/ aside div { border-left: 1px solid #999; height: 100%; } aside nav { padding: 4em 1em 0 1em /* 4em padding-top = 3em header height + 1em */ } aside a { color: #ccc; font-size: 0.85em; } aside a:first-of-type { font-size: initial; text-align: center; } /* ---------------------------------------------------------------------- */ /* !!! 4.

!!! */ main { padding: 5em 2em 2em 2em; /* 5em padding-top = 3em header height + 2em for space between header and h1 (because body margin =0) */ margin-right: 13em; /* = 13em aside width */ } main section, nain h1 { padding-top: 3em; /* 3em padding-top = 3em header height */ margin-top: -3em; /* -3em margin-top = 3em padding-top. It is need for sections links */ } main hgroup p { text-align: center; color: #ff0; } main .container{ display: flex; flex-flow: row wrap; gap: 2em; justify-content: space-evenly; text-align: center; } main .showMore { color: #ff9; display: block; text-align: center; } main .showMore:hover { color: #ff0; } /* ---------------------------------------------------------------------- */ /* !!! 5. index.html

!!! */ main #contactMail { border: 1px solid #ff0; display: flex; flex-direction: row; justify-content: space-between; text-align: center; align-items: center; } main #contactMail p { margin: auto; } main #contactMail button { background-color: #555; color: #ff0; font-size: 1.5em; text-align: center; border: none; width: 50%; height: 2em; } main #contactMail button:hover { background-color: #ff9; color: #555; cursor: pointer; } main #contactMail button:focus { border: 1px solid black; cursor: pointer; } main #contactMail button:active { background-color: #ff0; color: #555; cursor: pointer; } /* ---------------------------------------------------------------------- */ /* !!! 6.

!!! */ footer { background-color: #999; color: #fff; text-align: right; font-size: 0.75em; position: relative; z-index: 2; bottom: 0; left: 0; width: 100%; padding: 0.5em 0; } footer a, footer p { display: block; padding-right: 1em; margin: 0; } /* ---------------------------------------------------------------------- */ /* !!! 7. @media query !!! */ @media all and (max-width: 700px) { header { flex-direction: column; height: 5em; } header a { padding: 0; /* for centering (with favicon) */ } header nav a { padding-bottom: 1em; /* for correct view */ } aside nav { padding-top: 6em; /* 6em padding-top = 5em header height + 1em */ } main { padding: 7em 2em 2em 2em; /* 7em padding-top = 5em header height+ 2em for space between header and h1 (because body margin =0) */ } main section, main h1 { padding-top: 5em; /* 5em padding-top = 5em header height */ margin-top: -5em; /* -5em margin-top = 5em padding-top. It is need for sections links */ } main #contactMail { flex-direction: column; } main #contactMail p { margin: 0.5em; } main #contactMail button { width: 100%; } } @media all and (max-width: 500px) { header { height: 10em; } header nav { flex-direction: column; } header nav a { padding-bottom: 0.5em; /* for correct view */ } aside nav { padding-top: 11em; /* 11em padding-top = 10em header height + 1em */ } main { padding: 12em 2em 2em 2em; /* 12em padding-top = 10em header height + 2em for space between header and h1 (because body margin =0) */ } main section, main h1 { padding-top: 10em; /* 10em padding-top = 10em header height */ margin-top: -10em; /* -10em margin-top = 10em padding-top. It is need for sections links */ } main #contactMail { flex-direction: column; } main #contactMail p { margin: 0.5em; } main #contactMail button { width: 100%; } }