commit 57e3a3cae4125c451c0595eb1dbe94d743f25ec6 Author: Vegard Bieker Matthey Date: Thu Oct 2 14:25:42 2025 +0200 initial diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a136337 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.pdf diff --git a/aceofspades.html b/aceofspades.html new file mode 100644 index 0000000..3a5fd9b --- /dev/null +++ b/aceofspades.html @@ -0,0 +1,23 @@ + + + + A title + + + + +
+
+
+
A
+
+
+
+
+
A
+
+
+
+
+ + diff --git a/progressbar.html b/progressbar.html new file mode 100644 index 0000000..ff1c29b --- /dev/null +++ b/progressbar.html @@ -0,0 +1,13 @@ + + + + A title + + + + + +
+
+ + diff --git a/searchbar.html b/searchbar.html new file mode 100644 index 0000000..170d804 --- /dev/null +++ b/searchbar.html @@ -0,0 +1,15 @@ + + + + A title + + + + + +
+ +
+ + + diff --git a/sixofclubs.html b/sixofclubs.html new file mode 100644 index 0000000..22282c4 --- /dev/null +++ b/sixofclubs.html @@ -0,0 +1,31 @@ + + + + A title + + + + + +
+
+
+
6
+
+
+
+
+
+
+
+
+
+
+
+
6
+
+
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..b2283d0 --- /dev/null +++ b/style.css @@ -0,0 +1,75 @@ +.search-bar { + background-color: #669bbc; + width: 33%; + height: 3em; + border: 0.5em solid #780000; + border-radius: 1em; +} + +.search-bar:focus { + width: 100%; + border-color: #003049; +} + +.search-container { + padding: 32px 0px 0px 32px; + width: 640px; +} + +#target { + background-color: yellow; + border-radius: 64px; + width: 16px; + height: 16px; + border: 16px solid red; + outline: 16px solid deepskyblue; +} + +.progress { + position: absolute; + background-color: gray; + border-radius: 32px; + width: 300px; + height: 16px; +} + +.stage0 { + width: 0px; +} + +.stage1 { + width: 100px; + background-color: red; +} + +.stage2 { + width: 200px; + background-color: yellow; +} + +.stage3 { + width: 300px; + background-color: green; +} + +.card { + display: inline-flex; + justify-content: space-between; + flex-direction: column; + width: 12em; + height: 18em; + border: 1px solid black; + border-radius: 5px; +} +.container>.card>.middle { + display: grid; + text-align: center; + grid-template-columns: repeat(2, 50% [col-start]); + font-size: 3em; +} + +.container>.card.>.left { +} +.container>.card.>.right { + text-align: center; +}