diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ef1a1da --- /dev/null +++ b/.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/ diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..a759dc9 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "framework"] + path = framework + url = ssh://git@git.tirsystem.com:10022/TirSystem/SQA-QC-Framework.git diff --git a/README.md b/README.md index f8ff8d3..671c3ef 100644 --- a/README.md +++ b/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 +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) | + +## Make your own poster + +Change the image in `assets/images/`, then edit the `h1` and `p` text in +`index.html`. + +## License + +See [LICENSE](LICENSE). diff --git a/assets/images/daenerys.jpeg b/assets/images/daenerys.jpeg new file mode 100644 index 0000000..340489b Binary files /dev/null and b/assets/images/daenerys.jpeg differ diff --git a/docs/wiki/da/Home.md b/docs/wiki/da/Home.md new file mode 100644 index 0000000..8e52c5f --- /dev/null +++ b/docs/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 +
+ A woman holding a dragon egg +

That Special Moment

+

When you find the perfect avocado at the supermarket

+
+``` + +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 `` i `` 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. diff --git a/docs/wiki/en/Home.md b/docs/wiki/en/Home.md new file mode 100644 index 0000000..4505b65 --- /dev/null +++ b/docs/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 +
+ A woman holding a dragon egg +

That Special Moment

+

When you find the perfect avocado at the supermarket

+
+``` + +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 `` in the `` 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. diff --git a/docs/wiki/ms/Home.md b/docs/wiki/ms/Home.md new file mode 100644 index 0000000..1396cbb --- /dev/null +++ b/docs/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 +
+ A woman holding a dragon egg +

That Special Moment

+

When you find the perfect avocado at the supermarket

+
+``` + +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 `` dalam `` 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. diff --git a/framework b/framework new file mode 160000 index 0000000..7c27919 --- /dev/null +++ b/framework @@ -0,0 +1 @@ +Subproject commit 7c2791939c42c18ec444bce245e9a3958b242cae diff --git a/index.html b/index.html new file mode 100644 index 0000000..4ae60b6 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + + Motivation Meme + + + + + + + + +
+ A woman holding a dragon egg +

That Special Moment

+

When you find the perfect avocado at the supermarket

+
+ + + + diff --git a/screenshots/desktop.png b/screenshots/desktop.png new file mode 100644 index 0000000..271e050 Binary files /dev/null and b/screenshots/desktop.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..fd86d6f --- /dev/null +++ b/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; + } +}