Move code to src and flatten wiki for publish workflow #2
@@ -17,31 +17,31 @@ project of the HTML/CSS section (6.4) of the Udemy course *100 Days of Code*.
|
|||||||
|
|
||||||
## Run it
|
## Run it
|
||||||
|
|
||||||
No build step. Open `index.html` in a browser (the font is loaded from Google
|
No build step. Open `src/index.html` in a browser (the font is loaded from Google
|
||||||
Fonts, so an internet connection is needed to see it).
|
Fonts, so an internet connection is needed to see it).
|
||||||
|
|
||||||
## Project layout
|
## Project layout
|
||||||
|
|
||||||
```text
|
```text
|
||||||
index.html the page
|
src/index.html the page
|
||||||
style.css the styles
|
src/style.css the styles
|
||||||
assets/images/ the poster image
|
src/assets/images/ the poster image
|
||||||
screenshots/ screenshots used in this README
|
screenshots/ screenshots used in this README
|
||||||
docs/wiki/ documentation in English, Dansk and Bahasa Malaysia
|
docs/wiki/ documentation in English, Dansk and Bahasa Malaysia
|
||||||
```
|
```
|
||||||
|
|
||||||
## Wiki
|
## Wiki
|
||||||
|
|
||||||
| Language | Start page |
|
| Language | Start page |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| English | [docs/wiki/en/Home.md](docs/wiki/en/Home.md) |
|
| English | [docs/wiki/Home.md](docs/wiki/Home.md) |
|
||||||
| Dansk | [docs/wiki/da/Home.md](docs/wiki/da/Home.md) |
|
| Dansk | [docs/wiki/Home-da.md](docs/wiki/Home-da.md) |
|
||||||
| Bahasa Malaysia | [docs/wiki/ms/Home.md](docs/wiki/ms/Home.md) |
|
| Bahasa Malaysia | [docs/wiki/Home-ms.md](docs/wiki/Home-ms.md) |
|
||||||
|
|
||||||
## Make your own poster
|
## Make your own poster
|
||||||
|
|
||||||
Change the image in `assets/images/`, then edit the `h1` and `p` text in
|
Change the image in `src/assets/images/`, then edit the `h1` and `p` text in
|
||||||
`index.html`.
|
`src/index.html`.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
# Motivationsplakat
|
# Motivationsplakat
|
||||||
|
|
||||||
**Sprog:** [English](../en/Home.md) · Dansk · [Bahasa Malaysia](../ms/Home.md)
|
[English](Home) · **Dansk** · [Bahasa Malaysia](Home-ms)
|
||||||
|
|
||||||
En motivationsplakat som webside, lavet kun med HTML og CSS.
|
En motivationsplakat som webside, lavet kun med HTML og CSS.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Krav
|
## Krav
|
||||||
|
|
||||||
@@ -42,16 +42,16 @@ placering og farve for dem alle.
|
|||||||
| `.motivation-img { width: 100%; border: 5px solid white; }` | Billedet fylder hele `div`'en og får en hvid ramme. |
|
| `.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. |
|
| `h1 { text-transform: uppercase; }` | Store bogstaver uden at skrive titlen om. |
|
||||||
|
|
||||||
Google-skrifttypen hentes med et `<link>` i `<head>` i `index.html`.
|
Google-skrifttypen hentes med et `<link>` i `<head>` i `src/index.html`.
|
||||||
|
|
||||||
## Lav din egen
|
## Lav din egen
|
||||||
|
|
||||||
1. Læg dit billede i `assets/images/`.
|
1. Læg dit billede i `src/assets/images/`.
|
||||||
2. Ret `src` og `alt` på `img`.
|
2. Ret `src` og `alt` på `img`.
|
||||||
3. Ret teksten i `h1` og `p`.
|
3. Ret teksten i `h1` og `p`.
|
||||||
4. Eksperimenter: skrifttyper, farver, kantbredde, afstande.
|
4. Eksperimenter: skrifttyper, farver, kantbredde, afstande.
|
||||||
|
|
||||||
## Kør den
|
## Kør den
|
||||||
|
|
||||||
Åbn `index.html` i en browser. Du skal have internetforbindelse for at hente
|
Åbn `src/index.html` i en browser. Du skal have internetforbindelse for at hente
|
||||||
skrifttypen.
|
skrifttypen.
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
# Poster Motivasi
|
# Poster Motivasi
|
||||||
|
|
||||||
**Bahasa:** [English](../en/Home.md) · [Dansk](../da/Home.md) · Bahasa Malaysia
|
[English](Home) · [Dansk](Home-da) · **Bahasa Malaysia**
|
||||||
|
|
||||||
Laman web poster motivasi yang dibina dengan HTML dan CSS sahaja.
|
Laman web poster motivasi yang dibina dengan HTML dan CSS sahaja.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Keperluan
|
## Keperluan
|
||||||
|
|
||||||
@@ -42,16 +42,16 @@ menetapkan saiz, kedudukan dan warna untuk kesemuanya.
|
|||||||
| `.motivation-img { width: 100%; border: 5px solid white; }` | Imej memenuhi `div` dan mendapat bingkai putih. |
|
| `.motivation-img { width: 100%; border: 5px solid white; }` | Imej memenuhi `div` dan mendapat bingkai putih. |
|
||||||
| `h1 { text-transform: uppercase; }` | Huruf besar tanpa menaip semula tajuk. |
|
| `h1 { text-transform: uppercase; }` | Huruf besar tanpa menaip semula tajuk. |
|
||||||
|
|
||||||
Fon Google dimuatkan dengan `<link>` dalam `<head>` fail `index.html`.
|
Fon Google dimuatkan dengan `<link>` dalam `<head>` fail `src/index.html`.
|
||||||
|
|
||||||
## Buat poster anda sendiri
|
## Buat poster anda sendiri
|
||||||
|
|
||||||
1. Letakkan imej anda dalam `assets/images/`.
|
1. Letakkan imej anda dalam `src/assets/images/`.
|
||||||
2. Kemas kini `src` dan `alt` pada `img`.
|
2. Kemas kini `src` dan `alt` pada `img`.
|
||||||
3. Tukar teks `h1` dan `p`.
|
3. Tukar teks `h1` dan `p`.
|
||||||
4. Cuba-cuba: fon, warna, lebar sempadan, jarak.
|
4. Cuba-cuba: fon, warna, lebar sempadan, jarak.
|
||||||
|
|
||||||
## Jalankan
|
## Jalankan
|
||||||
|
|
||||||
Buka `index.html` dalam pelayar. Sambungan internet diperlukan untuk memuatkan
|
Buka `src/index.html` dalam pelayar. Sambungan internet diperlukan untuk memuatkan
|
||||||
fon.
|
fon.
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
# Motivational Poster
|
# Motivational Poster
|
||||||
|
|
||||||
**Languages:** English · [Dansk](../da/Home.md) · [Bahasa Malaysia](../ms/Home.md)
|
**English** · [Dansk](Home-da) · [Bahasa Malaysia](Home-ms)
|
||||||
|
|
||||||
A motivational poster web page made with HTML and CSS only.
|
A motivational poster web page made with HTML and CSS only.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
@@ -42,16 +42,16 @@ and colour all of them.
|
|||||||
| `.motivation-img { width: 100%; border: 5px solid white; }` | The image fills the `div` and gets a white frame. |
|
| `.motivation-img { width: 100%; border: 5px solid white; }` | The image fills the `div` and gets a white frame. |
|
||||||
| `h1 { text-transform: uppercase; }` | Uppercase title without retyping it. |
|
| `h1 { text-transform: uppercase; }` | Uppercase title without retyping it. |
|
||||||
|
|
||||||
The Google Font is loaded with a `<link>` in the `<head>` of `index.html`.
|
The Google Font is loaded with a `<link>` in the `<head>` of `src/index.html`.
|
||||||
|
|
||||||
## Make your own
|
## Make your own
|
||||||
|
|
||||||
1. Put your image in `assets/images/`.
|
1. Put your image in `src/assets/images/`.
|
||||||
2. Update `src` and `alt` on the `img`.
|
2. Update `src` and `alt` on the `img`.
|
||||||
3. Change the text of the `h1` and `p`.
|
3. Change the text of the `h1` and `p`.
|
||||||
4. Experiment: fonts, colours, border width, spacing.
|
4. Experiment: fonts, colours, border width, spacing.
|
||||||
|
|
||||||
## Run it
|
## Run it
|
||||||
|
|
||||||
Open `index.html` in a browser. An internet connection is needed to load the
|
Open `src/index.html` in a browser. An internet connection is needed to load the
|
||||||
font.
|
font.
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
**Motivational Poster**
|
||||||
|
|
||||||
|
- [English](Home)
|
||||||
|
- [Dansk](Home-da)
|
||||||
|
- [Bahasa Malaysia](Home-ms)
|
||||||
|
Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 198 KiB |
Reference in New Issue
Block a user