Add README and wiki home page #2
@@ -1,2 +1,26 @@
|
|||||||
# 042-web-birthday-invitation
|
# 042-web-birthday-invitation
|
||||||
|
|
||||||
|
A retro 90s birthday invitation page, built with plain HTML and CSS. Day 42 of
|
||||||
|
the Udemy "100 Days of Code" web development course.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## What it shows
|
||||||
|
|
||||||
|
- the date of the party as headings
|
||||||
|
- a picture of the birthday cake
|
||||||
|
- a list of what the guests bring
|
||||||
|
- a link to the location on Google Maps
|
||||||
|
|
||||||
|
## Run it
|
||||||
|
|
||||||
|
No build step. Open `src/index.html` in a browser.
|
||||||
|
|
||||||
|
## Files
|
||||||
|
|
||||||
|
| File | Purpose |
|
||||||
|
| --- | --- |
|
||||||
|
| `src/index.html` | The page: headings, image, list and anchor tag |
|
||||||
|
| `src/style.css` | The retro 90s look |
|
||||||
|
|
||||||
|
More in the [wiki](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/042-web-birthday-invitation/wiki).
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
# Birthday Invitation
|
||||||
|
|
||||||
|
**English**
|
||||||
|
|
||||||
|
A retro 90s birthday invitation page, built with plain HTML and CSS. Day 42 of
|
||||||
|
the Udemy "100 Days of Code" web development course.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## What the page uses
|
||||||
|
|
||||||
|
| Element | Used for |
|
||||||
|
| --- | --- |
|
||||||
|
| `<h1>`, `<h2>`, `<h3>` | The title, the date and the section headings |
|
||||||
|
| `<img>` | The birthday cake, with `alt` text |
|
||||||
|
| `<ul>` and `<li>` | What the guests bring |
|
||||||
|
| `<a>` | The Google Maps link to the party |
|
||||||
|
|
||||||
|
## Files
|
||||||
|
|
||||||
|
| File | Purpose |
|
||||||
|
| --- | --- |
|
||||||
|
| `src/index.html` | The page itself |
|
||||||
|
| `src/style.css` | Colours, font, borders and layout, linked from the page |
|
||||||
|
|
||||||
|
## Run it
|
||||||
|
|
||||||
|
No build step. Open `src/index.html` in a browser.
|
||||||
|
|
||||||
|
## Styling
|
||||||
|
|
||||||
|
The styles live in `src/style.css`, not in the HTML. Four custom properties at
|
||||||
|
the top (`--bg`, `--ink`, `--accent`, `--link`) set the colours, so a new look
|
||||||
|
is a change of four values.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Reference in New Issue
Block a user