diff --git a/README.md b/README.md index 671c3ef..01e97a6 100644 --- a/README.md +++ b/README.md @@ -17,31 +17,31 @@ project of the HTML/CSS section (6.4) of the Udemy course *100 Days of Code*. ## 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). ## Project layout ```text -index.html the page -style.css the styles -assets/images/ the poster image +src/index.html the page +src/style.css the styles +src/assets/images/ the poster image 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 | Language | Start page | | --- | --- | -| English | [docs/wiki/en/Home.md](docs/wiki/en/Home.md) | -| Dansk | [docs/wiki/da/Home.md](docs/wiki/da/Home.md) | -| Bahasa Malaysia | [docs/wiki/ms/Home.md](docs/wiki/ms/Home.md) | +| English | [docs/wiki/Home.md](docs/wiki/Home.md) | +| Dansk | [docs/wiki/Home-da.md](docs/wiki/Home-da.md) | +| Bahasa Malaysia | [docs/wiki/Home-ms.md](docs/wiki/Home-ms.md) | ## Make your own poster -Change the image in `assets/images/`, then edit the `h1` and `p` text in -`index.html`. +Change the image in `src/assets/images/`, then edit the `h1` and `p` text in +`src/index.html`. ## License diff --git a/docs/wiki/da/Home.md b/docs/wiki/Home-da.md similarity index 80% rename from docs/wiki/da/Home.md rename to docs/wiki/Home-da.md index 8e52c5f..dd7c677 100644 --- a/docs/wiki/da/Home.md +++ b/docs/wiki/Home-da.md @@ -1,10 +1,10 @@ # 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. -![Motivationsplakat](../../../screenshots/desktop.png) +![Motivationsplakat](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/044-web-motivational-poster/raw/branch/main/screenshots/desktop.png) ## 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. | | `h1 { text-transform: uppercase; }` | Store bogstaver uden at skrive titlen om. | -Google-skrifttypen hentes med et `` i `` i `index.html`. +Google-skrifttypen hentes med et `` i `` i `src/index.html`. ## 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`. 3. Ret teksten i `h1` og `p`. 4. Eksperimenter: skrifttyper, farver, kantbredde, afstande. ## 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. diff --git a/docs/wiki/ms/Home.md b/docs/wiki/Home-ms.md similarity index 80% rename from docs/wiki/ms/Home.md rename to docs/wiki/Home-ms.md index 1396cbb..d2bb198 100644 --- a/docs/wiki/ms/Home.md +++ b/docs/wiki/Home-ms.md @@ -1,10 +1,10 @@ # 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. -![Poster motivasi](../../../screenshots/desktop.png) +![Poster motivasi](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/044-web-motivational-poster/raw/branch/main/screenshots/desktop.png) ## 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. | | `h1 { text-transform: uppercase; }` | Huruf besar tanpa menaip semula tajuk. | -Fon Google dimuatkan dengan `` dalam `` fail `index.html`. +Fon Google dimuatkan dengan `` dalam `` fail `src/index.html`. ## 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`. 3. Tukar teks `h1` dan `p`. 4. Cuba-cuba: fon, warna, lebar sempadan, jarak. ## Jalankan -Buka `index.html` dalam pelayar. Sambungan internet diperlukan untuk memuatkan +Buka `src/index.html` dalam pelayar. Sambungan internet diperlukan untuk memuatkan fon. diff --git a/docs/wiki/en/Home.md b/docs/wiki/Home.md similarity index 79% rename from docs/wiki/en/Home.md rename to docs/wiki/Home.md index 4505b65..e2a7a38 100644 --- a/docs/wiki/en/Home.md +++ b/docs/wiki/Home.md @@ -1,10 +1,10 @@ # 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. -![Motivational poster](../../../screenshots/desktop.png) +![Motivational poster](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/044-web-motivational-poster/raw/branch/main/screenshots/desktop.png) ## 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. | | `h1 { text-transform: uppercase; }` | Uppercase title without retyping it. | -The Google Font is loaded with a `` in the `` of `index.html`. +The Google Font is loaded with a `` in the `` of `src/index.html`. ## 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`. 3. Change the text of the `h1` and `p`. 4. Experiment: fonts, colours, border width, spacing. ## 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. diff --git a/docs/wiki/_Sidebar.md b/docs/wiki/_Sidebar.md new file mode 100644 index 0000000..aac7d17 --- /dev/null +++ b/docs/wiki/_Sidebar.md @@ -0,0 +1,5 @@ +**Motivational Poster** + +- [English](Home) +- [Dansk](Home-da) +- [Bahasa Malaysia](Home-ms) diff --git a/assets/images/daenerys.jpeg b/src/assets/images/daenerys.jpeg similarity index 100% rename from assets/images/daenerys.jpeg rename to src/assets/images/daenerys.jpeg diff --git a/index.html b/src/index.html similarity index 100% rename from index.html rename to src/index.html diff --git a/style.css b/src/style.css similarity index 100% rename from style.css rename to src/style.css