.gitignore

@@ -0,0 +1,179 @@
+# ---> Python
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+
+# Doxygen output
+docs/doxygen/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "framework"]
+	path = framework
+	url = ssh://git@git.tirsystem.com:10022/TirSystem/SQA-QC-Framework.git

README.md

@@ -1,2 +1,48 @@
 # 044-web-motivational-poster
 
+A motivational poster web page built with plain HTML and CSS. It is the final
+project of the HTML/CSS section (6.4) of the Udemy course *100 Days of Code*.
+
+![Motivational poster](screenshots/desktop.png)
+
+## Features
+
+- Black background, white text, everything centred.
+- Title in the *Libre Baskerville* Google Font, made uppercase with
+  `text-transform`.
+- Image with a 5px white border that fills its container (`width: 100%`).
+- One `div.poster` holds the image, `h1` and `p`; it is centred with
+  `width: 50%` and `margin-left: 25%`.
+- A small media query widens the poster on narrow screens.
+
+## Run it
+
+No build step. Open `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
+screenshots/          screenshots used in this README
+wiki/                 documentation in English, Dansk and Bahasa Malaysia
+```
+
+## Wiki
+
+| Language | Start page |
+| --- | --- |
+| English | [wiki/en/Home.md](wiki/en/Home.md) |
+| Dansk | [wiki/da/Home.md](wiki/da/Home.md) |
+| Bahasa Malaysia | [wiki/ms/Home.md](wiki/ms/Home.md) |
+
+## Make your own poster
+
+Change the image in `assets/images/`, then edit the `h1` and `p` text in
+`index.html`.
+
+## License
+
+See [LICENSE](LICENSE).

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Motivation Meme</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+
+  <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>
+
+</body>
+
+</html>

style.css

@@ -0,0 +1,35 @@
+body {
+  background-color: black;
+}
+
+.poster {
+  width: 50%;
+  margin-left: 25%;
+  margin-top: 100px;
+  color: white;
+  font-family: "Libre Baskerville", serif;
+  text-align: center;
+}
+
+.motivation-img {
+  border: 5px solid white;
+  width: 100%;
+}
+
+h1 {
+  text-transform: uppercase;
+  font-size: 3rem;
+}
+
+/* Narrow screens: give the poster more room. */
+@media (max-width: 700px) {
+  .poster {
+    width: 90%;
+    margin-left: 5%;
+    margin-top: 40px;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+}

wiki/da/Home.md

@@ -0,0 +1,57 @@
+# Motivationsplakat
+
+**Sprog:** [English](../en/Home.md) · Dansk · [Bahasa Malaysia](../ms/Home.md)
+
+En motivationsplakat som webside, lavet kun med HTML og CSS.
+
+![Motivationsplakat](../../screenshots/desktop.png)
+
+## 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 `index.html`.
+
+## Lav din egen
+
+1. Læg dit billede i `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
+skrifttypen.

wiki/en/Home.md

@@ -0,0 +1,57 @@
+# Motivational Poster
+
+**Languages:** English · [Dansk](../da/Home.md) · [Bahasa Malaysia](../ms/Home.md)
+
+A motivational poster web page made with HTML and CSS only.
+
+![Motivational poster](../../screenshots/desktop.png)
+
+## Requirements
+
+1. The `h1` uses the Libre Baskerville font from Google Fonts.
+2. White text on a black background.
+3. An image with a 5px white border.
+4. Centred text.
+5. A `div` holds the `h1`, `p` and `img`, and is centred on the page.
+6. The `h1` is uppercase through CSS, not by retyping it.
+
+## How it works
+
+### 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>
+```
+
+Keeping the image and the text in one `div` means one rule can size, centre
+and colour all of them.
+
+### CSS
+
+| Rule | What it does |
+| --- | --- |
+| `body { background-color: black; }` | Black page background. |
+| `.poster { width: 50%; margin-left: 25%; }` | Half the page wide, with 25% free on each side, so it is centred horizontally. |
+| `.poster { margin-top: 100px; }` | Space above the poster. |
+| `.poster { color: white; text-align: center; }` | White, centred text. |
+| `.poster { font-family: "Libre Baskerville", serif; }` | The Google Font, with a fallback. |
+| `.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 `<link>` in the `<head>` of `index.html`.
+
+## Make your own
+
+1. Put your image in `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
+font.

wiki/ms/Home.md

@@ -0,0 +1,57 @@
+# Poster Motivasi
+
+**Bahasa:** [English](../en/Home.md) · [Dansk](../da/Home.md) · Bahasa Malaysia
+
+Laman web poster motivasi yang dibina dengan HTML dan CSS sahaja.
+
+![Poster motivasi](../../screenshots/desktop.png)
+
+## Keperluan
+
+1. `h1` menggunakan fon Libre Baskerville daripada Google Fonts.
+2. Teks putih pada latar belakang hitam.
+3. Imej dengan sempadan putih 5px.
+4. Teks di tengah.
+5. Satu `div` mengandungi `h1`, `p` dan `img`, dan diletakkan di tengah halaman.
+6. `h1` ditukar kepada huruf besar melalui CSS, bukan dengan menaip semula.
+
+## Cara ia berfungsi
+
+### 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>
+```
+
+Apabila imej dan teks berada dalam satu `div`, satu peraturan sahaja boleh
+menetapkan saiz, kedudukan dan warna untuk kesemuanya.
+
+### CSS
+
+| Peraturan | Fungsi |
+| --- | --- |
+| `body { background-color: black; }` | Latar belakang halaman hitam. |
+| `.poster { width: 50%; margin-left: 25%; }` | Lebar separuh halaman dengan 25% ruang kosong di kiri dan kanan, jadi poster berada di tengah secara mendatar. |
+| `.poster { margin-top: 100px; }` | Ruang di atas poster. |
+| `.poster { color: white; text-align: center; }` | Teks putih dan di tengah. |
+| `.poster { font-family: "Libre Baskerville", serif; }` | Fon Google dengan fon sandaran. |
+| `.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 `<link>` dalam `<head>` fail `index.html`.
+
+## Buat poster anda sendiri
+
+1. Letakkan imej anda dalam `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
+fon.