Add motivational poster page, README and multilingual wiki #1
+179
@@ -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/
|
||||
@@ -0,0 +1,3 @@
|
||||
[submodule "framework"]
|
||||
path = framework
|
||||
url = ssh://git@git.tirsystem.com:10022/TirSystem/SQA-QC-Framework.git
|
||||
@@ -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*.
|
||||
|
||||
|
||||
|
||||
## 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).
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
@@ -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.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
Submodule
+1
Submodule framework added at 7c2791939c
+24
@@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 437 KiB |
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user