Tirsvad
67062dffbc
The publish workflow reads Markdown pages directly in docs/wiki, named Home.md, Home-da.md and Home-ms.md. The wiki screenshot uses an absolute URL because wiki pages cannot reach repo files by relative path.
58 lines
2.0 KiB
Markdown
58 lines
2.0 KiB
Markdown
# Motivationsplakat
|
|
|
|
[English](Home) · **Dansk** · [Bahasa Malaysia](Home-ms)
|
|
|
|
En motivationsplakat som webside, lavet kun med HTML og CSS.
|
|
|
|
|
|
|
|
## Krav
|
|
|
|
1. `h1` bruger skrifttypen Libre Baskerville fra Google Fonts.
|
|
2. Hvid tekst på sort baggrund.
|
|
3. Et billede med en hvid kant på 5px.
|
|
4. Centreret tekst.
|
|
5. En `div` indeholder `h1`, `p` og `img` og er centreret på siden.
|
|
6. `h1` er med store bogstaver via CSS, ikke ved at skrive den om.
|
|
|
|
## Sådan virker det
|
|
|
|
### HTML
|
|
|
|
```html
|
|
<div class="poster">
|
|
<img class="motivation-img" src="./assets/images/daenerys.jpeg" alt="A woman holding a dragon egg">
|
|
<h1>That Special Moment</h1>
|
|
<p>When you find the perfect avocado at the supermarket</p>
|
|
</div>
|
|
```
|
|
|
|
Når billede og tekst ligger i samme `div`, kan én regel bestemme størrelse,
|
|
placering og farve for dem alle.
|
|
|
|
### CSS
|
|
|
|
| Regel | Hvad den gør |
|
|
| --- | --- |
|
|
| `body { background-color: black; }` | Sort sidebaggrund. |
|
|
| `.poster { width: 50%; margin-left: 25%; }` | Halvdelen af sidens bredde med 25% fri på hver side, så plakaten er centreret vandret. |
|
|
| `.poster { margin-top: 100px; }` | Luft over plakaten. |
|
|
| `.poster { color: white; text-align: center; }` | Hvid, centreret tekst. |
|
|
| `.poster { font-family: "Libre Baskerville", serif; }` | Google-skrifttypen med en reserve. |
|
|
| `.motivation-img { width: 100%; border: 5px solid white; }` | Billedet fylder hele `div`'en og får en hvid ramme. |
|
|
| `h1 { text-transform: uppercase; }` | Store bogstaver uden at skrive titlen om. |
|
|
|
|
Google-skrifttypen hentes med et `<link>` i `<head>` i `src/index.html`.
|
|
|
|
## Lav din egen
|
|
|
|
1. Læg dit billede i `src/assets/images/`.
|
|
2. Ret `src` og `alt` på `img`.
|
|
3. Ret teksten i `h1` og `p`.
|
|
4. Eksperimenter: skrifttyper, farver, kantbredde, afstande.
|
|
|
|
## Kør den
|
|
|
|
Åbn `src/index.html` i en browser. Du skal have internetforbindelse for at hente
|
|
skrifttypen.
|