Motivationsplakat

English · Dansk · Bahasa Malaysia

En motivationsplakat som webside, lavet kun med HTML og CSS.

Krav

h1 bruger skrifttypen Libre Baskerville fra Google Fonts.
Hvid tekst på sort baggrund.
Et billede med en hvid kant på 5px.
Centreret tekst.
En div indeholder h1, p og img og er centreret på siden.
h1 er med store bogstaver via CSS, ikke ved at skrive den om.

Sådan virker det

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

Læg dit billede i src/assets/images/.
Ret src og alt på img.
Ret teksten i h1 og p.
Eksperimenter: skrifttyper, farver, kantbredde, afstande.

Kør den

Åbn src/index.html i en browser. Du skal have internetforbindelse for at hente skrifttypen.

Motivational Poster