diff --git a/el-GR/code/book-review/animation.css b/el-GR/code/book-review/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/el-GR/code/book-review/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/el-GR/code/book-review/beetle.jpg b/el-GR/code/book-review/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/book-review/beetle.jpg differ diff --git a/el-GR/code/book-review/butterfly.JPG b/el-GR/code/book-review/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/book-review/butterfly.JPG differ diff --git a/el-GR/code/book-review/cacti.JPG b/el-GR/code/book-review/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/book-review/cacti.JPG differ diff --git a/el-GR/code/book-review/cafe.css b/el-GR/code/book-review/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/el-GR/code/book-review/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/el-GR/code/book-review/cafe.jpg b/el-GR/code/book-review/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/book-review/cafe.jpg differ diff --git a/el-GR/code/book-review/candles.JPG b/el-GR/code/book-review/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/book-review/candles.JPG differ diff --git a/el-GR/code/book-review/carnival.jpg b/el-GR/code/book-review/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/book-review/carnival.jpg differ diff --git a/el-GR/code/book-review/colour-festival.jpg b/el-GR/code/book-review/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/book-review/colour-festival.jpg differ diff --git a/el-GR/code/book-review/comic-books.jpg b/el-GR/code/book-review/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/book-review/comic-books.jpg differ diff --git a/el-GR/code/book-review/comic.css b/el-GR/code/book-review/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/book-review/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/el-GR/code/book-review/companion.css b/el-GR/code/book-review/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/book-review/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/el-GR/code/book-review/crayons.jpg b/el-GR/code/book-review/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/book-review/crayons.jpg differ diff --git a/el-GR/code/book-review/default.css b/el-GR/code/book-review/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/el-GR/code/book-review/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/disco-ball.jpg b/el-GR/code/book-review/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/book-review/disco-ball.jpg differ diff --git a/el-GR/code/book-review/disco-flowers.JPG b/el-GR/code/book-review/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/book-review/disco-flowers.JPG differ diff --git a/el-GR/code/book-review/disco.css b/el-GR/code/book-review/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/book-review/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/el-GR/code/book-review/drone.JPG b/el-GR/code/book-review/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/book-review/drone.JPG differ diff --git a/el-GR/code/book-review/exotic-plants.jpg b/el-GR/code/book-review/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/book-review/exotic-plants.jpg differ diff --git a/el-GR/code/book-review/ferns.jpg b/el-GR/code/book-review/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/book-review/ferns.jpg differ diff --git a/el-GR/code/book-review/festival.css b/el-GR/code/book-review/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/el-GR/code/book-review/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/fiesta.css b/el-GR/code/book-review/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/book-review/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/el-GR/code/book-review/fire.jpg b/el-GR/code/book-review/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/book-review/fire.jpg differ diff --git a/el-GR/code/book-review/fish.jpg b/el-GR/code/book-review/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/book-review/fish.jpg differ diff --git a/el-GR/code/book-review/forest.JPG b/el-GR/code/book-review/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/book-review/forest.JPG differ diff --git a/el-GR/code/book-review/game-boy.jpg b/el-GR/code/book-review/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/book-review/game-boy.jpg differ diff --git a/el-GR/code/book-review/globe-in-water.JPG b/el-GR/code/book-review/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/book-review/globe-in-water.JPG differ diff --git a/el-GR/code/book-review/greenhouse.JPG b/el-GR/code/book-review/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/book-review/greenhouse.JPG differ diff --git a/el-GR/code/book-review/helpful-plumber.css b/el-GR/code/book-review/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/el-GR/code/book-review/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/el-GR/code/book-review/illustrations.png b/el-GR/code/book-review/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/book-review/illustrations.png differ diff --git a/el-GR/code/book-review/index.html b/el-GR/code/book-review/index.html new file mode 100644 index 00000000..9fe4ab9c --- /dev/null +++ b/el-GR/code/book-review/index.html @@ -0,0 +1,106 @@ + + + + + + + + + Tango makes three + + + + + + + + + + + + + + + +
+

Tango makes three

+
+ + +
+
+

My book review.

+
+
+ Description of the image. +
+
+
+

"tango makes three is an amazing story that has won lots of awards so you should totally read it"

+ - me. +
+
+
+
+

I thought this was a brilliant book and it's based on a true story so you learn loads too.

+
+

I wont spoil the book but it has two male penguins called Roy and Silo who are given an egg and create a same-sex family.

+
+

Reading about diverse families is super important.

+
+

Reasons to read Tango Makes Three recap:

+
+ +
+ + +
+
+
+

Reason 1

+
+ +
+

It's won loads of awards - and I mean loads

+
+
+
+ +
+
+
+

Reason 2

+
+ +
+

It's based on a true story so you learn loads about nature

+
+
+
+ +
+
+
+

Reason 3

+
+ +
+

Some adults have banned it but we know best

+
+
+
+
+
+
+ + + + + + + diff --git a/el-GR/code/book-review/lake-mountains.JPG b/el-GR/code/book-review/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/book-review/lake-mountains.JPG differ diff --git a/el-GR/code/book-review/land-animals.css b/el-GR/code/book-review/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/el-GR/code/book-review/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/medal.jpg b/el-GR/code/book-review/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/book-review/medal.jpg differ diff --git a/el-GR/code/book-review/medals.css b/el-GR/code/book-review/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/el-GR/code/book-review/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/money.css b/el-GR/code/book-review/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/book-review/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/el-GR/code/book-review/monkey.JPG b/el-GR/code/book-review/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/book-review/monkey.JPG differ diff --git a/el-GR/code/book-review/moon-art.png b/el-GR/code/book-review/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/book-review/moon-art.png differ diff --git a/el-GR/code/book-review/mushroom.JPG b/el-GR/code/book-review/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/book-review/mushroom.JPG differ diff --git a/el-GR/code/book-review/nature.css b/el-GR/code/book-review/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/el-GR/code/book-review/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/pansies.JPG b/el-GR/code/book-review/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/book-review/pansies.JPG differ diff --git a/el-GR/code/book-review/pastel-hearts.jpg b/el-GR/code/book-review/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/book-review/pastel-hearts.jpg differ diff --git a/el-GR/code/book-review/pastel.css b/el-GR/code/book-review/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/el-GR/code/book-review/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/piggy-bank.jpg b/el-GR/code/book-review/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/book-review/piggy-bank.jpg differ diff --git a/el-GR/code/book-review/placeholder.png b/el-GR/code/book-review/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/book-review/placeholder.png differ diff --git a/el-GR/code/book-review/primary.css b/el-GR/code/book-review/primary.css new file mode 100644 index 00000000..be901099 --- /dev/null +++ b/el-GR/code/book-review/primary.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/project_config.yml b/el-GR/code/book-review/project_config.yml new file mode 100644 index 00000000..110ea8c2 --- /dev/null +++ b/el-GR/code/book-review/project_config.yml @@ -0,0 +1,3 @@ +name: 'Book review' +identifier: 'book-review' +type: 'html' diff --git a/el-GR/code/book-review/pumpkins.JPG b/el-GR/code/book-review/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/book-review/pumpkins.JPG differ diff --git a/el-GR/code/book-review/rainbow-forest.JPG b/el-GR/code/book-review/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/book-review/rainbow-forest.JPG differ diff --git a/el-GR/code/book-review/rhino.JPG b/el-GR/code/book-review/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/book-review/rhino.JPG differ diff --git a/el-GR/code/book-review/smokey.css b/el-GR/code/book-review/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/el-GR/code/book-review/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/space.css b/el-GR/code/book-review/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/el-GR/code/book-review/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/spider-web.jpg b/el-GR/code/book-review/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/book-review/spider-web.jpg differ diff --git a/el-GR/code/book-review/style.css b/el-GR/code/book-review/style.css new file mode 100644 index 00000000..ae79bc6b --- /dev/null +++ b/el-GR/code/book-review/style.css @@ -0,0 +1,335 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail1); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/el-GR/code/book-review/sunflowers.JPG b/el-GR/code/book-review/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/book-review/sunflowers.JPG differ diff --git a/el-GR/code/book-review/sunset-beach.JPG b/el-GR/code/book-review/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/book-review/sunset-beach.JPG differ diff --git a/el-GR/code/book-review/sunset-person.jpg b/el-GR/code/book-review/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/book-review/sunset-person.jpg differ diff --git a/el-GR/code/book-review/sunset.JPG b/el-GR/code/book-review/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/book-review/sunset.JPG differ diff --git a/el-GR/code/book-review/sunset.css b/el-GR/code/book-review/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/el-GR/code/book-review/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/sunshine.css b/el-GR/code/book-review/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/el-GR/code/book-review/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/tango.jpeg b/el-GR/code/book-review/tango.jpeg new file mode 100644 index 00000000..d91acb15 Binary files /dev/null and b/el-GR/code/book-review/tango.jpeg differ diff --git a/el-GR/code/book-review/thriller.css b/el-GR/code/book-review/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/el-GR/code/book-review/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/water-animals.css b/el-GR/code/book-review/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/el-GR/code/book-review/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/el-GR/code/book-review/woodland.css b/el-GR/code/book-review/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/el-GR/code/book-review/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/animation.css b/el-GR/code/build-a-web-page-starter/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/el-GR/code/build-a-web-page-starter/beetle.jpg b/el-GR/code/build-a-web-page-starter/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/beetle.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/butterfly.JPG b/el-GR/code/build-a-web-page-starter/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/butterfly.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/cacti.JPG b/el-GR/code/build-a-web-page-starter/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/cacti.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/cafe.css b/el-GR/code/build-a-web-page-starter/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/cafe.jpg b/el-GR/code/build-a-web-page-starter/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/cafe.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/candles.JPG b/el-GR/code/build-a-web-page-starter/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/candles.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/carnival.jpg b/el-GR/code/build-a-web-page-starter/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/carnival.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/colour-festival.jpg b/el-GR/code/build-a-web-page-starter/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/colour-festival.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/comic-books.jpg b/el-GR/code/build-a-web-page-starter/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/comic-books.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/comic.css b/el-GR/code/build-a-web-page-starter/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/el-GR/code/build-a-web-page-starter/companion.css b/el-GR/code/build-a-web-page-starter/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/el-GR/code/build-a-web-page-starter/crayons.jpg b/el-GR/code/build-a-web-page-starter/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/crayons.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/default.css b/el-GR/code/build-a-web-page-starter/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/disco-ball.jpg b/el-GR/code/build-a-web-page-starter/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/disco-ball.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/disco-flowers.JPG b/el-GR/code/build-a-web-page-starter/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/disco-flowers.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/disco.css b/el-GR/code/build-a-web-page-starter/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/el-GR/code/build-a-web-page-starter/drone.JPG b/el-GR/code/build-a-web-page-starter/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/drone.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/exotic-plants.jpg b/el-GR/code/build-a-web-page-starter/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/exotic-plants.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/ferns.jpg b/el-GR/code/build-a-web-page-starter/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/ferns.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/festival.css b/el-GR/code/build-a-web-page-starter/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/fiesta.css b/el-GR/code/build-a-web-page-starter/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/el-GR/code/build-a-web-page-starter/fire.jpg b/el-GR/code/build-a-web-page-starter/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/fire.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/fish.jpg b/el-GR/code/build-a-web-page-starter/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/fish.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/forest.JPG b/el-GR/code/build-a-web-page-starter/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/forest.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/game-boy.jpg b/el-GR/code/build-a-web-page-starter/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/game-boy.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/globe-in-water.JPG b/el-GR/code/build-a-web-page-starter/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/globe-in-water.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/greenhouse.JPG b/el-GR/code/build-a-web-page-starter/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/greenhouse.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/helpful-plumber.css b/el-GR/code/build-a-web-page-starter/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/el-GR/code/build-a-web-page-starter/illustrations.png b/el-GR/code/build-a-web-page-starter/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/illustrations.png differ diff --git a/el-GR/code/build-a-web-page-starter/index.html b/el-GR/code/build-a-web-page-starter/index.html new file mode 100644 index 00000000..31946ccc --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/index.html @@ -0,0 +1,45 @@ + + + + + + + + + My website title + + + + + + + + + + + + + + + +
+

Big Title

+
+ + +
+
+

Lorem ipsum dolor sit amet.

+
+
+ + + + + + diff --git a/el-GR/code/build-a-web-page-starter/lake-mountains.JPG b/el-GR/code/build-a-web-page-starter/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/lake-mountains.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/land-animals.css b/el-GR/code/build-a-web-page-starter/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/medal.jpg b/el-GR/code/build-a-web-page-starter/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/medal.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/medals.css b/el-GR/code/build-a-web-page-starter/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/money.css b/el-GR/code/build-a-web-page-starter/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/el-GR/code/build-a-web-page-starter/monkey.JPG b/el-GR/code/build-a-web-page-starter/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/monkey.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/moon-art.png b/el-GR/code/build-a-web-page-starter/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/moon-art.png differ diff --git a/el-GR/code/build-a-web-page-starter/mushroom.JPG b/el-GR/code/build-a-web-page-starter/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/mushroom.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/nature.css b/el-GR/code/build-a-web-page-starter/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/pansies.JPG b/el-GR/code/build-a-web-page-starter/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/pansies.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/pastel-hearts.jpg b/el-GR/code/build-a-web-page-starter/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/pastel-hearts.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/pastel.css b/el-GR/code/build-a-web-page-starter/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/piggy-bank.jpg b/el-GR/code/build-a-web-page-starter/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/piggy-bank.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/placeholder.png b/el-GR/code/build-a-web-page-starter/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/placeholder.png differ diff --git a/el-GR/code/build-a-web-page-starter/primary.css b/el-GR/code/build-a-web-page-starter/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/project_config.yml b/el-GR/code/build-a-web-page-starter/project_config.yml new file mode 100644 index 00000000..6801264a --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/project_config.yml @@ -0,0 +1,3 @@ +name: 'Build a web page starter' +identifier: 'build-a-web-page-starter' +type: 'html' diff --git a/el-GR/code/build-a-web-page-starter/pumpkins.JPG b/el-GR/code/build-a-web-page-starter/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/pumpkins.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/rainbow-forest.JPG b/el-GR/code/build-a-web-page-starter/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/rainbow-forest.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/rhino.JPG b/el-GR/code/build-a-web-page-starter/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/rhino.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/smokey.css b/el-GR/code/build-a-web-page-starter/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/space.css b/el-GR/code/build-a-web-page-starter/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/spider-web.jpg b/el-GR/code/build-a-web-page-starter/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/spider-web.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/style.css b/el-GR/code/build-a-web-page-starter/style.css new file mode 100644 index 00000000..6589bd8b --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/style.css @@ -0,0 +1,316 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/el-GR/code/build-a-web-page-starter/sunflowers.JPG b/el-GR/code/build-a-web-page-starter/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/sunflowers.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/sunset-beach.JPG b/el-GR/code/build-a-web-page-starter/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/sunset-beach.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/sunset-person.jpg b/el-GR/code/build-a-web-page-starter/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/sunset-person.jpg differ diff --git a/el-GR/code/build-a-web-page-starter/sunset.JPG b/el-GR/code/build-a-web-page-starter/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/build-a-web-page-starter/sunset.JPG differ diff --git a/el-GR/code/build-a-web-page-starter/sunset.css b/el-GR/code/build-a-web-page-starter/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/sunshine.css b/el-GR/code/build-a-web-page-starter/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/thriller.css b/el-GR/code/build-a-web-page-starter/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/water-animals.css b/el-GR/code/build-a-web-page-starter/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/el-GR/code/build-a-web-page-starter/woodland.css b/el-GR/code/build-a-web-page-starter/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/el-GR/code/build-a-web-page-starter/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/el-GR/code/egypt/Egypt-Valley-of-the-kings.jpg b/el-GR/code/egypt/Egypt-Valley-of-the-kings.jpg new file mode 100644 index 00000000..cbad0b30 Binary files /dev/null and b/el-GR/code/egypt/Egypt-Valley-of-the-kings.jpg differ diff --git a/el-GR/code/egypt/Explore.css b/el-GR/code/egypt/Explore.css new file mode 100644 index 00000000..7f086722 --- /dev/null +++ b/el-GR/code/egypt/Explore.css @@ -0,0 +1,197 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +html{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ +height: 12%; +display: flex; +align-items: center; +} + +.logo{ +width: 50px; +cursor: pointer; +color: white; +font-size: 20px; +} + +.navbar i{ +width: 30px; +cursor: pointer; +margin-left: 40px; +} + +nav{ +flex: 1; +text-align: right; +} + +nav ul li{ +list-style: none; +display: inline-block; +margin-left: 60px; +color: white; +font-size: 13px; +} + +/* Information boxes */ + +.wrapper{ +display: grid; +margin: 200px 90px auto; +grid-gap: 20px; +grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { +.wrapper{ + margin: 200px auto; +} +} +.wrapper .box{ +width: 350px; +margin: 0 auto; +position: relative; +perspective: 1000px; +border: #000000; +border-radius: 2px; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +padding-bottom: 75px; +padding-right: 75px; +} +.wrapper .box .front-face{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); +background-size: cover; +height: 220px; +width: 100%; +display: flex; +flex-direction: column; +justify-content: center; +border-radius: 2px; +border-color: #000000; +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ +font-size: 22px; +font-weight: 600; +text-transform: uppercase; +} + +.box .front-face span{ +background: linear-gradient(-135deg, #000000, #000000); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +text-align: center; +} + + +.box .back-face{ +position: absolute; +top: 0; +left: 0; +z-index: 1; +height: 220px; +width: 100%; +padding: 30px; +color: #fff; +opacity: 0; +transform-style: preserve-3d; +backface-visibility: hidden; +background: linear-gradient(-135deg, #000000, #000000); +transform: translateY(110px) rotateX(-90deg); +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +} + +.box .back-face p{ +margin-top: 10px; +text-align: justify; +} + +.box:hover .back-face{ +opacity: 1; +transform: rotateX(0deg); +} + +.box:hover .front-face{ +opacity: 0; +transform: translateY(-110px) rotateX(90deg); +} + + +/*Boxes Backgrounds*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg); + } + + .box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg); + } + + .box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg); + } + + .box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg); + } + + .box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg); + } + + .box .front-face.face6{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg); + } + + .box .front-face.face7{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg); + } + + .box .front-face.face{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); + } + + .box .back-face button{ + height: 60px; + width: 100%; + margin-top: 55px; + background-color: rgb(52, 52, 255); + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -ms-border-radius: 30px; + -o-border-radius: 30px; + text-align: center; + font-size: xx-large; +} + +.box .back-face a{ + text-decoration: none; +} \ No newline at end of file diff --git a/el-GR/code/egypt/Explore.html b/el-GR/code/egypt/Explore.html new file mode 100644 index 00000000..e9e2de90 --- /dev/null +++ b/el-GR/code/egypt/Explore.html @@ -0,0 +1,116 @@ + + + + + + + Explore Egypt + + + +
+
+ + + +
+
+
+
+ Valley of the Kings +
+
+ Valley of the Kings +

+ We all know about King Tut and it is here that you can visit his tomb. In fact, you can visit all of the Kings of the Pharaoh’s tombs. Ramses, I-V, and everyone in between was entombed in extravagant tombs filled with riches and jewels on the West Bank of the Nile. +

+
+
+
+
+ Islamic Cairo +
+
+ Islamic Cairo +

+ Islamic Cairo is known as the “City of Citadels” with many mosques to visit including the Sultan Hussan Mosque and the Alabaster Mosque aka, The Mosque of Muhammad Ali. It is the most visited mosque in all of Egypt and with good reason. +

+
+
+
+
+ Egyptian Museum +
+
+ Egyptian Museum +

+ Other museums around the world have Egyptian artifacts but this takes it to the next level. + +It is worth touring the museum because when visiting the temples of Egypt, there is nothing inside they have all been moved to the safety of the museum where you can see them with your own eyes. +

+
+
+
+
+ El Gouna +
+
+ El Gouna +

+ For a luxury escape in Egypt, El Gouna is a popular holiday destination. It’s popular spot for diving in the Red Sea, chilling out at the beach, and dolphin spotting. +

+
+
+
+
+ Sharm El Sheik +
+
+ Sharm El Sheik +

+ Sharm El Sheik is Egypt’s most popular resort destinations located on the Sinai Peninsula. It is yet another excellent spot for scuba diving, but with its convenient location, it is also a great spot for adventure. You can climb Mount Sinai or take a trip to the desert to experience one of the Bedouin camps +

+
+
+
+
+ Saint Catherine’s Monastery +
+
+ Saint Catherine’s Monastery +

+ Located at the foot of Mount Sinai, a visit to Saint Catherine’s Monastery is a must visit when in the Sinai Peninsula. It is the very place where God spoke to Moses as a burning bush. Dating back to the 500s AD, this is the oldest continuously working Christian monastery in the world. +

+
+
+
+
+ Alexandria +
+
+ Alexandria +

+ Located on the Mediterranean Sea, Alexandria is where East meets West. Alexandrea was founded by Alexander the Great and housed one of the seven ancient wonders of the world, the Alexandria Lighthouse. Psst: The Great Pyramids are another ancient wonder. +

+
+
+
+
+ Visit Egyptian Ministry of tourism +
+
+ Visit Egyptian Ministry of tourism + +
+
+
+
+ + + \ No newline at end of file diff --git a/el-GR/code/egypt/History.css b/el-GR/code/egypt/History.css new file mode 100644 index 00000000..5c7a641f --- /dev/null +++ b/el-GR/code/egypt/History.css @@ -0,0 +1,166 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + } + +html{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +/* Information boxes */ + +.wrapper{ + display: grid; + margin: 200px 90px auto; + grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { + .wrapper{ + margin: 200px auto; + } +} +.wrapper .box{ + width: 350px; + margin: 0 auto; + position: relative; + perspective: 1000px; + border: #000000; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; + padding-bottom: 75px; + padding-right: 75px; +} +.wrapper .box .front-face{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-size: cover; + height: 220px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 2px; + border-color: #000000; + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ + font-size: 22px; + font-weight: 600; + text-transform: uppercase; +} + +.box .front-face span{ + background: linear-gradient(-135deg, #000000, #000000); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; +} + + +.box .back-face{ + position: absolute; + top: 0; + left: 0; + z-index: 1; + height: 220px; + width: 100%; + padding: 30px; + color: #fff; + opacity: 0; + transform-style: preserve-3d; + backface-visibility: hidden; + background: linear-gradient(-135deg, #000000, #000000); + transform: translateY(110px) rotateX(-90deg); + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; +} + +.box .back-face p{ + margin-top: 10px; + text-align: justify; +} + +.box:hover .back-face{ + opacity: 1; + transform: rotateX(0deg); +} + +.box:hover .front-face{ + opacity: 0; + transform: translateY(-110px) rotateX(90deg); +} + +/*Boxes Backgrounds*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg); +} + +.box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg); +} + +.box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg); +} + +.box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg); +} + +.box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); +} \ No newline at end of file diff --git a/el-GR/code/egypt/History.html b/el-GR/code/egypt/History.html new file mode 100644 index 00000000..37a78139 --- /dev/null +++ b/el-GR/code/egypt/History.html @@ -0,0 +1,85 @@ + + + + + + + Egypt's History + + + +
+
+ + + +
+
+
+
+ Ancient Egypt +
+
+ Ancient Egypt +

+ Ancient Egypt is divided into three “kingdom” periods—Old, Middle, and New—with shorter intermediate periods separating the kingdoms. Even before the Old Kingdom period, the foundations of Egyptian civilization were being laid for thousands of years, as people living near the Nile increasingly focused on sedentary agriculture, which led to urbanization and specialized, non-agricultural economic activity. +

+
+
+
+
+ OLD Ancient Egypt Kingdom +
+
+ OLD Ancient Egypt Kingdom +

+ Evidence of human habitation in Egypt stretches back tens of thousands of years. It was only in about 6000 BCE, however, that widespread settlement began in the region. Around this time, the Sahara Desert expanded. Some scientists think this expansion was caused by a slight shift in the tilt of the Earth. Others have explored changing rainfall patterns, but the specific causes are not entirely clear.
The most important result of this expansion of the Sahara for human civilization was that it pushed humans closer to the Nile River in search of reliable water sources. +

+
+
+
+
+ MIDDLE Ancient Egypt Kingdom +
+
+ MIDDLE Ancient Egypt Kingdom +

+ The Middle Kingdom saw Egypt unified again as kings found ways to take back power from regional governors. From the Middle Kingdom era forward, Egyptian kings often kept well-trained standing armies. The ability of the Egyptian state to create and maintain a standing military force and to build fortifications showed that it had regained control of substantial resources. + Political fragmentation led to the Second Intermediate Period. The precise dates are unclear; even though writing allowed for more events to be recorded, most things still were not, and many more records have been lost or destroyed. +

+
+
+
+
+ NEW Ancient Egypt Kingdom +
+
+ NEW Ancient Egypt Kingdom +

+ Around 1550 BCE, the New Kingdom period of Egyptian history began with the expulsion of the Hyksos from Egypt and the restoration of centralized political control. This period was Egypt's most prosperous time and marked the peak of its power. + Also in this period, Hatshepsut, Egypt’s most famous female ruler, established trade networks that helped build the wealth of Egypt and commissioned hundreds of construction projects and pieces of statuary, as well as an impressive mortuary temple at Deir el-Bahri. She also ordered repairs to temples that had been neglected or damaged during the period of Hyksos rule. +

+
+
+
+
+ Egypt now +
+
+ Egypt now +

+ Nowadays Egypt's currency, people, goverment, land changed & Egypt became one of the important countries in Africa & the middle east, Now Egypt is ruled by military ruling, Islam became the major religion after christianity, Egypt’s capital is now Cairo but goverment is trying to change it to the New Administrative Capital +

+
+
+
+
+ + + diff --git a/el-GR/code/egypt/alexandria-egypt-library.jpg b/el-GR/code/egypt/alexandria-egypt-library.jpg new file mode 100644 index 00000000..719f0a4b Binary files /dev/null and b/el-GR/code/egypt/alexandria-egypt-library.jpg differ diff --git a/el-GR/code/egypt/background.jpg b/el-GR/code/egypt/background.jpg new file mode 100644 index 00000000..6dcf3d1c Binary files /dev/null and b/el-GR/code/egypt/background.jpg differ diff --git a/el-GR/code/egypt/card1.jpg b/el-GR/code/egypt/card1.jpg new file mode 100644 index 00000000..ceed5b4d Binary files /dev/null and b/el-GR/code/egypt/card1.jpg differ diff --git a/el-GR/code/egypt/card2.jpg b/el-GR/code/egypt/card2.jpg new file mode 100644 index 00000000..51a30437 Binary files /dev/null and b/el-GR/code/egypt/card2.jpg differ diff --git a/el-GR/code/egypt/card3.jpg b/el-GR/code/egypt/card3.jpg new file mode 100644 index 00000000..39ac3b27 Binary files /dev/null and b/el-GR/code/egypt/card3.jpg differ diff --git a/el-GR/code/egypt/card4.jpg b/el-GR/code/egypt/card4.jpg new file mode 100644 index 00000000..44b112e5 Binary files /dev/null and b/el-GR/code/egypt/card4.jpg differ diff --git a/el-GR/code/egypt/egypt-mosque-cairo.jpg b/el-GR/code/egypt/egypt-mosque-cairo.jpg new file mode 100644 index 00000000..2b676239 Binary files /dev/null and b/el-GR/code/egypt/egypt-mosque-cairo.jpg differ diff --git a/el-GR/code/egypt/egypt-temples.jpg b/el-GR/code/egypt/egypt-temples.jpg new file mode 100644 index 00000000..890c6ee6 Binary files /dev/null and b/el-GR/code/egypt/egypt-temples.jpg differ diff --git a/el-GR/code/egypt/flag.jpg b/el-GR/code/egypt/flag.jpg new file mode 100644 index 00000000..cf78620f Binary files /dev/null and b/el-GR/code/egypt/flag.jpg differ diff --git a/el-GR/code/egypt/gouna.jpg b/el-GR/code/egypt/gouna.jpg new file mode 100644 index 00000000..c219f9b2 Binary files /dev/null and b/el-GR/code/egypt/gouna.jpg differ diff --git a/el-GR/code/egypt/index.html b/el-GR/code/egypt/index.html new file mode 100644 index 00000000..00748464 --- /dev/null +++ b/el-GR/code/egypt/index.html @@ -0,0 +1,53 @@ + + + + + + + Document + + + + + +
+
+ + + +
+
+
+

Egypt

+

The Mother of the world & the start Civilization

+ +
+
+
+
Abu Simbel
+

Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC

+
+
+
Siwa Oasis
+

Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.

+
+
+
Giza Necropolis
+

The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure

+
+
+
Red Sea Reef
+

The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.

+
+
+
+
+ + + \ No newline at end of file diff --git a/el-GR/code/egypt/info-box1.jpg b/el-GR/code/egypt/info-box1.jpg new file mode 100644 index 00000000..1bc81989 Binary files /dev/null and b/el-GR/code/egypt/info-box1.jpg differ diff --git a/el-GR/code/egypt/info-box2.jpg b/el-GR/code/egypt/info-box2.jpg new file mode 100644 index 00000000..c21fae32 Binary files /dev/null and b/el-GR/code/egypt/info-box2.jpg differ diff --git a/el-GR/code/egypt/info-box3.jpg b/el-GR/code/egypt/info-box3.jpg new file mode 100644 index 00000000..53938681 Binary files /dev/null and b/el-GR/code/egypt/info-box3.jpg differ diff --git a/el-GR/code/egypt/info-box4.jpg b/el-GR/code/egypt/info-box4.jpg new file mode 100644 index 00000000..1c69ef25 Binary files /dev/null and b/el-GR/code/egypt/info-box4.jpg differ diff --git a/el-GR/code/egypt/project_config.yml b/el-GR/code/egypt/project_config.yml new file mode 100644 index 00000000..ed541982 --- /dev/null +++ b/el-GR/code/egypt/project_config.yml @@ -0,0 +1,3 @@ +name: 'Egypt' +identifier: 'egypt' +type: 'html' diff --git a/el-GR/code/egypt/saint-catherines-monastery.jpg b/el-GR/code/egypt/saint-catherines-monastery.jpg new file mode 100644 index 00000000..6fae8542 Binary files /dev/null and b/el-GR/code/egypt/saint-catherines-monastery.jpg differ diff --git a/el-GR/code/egypt/script.js b/el-GR/code/egypt/script.js new file mode 100644 index 00000000..cef41022 --- /dev/null +++ b/el-GR/code/egypt/script.js @@ -0,0 +1,23 @@ +//Nav li +var button = document.getElementById('li1'); +button.addEventListener('click', function () { + document.location.href = 'index.html'; +}); +var button = document.getElementById('li2'); +button.addEventListener('click', function () { + document.location.href = 'History.html'; +}); +var button = document.getElementById('li3'); +button.addEventListener('click', function () { + document.location.href = 'Explore.html'; +}); + +//btns +var button = document.getElementById('btn1'); +button.addEventListener('click', function () { + document.location.href = '/Explore.html'; +}); +var button = document.getElementById('btn2'); +button.addEventListener('click', function () { + document.location.href = 'www.google.com/maps/place/Egypt'; +}); diff --git a/el-GR/code/egypt/sharm.jpg b/el-GR/code/egypt/sharm.jpg new file mode 100644 index 00000000..065f8017 Binary files /dev/null and b/el-GR/code/egypt/sharm.jpg differ diff --git a/el-GR/code/egypt/style.css b/el-GR/code/egypt/style.css new file mode 100644 index 00000000..bc6dd623 --- /dev/null +++ b/el-GR/code/egypt/style.css @@ -0,0 +1,122 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +.container{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-position: center; + background-size: cover; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; +} + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +.row{ + display: flex; + height: 88%; + align-items: center; +} + +.col { + flex-basis: 50%; +} + +h1{ + color: white; + font-size: 100px; +} + +p{ + color: white; + font-size: 11px; + line-height: 15px; +} + +button{ + width: 180px; + color: #000; + font-size: 12px; + padding: 12px 0; + background: whitesmoke; + border: 0; + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -ms-border-radius: 20px; + -o-border-radius: 20px; + outline: none; + margin-top: 30px; +} + +.card { + width: 200px; + height: 230px; + display: inline-block; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + padding: 15px 25px; + box-sizing: border-box; + margin: 10px 15px; + background-position: center; + background-size: cover; +} + +.card h5{ + color: white; + text-decoration: bold; +} + +.card1{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg); +} + +.card2{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg); +} + +.card3{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg); +} + +.card4{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg); +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/afrobeats.jpg b/el-GR/code/fashion-pi/afrobeats.jpg new file mode 100644 index 00000000..1e9e37b9 Binary files /dev/null and b/el-GR/code/fashion-pi/afrobeats.jpg differ diff --git a/el-GR/code/fashion-pi/animation.css b/el-GR/code/fashion-pi/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/el-GR/code/fashion-pi/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/el-GR/code/fashion-pi/cafe.css b/el-GR/code/fashion-pi/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/el-GR/code/fashion-pi/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/comic.css b/el-GR/code/fashion-pi/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/fashion-pi/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/el-GR/code/fashion-pi/companion.css b/el-GR/code/fashion-pi/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/fashion-pi/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/el-GR/code/fashion-pi/default.css b/el-GR/code/fashion-pi/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/el-GR/code/fashion-pi/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/denim.jpg b/el-GR/code/fashion-pi/denim.jpg new file mode 100644 index 00000000..95d6aa3f Binary files /dev/null and b/el-GR/code/fashion-pi/denim.jpg differ diff --git a/el-GR/code/fashion-pi/disco.css b/el-GR/code/fashion-pi/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/fashion-pi/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/el-GR/code/fashion-pi/festival.css b/el-GR/code/fashion-pi/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/el-GR/code/fashion-pi/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/fiesta.css b/el-GR/code/fashion-pi/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/fashion-pi/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/el-GR/code/fashion-pi/flare-trousers.jpg b/el-GR/code/fashion-pi/flare-trousers.jpg new file mode 100644 index 00000000..776f1394 Binary files /dev/null and b/el-GR/code/fashion-pi/flare-trousers.jpg differ diff --git a/el-GR/code/fashion-pi/helpful-plumber.css b/el-GR/code/fashion-pi/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/el-GR/code/fashion-pi/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/el-GR/code/fashion-pi/index.html b/el-GR/code/fashion-pi/index.html new file mode 100644 index 00000000..13cc63a3 --- /dev/null +++ b/el-GR/code/fashion-pi/index.html @@ -0,0 +1,103 @@ + + + + + + + + + Fashion Pi + + + + + + + + + + + + + + + + + + + +
+

🥻Fashion Pi 🥧

+

Fashion trends| Latest news| Hot gossip

+
+ + +
+

Comeback trends in fashion.

+
+ Male and female model wearing denim bottoms and top. +
+

Denim on denim has made a big comeback in fashion.

+
+
+
+
+

Flare bottom pants have also made a big comeback.

+
+ Two black flare trousers on two female models. +
+
+

Latest trends in fashion.

+
+
+
+
+
+
+ Artwork showing instruments shaped as a woman's hair and the words Afrobats below +
+
+

Afrobeats

+

Afrobeats is a genre of music making waves in fashion.

+
+
+
+
+ +
+
+
+
+ Woman with dramatic makeup and beads on her face +
+
+

Makeup

+

Makeup & fashion are linked in the world of beauty and personal style.

.

+
+
+
+
+ +
+
+
+

"Fashion week is a must attend to celebrate all the designers, models and magazines. The Big 4 are: Paris, Milan, London, New York."

+ -Fashion Pi. +
+
+ +
+ + + + + + + + + diff --git a/el-GR/code/fashion-pi/land-animals.css b/el-GR/code/fashion-pi/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/el-GR/code/fashion-pi/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/makeup-fashion.jpg b/el-GR/code/fashion-pi/makeup-fashion.jpg new file mode 100644 index 00000000..96ef90f1 Binary files /dev/null and b/el-GR/code/fashion-pi/makeup-fashion.jpg differ diff --git a/el-GR/code/fashion-pi/medals.css b/el-GR/code/fashion-pi/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/el-GR/code/fashion-pi/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/money.css b/el-GR/code/fashion-pi/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/fashion-pi/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/el-GR/code/fashion-pi/nature.css b/el-GR/code/fashion-pi/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/el-GR/code/fashion-pi/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/pastel.css b/el-GR/code/fashion-pi/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/el-GR/code/fashion-pi/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/primary.css b/el-GR/code/fashion-pi/primary.css new file mode 100644 index 00000000..be901099 --- /dev/null +++ b/el-GR/code/fashion-pi/primary.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/project_config.yml b/el-GR/code/fashion-pi/project_config.yml new file mode 100644 index 00000000..415eb347 --- /dev/null +++ b/el-GR/code/fashion-pi/project_config.yml @@ -0,0 +1,3 @@ +name: 'Fashion Pi' +identifier: 'fashion-pi' +type: 'html' diff --git a/el-GR/code/fashion-pi/smokey.css b/el-GR/code/fashion-pi/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/el-GR/code/fashion-pi/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/space.css b/el-GR/code/fashion-pi/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/el-GR/code/fashion-pi/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/style.css b/el-GR/code/fashion-pi/style.css new file mode 100644 index 00000000..ae79bc6b --- /dev/null +++ b/el-GR/code/fashion-pi/style.css @@ -0,0 +1,335 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail1); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/el-GR/code/fashion-pi/sunset.css b/el-GR/code/fashion-pi/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/el-GR/code/fashion-pi/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/sunshine.css b/el-GR/code/fashion-pi/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/el-GR/code/fashion-pi/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/thriller.css b/el-GR/code/fashion-pi/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/el-GR/code/fashion-pi/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/water-animals.css b/el-GR/code/fashion-pi/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/el-GR/code/fashion-pi/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/el-GR/code/fashion-pi/woodland.css b/el-GR/code/fashion-pi/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/el-GR/code/fashion-pi/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/animation.css b/el-GR/code/favourite-things/animation.css new file mode 100644 index 00000000..add81618 --- /dev/null +++ b/el-GR/code/favourite-things/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Time taken for animation and number of repetitions */ + display: inline-block; /* Important to allow rotation */ +} + +@keyframes rotate-center { + /* The spin me animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes scale { + /* The twinkle animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/el-GR/code/favourite-things/beetle.jpg b/el-GR/code/favourite-things/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/favourite-things/beetle.jpg differ diff --git a/el-GR/code/favourite-things/bird.png b/el-GR/code/favourite-things/bird.png new file mode 100644 index 00000000..bc3ecabf Binary files /dev/null and b/el-GR/code/favourite-things/bird.png differ diff --git a/el-GR/code/favourite-things/butterfly.JPG b/el-GR/code/favourite-things/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/favourite-things/butterfly.JPG differ diff --git a/el-GR/code/favourite-things/cacti.JPG b/el-GR/code/favourite-things/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/favourite-things/cacti.JPG differ diff --git a/el-GR/code/favourite-things/cafe.css b/el-GR/code/favourite-things/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/el-GR/code/favourite-things/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/cafe.jpg b/el-GR/code/favourite-things/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/favourite-things/cafe.jpg differ diff --git a/el-GR/code/favourite-things/candles.JPG b/el-GR/code/favourite-things/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/favourite-things/candles.JPG differ diff --git a/el-GR/code/favourite-things/carnival.jpg b/el-GR/code/favourite-things/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/favourite-things/carnival.jpg differ diff --git a/el-GR/code/favourite-things/colour-festival.jpg b/el-GR/code/favourite-things/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/favourite-things/colour-festival.jpg differ diff --git a/el-GR/code/favourite-things/comic-books.jpg b/el-GR/code/favourite-things/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/favourite-things/comic-books.jpg differ diff --git a/el-GR/code/favourite-things/comic.css b/el-GR/code/favourite-things/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/favourite-things/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/el-GR/code/favourite-things/companion.css b/el-GR/code/favourite-things/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/favourite-things/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/el-GR/code/favourite-things/crayons.jpg b/el-GR/code/favourite-things/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/favourite-things/crayons.jpg differ diff --git a/el-GR/code/favourite-things/default.css b/el-GR/code/favourite-things/default.css new file mode 100644 index 00000000..af622e4e --- /dev/null +++ b/el-GR/code/favourite-things/default.css @@ -0,0 +1,19 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffffff; + --secondary: #ed923c; + --tertiary: #d8f1ee; + --page: #ffffff; + --onprimary: #664300; + --onsecondary: #ffffff; + --ontertiary: #5e5e5e; + --onpage: #750787; + --detail: #5e5e5e; + --detail2: #57b9ab; + + --body-font: 1.1rem 'Cairo', sans-serif; + --header-font: lighter 3rem 'Ceviche One', cursive; + --title-font: lighter 1.5rem 'Cairo', cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/disco-ball.jpg b/el-GR/code/favourite-things/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/favourite-things/disco-ball.jpg differ diff --git a/el-GR/code/favourite-things/disco-flowers.JPG b/el-GR/code/favourite-things/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/favourite-things/disco-flowers.JPG differ diff --git a/el-GR/code/favourite-things/disco.css b/el-GR/code/favourite-things/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/favourite-things/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/el-GR/code/favourite-things/dog.png b/el-GR/code/favourite-things/dog.png new file mode 100644 index 00000000..a944ece9 Binary files /dev/null and b/el-GR/code/favourite-things/dog.png differ diff --git a/el-GR/code/favourite-things/drone.JPG b/el-GR/code/favourite-things/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/favourite-things/drone.JPG differ diff --git a/el-GR/code/favourite-things/drum.png b/el-GR/code/favourite-things/drum.png new file mode 100644 index 00000000..3fba65c8 Binary files /dev/null and b/el-GR/code/favourite-things/drum.png differ diff --git a/el-GR/code/favourite-things/exotic-plants.jpg b/el-GR/code/favourite-things/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/favourite-things/exotic-plants.jpg differ diff --git a/el-GR/code/favourite-things/fave.png b/el-GR/code/favourite-things/fave.png new file mode 100644 index 00000000..05e1b6fb Binary files /dev/null and b/el-GR/code/favourite-things/fave.png differ diff --git a/el-GR/code/favourite-things/ferns.jpg b/el-GR/code/favourite-things/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/favourite-things/ferns.jpg differ diff --git a/el-GR/code/favourite-things/festival.css b/el-GR/code/favourite-things/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/el-GR/code/favourite-things/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/fiesta.css b/el-GR/code/favourite-things/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/favourite-things/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/el-GR/code/favourite-things/fire.jpg b/el-GR/code/favourite-things/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/favourite-things/fire.jpg differ diff --git a/el-GR/code/favourite-things/fish.jpg b/el-GR/code/favourite-things/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/favourite-things/fish.jpg differ diff --git a/el-GR/code/favourite-things/forest.JPG b/el-GR/code/favourite-things/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/favourite-things/forest.JPG differ diff --git a/el-GR/code/favourite-things/game-boy.jpg b/el-GR/code/favourite-things/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/favourite-things/game-boy.jpg differ diff --git a/el-GR/code/favourite-things/globe-in-water.JPG b/el-GR/code/favourite-things/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/favourite-things/globe-in-water.JPG differ diff --git a/el-GR/code/favourite-things/greenhouse.JPG b/el-GR/code/favourite-things/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/favourite-things/greenhouse.JPG differ diff --git a/el-GR/code/favourite-things/helpful-plumber.css b/el-GR/code/favourite-things/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/el-GR/code/favourite-things/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/el-GR/code/favourite-things/illustrations.png b/el-GR/code/favourite-things/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/favourite-things/illustrations.png differ diff --git a/el-GR/code/favourite-things/index.html b/el-GR/code/favourite-things/index.html new file mode 100644 index 00000000..8e8a55d9 --- /dev/null +++ b/el-GR/code/favourite-things/index.html @@ -0,0 +1,90 @@ + + + + + + + + + My favourite things + + + + + + + + + + + + + + + + + + +
+

🏆 My favourite things 🏆

+
+ + +
+
+

Lists of my favourite things

+
+ +
+

My favourite ways to make art:

+
+
+ +
    +
  1. Watercolour
    2. +
  2. Digital
    3. +
  3. Fine liners
    4. +
+ +
+ + +
+

My favourite animals:

+
+
+ +
    +
  1. Giraffe
    2. +
  2. Lynx
    3. +
  3. Penguin
    4. +
+ +
+ +
+

My favourite places to travel:

+
+
+ +
    +
  1. Norway
    2. +
  2. Italy
    3. +
  3. Scotland
    4. +
+ +
+ +
+ + + + + + diff --git a/el-GR/code/favourite-things/lake-mountains.JPG b/el-GR/code/favourite-things/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/favourite-things/lake-mountains.JPG differ diff --git a/el-GR/code/favourite-things/land-animals.css b/el-GR/code/favourite-things/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/el-GR/code/favourite-things/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/mandala.png b/el-GR/code/favourite-things/mandala.png new file mode 100644 index 00000000..6b072a92 Binary files /dev/null and b/el-GR/code/favourite-things/mandala.png differ diff --git a/el-GR/code/favourite-things/map.png b/el-GR/code/favourite-things/map.png new file mode 100644 index 00000000..09acad40 Binary files /dev/null and b/el-GR/code/favourite-things/map.png differ diff --git a/el-GR/code/favourite-things/medal.jpg b/el-GR/code/favourite-things/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/favourite-things/medal.jpg differ diff --git a/el-GR/code/favourite-things/medals.css b/el-GR/code/favourite-things/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/el-GR/code/favourite-things/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/money.css b/el-GR/code/favourite-things/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/favourite-things/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/el-GR/code/favourite-things/monkey.JPG b/el-GR/code/favourite-things/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/favourite-things/monkey.JPG differ diff --git a/el-GR/code/favourite-things/moon-art.png b/el-GR/code/favourite-things/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/favourite-things/moon-art.png differ diff --git a/el-GR/code/favourite-things/mountain.png b/el-GR/code/favourite-things/mountain.png new file mode 100644 index 00000000..5527d6c7 Binary files /dev/null and b/el-GR/code/favourite-things/mountain.png differ diff --git a/el-GR/code/favourite-things/mushroom.JPG b/el-GR/code/favourite-things/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/favourite-things/mushroom.JPG differ diff --git a/el-GR/code/favourite-things/music.png b/el-GR/code/favourite-things/music.png new file mode 100644 index 00000000..1633c3ec Binary files /dev/null and b/el-GR/code/favourite-things/music.png differ diff --git a/el-GR/code/favourite-things/nature.css b/el-GR/code/favourite-things/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/el-GR/code/favourite-things/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/painting.png b/el-GR/code/favourite-things/painting.png new file mode 100644 index 00000000..21442674 Binary files /dev/null and b/el-GR/code/favourite-things/painting.png differ diff --git a/el-GR/code/favourite-things/pansies.JPG b/el-GR/code/favourite-things/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/favourite-things/pansies.JPG differ diff --git a/el-GR/code/favourite-things/pastel-hearts.jpg b/el-GR/code/favourite-things/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/favourite-things/pastel-hearts.jpg differ diff --git a/el-GR/code/favourite-things/pastel.css b/el-GR/code/favourite-things/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/el-GR/code/favourite-things/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/piggy-bank.jpg b/el-GR/code/favourite-things/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/favourite-things/piggy-bank.jpg differ diff --git a/el-GR/code/favourite-things/placeholder.png b/el-GR/code/favourite-things/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/favourite-things/placeholder.png differ diff --git a/el-GR/code/favourite-things/primary.css b/el-GR/code/favourite-things/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/el-GR/code/favourite-things/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/project_config.yml b/el-GR/code/favourite-things/project_config.yml new file mode 100644 index 00000000..77973dd2 --- /dev/null +++ b/el-GR/code/favourite-things/project_config.yml @@ -0,0 +1,3 @@ +name: 'Favourite things' +identifier: 'favourite-things' +type: 'html' diff --git a/el-GR/code/favourite-things/pumpkins.JPG b/el-GR/code/favourite-things/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/favourite-things/pumpkins.JPG differ diff --git a/el-GR/code/favourite-things/rainbow-forest.JPG b/el-GR/code/favourite-things/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/favourite-things/rainbow-forest.JPG differ diff --git a/el-GR/code/favourite-things/rhino.JPG b/el-GR/code/favourite-things/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/favourite-things/rhino.JPG differ diff --git a/el-GR/code/favourite-things/smokey.css b/el-GR/code/favourite-things/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/el-GR/code/favourite-things/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/space.css b/el-GR/code/favourite-things/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/el-GR/code/favourite-things/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/spider-web.jpg b/el-GR/code/favourite-things/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/favourite-things/spider-web.jpg differ diff --git a/el-GR/code/favourite-things/style.css b/el-GR/code/favourite-things/style.css new file mode 100644 index 00000000..6bb97c40 --- /dev/null +++ b/el-GR/code/favourite-things/style.css @@ -0,0 +1,284 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + background-image: url('fave.png'); +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 5rem; + display: block; + padding: 0rem; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + diff --git a/el-GR/code/favourite-things/sunflowers.JPG b/el-GR/code/favourite-things/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/favourite-things/sunflowers.JPG differ diff --git a/el-GR/code/favourite-things/sunset-beach.JPG b/el-GR/code/favourite-things/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/favourite-things/sunset-beach.JPG differ diff --git a/el-GR/code/favourite-things/sunset-person.jpg b/el-GR/code/favourite-things/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/favourite-things/sunset-person.jpg differ diff --git a/el-GR/code/favourite-things/sunset.JPG b/el-GR/code/favourite-things/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/favourite-things/sunset.JPG differ diff --git a/el-GR/code/favourite-things/sunset.css b/el-GR/code/favourite-things/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/el-GR/code/favourite-things/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/sunshine.css b/el-GR/code/favourite-things/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/el-GR/code/favourite-things/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/thriller.css b/el-GR/code/favourite-things/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/el-GR/code/favourite-things/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/water-animals.css b/el-GR/code/favourite-things/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/el-GR/code/favourite-things/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/el-GR/code/favourite-things/woodland.css b/el-GR/code/favourite-things/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/el-GR/code/favourite-things/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/animation.css b/el-GR/code/raspberry-pi-pico/animation.css new file mode 100644 index 00000000..add81618 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Time taken for animation and number of repetitions */ + display: inline-block; /* Important to allow rotation */ +} + +@keyframes rotate-center { + /* The spin me animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes scale { + /* The twinkle animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/el-GR/code/raspberry-pi-pico/beetle.jpg b/el-GR/code/raspberry-pi-pico/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/beetle.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/butterfly.JPG b/el-GR/code/raspberry-pi-pico/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/butterfly.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/button.png b/el-GR/code/raspberry-pi-pico/button.png new file mode 100644 index 00000000..84141380 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/button.png differ diff --git a/el-GR/code/raspberry-pi-pico/buzzer.png b/el-GR/code/raspberry-pi-pico/buzzer.png new file mode 100644 index 00000000..717770f1 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/buzzer.png differ diff --git a/el-GR/code/raspberry-pi-pico/cacti.JPG b/el-GR/code/raspberry-pi-pico/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/cacti.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/cafe.css b/el-GR/code/raspberry-pi-pico/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/cafe.jpg b/el-GR/code/raspberry-pi-pico/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/cafe.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/candles.JPG b/el-GR/code/raspberry-pi-pico/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/candles.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/carnival.jpg b/el-GR/code/raspberry-pi-pico/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/carnival.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/colour-festival.jpg b/el-GR/code/raspberry-pi-pico/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/colour-festival.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/comic-books.jpg b/el-GR/code/raspberry-pi-pico/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/comic-books.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/comic.css b/el-GR/code/raspberry-pi-pico/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/el-GR/code/raspberry-pi-pico/companion.css b/el-GR/code/raspberry-pi-pico/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/el-GR/code/raspberry-pi-pico/crayons.jpg b/el-GR/code/raspberry-pi-pico/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/crayons.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/default.css b/el-GR/code/raspberry-pi-pico/default.css new file mode 100644 index 00000000..0adb336d --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffffff; + --secondary: #c51a4a; + --tertiary: #6cc04a; + --page: #000000; + --onprimary: #555559; + --onsecondary: #ffffff; + --ontertiary: #555559; + --onpage: #000000; + --detail: #999798; + --detail2: #c9c8c7; + + --body-font: 1rem 'Nunito', sans-serif; + --header-font: lighter 3rem 'Russo One', sans-serif; + --title-font: lighter 1.5rem 'Nunito', sans-serif; + --quote-font: lighter 1.5rem 'Nunito', sans-serif; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/disco-ball.jpg b/el-GR/code/raspberry-pi-pico/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/disco-ball.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/disco-flowers.JPG b/el-GR/code/raspberry-pi-pico/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/disco-flowers.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/disco.css b/el-GR/code/raspberry-pi-pico/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/el-GR/code/raspberry-pi-pico/drone.JPG b/el-GR/code/raspberry-pi-pico/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/drone.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/exotic-plants.jpg b/el-GR/code/raspberry-pi-pico/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/exotic-plants.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/ferns.jpg b/el-GR/code/raspberry-pi-pico/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/ferns.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/festival.css b/el-GR/code/raspberry-pi-pico/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/fiesta.css b/el-GR/code/raspberry-pi-pico/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/el-GR/code/raspberry-pi-pico/fire.jpg b/el-GR/code/raspberry-pi-pico/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/fire.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/fish.jpg b/el-GR/code/raspberry-pi-pico/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/fish.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/forest.JPG b/el-GR/code/raspberry-pi-pico/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/forest.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/game-boy.jpg b/el-GR/code/raspberry-pi-pico/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/game-boy.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/globe-in-water.JPG b/el-GR/code/raspberry-pi-pico/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/globe-in-water.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/greenhouse.JPG b/el-GR/code/raspberry-pi-pico/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/greenhouse.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/helpful-plumber.css b/el-GR/code/raspberry-pi-pico/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/el-GR/code/raspberry-pi-pico/illustrations.png b/el-GR/code/raspberry-pi-pico/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/illustrations.png differ diff --git a/el-GR/code/raspberry-pi-pico/index.html b/el-GR/code/raspberry-pi-pico/index.html new file mode 100644 index 00000000..b4a76a08 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/index.html @@ -0,0 +1,165 @@ + + + + + + + + + Raspberry Pi Pico + + + + + + + + + + + + + + + +
+

The Raspberry Pi Pico

+
+ + +
+ + + +
+ The love facial expression. +

The Raspberry Pi Pico is a low-cost microcontroller used to make electronic products.

+
+ + + +
+

The Inputs and Outputs I have used are:

+
+

Inputs

+
    +
  • Switch
    • +
  • Button
    • +
  • Potentiometer
    • +
+
+ +
+

Outputs

+
    +
  • LED
    • +
  • RGB LED
    • +
  • Buzzer
    • +
+
+

Hover over the cards to find out more:

+
+ + + +

Inputs

+ +
+ + + +
+
+
+

Switch

+ +
+
+

A switch is an electrical component that can be closed to allow electrical current to flow and opened to prevent electrical current from flowing.

+
+
+
+ +
+
+
+

Button

+ +
+
+

A button is a kind of switch that makes a connection when it is pressed.

+
+
+
+ +
+
+
+

Potentiometer

+ +
+
+

A potentiometer is an analogue input component that changes its resistance depending on the position of the dial.

+
+
+
+ +
+ + + +

Outputs

+ +
+ + + +
+
+
+

LED

+ +
+
+

LED stands for light-emitting diode. It has a material lights up when an electrical current passes through it.

+
+
+
+ +
+
+
+

RGB LED

+ +
+
+

RGB stands for Red Green Blue. RGB LEDs allow you to use code to control how much of each colour is emitted.

+
+
+
+ +
+
+
+

Buzzer

+ +
+
+

A passive buzzer can play a variety of tones. It requires a connection to be made and a specific signal to play the chosen tone.

+
+
+
+ +
+
+ + + + + + diff --git a/el-GR/code/raspberry-pi-pico/lake-mountains.JPG b/el-GR/code/raspberry-pi-pico/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/lake-mountains.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/land-animals.css b/el-GR/code/raspberry-pi-pico/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/led.png b/el-GR/code/raspberry-pi-pico/led.png new file mode 100644 index 00000000..0a273225 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/led.png differ diff --git a/el-GR/code/raspberry-pi-pico/medal.jpg b/el-GR/code/raspberry-pi-pico/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/medal.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/medals.css b/el-GR/code/raspberry-pi-pico/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/money.css b/el-GR/code/raspberry-pi-pico/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/el-GR/code/raspberry-pi-pico/monkey.JPG b/el-GR/code/raspberry-pi-pico/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/monkey.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/moon-art.png b/el-GR/code/raspberry-pi-pico/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/moon-art.png differ diff --git a/el-GR/code/raspberry-pi-pico/mushroom.JPG b/el-GR/code/raspberry-pi-pico/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/mushroom.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/nature.css b/el-GR/code/raspberry-pi-pico/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/pansies.JPG b/el-GR/code/raspberry-pi-pico/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/pansies.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/pastel-hearts.jpg b/el-GR/code/raspberry-pi-pico/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/pastel-hearts.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/pastel.css b/el-GR/code/raspberry-pi-pico/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/pico-hand.png b/el-GR/code/raspberry-pi-pico/pico-hand.png new file mode 100644 index 00000000..31577c88 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/pico-hand.png differ diff --git a/el-GR/code/raspberry-pi-pico/piggy-bank.jpg b/el-GR/code/raspberry-pi-pico/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/piggy-bank.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/placeholder.png b/el-GR/code/raspberry-pi-pico/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/placeholder.png differ diff --git a/el-GR/code/raspberry-pi-pico/pot.png b/el-GR/code/raspberry-pi-pico/pot.png new file mode 100644 index 00000000..817fea4e Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/pot.png differ diff --git a/el-GR/code/raspberry-pi-pico/primary.css b/el-GR/code/raspberry-pi-pico/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/project_config.yml b/el-GR/code/raspberry-pi-pico/project_config.yml new file mode 100644 index 00000000..62c199fa --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/project_config.yml @@ -0,0 +1,3 @@ +name: 'Raspberry Pi Pico' +identifier: 'raspberry-pi-pico' +type: 'html' diff --git a/el-GR/code/raspberry-pi-pico/pumpkins.JPG b/el-GR/code/raspberry-pi-pico/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/pumpkins.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/rainbow-forest.JPG b/el-GR/code/raspberry-pi-pico/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/rainbow-forest.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/rgb-led.png b/el-GR/code/raspberry-pi-pico/rgb-led.png new file mode 100644 index 00000000..cd3b4538 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/rgb-led.png differ diff --git a/el-GR/code/raspberry-pi-pico/rhino.JPG b/el-GR/code/raspberry-pi-pico/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/rhino.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/smokey.css b/el-GR/code/raspberry-pi-pico/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/space.css b/el-GR/code/raspberry-pi-pico/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/spider-web.jpg b/el-GR/code/raspberry-pi-pico/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/spider-web.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/style.css b/el-GR/code/raspberry-pi-pico/style.css new file mode 100644 index 00000000..7b5c8c4e --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/style.css @@ -0,0 +1,331 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Card colours */ + +.purple { + background: #9a6faa; + color: #000000; +} + +.brickred { + background: #f27b5c; + color: #000000; +} + +.yellow { + background: #fddd42; + color: #000000; +} + +.turquoise { + background: #15bcac; + color: #000000; +} + +.blue { + background: #51a4dc; + color: #000000; +} + +.orange { + background: #ffbd5c; + color: #000000; +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +.ytop { + display: flex; + justify-content: top; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 15rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; + font: var(--body-font); +} + +.card img { + max-width: 80%; + max-height: 80%; +} + diff --git a/el-GR/code/raspberry-pi-pico/sunflowers.JPG b/el-GR/code/raspberry-pi-pico/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/sunflowers.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/sunset-beach.JPG b/el-GR/code/raspberry-pi-pico/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/sunset-beach.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/sunset-person.jpg b/el-GR/code/raspberry-pi-pico/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/sunset-person.jpg differ diff --git a/el-GR/code/raspberry-pi-pico/sunset.JPG b/el-GR/code/raspberry-pi-pico/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/sunset.JPG differ diff --git a/el-GR/code/raspberry-pi-pico/sunset.css b/el-GR/code/raspberry-pi-pico/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/sunshine.css b/el-GR/code/raspberry-pi-pico/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/switch.png b/el-GR/code/raspberry-pi-pico/switch.png new file mode 100644 index 00000000..46f288a8 Binary files /dev/null and b/el-GR/code/raspberry-pi-pico/switch.png differ diff --git a/el-GR/code/raspberry-pi-pico/thriller.css b/el-GR/code/raspberry-pi-pico/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/water-animals.css b/el-GR/code/raspberry-pi-pico/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/el-GR/code/raspberry-pi-pico/woodland.css b/el-GR/code/raspberry-pi-pico/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/el-GR/code/raspberry-pi-pico/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/animation.css b/el-GR/code/what-is-d-and-d/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/el-GR/code/what-is-d-and-d/beetle.jpg b/el-GR/code/what-is-d-and-d/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/beetle.jpg differ diff --git a/el-GR/code/what-is-d-and-d/butterfly.JPG b/el-GR/code/what-is-d-and-d/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/butterfly.JPG differ diff --git a/el-GR/code/what-is-d-and-d/cacti.JPG b/el-GR/code/what-is-d-and-d/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/what-is-d-and-d/cacti.JPG differ diff --git a/el-GR/code/what-is-d-and-d/cafe.css b/el-GR/code/what-is-d-and-d/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/cafe.jpg b/el-GR/code/what-is-d-and-d/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/cafe.jpg differ diff --git a/el-GR/code/what-is-d-and-d/candles.JPG b/el-GR/code/what-is-d-and-d/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/what-is-d-and-d/candles.JPG differ diff --git a/el-GR/code/what-is-d-and-d/carnival.jpg b/el-GR/code/what-is-d-and-d/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/carnival.jpg differ diff --git a/el-GR/code/what-is-d-and-d/colour-festival.jpg b/el-GR/code/what-is-d-and-d/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/what-is-d-and-d/colour-festival.jpg differ diff --git a/el-GR/code/what-is-d-and-d/comic-books.jpg b/el-GR/code/what-is-d-and-d/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/what-is-d-and-d/comic-books.jpg differ diff --git a/el-GR/code/what-is-d-and-d/comic.css b/el-GR/code/what-is-d-and-d/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/el-GR/code/what-is-d-and-d/companion.css b/el-GR/code/what-is-d-and-d/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/el-GR/code/what-is-d-and-d/crayons.jpg b/el-GR/code/what-is-d-and-d/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/crayons.jpg differ diff --git a/el-GR/code/what-is-d-and-d/default.css b/el-GR/code/what-is-d-and-d/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/disco-ball.jpg b/el-GR/code/what-is-d-and-d/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/disco-ball.jpg differ diff --git a/el-GR/code/what-is-d-and-d/disco-flowers.JPG b/el-GR/code/what-is-d-and-d/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/what-is-d-and-d/disco-flowers.JPG differ diff --git a/el-GR/code/what-is-d-and-d/disco.css b/el-GR/code/what-is-d-and-d/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/what-is-d-and-d/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/el-GR/code/what-is-d-and-d/dm.jpg b/el-GR/code/what-is-d-and-d/dm.jpg new file mode 100644 index 00000000..5ee5f0a4 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/dm.jpg differ diff --git a/el-GR/code/what-is-d-and-d/dm2.jpg b/el-GR/code/what-is-d-and-d/dm2.jpg new file mode 100644 index 00000000..a97ece6d Binary files /dev/null and b/el-GR/code/what-is-d-and-d/dm2.jpg differ diff --git a/el-GR/code/what-is-d-and-d/drone.JPG b/el-GR/code/what-is-d-and-d/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/drone.JPG differ diff --git a/el-GR/code/what-is-d-and-d/exotic-plants.jpg b/el-GR/code/what-is-d-and-d/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/exotic-plants.jpg differ diff --git a/el-GR/code/what-is-d-and-d/ferns.jpg b/el-GR/code/what-is-d-and-d/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/ferns.jpg differ diff --git a/el-GR/code/what-is-d-and-d/festival.css b/el-GR/code/what-is-d-and-d/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/fiesta.css b/el-GR/code/what-is-d-and-d/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/el-GR/code/what-is-d-and-d/fire.jpg b/el-GR/code/what-is-d-and-d/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/fire.jpg differ diff --git a/el-GR/code/what-is-d-and-d/fish.jpg b/el-GR/code/what-is-d-and-d/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/what-is-d-and-d/fish.jpg differ diff --git a/el-GR/code/what-is-d-and-d/forest.JPG b/el-GR/code/what-is-d-and-d/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/forest.JPG differ diff --git a/el-GR/code/what-is-d-and-d/game-boy.jpg b/el-GR/code/what-is-d-and-d/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/game-boy.jpg differ diff --git a/el-GR/code/what-is-d-and-d/globe-in-water.JPG b/el-GR/code/what-is-d-and-d/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/globe-in-water.JPG differ diff --git a/el-GR/code/what-is-d-and-d/greenhouse.JPG b/el-GR/code/what-is-d-and-d/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/greenhouse.JPG differ diff --git a/el-GR/code/what-is-d-and-d/helpful-plumber.css b/el-GR/code/what-is-d-and-d/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/el-GR/code/what-is-d-and-d/illustrations.png b/el-GR/code/what-is-d-and-d/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/illustrations.png differ diff --git a/el-GR/code/what-is-d-and-d/index.html b/el-GR/code/what-is-d-and-d/index.html new file mode 100644 index 00000000..36b2b73f --- /dev/null +++ b/el-GR/code/what-is-d-and-d/index.html @@ -0,0 +1,168 @@ + + + + + + + + + Dungeons and Dragons + + + + + + + + + + + + + + + +
+
+

Dungeons & Dragons

+
+
+
+

What is it?

+
+
+ + +
+
+

What is Dungeons & Dragons?

+

According to the company who makes it, Wizard of the Coast, it's the World's greatest role-playing game.

+
+

So what's a role-playing game? It's where you and your friends sit around pretending to be characters you made up, in a fantasy world created by the Dungeonmaster (DM for short). Your character can do anything you can imagine, and when you interact with the world, you roll some dice to determine the outcome or reaction to your actions.

+
+ +
+
+

"The essence of a role-playing game is that it is a group, cooperative experience."

+ - Gary Gygax (Inventor of D&D) +
+
+ +
+ The dungeon master knows and controls everything about the world for their players. In the image, a mighty wizard looks down upon a planet that appears small compared to their magical might. Lightning sprays blue from their outstretched fingers, doing their will upon the ground below. +
+

The Dungeonmaster (DM)

+

If D&D was like a video game, the DM is the console you play it on - they bring the world to life for you and determine how it reacts to your actions and the actions of the other players.

+
+

The DM portrays and decides the actions of all the other characters who inhabit the world, who are not controlled by the players. They resolve actions, determine outcomes and tell the story to the group of what is happening around them. The DM knows everything about the world, and what they don't know about it, they can just make up!

+
+

Whatever the DM says goes, as they are the referee, narrator and other characters all rolled into one!

+
+
+ +
+
+

Classes

+
+ +

Classes are the way your character behaves in the game mechanically, or what abilities or skills they have and special tricks they can do. Mighty warriors for example, are better at fighting with weapons and strength, while clever wizards use their magical studies to create mighty spells.


+

Classes come in two kinds: Martial classes which focus on combat and non-magical skills, and Spellcasting Classes which focus on affecting the world around them with magical means.


+

Below is a selection of just some of the available classes in Dungeons and Dragons:

+
+
+

Martial Classes

+
+
+
+
+
+

Rogue

+

🤫

+
+
+

Sneaky and quick, rogues move in the shadows and are skilled operators.

+
+
+
+ +
+
+
+

🤺

+

Fighter

+
+
+

Trained in martial skills from an early age, Fighters are powerful and skilled warriors.

+
+
+
+ +
+
+
+

Barbarian

+

😡

+
+
+

Fuelled by their mighty rage, Barbarians charge through battle caring little for the damage they take or inflict. +

+
+
+
+ +
+
+

Spellcasting Classes

+
+
+ +
+
+
+

Cleric

+

😇

+
+
+

Faithful workshipers of mighty deities, Clerics are granted magical powers by their gods.

+
+
+
+ +
+
+
+

🧙‍♀️

+

Wizard

+
+
+

Skilled and learned in the ways of magic, Wizards have studied many years to obtain their power.

+
+
+
+ +
+
+
+

Druid

+

🐾

+
+
+

Tapping into the power of nature for their magic, Druids are able to take animal form and cast healing spells.

+
+
+
+ +
+ +
+ + + + + + diff --git a/el-GR/code/what-is-d-and-d/lake-mountains.JPG b/el-GR/code/what-is-d-and-d/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/lake-mountains.JPG differ diff --git a/el-GR/code/what-is-d-and-d/land-animals.css b/el-GR/code/what-is-d-and-d/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/el-GR/code/what-is-d-and-d/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/medal.jpg b/el-GR/code/what-is-d-and-d/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/what-is-d-and-d/medal.jpg differ diff --git a/el-GR/code/what-is-d-and-d/medals.css b/el-GR/code/what-is-d-and-d/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/money.css b/el-GR/code/what-is-d-and-d/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/what-is-d-and-d/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/el-GR/code/what-is-d-and-d/monkey.JPG b/el-GR/code/what-is-d-and-d/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/monkey.JPG differ diff --git a/el-GR/code/what-is-d-and-d/moon-art.png b/el-GR/code/what-is-d-and-d/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/moon-art.png differ diff --git a/el-GR/code/what-is-d-and-d/mushroom.JPG b/el-GR/code/what-is-d-and-d/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/mushroom.JPG differ diff --git a/el-GR/code/what-is-d-and-d/nature.css b/el-GR/code/what-is-d-and-d/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/el-GR/code/what-is-d-and-d/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/pansies.JPG b/el-GR/code/what-is-d-and-d/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/what-is-d-and-d/pansies.JPG differ diff --git a/el-GR/code/what-is-d-and-d/pastel-hearts.jpg b/el-GR/code/what-is-d-and-d/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/pastel-hearts.jpg differ diff --git a/el-GR/code/what-is-d-and-d/pastel.css b/el-GR/code/what-is-d-and-d/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/el-GR/code/what-is-d-and-d/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/piggy-bank.jpg b/el-GR/code/what-is-d-and-d/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/piggy-bank.jpg differ diff --git a/el-GR/code/what-is-d-and-d/placeholder.png b/el-GR/code/what-is-d-and-d/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/placeholder.png differ diff --git a/el-GR/code/what-is-d-and-d/primary.css b/el-GR/code/what-is-d-and-d/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/el-GR/code/what-is-d-and-d/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/project_config.yml b/el-GR/code/what-is-d-and-d/project_config.yml new file mode 100644 index 00000000..d231f406 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/project_config.yml @@ -0,0 +1,3 @@ +name: 'What is D&D' +identifier: 'what-is-d-and-d' +type: 'html' diff --git a/el-GR/code/what-is-d-and-d/pumpkins.JPG b/el-GR/code/what-is-d-and-d/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/pumpkins.JPG differ diff --git a/el-GR/code/what-is-d-and-d/rainbow-forest.JPG b/el-GR/code/what-is-d-and-d/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/what-is-d-and-d/rainbow-forest.JPG differ diff --git a/el-GR/code/what-is-d-and-d/rhino.JPG b/el-GR/code/what-is-d-and-d/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/rhino.JPG differ diff --git a/el-GR/code/what-is-d-and-d/smokey.css b/el-GR/code/what-is-d-and-d/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/space.css b/el-GR/code/what-is-d-and-d/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/el-GR/code/what-is-d-and-d/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/spider-web.jpg b/el-GR/code/what-is-d-and-d/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/spider-web.jpg differ diff --git a/el-GR/code/what-is-d-and-d/style.css b/el-GR/code/what-is-d-and-d/style.css new file mode 100644 index 00000000..6589bd8b --- /dev/null +++ b/el-GR/code/what-is-d-and-d/style.css @@ -0,0 +1,316 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/el-GR/code/what-is-d-and-d/sunflowers.JPG b/el-GR/code/what-is-d-and-d/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/sunflowers.JPG differ diff --git a/el-GR/code/what-is-d-and-d/sunset-beach.JPG b/el-GR/code/what-is-d-and-d/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/sunset-beach.JPG differ diff --git a/el-GR/code/what-is-d-and-d/sunset-person.jpg b/el-GR/code/what-is-d-and-d/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/what-is-d-and-d/sunset-person.jpg differ diff --git a/el-GR/code/what-is-d-and-d/sunset.JPG b/el-GR/code/what-is-d-and-d/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/what-is-d-and-d/sunset.JPG differ diff --git a/el-GR/code/what-is-d-and-d/sunset.css b/el-GR/code/what-is-d-and-d/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/el-GR/code/what-is-d-and-d/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/sunshine.css b/el-GR/code/what-is-d-and-d/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/el-GR/code/what-is-d-and-d/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/thriller.css b/el-GR/code/what-is-d-and-d/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/el-GR/code/what-is-d-and-d/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/water-animals.css b/el-GR/code/what-is-d-and-d/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/el-GR/code/what-is-d-and-d/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/el-GR/code/what-is-d-and-d/woodland.css b/el-GR/code/what-is-d-and-d/woodland.css new file mode 100644 index 00000000..38edf4aa --- /dev/null +++ b/el-GR/code/what-is-d-and-d/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ebd5b3; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/el-GR/images/ally.png b/el-GR/images/ally.png new file mode 100644 index 00000000..c0066239 Binary files /dev/null and b/el-GR/images/ally.png differ diff --git a/el-GR/images/banner.png b/el-GR/images/banner.png new file mode 100644 index 00000000..5d6eb8ad Binary files /dev/null and b/el-GR/images/banner.png differ diff --git a/el-GR/images/favourite.png b/el-GR/images/favourite.png new file mode 100644 index 00000000..432fbc7b Binary files /dev/null and b/el-GR/images/favourite.png differ diff --git a/el-GR/images/filter.png b/el-GR/images/filter.png new file mode 100644 index 00000000..35d48567 Binary files /dev/null and b/el-GR/images/filter.png differ diff --git a/el-GR/images/pico.png b/el-GR/images/pico.png new file mode 100644 index 00000000..8997540f Binary files /dev/null and b/el-GR/images/pico.png differ diff --git a/el-GR/images/step-three.PNG b/el-GR/images/step-three.PNG new file mode 100644 index 00000000..426f2a2f Binary files /dev/null and b/el-GR/images/step-three.PNG differ diff --git a/el-GR/images/step-two.jpg b/el-GR/images/step-two.jpg new file mode 100644 index 00000000..6b95a1d3 Binary files /dev/null and b/el-GR/images/step-two.jpg differ diff --git a/el-GR/meta.yml b/el-GR/meta.yml new file mode 100644 index 00000000..75c85b8f --- /dev/null +++ b/el-GR/meta.yml @@ -0,0 +1,27 @@ +title: Build a webpage +hero_image: images/banner.png +description: Build a webpage about something you want to share. +meta_title: Learn web development for beginners | Build a webpage +meta_description: Learn web development for beginners with the Raspberry Pi Foundation. Build a webpage with a variety of HTML elements. Add CSS classes to style your page. +version: 4 +listed: true +copyedit: true +last_tested: "2021-03-26" +steps: + - + title: Introduction + - + title: Your topic + - + title: Build and test + completion: engaged + - + title: Share + completion: internal + - + title: Reflection + completion: external + - + title: Upgrade your project + - + title: What next? diff --git a/el-GR/step_1.md b/el-GR/step_1.md new file mode 100644 index 00000000..6f2ff896 --- /dev/null +++ b/el-GR/step_1.md @@ -0,0 +1,103 @@ +## Introduction + +In this project you will use the skills you have developed in the [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path to create a webpage about something you want to share. + +

+The World Wide Web or web is a vast collection of connected webpages. The web allows people to view content from all over the world and create their own webpages to share with others. Can you imagine what life was like before the web? +

+ +You will: + +- Build a webpage to share information with others +- Create a webpage using multiple sections with a variety of HTML elements +- Use and customise or add CSS classes to style your page + +\--- no-print --- + +\--- task --- + +### Try it + +
+
+Can you identify the HTML elements that are used in this project? How has CSS been used to style and animate the page? +
+ +**Favourite things**: [See inside](https://editor.raspberrypi.org/en/projects/favourite-things){:target="_blank"} +
+ +
+ + + +\--- /task --- + +\--- /no-print --- + +
+ +### PROJECT BRIEF: Build a webpage + +
+ +Create a webpage about a topic that you find interesting and want to share with others. It could be helpful information for pet owners, a page of your favourite jokes, a walkthrough for a game you enjoy, some advice you have found helpful, a list of useful websites, or whatever you want to share with webpage visitors. + +Your webpage should: + +- Have multiple sections that contain different types of content including text and images, emojis, headings, quotations, lists, or links +- Use a colour palette, fonts, and CSS styles that work well together +- Be accessible by using good colour contrast and font sizes + +Your webpage could: + +- Use custom CSS classes that you create and apply +- Use animations or flip cards to create interest +- Be shared to the Raspberry Pi Foundation community gallery to inspire others + +
+ +\--- no-print --- + +### Get inspiration + +\--- task --- + +As you look at these webpages, consider what makes them useful and informative, as well as fun and accessible: + +⭐ Share your finished project for a chance of it being featured here. + +
+**⭐ Introduction to Raspberry Pi Pico**: [See inside](https://editor.raspberrypi.org/en/projects/raspberry-pi-pico){:target="_blank"} +
+ +
+ +**⭐ Book review**: [See inside](https://editor.raspberrypi.org/en/projects/book-review){:target="_blank"} + +
+ +
+ +**⭐ Egypt**: [See inside](https://editor.raspberrypi.org/en/projects/egypt){:target="_blank"} + +
+ +
+ +**⭐ Fashion Pi**: [See inside](https://editor.raspberrypi.org/en/projects/fashion-pi){:target="_blank"} + +
+ +
+ +\--- /task --- + +\--- /no-print --- + +\--- print-only --- + +![Complete project](images/favourite.png) +![Complete project](images/pico.png) +![Complete project](images/filter.png) + +\--- /print-only --- diff --git a/el-GR/step_2.md b/el-GR/step_2.md new file mode 100644 index 00000000..4a7d257e --- /dev/null +++ b/el-GR/step_2.md @@ -0,0 +1,70 @@ +## Your topic + +
+
+In this step you will decide what your webpage is about. +
+
+![A hand-drawn design of the layout of a webpage.](images/step-two.jpg){:width="300px"} +
+
+ +### What do you want to share? + +\--- task --- + +Think about the purpose of your webpage. + +It could be: + +- ℹ️ An information page about a topic you are interested in +- 🔗 A collection of links to the best webpages on a topic +- 🧧 Information about a celebration or an event from your culture +- 😜 Your favourite (polite!) jokes +- 🎮 A game walkthrough or other tutorial +- 🐙 Information about a pet or an animal +- 💬 Some advice that you have found helpful +- 🏞️ Tourist information about a place you have visited or would like to visit +- 👩🏿‍🦼 Information about a medical condition or disability that you think more people should be aware of + +**Tip:** Try to choose a topic that you already know something about. This is so you can spend your time building your webpage, not researching a topic. + +\--- /task --- + +### Who is it for? + +\--- task --- + +Who are you making your webpage for? You may find it helpful to think about the types of visitors you want to make your page for. + +- How old will your visitors be? +- How much will they know about your topic? +- Is the page for other experts in your topic or is it for beginners? + +**Tip:** If you make a page about a topic you know lots about, make sure you explain it clearly to other people. + +\--- /task --- + +### Get started + +\--- task --- + +If you have paper and a pen or pencil, you could sketch out your webpage layout. + +You could also make a bullet point list of information that you want to include. + +\--- /task --- + +\--- task --- + +Open the [Build a webpage starter project](https://editor.raspberrypi.org/en/projects/build-a-web-page-starter){:target="_blank"}. The code editor will open in another browser tab. + +\--- /task --- + +\--- task --- + +Change the `` element text to the title of your page. + +[[[web-add-title-head]]] + +\--- /task --- diff --git a/el-GR/step_3.md b/el-GR/step_3.md new file mode 100644 index 00000000..5c12159c --- /dev/null +++ b/el-GR/step_3.md @@ -0,0 +1,205 @@ +## Build and test + +<div style="display: flex; flex-wrap: wrap"> +<div style="flex-basis: 200px; flex-grow: 1; margin-right: 15px;"> +Now it's time to build your webpage. + +</div> +<div> +![alt=""](images/step-three.PNG){:width="300px"} +</div> +</div> + +**Tip:** Plan your project so you can create a basic webpage in the time you have available and then upgrade the project if you have time left. + +**Tip:** Remember to test your project each time you add something. It is much easier to find and fix bugs before you make more changes. + +\--- task --- + +You have built up some really useful skills. Here is a reminder to help you make your webpage: + +### Colour palette + +[[[web-colour-palette-variables]]] + +Use or personalise starter project colour palettes. + +[[[hex-colour-palettes]]] + +[[[web-colour-palette]]] + +Create a colour palette from an image. + +[[[rpfeditor-image-library]]] + +[[[colours-from-image]]] + +Customise colour palettes for style and accessibility. + +[[[contrast-checker]]] + +[[[add-colour-variables]]] + +Use your colour palettes to set text and background colours. + +[[[web-primary-secondary]]] + +### Structure + +[[[overall-page-structure]]] + +[[[full-width-section]]] + +[[[full-width-quote]]] + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +Webpages can be viewed on many different devices and should be <span style="color: #0faeb0">**responsive**</span> to each device. This means that if a user views your website on a mobile phone, it should respond to a smaller screen and if they view it on a desktop PC, it should respond to a larger screen. +</p> + +[[[using-rem]]] + +CSS can also be used to responsively change the layout of the webpage. + +[[[side-by-side-section]]] + +[[[wrapped-regular-width]]] + +[[[wrapped-wide-narrow]]] + +[[[web-large-text-tiles]]] + +[[[three-text-tiles]]] + +[[[text-image-text]]] + +[[[web-wrap-gap]]] + +Align and space your content to improve the look of your webpage. + +[[[web-x-y-centering]]] + +[[[padding-margins]]] + +### Fonts and text elements + +Choose fonts to use on your webpage. + +[[[included-fonts]]] + +[[[web-fonts]]] + +[[[google-fonts]]] + +You can use placeholder text while you work on your layout. + +[[[add-placeholder-text]]] + +Insert text elements. + +[[[web-ordered-list]]] + +[[[web-unordered-list]]] + +[[[full-width-quote]]] + +Style your text. + +[[[web-headers-large-text]]] + +[[[web-center-text]]] + +[[[web-strong-em]]] + +### Images + +Insert an image from the starter project library. + +[[[trinket-image-library]]] + +[[[web-alt-text]]] + +Use an emoji as an image. + +[[[choose-an-emoji]]] + +[[[huge-emoji]]] + +Add a background image. + +[[[web-background-image]]] + +[[[add-transparency]]] + +**Tip:** You can style your images with rounded corners or borders. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[web-box-shadow]]] + +### Animations + +Create web flip cards. + +[[[web-flip-cards]]] + +Use animations to change the appearance or position of elements on your page over time. + +[[[web-starter-animations]]] + +[[[web-customise-animations]]] + +### More style + +Add more style to any elements on your webpage. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[add-a-gradient]]] + +[[[web-animate-span]]] + +[[[web-box-shadow]]] + +You can create your own class to make a new style. + +[[[web-add-class]]] + +\--- /task --- + +\--- task --- + +**Test:** Show someone else your project and get their feedback. Do you want to make any changes to your webpage? + +**Tip:** Now is a good time to add comments to your code to make it easier to debug and upgrade. Comments also help other people read you code. + +[[[web-comment-code]]] + +\--- /task --- + +\--- task --- + +**Debug:** You might find some bugs in your HTML or CSS that you need to fix. Here are some common bugs. + +**My webpage isn't displaying correctly** + +[[[incorrect-tags]]] + +[[[mismatched-tags]]] + +**Further debug questions** + +[[[image-not-displayed]]] + +[[[font-not-displayed]]] + +[[[web-debug-link]]] + +You might find a bug not listed here. Can you figure out how to fix the bug? + +We love hearing about your bugs and how you fixed them. Use the **Send feedback** button at the bottom of this page if you found a different bug in your project. + +\--- /task --- diff --git a/el-GR/step_4.md b/el-GR/step_4.md new file mode 100644 index 00000000..6b9ae42d --- /dev/null +++ b/el-GR/step_4.md @@ -0,0 +1,9 @@ +## Share + +Now is the time to share your webpage so that it can receive visitors. + +**Note:** Remember to check that you haven't included any personal information in your webpage. + +Why not show your project to one of your friends? + +Why not invite your friends to create a project? Let them know how you had fun. diff --git a/el-GR/step_5.md b/el-GR/step_5.md new file mode 100644 index 00000000..00f06749 --- /dev/null +++ b/el-GR/step_5.md @@ -0,0 +1,79 @@ +## Reflection + +Did you meet the **project brief**? Think about your project and go through the checklist below and check off the points that apply to your project. + +Does your webpage have: + +\--- task --- + +Multiple sections that contain different types of content, such as text and images, emojis, headings, quotations, lists, or links? + +\--- /task --- + +\--- task --- + +A colour palette, fonts, and CSS styles that work well together? You could ask other people for their opinion, but you don't have to make changes if you don't agree with them. + +\--- /task --- + +\--- task --- + +Accessibility through a good colour contrast and easily readable font sizes? + +\--- /task --- + +Your webpage could: + +\--- task --- + +Use custom CSS classes that you created and applied. + +\--- /task --- + +\--- task --- + +Use animations or flip cards to create interest. + +\--- /task --- + +\--- task --- + +Be shared to the Raspberry Pi Foundation community gallery to inspire others. + +\--- /task --- + +When you reflect on how you made your webpage, it will help you in your future projects. + +Answer the questions below. You can draw, write, type in a document, talk to someone, or answer the questions in your own creative way that works best for you. + +\--- task --- + +How did you choose the topic for your webpage? + +\--- /task --- + +\--- task --- + +Which HTML or CSS technique do you like best? + +\--- /task --- + +\--- task --- + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +"Design isn't finished until someone is using it." (Brenda Laurel). +</p> + +In the 'Introduction to web' path you used lots of different design skills, including visual design, design for accessibility and user experience, and technical design. Which type of design do you enjoy most? + +\--- /task --- + +### Now you are a web content developer! + +Take a moment to celebrate what you have made. + +\--- task --- + +Where will you take your new powers? Who will you show your webpages to? What will you make next? + +\--- /task --- diff --git a/el-GR/step_6.md b/el-GR/step_6.md new file mode 100644 index 00000000..323aa18e --- /dev/null +++ b/el-GR/step_6.md @@ -0,0 +1,53 @@ +## Upgrade your project + +If you have time, you can upgrade your webpage. You might already have ideas to add to your webpage or you might want to go back to the first step and look at other example projects again for more inspiration. + +Each example project in the [Introduction](.) has a ‘See Inside’ link for you to open the project and look at the code to get ideas and see how they work. + +\--- task --- + +On your webpage, you could improve the: + +**Visual design** + +- The layout +- Colours +- Fonts +- Emojis +- Graphics +- Borders and box shadows +- Gradients +- Background images + +**Accessibility** + +- Colour contrast +- Font sizes +- `alt` text on images + +**Content** + +- The words you have used. +- Can you add more useful information? +- Would a list be more effective? +- Should you use different heading elements? +- Are there other webpages that you could link to? + +**User experience** + +- Is your page well laid out so that information is easy to find? +- If you have used animation, make sure it is not too distracting for visitors to your webpage. + +**Technical design** + +- Consider whether you could organise your CSS properties into classes that you would want to reuse. +- Make sure you have used sensible names for CSS classes. +- Add helpful comments to your HTML and CSS. + +\--- /task --- + +**Dungeons and Dragons Example**: [See inside](https://editor.raspberrypi.org/en/projects/what-is-d-and-d){:target="_blank"} + +<div> +<iframe src="https://editor.raspberrypi.org/en/embed/viewer/what-is-d-and-d" width="600" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe> +</div> diff --git a/el-GR/step_7.md b/el-GR/step_7.md new file mode 100644 index 00000000..61419a70 --- /dev/null +++ b/el-GR/step_7.md @@ -0,0 +1,11 @@ +## What next? + +You have reached the end of the [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path! + +Now you can create webpages on any topic you are interested in and share them. Try using HTML and CSS to design and build more webpages. If you want to continue learning about web development, you can have a look at the [More Web](https://projects.raspberrypi.org/en/pathways/more-web) path. + +You could enter one of your Design or Invent projects into Coolest Projects, or make a completely new webpage. + +[[[web-coolest-projects]]] + +You can also explore our [other web projects](https://projects.raspberrypi.org/en/projects?software%5B%5D=html-css-javascript) and try them out. diff --git a/el-GR/web-comments.txt b/el-GR/web-comments.txt new file mode 100644 index 00000000..d15eaf89 --- /dev/null +++ b/el-GR/web-comments.txt @@ -0,0 +1,21 @@ +Title shown in web browsers + +Import fonts from Google + +Include CSS style file + +The page header code goes here + +The main content for the web page goes between the main tags + +A section with an image on the left and text on the right + +A section with two bulleted lists + +A heading for the inputs section + +Three flip cards with images on one side and text on the other + +A heading for the outputs section + +Footer with text and a hyperlink diff --git a/en-US/code/book-review/animation.css b/en-US/code/book-review/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/en-US/code/book-review/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/en-US/code/book-review/beetle.jpg b/en-US/code/book-review/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/en-US/code/book-review/beetle.jpg differ diff --git a/en-US/code/book-review/butterfly.JPG b/en-US/code/book-review/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/en-US/code/book-review/butterfly.JPG differ diff --git a/en-US/code/book-review/cacti.JPG b/en-US/code/book-review/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/en-US/code/book-review/cacti.JPG differ diff --git a/en-US/code/book-review/cafe.css b/en-US/code/book-review/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/en-US/code/book-review/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/en-US/code/book-review/cafe.jpg b/en-US/code/book-review/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/en-US/code/book-review/cafe.jpg differ diff --git a/en-US/code/book-review/candles.JPG b/en-US/code/book-review/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/en-US/code/book-review/candles.JPG differ diff --git a/en-US/code/book-review/carnival.jpg b/en-US/code/book-review/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/en-US/code/book-review/carnival.jpg differ diff --git a/en-US/code/book-review/colour-festival.jpg b/en-US/code/book-review/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/en-US/code/book-review/colour-festival.jpg differ diff --git a/en-US/code/book-review/comic-books.jpg b/en-US/code/book-review/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/en-US/code/book-review/comic-books.jpg differ diff --git a/en-US/code/book-review/comic.css b/en-US/code/book-review/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/en-US/code/book-review/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/en-US/code/book-review/companion.css b/en-US/code/book-review/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/en-US/code/book-review/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/en-US/code/book-review/crayons.jpg b/en-US/code/book-review/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/en-US/code/book-review/crayons.jpg differ diff --git a/en-US/code/book-review/default.css b/en-US/code/book-review/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/en-US/code/book-review/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/disco-ball.jpg b/en-US/code/book-review/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/en-US/code/book-review/disco-ball.jpg differ diff --git a/en-US/code/book-review/disco-flowers.JPG b/en-US/code/book-review/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/en-US/code/book-review/disco-flowers.JPG differ diff --git a/en-US/code/book-review/disco.css b/en-US/code/book-review/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/en-US/code/book-review/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/en-US/code/book-review/drone.JPG b/en-US/code/book-review/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/en-US/code/book-review/drone.JPG differ diff --git a/en-US/code/book-review/exotic-plants.jpg b/en-US/code/book-review/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/en-US/code/book-review/exotic-plants.jpg differ diff --git a/en-US/code/book-review/ferns.jpg b/en-US/code/book-review/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/en-US/code/book-review/ferns.jpg differ diff --git a/en-US/code/book-review/festival.css b/en-US/code/book-review/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/en-US/code/book-review/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/fiesta.css b/en-US/code/book-review/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/en-US/code/book-review/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/en-US/code/book-review/fire.jpg b/en-US/code/book-review/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/en-US/code/book-review/fire.jpg differ diff --git a/en-US/code/book-review/fish.jpg b/en-US/code/book-review/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/en-US/code/book-review/fish.jpg differ diff --git a/en-US/code/book-review/forest.JPG b/en-US/code/book-review/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/en-US/code/book-review/forest.JPG differ diff --git a/en-US/code/book-review/game-boy.jpg b/en-US/code/book-review/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/en-US/code/book-review/game-boy.jpg differ diff --git a/en-US/code/book-review/globe-in-water.JPG b/en-US/code/book-review/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/en-US/code/book-review/globe-in-water.JPG differ diff --git a/en-US/code/book-review/greenhouse.JPG b/en-US/code/book-review/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/en-US/code/book-review/greenhouse.JPG differ diff --git a/en-US/code/book-review/helpful-plumber.css b/en-US/code/book-review/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/en-US/code/book-review/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/en-US/code/book-review/illustrations.png b/en-US/code/book-review/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/en-US/code/book-review/illustrations.png differ diff --git a/en-US/code/book-review/index.html b/en-US/code/book-review/index.html new file mode 100644 index 00000000..f09f6728 --- /dev/null +++ b/en-US/code/book-review/index.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="ie=edge" /> + + <!-- Title shown in web browsers--> + <title>Tango makes three + + + + + + + + + + + + + + + +
+

Tango makes three

+
+ + +
+
+

My book review.

+
+
+ Description of the image. +
+
+
+

"tango makes three is an amazing story that has won lots of awards so you should totally read it"

+ - me. +
+
+
+
+

I thought this was a brilliant book and it's based on a true story so you learn loads too.

+
+

I wont spoil the book but it has two male penguins called Roy and Silo who are given an egg and create a same-sex family.

+
+

Reading about diverse families is super important.

+
+

Reasons to read Tango Makes Three recap:

+
+ +
+ + +
+
+
+

Reason 1

+
+ +
+

It's won loads of awards - and I mean loads

+
+
+
+ +
+
+
+

Reason 2

+
+ +
+

It's based on a true story so you learn loads about nature

+
+
+
+ +
+
+
+

Reason 3

+
+ +
+

Some adults have banned it but we know best

+
+
+
+
+
+
+ + + + + + + diff --git a/en-US/code/book-review/lake-mountains.JPG b/en-US/code/book-review/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/en-US/code/book-review/lake-mountains.JPG differ diff --git a/en-US/code/book-review/land-animals.css b/en-US/code/book-review/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/en-US/code/book-review/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/medal.jpg b/en-US/code/book-review/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/en-US/code/book-review/medal.jpg differ diff --git a/en-US/code/book-review/medals.css b/en-US/code/book-review/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/en-US/code/book-review/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/money.css b/en-US/code/book-review/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/en-US/code/book-review/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/en-US/code/book-review/monkey.JPG b/en-US/code/book-review/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/en-US/code/book-review/monkey.JPG differ diff --git a/en-US/code/book-review/moon-art.png b/en-US/code/book-review/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/en-US/code/book-review/moon-art.png differ diff --git a/en-US/code/book-review/mushroom.JPG b/en-US/code/book-review/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/en-US/code/book-review/mushroom.JPG differ diff --git a/en-US/code/book-review/nature.css b/en-US/code/book-review/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/en-US/code/book-review/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/pansies.JPG b/en-US/code/book-review/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/en-US/code/book-review/pansies.JPG differ diff --git a/en-US/code/book-review/pastel-hearts.jpg b/en-US/code/book-review/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/en-US/code/book-review/pastel-hearts.jpg differ diff --git a/en-US/code/book-review/pastel.css b/en-US/code/book-review/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/en-US/code/book-review/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/piggy-bank.jpg b/en-US/code/book-review/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/en-US/code/book-review/piggy-bank.jpg differ diff --git a/en-US/code/book-review/placeholder.png b/en-US/code/book-review/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/en-US/code/book-review/placeholder.png differ diff --git a/en-US/code/book-review/primary.css b/en-US/code/book-review/primary.css new file mode 100644 index 00000000..be901099 --- /dev/null +++ b/en-US/code/book-review/primary.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/project_config.yml b/en-US/code/book-review/project_config.yml new file mode 100644 index 00000000..110ea8c2 --- /dev/null +++ b/en-US/code/book-review/project_config.yml @@ -0,0 +1,3 @@ +name: 'Book review' +identifier: 'book-review' +type: 'html' diff --git a/en-US/code/book-review/pumpkins.JPG b/en-US/code/book-review/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/en-US/code/book-review/pumpkins.JPG differ diff --git a/en-US/code/book-review/rainbow-forest.JPG b/en-US/code/book-review/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/en-US/code/book-review/rainbow-forest.JPG differ diff --git a/en-US/code/book-review/rhino.JPG b/en-US/code/book-review/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/en-US/code/book-review/rhino.JPG differ diff --git a/en-US/code/book-review/smokey.css b/en-US/code/book-review/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/en-US/code/book-review/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/space.css b/en-US/code/book-review/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/en-US/code/book-review/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/spider-web.jpg b/en-US/code/book-review/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/en-US/code/book-review/spider-web.jpg differ diff --git a/en-US/code/book-review/style.css b/en-US/code/book-review/style.css new file mode 100644 index 00000000..ae79bc6b --- /dev/null +++ b/en-US/code/book-review/style.css @@ -0,0 +1,335 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail1); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/en-US/code/book-review/sunflowers.JPG b/en-US/code/book-review/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/en-US/code/book-review/sunflowers.JPG differ diff --git a/en-US/code/book-review/sunset-beach.JPG b/en-US/code/book-review/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/en-US/code/book-review/sunset-beach.JPG differ diff --git a/en-US/code/book-review/sunset-person.jpg b/en-US/code/book-review/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/en-US/code/book-review/sunset-person.jpg differ diff --git a/en-US/code/book-review/sunset.JPG b/en-US/code/book-review/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/en-US/code/book-review/sunset.JPG differ diff --git a/en-US/code/book-review/sunset.css b/en-US/code/book-review/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/en-US/code/book-review/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/sunshine.css b/en-US/code/book-review/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/en-US/code/book-review/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/tango.jpeg b/en-US/code/book-review/tango.jpeg new file mode 100644 index 00000000..d91acb15 Binary files /dev/null and b/en-US/code/book-review/tango.jpeg differ diff --git a/en-US/code/book-review/thriller.css b/en-US/code/book-review/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/en-US/code/book-review/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/water-animals.css b/en-US/code/book-review/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/en-US/code/book-review/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/en-US/code/book-review/woodland.css b/en-US/code/book-review/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/en-US/code/book-review/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/animation.css b/en-US/code/build-a-web-page-starter/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/en-US/code/build-a-web-page-starter/beetle.jpg b/en-US/code/build-a-web-page-starter/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/beetle.jpg differ diff --git a/en-US/code/build-a-web-page-starter/butterfly.JPG b/en-US/code/build-a-web-page-starter/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/butterfly.JPG differ diff --git a/en-US/code/build-a-web-page-starter/cacti.JPG b/en-US/code/build-a-web-page-starter/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/en-US/code/build-a-web-page-starter/cacti.JPG differ diff --git a/en-US/code/build-a-web-page-starter/cafe.css b/en-US/code/build-a-web-page-starter/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/cafe.jpg b/en-US/code/build-a-web-page-starter/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/cafe.jpg differ diff --git a/en-US/code/build-a-web-page-starter/candles.JPG b/en-US/code/build-a-web-page-starter/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/en-US/code/build-a-web-page-starter/candles.JPG differ diff --git a/en-US/code/build-a-web-page-starter/carnival.jpg b/en-US/code/build-a-web-page-starter/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/carnival.jpg differ diff --git a/en-US/code/build-a-web-page-starter/colour-festival.jpg b/en-US/code/build-a-web-page-starter/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/en-US/code/build-a-web-page-starter/colour-festival.jpg differ diff --git a/en-US/code/build-a-web-page-starter/comic-books.jpg b/en-US/code/build-a-web-page-starter/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/en-US/code/build-a-web-page-starter/comic-books.jpg differ diff --git a/en-US/code/build-a-web-page-starter/comic.css b/en-US/code/build-a-web-page-starter/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/en-US/code/build-a-web-page-starter/companion.css b/en-US/code/build-a-web-page-starter/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/en-US/code/build-a-web-page-starter/crayons.jpg b/en-US/code/build-a-web-page-starter/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/crayons.jpg differ diff --git a/en-US/code/build-a-web-page-starter/default.css b/en-US/code/build-a-web-page-starter/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/disco-ball.jpg b/en-US/code/build-a-web-page-starter/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/disco-ball.jpg differ diff --git a/en-US/code/build-a-web-page-starter/disco-flowers.JPG b/en-US/code/build-a-web-page-starter/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/en-US/code/build-a-web-page-starter/disco-flowers.JPG differ diff --git a/en-US/code/build-a-web-page-starter/disco.css b/en-US/code/build-a-web-page-starter/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/en-US/code/build-a-web-page-starter/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/en-US/code/build-a-web-page-starter/drone.JPG b/en-US/code/build-a-web-page-starter/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/drone.JPG differ diff --git a/en-US/code/build-a-web-page-starter/exotic-plants.jpg b/en-US/code/build-a-web-page-starter/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/exotic-plants.jpg differ diff --git a/en-US/code/build-a-web-page-starter/ferns.jpg b/en-US/code/build-a-web-page-starter/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/ferns.jpg differ diff --git a/en-US/code/build-a-web-page-starter/festival.css b/en-US/code/build-a-web-page-starter/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/fiesta.css b/en-US/code/build-a-web-page-starter/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/en-US/code/build-a-web-page-starter/fire.jpg b/en-US/code/build-a-web-page-starter/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/fire.jpg differ diff --git a/en-US/code/build-a-web-page-starter/fish.jpg b/en-US/code/build-a-web-page-starter/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/en-US/code/build-a-web-page-starter/fish.jpg differ diff --git a/en-US/code/build-a-web-page-starter/forest.JPG b/en-US/code/build-a-web-page-starter/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/forest.JPG differ diff --git a/en-US/code/build-a-web-page-starter/game-boy.jpg b/en-US/code/build-a-web-page-starter/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/game-boy.jpg differ diff --git a/en-US/code/build-a-web-page-starter/globe-in-water.JPG b/en-US/code/build-a-web-page-starter/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/globe-in-water.JPG differ diff --git a/en-US/code/build-a-web-page-starter/greenhouse.JPG b/en-US/code/build-a-web-page-starter/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/greenhouse.JPG differ diff --git a/en-US/code/build-a-web-page-starter/helpful-plumber.css b/en-US/code/build-a-web-page-starter/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/en-US/code/build-a-web-page-starter/illustrations.png b/en-US/code/build-a-web-page-starter/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/illustrations.png differ diff --git a/en-US/code/build-a-web-page-starter/index.html b/en-US/code/build-a-web-page-starter/index.html new file mode 100644 index 00000000..2162fa6d --- /dev/null +++ b/en-US/code/build-a-web-page-starter/index.html @@ -0,0 +1,45 @@ + + + + + + + + + My website title + + + + + + + + + + + + + + + +
+

Big Title

+
+ + +
+
+

Lorem ipsum dolor sit amet.

+
+
+ + + + + + diff --git a/en-US/code/build-a-web-page-starter/lake-mountains.JPG b/en-US/code/build-a-web-page-starter/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/lake-mountains.JPG differ diff --git a/en-US/code/build-a-web-page-starter/land-animals.css b/en-US/code/build-a-web-page-starter/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/en-US/code/build-a-web-page-starter/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/medal.jpg b/en-US/code/build-a-web-page-starter/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/en-US/code/build-a-web-page-starter/medal.jpg differ diff --git a/en-US/code/build-a-web-page-starter/medals.css b/en-US/code/build-a-web-page-starter/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/money.css b/en-US/code/build-a-web-page-starter/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/en-US/code/build-a-web-page-starter/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/en-US/code/build-a-web-page-starter/monkey.JPG b/en-US/code/build-a-web-page-starter/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/monkey.JPG differ diff --git a/en-US/code/build-a-web-page-starter/moon-art.png b/en-US/code/build-a-web-page-starter/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/moon-art.png differ diff --git a/en-US/code/build-a-web-page-starter/mushroom.JPG b/en-US/code/build-a-web-page-starter/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/mushroom.JPG differ diff --git a/en-US/code/build-a-web-page-starter/nature.css b/en-US/code/build-a-web-page-starter/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/en-US/code/build-a-web-page-starter/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/pansies.JPG b/en-US/code/build-a-web-page-starter/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/en-US/code/build-a-web-page-starter/pansies.JPG differ diff --git a/en-US/code/build-a-web-page-starter/pastel-hearts.jpg b/en-US/code/build-a-web-page-starter/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/pastel-hearts.jpg differ diff --git a/en-US/code/build-a-web-page-starter/pastel.css b/en-US/code/build-a-web-page-starter/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/en-US/code/build-a-web-page-starter/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/piggy-bank.jpg b/en-US/code/build-a-web-page-starter/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/piggy-bank.jpg differ diff --git a/en-US/code/build-a-web-page-starter/placeholder.png b/en-US/code/build-a-web-page-starter/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/placeholder.png differ diff --git a/en-US/code/build-a-web-page-starter/primary.css b/en-US/code/build-a-web-page-starter/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/en-US/code/build-a-web-page-starter/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/project_config.yml b/en-US/code/build-a-web-page-starter/project_config.yml new file mode 100644 index 00000000..6801264a --- /dev/null +++ b/en-US/code/build-a-web-page-starter/project_config.yml @@ -0,0 +1,3 @@ +name: 'Build a web page starter' +identifier: 'build-a-web-page-starter' +type: 'html' diff --git a/en-US/code/build-a-web-page-starter/pumpkins.JPG b/en-US/code/build-a-web-page-starter/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/pumpkins.JPG differ diff --git a/en-US/code/build-a-web-page-starter/rainbow-forest.JPG b/en-US/code/build-a-web-page-starter/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/en-US/code/build-a-web-page-starter/rainbow-forest.JPG differ diff --git a/en-US/code/build-a-web-page-starter/rhino.JPG b/en-US/code/build-a-web-page-starter/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/rhino.JPG differ diff --git a/en-US/code/build-a-web-page-starter/smokey.css b/en-US/code/build-a-web-page-starter/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/space.css b/en-US/code/build-a-web-page-starter/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/en-US/code/build-a-web-page-starter/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/spider-web.jpg b/en-US/code/build-a-web-page-starter/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/spider-web.jpg differ diff --git a/en-US/code/build-a-web-page-starter/style.css b/en-US/code/build-a-web-page-starter/style.css new file mode 100644 index 00000000..6589bd8b --- /dev/null +++ b/en-US/code/build-a-web-page-starter/style.css @@ -0,0 +1,316 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/en-US/code/build-a-web-page-starter/sunflowers.JPG b/en-US/code/build-a-web-page-starter/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/sunflowers.JPG differ diff --git a/en-US/code/build-a-web-page-starter/sunset-beach.JPG b/en-US/code/build-a-web-page-starter/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/sunset-beach.JPG differ diff --git a/en-US/code/build-a-web-page-starter/sunset-person.jpg b/en-US/code/build-a-web-page-starter/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/en-US/code/build-a-web-page-starter/sunset-person.jpg differ diff --git a/en-US/code/build-a-web-page-starter/sunset.JPG b/en-US/code/build-a-web-page-starter/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/en-US/code/build-a-web-page-starter/sunset.JPG differ diff --git a/en-US/code/build-a-web-page-starter/sunset.css b/en-US/code/build-a-web-page-starter/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/en-US/code/build-a-web-page-starter/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/sunshine.css b/en-US/code/build-a-web-page-starter/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/en-US/code/build-a-web-page-starter/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/thriller.css b/en-US/code/build-a-web-page-starter/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/en-US/code/build-a-web-page-starter/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/water-animals.css b/en-US/code/build-a-web-page-starter/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/en-US/code/build-a-web-page-starter/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/en-US/code/build-a-web-page-starter/woodland.css b/en-US/code/build-a-web-page-starter/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/en-US/code/build-a-web-page-starter/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/en-US/code/egypt/Egypt-Valley-of-the-kings.jpg b/en-US/code/egypt/Egypt-Valley-of-the-kings.jpg new file mode 100644 index 00000000..cbad0b30 Binary files /dev/null and b/en-US/code/egypt/Egypt-Valley-of-the-kings.jpg differ diff --git a/en-US/code/egypt/Explore.css b/en-US/code/egypt/Explore.css new file mode 100644 index 00000000..7f086722 --- /dev/null +++ b/en-US/code/egypt/Explore.css @@ -0,0 +1,197 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +html{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ +height: 12%; +display: flex; +align-items: center; +} + +.logo{ +width: 50px; +cursor: pointer; +color: white; +font-size: 20px; +} + +.navbar i{ +width: 30px; +cursor: pointer; +margin-left: 40px; +} + +nav{ +flex: 1; +text-align: right; +} + +nav ul li{ +list-style: none; +display: inline-block; +margin-left: 60px; +color: white; +font-size: 13px; +} + +/* Information boxes */ + +.wrapper{ +display: grid; +margin: 200px 90px auto; +grid-gap: 20px; +grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { +.wrapper{ + margin: 200px auto; +} +} +.wrapper .box{ +width: 350px; +margin: 0 auto; +position: relative; +perspective: 1000px; +border: #000000; +border-radius: 2px; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +padding-bottom: 75px; +padding-right: 75px; +} +.wrapper .box .front-face{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); +background-size: cover; +height: 220px; +width: 100%; +display: flex; +flex-direction: column; +justify-content: center; +border-radius: 2px; +border-color: #000000; +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ +font-size: 22px; +font-weight: 600; +text-transform: uppercase; +} + +.box .front-face span{ +background: linear-gradient(-135deg, #000000, #000000); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +text-align: center; +} + + +.box .back-face{ +position: absolute; +top: 0; +left: 0; +z-index: 1; +height: 220px; +width: 100%; +padding: 30px; +color: #fff; +opacity: 0; +transform-style: preserve-3d; +backface-visibility: hidden; +background: linear-gradient(-135deg, #000000, #000000); +transform: translateY(110px) rotateX(-90deg); +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +} + +.box .back-face p{ +margin-top: 10px; +text-align: justify; +} + +.box:hover .back-face{ +opacity: 1; +transform: rotateX(0deg); +} + +.box:hover .front-face{ +opacity: 0; +transform: translateY(-110px) rotateX(90deg); +} + + +/*Boxes Backgrounds*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg); + } + + .box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg); + } + + .box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg); + } + + .box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg); + } + + .box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg); + } + + .box .front-face.face6{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg); + } + + .box .front-face.face7{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg); + } + + .box .front-face.face{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); + } + + .box .back-face button{ + height: 60px; + width: 100%; + margin-top: 55px; + background-color: rgb(52, 52, 255); + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -ms-border-radius: 30px; + -o-border-radius: 30px; + text-align: center; + font-size: xx-large; +} + +.box .back-face a{ + text-decoration: none; +} \ No newline at end of file diff --git a/en-US/code/egypt/Explore.html b/en-US/code/egypt/Explore.html new file mode 100644 index 00000000..6a468440 --- /dev/null +++ b/en-US/code/egypt/Explore.html @@ -0,0 +1,116 @@ + + + + + + + Explore Egypt + + + +
+
+ + + +
+
+
+
+ Valley of the Kings +
+
+ Valley of the Kings +

+ We all know about King Tut and it is here that you can visit his tomb. In fact, you can visit all of the Kings of the Pharaoh’s tombs. Ramses, I-V, and everyone in between was entombed in extravagant tombs filled with riches and jewels on the West Bank of the Nile. +

+
+
+
+
+ Islamic Cairo +
+
+ Islamic Cairo +

+ Islamic Cairo is known as the “City of Citadels” with many mosques to visit including the Sultan Hussan Mosque and the Alabaster Mosque aka, The Mosque of Muhammad Ali. It is the most visited mosque in all of Egypt and with good reason. +

+
+
+
+
+ Egyptian Museum +
+
+ Egyptian Museum +

+ Other museums around the world have Egyptian artifacts but this takes it to the next level. + +It is worth touring the museum because when visiting the temples of Egypt, there is nothing inside they have all been moved to the safety of the museum where you can see them with your own eyes. +

+
+
+
+
+ El Gouna +
+
+ El Gouna +

+ For a luxury escape in Egypt, El Gouna is a popular holiday destination. It’s popular spot for diving in the Red Sea, chilling out at the beach, and dolphin spotting. +

+
+
+
+
+ Sharm El Sheik +
+
+ Sharm El Sheik +

+ Sharm El Sheik is Egypt’s most popular resort destinations located on the Sinai Peninsula. It is yet another excellent spot for scuba diving, but with its convenient location, it is also a great spot for adventure. You can climb Mount Sinai or take a trip to the desert to experience one of the Bedouin camps +

+
+
+
+
+ Saint Catherine’s Monastery +
+
+ Saint Catherine’s Monastery +

+ Located at the foot of Mount Sinai, a visit to Saint Catherine’s Monastery is a must visit when in the Sinai Peninsula. It is the very place where God spoke to Moses as a burning bush. Dating back to the 500s AD, this is the oldest continuously working Christian monastery in the world. +

+
+
+
+
+ Alexandria +
+
+ Alexandria +

+ Located on the Mediterranean Sea, Alexandria is where East meets West. Alexandrea was founded by Alexander the Great and housed one of the seven ancient wonders of the world, the Alexandria Lighthouse. Psst: The Great Pyramids are another ancient wonder. +

+
+
+
+
+ Visit Egyptian Ministry of tourism +
+
+ Visit Egyptian Ministry of tourism + +
+
+
+
+ + + \ No newline at end of file diff --git a/en-US/code/egypt/History.css b/en-US/code/egypt/History.css new file mode 100644 index 00000000..5c7a641f --- /dev/null +++ b/en-US/code/egypt/History.css @@ -0,0 +1,166 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + } + +html{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +/* Information boxes */ + +.wrapper{ + display: grid; + margin: 200px 90px auto; + grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { + .wrapper{ + margin: 200px auto; + } +} +.wrapper .box{ + width: 350px; + margin: 0 auto; + position: relative; + perspective: 1000px; + border: #000000; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; + padding-bottom: 75px; + padding-right: 75px; +} +.wrapper .box .front-face{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-size: cover; + height: 220px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 2px; + border-color: #000000; + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ + font-size: 22px; + font-weight: 600; + text-transform: uppercase; +} + +.box .front-face span{ + background: linear-gradient(-135deg, #000000, #000000); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; +} + + +.box .back-face{ + position: absolute; + top: 0; + left: 0; + z-index: 1; + height: 220px; + width: 100%; + padding: 30px; + color: #fff; + opacity: 0; + transform-style: preserve-3d; + backface-visibility: hidden; + background: linear-gradient(-135deg, #000000, #000000); + transform: translateY(110px) rotateX(-90deg); + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; +} + +.box .back-face p{ + margin-top: 10px; + text-align: justify; +} + +.box:hover .back-face{ + opacity: 1; + transform: rotateX(0deg); +} + +.box:hover .front-face{ + opacity: 0; + transform: translateY(-110px) rotateX(90deg); +} + +/*Boxes Backgrounds*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg); +} + +.box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg); +} + +.box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg); +} + +.box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg); +} + +.box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); +} \ No newline at end of file diff --git a/en-US/code/egypt/History.html b/en-US/code/egypt/History.html new file mode 100644 index 00000000..99706027 --- /dev/null +++ b/en-US/code/egypt/History.html @@ -0,0 +1,85 @@ + + + + + + + Egypt's History + + + +
+
+ + + +
+
+
+
+ Ancient Egypt +
+
+ Ancient Egypt +

+ Ancient Egypt is divided into three “kingdom” periods—Old, Middle, and New—with shorter intermediate periods separating the kingdoms. Even before the Old Kingdom period, the foundations of Egyptian civilization were being laid for thousands of years, as people living near the Nile increasingly focused on sedentary agriculture, which led to urbanization and specialized, non-agricultural economic activity. +

+
+
+
+
+ OLD Ancient Egypt Kingdom +
+
+ OLD Ancient Egypt Kingdom +

+ Evidence of human habitation in Egypt stretches back tens of thousands of years. It was only in about 6000 BCE, however, that widespread settlement began in the region. Around this time, the Sahara Desert expanded. Some scientists think this expansion was caused by a slight shift in the tilt of the Earth. Others have explored changing rainfall patterns, but the specific causes are not entirely clear.
The most important result of this expansion of the Sahara for human civilization was that it pushed humans closer to the Nile River in search of reliable water sources. +

+
+
+
+
+ MIDDLE Ancient Egypt Kingdom +
+
+ MIDDLE Ancient Egypt Kingdom +

+ he Middle Kingdom saw Egypt unified again as kings found ways to take back power from regional governors. From the Middle Kingdom era forward, Egyptian kings often kept well-trained standing armies. The ability of the Egyptian state to create and maintain a standing military force and to build fortifications showed that it had regained control of substantial resources. + Political fragmentation led to the Second Intermediate Period. The precise dates are unclear; even though writing allowed for more events to be recorded, most things still were not, and many more records have been lost or destroyed. +

+
+
+
+
+ NEW Ancient Egypt Kingdom +
+
+ NEW Ancient Egypt Kingdom +

+ Around 1550 BCE, the New Kingdom period of Egyptian history began with the expulsion of the Hyksos from Egypt and the restoration of centralized political control. This period was Egypt's most prosperous time and marked the peak of its power. + Also in this period, Hatshepsut, Egypt’s most famous female ruler, established trade networks that helped build the wealth of Egypt and commissioned hundreds of construction projects and pieces of statuary, as well as an impressive mortuary temple at Deir el-Bahri. She also ordered repairs to temples that had been neglected or damaged during the period of Hyksos rule. +

+
+
+
+
+ Egypt now +
+
+ Egypt now +

+ Nowadays Egypt's currency, people, goverment, land changed & Egypt became one of the important countries in Africa & the middle east, Now Egypt is ruled by military ruling, Islam became the major religion after christianity, Egypt’s capital is now Cairo but goverment is trying to change it to the New Administrative Capital +

+
+
+
+
+ + + \ No newline at end of file diff --git a/en-US/code/egypt/alexandria-egypt-library.jpg b/en-US/code/egypt/alexandria-egypt-library.jpg new file mode 100644 index 00000000..719f0a4b Binary files /dev/null and b/en-US/code/egypt/alexandria-egypt-library.jpg differ diff --git a/en-US/code/egypt/background.jpg b/en-US/code/egypt/background.jpg new file mode 100644 index 00000000..6dcf3d1c Binary files /dev/null and b/en-US/code/egypt/background.jpg differ diff --git a/en-US/code/egypt/card1.jpg b/en-US/code/egypt/card1.jpg new file mode 100644 index 00000000..ceed5b4d Binary files /dev/null and b/en-US/code/egypt/card1.jpg differ diff --git a/en-US/code/egypt/card2.jpg b/en-US/code/egypt/card2.jpg new file mode 100644 index 00000000..51a30437 Binary files /dev/null and b/en-US/code/egypt/card2.jpg differ diff --git a/en-US/code/egypt/card3.jpg b/en-US/code/egypt/card3.jpg new file mode 100644 index 00000000..39ac3b27 Binary files /dev/null and b/en-US/code/egypt/card3.jpg differ diff --git a/en-US/code/egypt/card4.jpg b/en-US/code/egypt/card4.jpg new file mode 100644 index 00000000..44b112e5 Binary files /dev/null and b/en-US/code/egypt/card4.jpg differ diff --git a/en-US/code/egypt/egypt-mosque-cairo.jpg b/en-US/code/egypt/egypt-mosque-cairo.jpg new file mode 100644 index 00000000..2b676239 Binary files /dev/null and b/en-US/code/egypt/egypt-mosque-cairo.jpg differ diff --git a/en-US/code/egypt/egypt-temples.jpg b/en-US/code/egypt/egypt-temples.jpg new file mode 100644 index 00000000..890c6ee6 Binary files /dev/null and b/en-US/code/egypt/egypt-temples.jpg differ diff --git a/en-US/code/egypt/flag.jpg b/en-US/code/egypt/flag.jpg new file mode 100644 index 00000000..cf78620f Binary files /dev/null and b/en-US/code/egypt/flag.jpg differ diff --git a/en-US/code/egypt/gouna.jpg b/en-US/code/egypt/gouna.jpg new file mode 100644 index 00000000..c219f9b2 Binary files /dev/null and b/en-US/code/egypt/gouna.jpg differ diff --git a/en-US/code/egypt/index.html b/en-US/code/egypt/index.html new file mode 100644 index 00000000..9f639b63 --- /dev/null +++ b/en-US/code/egypt/index.html @@ -0,0 +1,53 @@ + + + + + + + Document + + + + + +
+
+ + + +
+
+
+

Egypt

+

The Mother of the world & the start Civilization

+ +
+
+
+
Abu Simbel
+

Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC

+
+
+
Siwa Oasis
+

Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.

+
+
+
Giza Necropolis
+

The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure

+
+
+
Red Sea Reef
+

The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.

+
+
+
+
+ + + \ No newline at end of file diff --git a/en-US/code/egypt/info-box1.jpg b/en-US/code/egypt/info-box1.jpg new file mode 100644 index 00000000..1bc81989 Binary files /dev/null and b/en-US/code/egypt/info-box1.jpg differ diff --git a/en-US/code/egypt/info-box2.jpg b/en-US/code/egypt/info-box2.jpg new file mode 100644 index 00000000..c21fae32 Binary files /dev/null and b/en-US/code/egypt/info-box2.jpg differ diff --git a/en-US/code/egypt/info-box3.jpg b/en-US/code/egypt/info-box3.jpg new file mode 100644 index 00000000..53938681 Binary files /dev/null and b/en-US/code/egypt/info-box3.jpg differ diff --git a/en-US/code/egypt/info-box4.jpg b/en-US/code/egypt/info-box4.jpg new file mode 100644 index 00000000..1c69ef25 Binary files /dev/null and b/en-US/code/egypt/info-box4.jpg differ diff --git a/en-US/code/egypt/project_config.yml b/en-US/code/egypt/project_config.yml new file mode 100644 index 00000000..ed541982 --- /dev/null +++ b/en-US/code/egypt/project_config.yml @@ -0,0 +1,3 @@ +name: 'Egypt' +identifier: 'egypt' +type: 'html' diff --git a/en-US/code/egypt/saint-catherines-monastery.jpg b/en-US/code/egypt/saint-catherines-monastery.jpg new file mode 100644 index 00000000..6fae8542 Binary files /dev/null and b/en-US/code/egypt/saint-catherines-monastery.jpg differ diff --git a/en-US/code/egypt/script.js b/en-US/code/egypt/script.js new file mode 100644 index 00000000..cef41022 --- /dev/null +++ b/en-US/code/egypt/script.js @@ -0,0 +1,23 @@ +//Nav li +var button = document.getElementById('li1'); +button.addEventListener('click', function () { + document.location.href = 'index.html'; +}); +var button = document.getElementById('li2'); +button.addEventListener('click', function () { + document.location.href = 'History.html'; +}); +var button = document.getElementById('li3'); +button.addEventListener('click', function () { + document.location.href = 'Explore.html'; +}); + +//btns +var button = document.getElementById('btn1'); +button.addEventListener('click', function () { + document.location.href = '/Explore.html'; +}); +var button = document.getElementById('btn2'); +button.addEventListener('click', function () { + document.location.href = 'www.google.com/maps/place/Egypt'; +}); diff --git a/en-US/code/egypt/sharm.jpg b/en-US/code/egypt/sharm.jpg new file mode 100644 index 00000000..065f8017 Binary files /dev/null and b/en-US/code/egypt/sharm.jpg differ diff --git a/en-US/code/egypt/style.css b/en-US/code/egypt/style.css new file mode 100644 index 00000000..bc6dd623 --- /dev/null +++ b/en-US/code/egypt/style.css @@ -0,0 +1,122 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +.container{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-position: center; + background-size: cover; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; +} + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +.row{ + display: flex; + height: 88%; + align-items: center; +} + +.col { + flex-basis: 50%; +} + +h1{ + color: white; + font-size: 100px; +} + +p{ + color: white; + font-size: 11px; + line-height: 15px; +} + +button{ + width: 180px; + color: #000; + font-size: 12px; + padding: 12px 0; + background: whitesmoke; + border: 0; + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -ms-border-radius: 20px; + -o-border-radius: 20px; + outline: none; + margin-top: 30px; +} + +.card { + width: 200px; + height: 230px; + display: inline-block; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + padding: 15px 25px; + box-sizing: border-box; + margin: 10px 15px; + background-position: center; + background-size: cover; +} + +.card h5{ + color: white; + text-decoration: bold; +} + +.card1{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg); +} + +.card2{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg); +} + +.card3{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg); +} + +.card4{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg); +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/afrobeats.jpg b/en-US/code/fashion-pi/afrobeats.jpg new file mode 100644 index 00000000..1e9e37b9 Binary files /dev/null and b/en-US/code/fashion-pi/afrobeats.jpg differ diff --git a/en-US/code/fashion-pi/animation.css b/en-US/code/fashion-pi/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/en-US/code/fashion-pi/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/en-US/code/fashion-pi/cafe.css b/en-US/code/fashion-pi/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/en-US/code/fashion-pi/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/comic.css b/en-US/code/fashion-pi/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/en-US/code/fashion-pi/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/en-US/code/fashion-pi/companion.css b/en-US/code/fashion-pi/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/en-US/code/fashion-pi/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/en-US/code/fashion-pi/default.css b/en-US/code/fashion-pi/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/en-US/code/fashion-pi/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/denim.jpg b/en-US/code/fashion-pi/denim.jpg new file mode 100644 index 00000000..95d6aa3f Binary files /dev/null and b/en-US/code/fashion-pi/denim.jpg differ diff --git a/en-US/code/fashion-pi/disco.css b/en-US/code/fashion-pi/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/en-US/code/fashion-pi/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/en-US/code/fashion-pi/festival.css b/en-US/code/fashion-pi/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/en-US/code/fashion-pi/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/fiesta.css b/en-US/code/fashion-pi/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/en-US/code/fashion-pi/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/en-US/code/fashion-pi/flare-trousers.jpg b/en-US/code/fashion-pi/flare-trousers.jpg new file mode 100644 index 00000000..776f1394 Binary files /dev/null and b/en-US/code/fashion-pi/flare-trousers.jpg differ diff --git a/en-US/code/fashion-pi/helpful-plumber.css b/en-US/code/fashion-pi/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/en-US/code/fashion-pi/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/en-US/code/fashion-pi/index.html b/en-US/code/fashion-pi/index.html new file mode 100644 index 00000000..a62197fa --- /dev/null +++ b/en-US/code/fashion-pi/index.html @@ -0,0 +1,103 @@ + + + + + + + + + Fashion Pi + + + + + + + + + + + + + + + + + + + +
+

🥻Fashion Pi 🥧

+

Fashion trends| Latest news| Hot gossip

+
+ + +
+

Comeback trends in fashion.

+
+ Male and female model wearing denim bottoms and top. +
+

Denim on denim has made a big comeback in fashion.

+
+
+
+
+

Flare bottom pants have also made a big comeback.

+
+ Two black flare trousers on two female models. +
+
+

Latest trends in fashion.

+
+
+
+
+
+
+ Artwork showing instruments shaped as a woman's hair and the words Afrobats below +
+
+

Afrobeats

+

Afrobeats is a genre of music making waves in fashion.

+
+
+
+
+ +
+
+
+
+ Woman with dramatic makeup and beads on her face +
+
+

Makeup

+

Makeup & fashion are linked in the world of beauty and personal style.

.

+
+
+
+
+ +
+
+
+

"Fashion week is a must attend to celebrate all the designers, models and magazines. The Big 4 are: Paris, Milan, London, New York."

+ -Fashion Pi. +
+
+ +
+ + + + + + + + + diff --git a/en-US/code/fashion-pi/land-animals.css b/en-US/code/fashion-pi/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/en-US/code/fashion-pi/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/makeup-fashion.jpg b/en-US/code/fashion-pi/makeup-fashion.jpg new file mode 100644 index 00000000..96ef90f1 Binary files /dev/null and b/en-US/code/fashion-pi/makeup-fashion.jpg differ diff --git a/en-US/code/fashion-pi/medals.css b/en-US/code/fashion-pi/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/en-US/code/fashion-pi/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/money.css b/en-US/code/fashion-pi/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/en-US/code/fashion-pi/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/en-US/code/fashion-pi/nature.css b/en-US/code/fashion-pi/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/en-US/code/fashion-pi/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/pastel.css b/en-US/code/fashion-pi/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/en-US/code/fashion-pi/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/primary.css b/en-US/code/fashion-pi/primary.css new file mode 100644 index 00000000..be901099 --- /dev/null +++ b/en-US/code/fashion-pi/primary.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/project_config.yml b/en-US/code/fashion-pi/project_config.yml new file mode 100644 index 00000000..415eb347 --- /dev/null +++ b/en-US/code/fashion-pi/project_config.yml @@ -0,0 +1,3 @@ +name: 'Fashion Pi' +identifier: 'fashion-pi' +type: 'html' diff --git a/en-US/code/fashion-pi/smokey.css b/en-US/code/fashion-pi/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/en-US/code/fashion-pi/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/space.css b/en-US/code/fashion-pi/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/en-US/code/fashion-pi/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/style.css b/en-US/code/fashion-pi/style.css new file mode 100644 index 00000000..ae79bc6b --- /dev/null +++ b/en-US/code/fashion-pi/style.css @@ -0,0 +1,335 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail1); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/en-US/code/fashion-pi/sunset.css b/en-US/code/fashion-pi/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/en-US/code/fashion-pi/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/sunshine.css b/en-US/code/fashion-pi/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/en-US/code/fashion-pi/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/thriller.css b/en-US/code/fashion-pi/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/en-US/code/fashion-pi/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/water-animals.css b/en-US/code/fashion-pi/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/en-US/code/fashion-pi/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/en-US/code/fashion-pi/woodland.css b/en-US/code/fashion-pi/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/en-US/code/fashion-pi/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/animation.css b/en-US/code/favourite-things/animation.css new file mode 100644 index 00000000..add81618 --- /dev/null +++ b/en-US/code/favourite-things/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Time taken for animation and number of repetitions */ + display: inline-block; /* Important to allow rotation */ +} + +@keyframes rotate-center { + /* The spin me animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes scale { + /* The twinkle animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/en-US/code/favourite-things/beetle.jpg b/en-US/code/favourite-things/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/en-US/code/favourite-things/beetle.jpg differ diff --git a/en-US/code/favourite-things/bird.png b/en-US/code/favourite-things/bird.png new file mode 100644 index 00000000..bc3ecabf Binary files /dev/null and b/en-US/code/favourite-things/bird.png differ diff --git a/en-US/code/favourite-things/butterfly.JPG b/en-US/code/favourite-things/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/en-US/code/favourite-things/butterfly.JPG differ diff --git a/en-US/code/favourite-things/cacti.JPG b/en-US/code/favourite-things/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/en-US/code/favourite-things/cacti.JPG differ diff --git a/en-US/code/favourite-things/cafe.css b/en-US/code/favourite-things/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/en-US/code/favourite-things/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/en-US/code/favourite-things/cafe.jpg b/en-US/code/favourite-things/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/en-US/code/favourite-things/cafe.jpg differ diff --git a/en-US/code/favourite-things/candles.JPG b/en-US/code/favourite-things/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/en-US/code/favourite-things/candles.JPG differ diff --git a/en-US/code/favourite-things/carnival.jpg b/en-US/code/favourite-things/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/en-US/code/favourite-things/carnival.jpg differ diff --git a/en-US/code/favourite-things/colour-festival.jpg b/en-US/code/favourite-things/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/en-US/code/favourite-things/colour-festival.jpg differ diff --git a/en-US/code/favourite-things/comic-books.jpg b/en-US/code/favourite-things/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/en-US/code/favourite-things/comic-books.jpg differ diff --git a/en-US/code/favourite-things/comic.css b/en-US/code/favourite-things/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/en-US/code/favourite-things/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/en-US/code/favourite-things/companion.css b/en-US/code/favourite-things/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/en-US/code/favourite-things/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/en-US/code/favourite-things/crayons.jpg b/en-US/code/favourite-things/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/en-US/code/favourite-things/crayons.jpg differ diff --git a/en-US/code/favourite-things/default.css b/en-US/code/favourite-things/default.css new file mode 100644 index 00000000..af622e4e --- /dev/null +++ b/en-US/code/favourite-things/default.css @@ -0,0 +1,19 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffffff; + --secondary: #ed923c; + --tertiary: #d8f1ee; + --page: #ffffff; + --onprimary: #664300; + --onsecondary: #ffffff; + --ontertiary: #5e5e5e; + --onpage: #750787; + --detail: #5e5e5e; + --detail2: #57b9ab; + + --body-font: 1.1rem 'Cairo', sans-serif; + --header-font: lighter 3rem 'Ceviche One', cursive; + --title-font: lighter 1.5rem 'Cairo', cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/disco-ball.jpg b/en-US/code/favourite-things/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/en-US/code/favourite-things/disco-ball.jpg differ diff --git a/en-US/code/favourite-things/disco-flowers.JPG b/en-US/code/favourite-things/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/en-US/code/favourite-things/disco-flowers.JPG differ diff --git a/en-US/code/favourite-things/disco.css b/en-US/code/favourite-things/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/en-US/code/favourite-things/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/en-US/code/favourite-things/dog.png b/en-US/code/favourite-things/dog.png new file mode 100644 index 00000000..a944ece9 Binary files /dev/null and b/en-US/code/favourite-things/dog.png differ diff --git a/en-US/code/favourite-things/drone.JPG b/en-US/code/favourite-things/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/en-US/code/favourite-things/drone.JPG differ diff --git a/en-US/code/favourite-things/drum.png b/en-US/code/favourite-things/drum.png new file mode 100644 index 00000000..3fba65c8 Binary files /dev/null and b/en-US/code/favourite-things/drum.png differ diff --git a/en-US/code/favourite-things/exotic-plants.jpg b/en-US/code/favourite-things/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/en-US/code/favourite-things/exotic-plants.jpg differ diff --git a/en-US/code/favourite-things/fave.png b/en-US/code/favourite-things/fave.png new file mode 100644 index 00000000..05e1b6fb Binary files /dev/null and b/en-US/code/favourite-things/fave.png differ diff --git a/en-US/code/favourite-things/ferns.jpg b/en-US/code/favourite-things/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/en-US/code/favourite-things/ferns.jpg differ diff --git a/en-US/code/favourite-things/festival.css b/en-US/code/favourite-things/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/en-US/code/favourite-things/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/fiesta.css b/en-US/code/favourite-things/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/en-US/code/favourite-things/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/en-US/code/favourite-things/fire.jpg b/en-US/code/favourite-things/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/en-US/code/favourite-things/fire.jpg differ diff --git a/en-US/code/favourite-things/fish.jpg b/en-US/code/favourite-things/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/en-US/code/favourite-things/fish.jpg differ diff --git a/en-US/code/favourite-things/forest.JPG b/en-US/code/favourite-things/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/en-US/code/favourite-things/forest.JPG differ diff --git a/en-US/code/favourite-things/game-boy.jpg b/en-US/code/favourite-things/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/en-US/code/favourite-things/game-boy.jpg differ diff --git a/en-US/code/favourite-things/globe-in-water.JPG b/en-US/code/favourite-things/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/en-US/code/favourite-things/globe-in-water.JPG differ diff --git a/en-US/code/favourite-things/greenhouse.JPG b/en-US/code/favourite-things/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/en-US/code/favourite-things/greenhouse.JPG differ diff --git a/en-US/code/favourite-things/helpful-plumber.css b/en-US/code/favourite-things/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/en-US/code/favourite-things/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/en-US/code/favourite-things/illustrations.png b/en-US/code/favourite-things/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/en-US/code/favourite-things/illustrations.png differ diff --git a/en-US/code/favourite-things/index.html b/en-US/code/favourite-things/index.html new file mode 100644 index 00000000..d6674f80 --- /dev/null +++ b/en-US/code/favourite-things/index.html @@ -0,0 +1,90 @@ + + + + + + + + + My favourite things + + + + + + + + + + + + + + + + + + +
+

🏆 My favourite things 🏆

+
+ + +
+
+

Lists of my favourite things

+
+ +
+

My favourite ways to make art:

+
+
+ +
    +
  1. Watercolour
    2. +
  2. Digital
    3. +
  3. Fine liners
    4. +
+ +
+ + +
+

My favourite animals:

+
+
+ +
    +
  1. Giraffe
    2. +
  2. Lynx
    3. +
  3. Penguin
    4. +
+ +
+ +
+

My favourite places to travel:

+
+
+ +
    +
  1. Norway
    2. +
  2. Italy
    3. +
  3. Scotland
    4. +
+ +
+ +
+ + + + + + diff --git a/en-US/code/favourite-things/lake-mountains.JPG b/en-US/code/favourite-things/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/en-US/code/favourite-things/lake-mountains.JPG differ diff --git a/en-US/code/favourite-things/land-animals.css b/en-US/code/favourite-things/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/en-US/code/favourite-things/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/mandala.png b/en-US/code/favourite-things/mandala.png new file mode 100644 index 00000000..6b072a92 Binary files /dev/null and b/en-US/code/favourite-things/mandala.png differ diff --git a/en-US/code/favourite-things/map.png b/en-US/code/favourite-things/map.png new file mode 100644 index 00000000..09acad40 Binary files /dev/null and b/en-US/code/favourite-things/map.png differ diff --git a/en-US/code/favourite-things/medal.jpg b/en-US/code/favourite-things/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/en-US/code/favourite-things/medal.jpg differ diff --git a/en-US/code/favourite-things/medals.css b/en-US/code/favourite-things/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/en-US/code/favourite-things/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/money.css b/en-US/code/favourite-things/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/en-US/code/favourite-things/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/en-US/code/favourite-things/monkey.JPG b/en-US/code/favourite-things/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/en-US/code/favourite-things/monkey.JPG differ diff --git a/en-US/code/favourite-things/moon-art.png b/en-US/code/favourite-things/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/en-US/code/favourite-things/moon-art.png differ diff --git a/en-US/code/favourite-things/mountain.png b/en-US/code/favourite-things/mountain.png new file mode 100644 index 00000000..5527d6c7 Binary files /dev/null and b/en-US/code/favourite-things/mountain.png differ diff --git a/en-US/code/favourite-things/mushroom.JPG b/en-US/code/favourite-things/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/en-US/code/favourite-things/mushroom.JPG differ diff --git a/en-US/code/favourite-things/music.png b/en-US/code/favourite-things/music.png new file mode 100644 index 00000000..1633c3ec Binary files /dev/null and b/en-US/code/favourite-things/music.png differ diff --git a/en-US/code/favourite-things/nature.css b/en-US/code/favourite-things/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/en-US/code/favourite-things/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/painting.png b/en-US/code/favourite-things/painting.png new file mode 100644 index 00000000..21442674 Binary files /dev/null and b/en-US/code/favourite-things/painting.png differ diff --git a/en-US/code/favourite-things/pansies.JPG b/en-US/code/favourite-things/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/en-US/code/favourite-things/pansies.JPG differ diff --git a/en-US/code/favourite-things/pastel-hearts.jpg b/en-US/code/favourite-things/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/en-US/code/favourite-things/pastel-hearts.jpg differ diff --git a/en-US/code/favourite-things/pastel.css b/en-US/code/favourite-things/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/en-US/code/favourite-things/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/piggy-bank.jpg b/en-US/code/favourite-things/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/en-US/code/favourite-things/piggy-bank.jpg differ diff --git a/en-US/code/favourite-things/placeholder.png b/en-US/code/favourite-things/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/en-US/code/favourite-things/placeholder.png differ diff --git a/en-US/code/favourite-things/primary.css b/en-US/code/favourite-things/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/en-US/code/favourite-things/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/project_config.yml b/en-US/code/favourite-things/project_config.yml new file mode 100644 index 00000000..77973dd2 --- /dev/null +++ b/en-US/code/favourite-things/project_config.yml @@ -0,0 +1,3 @@ +name: 'Favourite things' +identifier: 'favourite-things' +type: 'html' diff --git a/en-US/code/favourite-things/pumpkins.JPG b/en-US/code/favourite-things/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/en-US/code/favourite-things/pumpkins.JPG differ diff --git a/en-US/code/favourite-things/rainbow-forest.JPG b/en-US/code/favourite-things/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/en-US/code/favourite-things/rainbow-forest.JPG differ diff --git a/en-US/code/favourite-things/rhino.JPG b/en-US/code/favourite-things/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/en-US/code/favourite-things/rhino.JPG differ diff --git a/en-US/code/favourite-things/smokey.css b/en-US/code/favourite-things/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/en-US/code/favourite-things/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/space.css b/en-US/code/favourite-things/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/en-US/code/favourite-things/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/spider-web.jpg b/en-US/code/favourite-things/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/en-US/code/favourite-things/spider-web.jpg differ diff --git a/en-US/code/favourite-things/style.css b/en-US/code/favourite-things/style.css new file mode 100644 index 00000000..6bb97c40 --- /dev/null +++ b/en-US/code/favourite-things/style.css @@ -0,0 +1,284 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + background-image: url('fave.png'); +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 5rem; + display: block; + padding: 0rem; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + diff --git a/en-US/code/favourite-things/sunflowers.JPG b/en-US/code/favourite-things/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/en-US/code/favourite-things/sunflowers.JPG differ diff --git a/en-US/code/favourite-things/sunset-beach.JPG b/en-US/code/favourite-things/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/en-US/code/favourite-things/sunset-beach.JPG differ diff --git a/en-US/code/favourite-things/sunset-person.jpg b/en-US/code/favourite-things/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/en-US/code/favourite-things/sunset-person.jpg differ diff --git a/en-US/code/favourite-things/sunset.JPG b/en-US/code/favourite-things/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/en-US/code/favourite-things/sunset.JPG differ diff --git a/en-US/code/favourite-things/sunset.css b/en-US/code/favourite-things/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/en-US/code/favourite-things/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/sunshine.css b/en-US/code/favourite-things/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/en-US/code/favourite-things/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/thriller.css b/en-US/code/favourite-things/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/en-US/code/favourite-things/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/water-animals.css b/en-US/code/favourite-things/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/en-US/code/favourite-things/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/en-US/code/favourite-things/woodland.css b/en-US/code/favourite-things/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/en-US/code/favourite-things/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/animation.css b/en-US/code/raspberry-pi-pico/animation.css new file mode 100644 index 00000000..add81618 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Time taken for animation and number of repetitions */ + display: inline-block; /* Important to allow rotation */ +} + +@keyframes rotate-center { + /* The spin me animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes scale { + /* The twinkle animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/en-US/code/raspberry-pi-pico/beetle.jpg b/en-US/code/raspberry-pi-pico/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/beetle.jpg differ diff --git a/en-US/code/raspberry-pi-pico/butterfly.JPG b/en-US/code/raspberry-pi-pico/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/butterfly.JPG differ diff --git a/en-US/code/raspberry-pi-pico/button.png b/en-US/code/raspberry-pi-pico/button.png new file mode 100644 index 00000000..84141380 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/button.png differ diff --git a/en-US/code/raspberry-pi-pico/buzzer.png b/en-US/code/raspberry-pi-pico/buzzer.png new file mode 100644 index 00000000..717770f1 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/buzzer.png differ diff --git a/en-US/code/raspberry-pi-pico/cacti.JPG b/en-US/code/raspberry-pi-pico/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/en-US/code/raspberry-pi-pico/cacti.JPG differ diff --git a/en-US/code/raspberry-pi-pico/cafe.css b/en-US/code/raspberry-pi-pico/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/cafe.jpg b/en-US/code/raspberry-pi-pico/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/cafe.jpg differ diff --git a/en-US/code/raspberry-pi-pico/candles.JPG b/en-US/code/raspberry-pi-pico/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/en-US/code/raspberry-pi-pico/candles.JPG differ diff --git a/en-US/code/raspberry-pi-pico/carnival.jpg b/en-US/code/raspberry-pi-pico/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/carnival.jpg differ diff --git a/en-US/code/raspberry-pi-pico/colour-festival.jpg b/en-US/code/raspberry-pi-pico/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/en-US/code/raspberry-pi-pico/colour-festival.jpg differ diff --git a/en-US/code/raspberry-pi-pico/comic-books.jpg b/en-US/code/raspberry-pi-pico/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/en-US/code/raspberry-pi-pico/comic-books.jpg differ diff --git a/en-US/code/raspberry-pi-pico/comic.css b/en-US/code/raspberry-pi-pico/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/en-US/code/raspberry-pi-pico/companion.css b/en-US/code/raspberry-pi-pico/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/en-US/code/raspberry-pi-pico/crayons.jpg b/en-US/code/raspberry-pi-pico/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/crayons.jpg differ diff --git a/en-US/code/raspberry-pi-pico/default.css b/en-US/code/raspberry-pi-pico/default.css new file mode 100644 index 00000000..0adb336d --- /dev/null +++ b/en-US/code/raspberry-pi-pico/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffffff; + --secondary: #c51a4a; + --tertiary: #6cc04a; + --page: #000000; + --onprimary: #555559; + --onsecondary: #ffffff; + --ontertiary: #555559; + --onpage: #000000; + --detail: #999798; + --detail2: #c9c8c7; + + --body-font: 1rem 'Nunito', sans-serif; + --header-font: lighter 3rem 'Russo One', sans-serif; + --title-font: lighter 1.5rem 'Nunito', sans-serif; + --quote-font: lighter 1.5rem 'Nunito', sans-serif; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/disco-ball.jpg b/en-US/code/raspberry-pi-pico/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/disco-ball.jpg differ diff --git a/en-US/code/raspberry-pi-pico/disco-flowers.JPG b/en-US/code/raspberry-pi-pico/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/en-US/code/raspberry-pi-pico/disco-flowers.JPG differ diff --git a/en-US/code/raspberry-pi-pico/disco.css b/en-US/code/raspberry-pi-pico/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/en-US/code/raspberry-pi-pico/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/en-US/code/raspberry-pi-pico/drone.JPG b/en-US/code/raspberry-pi-pico/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/drone.JPG differ diff --git a/en-US/code/raspberry-pi-pico/exotic-plants.jpg b/en-US/code/raspberry-pi-pico/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/exotic-plants.jpg differ diff --git a/en-US/code/raspberry-pi-pico/ferns.jpg b/en-US/code/raspberry-pi-pico/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/ferns.jpg differ diff --git a/en-US/code/raspberry-pi-pico/festival.css b/en-US/code/raspberry-pi-pico/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/fiesta.css b/en-US/code/raspberry-pi-pico/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/en-US/code/raspberry-pi-pico/fire.jpg b/en-US/code/raspberry-pi-pico/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/fire.jpg differ diff --git a/en-US/code/raspberry-pi-pico/fish.jpg b/en-US/code/raspberry-pi-pico/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/en-US/code/raspberry-pi-pico/fish.jpg differ diff --git a/en-US/code/raspberry-pi-pico/forest.JPG b/en-US/code/raspberry-pi-pico/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/forest.JPG differ diff --git a/en-US/code/raspberry-pi-pico/game-boy.jpg b/en-US/code/raspberry-pi-pico/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/game-boy.jpg differ diff --git a/en-US/code/raspberry-pi-pico/globe-in-water.JPG b/en-US/code/raspberry-pi-pico/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/globe-in-water.JPG differ diff --git a/en-US/code/raspberry-pi-pico/greenhouse.JPG b/en-US/code/raspberry-pi-pico/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/greenhouse.JPG differ diff --git a/en-US/code/raspberry-pi-pico/helpful-plumber.css b/en-US/code/raspberry-pi-pico/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/en-US/code/raspberry-pi-pico/illustrations.png b/en-US/code/raspberry-pi-pico/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/illustrations.png differ diff --git a/en-US/code/raspberry-pi-pico/index.html b/en-US/code/raspberry-pi-pico/index.html new file mode 100644 index 00000000..a3a8cb0e --- /dev/null +++ b/en-US/code/raspberry-pi-pico/index.html @@ -0,0 +1,165 @@ + + + + + + + + + Raspberry Pi Pico + + + + + + + + + + + + + + + +
+

The Raspberry Pi Pico

+
+ + +
+ + + +
+ The love facial expression. +

The Raspberry Pi Pico is a low-cost microcontroller used to make electronic products.

+
+ + + +
+

The Inputs and Outputs I have used are:

+
+

Inputs

+
    +
  • Switch
    • +
  • Button
    • +
  • Potentiometer
    • +
+
+ +
+

Outputs

+
    +
  • LED
    • +
  • RGB LED
    • +
  • Buzzer
    • +
+
+

Hover over the cards to find out more:

+
+ + + +

Inputs

+ +
+ + + +
+
+
+

Switch

+ +
+
+

A switch is an electrical component that can be closed to allow electrical current to flow and opened to prevent electrical current from flowing.

+
+
+
+ +
+
+
+

Button

+ +
+
+

A button is a kind of switch that makes a connection when it is pressed.

+
+
+
+ +
+
+
+

Potentiometer

+ +
+
+

A potentiometer is an analogue input component that changes its resistance depending on the position of the dial.

+
+
+
+ +
+ + + +

Outputs

+ +
+ + + +
+
+
+

LED

+ +
+
+

LED stands for light-emitting diode. It has a material lights up when an electrical current passes through it.

+
+
+
+ +
+
+
+

RGB LED

+ +
+
+

RGB stands for Red Green Blue. RGB LEDs allow you to use code to control how much of each colour is emitted.

+
+
+
+ +
+
+
+

Buzzer

+ +
+
+

A passive buzzer can play a variety of tones. It requires a connection to be made and a specific signal to play the chosen tone.

+
+
+
+ +
+
+ + + + + + diff --git a/en-US/code/raspberry-pi-pico/lake-mountains.JPG b/en-US/code/raspberry-pi-pico/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/lake-mountains.JPG differ diff --git a/en-US/code/raspberry-pi-pico/land-animals.css b/en-US/code/raspberry-pi-pico/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/en-US/code/raspberry-pi-pico/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/led.png b/en-US/code/raspberry-pi-pico/led.png new file mode 100644 index 00000000..0a273225 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/led.png differ diff --git a/en-US/code/raspberry-pi-pico/medal.jpg b/en-US/code/raspberry-pi-pico/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/en-US/code/raspberry-pi-pico/medal.jpg differ diff --git a/en-US/code/raspberry-pi-pico/medals.css b/en-US/code/raspberry-pi-pico/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/money.css b/en-US/code/raspberry-pi-pico/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/en-US/code/raspberry-pi-pico/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/en-US/code/raspberry-pi-pico/monkey.JPG b/en-US/code/raspberry-pi-pico/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/monkey.JPG differ diff --git a/en-US/code/raspberry-pi-pico/moon-art.png b/en-US/code/raspberry-pi-pico/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/moon-art.png differ diff --git a/en-US/code/raspberry-pi-pico/mushroom.JPG b/en-US/code/raspberry-pi-pico/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/mushroom.JPG differ diff --git a/en-US/code/raspberry-pi-pico/nature.css b/en-US/code/raspberry-pi-pico/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/en-US/code/raspberry-pi-pico/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/pansies.JPG b/en-US/code/raspberry-pi-pico/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/en-US/code/raspberry-pi-pico/pansies.JPG differ diff --git a/en-US/code/raspberry-pi-pico/pastel-hearts.jpg b/en-US/code/raspberry-pi-pico/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/pastel-hearts.jpg differ diff --git a/en-US/code/raspberry-pi-pico/pastel.css b/en-US/code/raspberry-pi-pico/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/en-US/code/raspberry-pi-pico/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/pico-hand.png b/en-US/code/raspberry-pi-pico/pico-hand.png new file mode 100644 index 00000000..31577c88 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/pico-hand.png differ diff --git a/en-US/code/raspberry-pi-pico/piggy-bank.jpg b/en-US/code/raspberry-pi-pico/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/piggy-bank.jpg differ diff --git a/en-US/code/raspberry-pi-pico/placeholder.png b/en-US/code/raspberry-pi-pico/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/placeholder.png differ diff --git a/en-US/code/raspberry-pi-pico/pot.png b/en-US/code/raspberry-pi-pico/pot.png new file mode 100644 index 00000000..817fea4e Binary files /dev/null and b/en-US/code/raspberry-pi-pico/pot.png differ diff --git a/en-US/code/raspberry-pi-pico/primary.css b/en-US/code/raspberry-pi-pico/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/en-US/code/raspberry-pi-pico/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/project_config.yml b/en-US/code/raspberry-pi-pico/project_config.yml new file mode 100644 index 00000000..62c199fa --- /dev/null +++ b/en-US/code/raspberry-pi-pico/project_config.yml @@ -0,0 +1,3 @@ +name: 'Raspberry Pi Pico' +identifier: 'raspberry-pi-pico' +type: 'html' diff --git a/en-US/code/raspberry-pi-pico/pumpkins.JPG b/en-US/code/raspberry-pi-pico/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/pumpkins.JPG differ diff --git a/en-US/code/raspberry-pi-pico/rainbow-forest.JPG b/en-US/code/raspberry-pi-pico/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/en-US/code/raspberry-pi-pico/rainbow-forest.JPG differ diff --git a/en-US/code/raspberry-pi-pico/rgb-led.png b/en-US/code/raspberry-pi-pico/rgb-led.png new file mode 100644 index 00000000..cd3b4538 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/rgb-led.png differ diff --git a/en-US/code/raspberry-pi-pico/rhino.JPG b/en-US/code/raspberry-pi-pico/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/rhino.JPG differ diff --git a/en-US/code/raspberry-pi-pico/smokey.css b/en-US/code/raspberry-pi-pico/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/space.css b/en-US/code/raspberry-pi-pico/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/en-US/code/raspberry-pi-pico/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/spider-web.jpg b/en-US/code/raspberry-pi-pico/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/spider-web.jpg differ diff --git a/en-US/code/raspberry-pi-pico/style.css b/en-US/code/raspberry-pi-pico/style.css new file mode 100644 index 00000000..7b5c8c4e --- /dev/null +++ b/en-US/code/raspberry-pi-pico/style.css @@ -0,0 +1,331 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Card colours */ + +.purple { + background: #9a6faa; + color: #000000; +} + +.brickred { + background: #f27b5c; + color: #000000; +} + +.yellow { + background: #fddd42; + color: #000000; +} + +.turquoise { + background: #15bcac; + color: #000000; +} + +.blue { + background: #51a4dc; + color: #000000; +} + +.orange { + background: #ffbd5c; + color: #000000; +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +.ytop { + display: flex; + justify-content: top; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 15rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; + font: var(--body-font); +} + +.card img { + max-width: 80%; + max-height: 80%; +} + diff --git a/en-US/code/raspberry-pi-pico/sunflowers.JPG b/en-US/code/raspberry-pi-pico/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/sunflowers.JPG differ diff --git a/en-US/code/raspberry-pi-pico/sunset-beach.JPG b/en-US/code/raspberry-pi-pico/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/sunset-beach.JPG differ diff --git a/en-US/code/raspberry-pi-pico/sunset-person.jpg b/en-US/code/raspberry-pi-pico/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/en-US/code/raspberry-pi-pico/sunset-person.jpg differ diff --git a/en-US/code/raspberry-pi-pico/sunset.JPG b/en-US/code/raspberry-pi-pico/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/sunset.JPG differ diff --git a/en-US/code/raspberry-pi-pico/sunset.css b/en-US/code/raspberry-pi-pico/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/en-US/code/raspberry-pi-pico/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/sunshine.css b/en-US/code/raspberry-pi-pico/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/en-US/code/raspberry-pi-pico/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/switch.png b/en-US/code/raspberry-pi-pico/switch.png new file mode 100644 index 00000000..46f288a8 Binary files /dev/null and b/en-US/code/raspberry-pi-pico/switch.png differ diff --git a/en-US/code/raspberry-pi-pico/thriller.css b/en-US/code/raspberry-pi-pico/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/en-US/code/raspberry-pi-pico/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/water-animals.css b/en-US/code/raspberry-pi-pico/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/en-US/code/raspberry-pi-pico/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/en-US/code/raspberry-pi-pico/woodland.css b/en-US/code/raspberry-pi-pico/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/en-US/code/raspberry-pi-pico/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/animation.css b/en-US/code/what-is-d-and-d/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/en-US/code/what-is-d-and-d/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/en-US/code/what-is-d-and-d/beetle.jpg b/en-US/code/what-is-d-and-d/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/en-US/code/what-is-d-and-d/beetle.jpg differ diff --git a/en-US/code/what-is-d-and-d/butterfly.JPG b/en-US/code/what-is-d-and-d/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/en-US/code/what-is-d-and-d/butterfly.JPG differ diff --git a/en-US/code/what-is-d-and-d/cacti.JPG b/en-US/code/what-is-d-and-d/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/en-US/code/what-is-d-and-d/cacti.JPG differ diff --git a/en-US/code/what-is-d-and-d/cafe.css b/en-US/code/what-is-d-and-d/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/en-US/code/what-is-d-and-d/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/cafe.jpg b/en-US/code/what-is-d-and-d/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/en-US/code/what-is-d-and-d/cafe.jpg differ diff --git a/en-US/code/what-is-d-and-d/candles.JPG b/en-US/code/what-is-d-and-d/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/en-US/code/what-is-d-and-d/candles.JPG differ diff --git a/en-US/code/what-is-d-and-d/carnival.jpg b/en-US/code/what-is-d-and-d/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/en-US/code/what-is-d-and-d/carnival.jpg differ diff --git a/en-US/code/what-is-d-and-d/colour-festival.jpg b/en-US/code/what-is-d-and-d/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/en-US/code/what-is-d-and-d/colour-festival.jpg differ diff --git a/en-US/code/what-is-d-and-d/comic-books.jpg b/en-US/code/what-is-d-and-d/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/en-US/code/what-is-d-and-d/comic-books.jpg differ diff --git a/en-US/code/what-is-d-and-d/comic.css b/en-US/code/what-is-d-and-d/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/en-US/code/what-is-d-and-d/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/en-US/code/what-is-d-and-d/companion.css b/en-US/code/what-is-d-and-d/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/en-US/code/what-is-d-and-d/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/en-US/code/what-is-d-and-d/crayons.jpg b/en-US/code/what-is-d-and-d/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/en-US/code/what-is-d-and-d/crayons.jpg differ diff --git a/en-US/code/what-is-d-and-d/default.css b/en-US/code/what-is-d-and-d/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/en-US/code/what-is-d-and-d/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/disco-ball.jpg b/en-US/code/what-is-d-and-d/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/en-US/code/what-is-d-and-d/disco-ball.jpg differ diff --git a/en-US/code/what-is-d-and-d/disco-flowers.JPG b/en-US/code/what-is-d-and-d/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/en-US/code/what-is-d-and-d/disco-flowers.JPG differ diff --git a/en-US/code/what-is-d-and-d/disco.css b/en-US/code/what-is-d-and-d/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/en-US/code/what-is-d-and-d/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/en-US/code/what-is-d-and-d/dm.jpg b/en-US/code/what-is-d-and-d/dm.jpg new file mode 100644 index 00000000..5ee5f0a4 Binary files /dev/null and b/en-US/code/what-is-d-and-d/dm.jpg differ diff --git a/en-US/code/what-is-d-and-d/dm2.jpg b/en-US/code/what-is-d-and-d/dm2.jpg new file mode 100644 index 00000000..a97ece6d Binary files /dev/null and b/en-US/code/what-is-d-and-d/dm2.jpg differ diff --git a/en-US/code/what-is-d-and-d/drone.JPG b/en-US/code/what-is-d-and-d/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/en-US/code/what-is-d-and-d/drone.JPG differ diff --git a/en-US/code/what-is-d-and-d/exotic-plants.jpg b/en-US/code/what-is-d-and-d/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/en-US/code/what-is-d-and-d/exotic-plants.jpg differ diff --git a/en-US/code/what-is-d-and-d/ferns.jpg b/en-US/code/what-is-d-and-d/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/en-US/code/what-is-d-and-d/ferns.jpg differ diff --git a/en-US/code/what-is-d-and-d/festival.css b/en-US/code/what-is-d-and-d/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/en-US/code/what-is-d-and-d/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/fiesta.css b/en-US/code/what-is-d-and-d/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/en-US/code/what-is-d-and-d/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/en-US/code/what-is-d-and-d/fire.jpg b/en-US/code/what-is-d-and-d/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/en-US/code/what-is-d-and-d/fire.jpg differ diff --git a/en-US/code/what-is-d-and-d/fish.jpg b/en-US/code/what-is-d-and-d/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/en-US/code/what-is-d-and-d/fish.jpg differ diff --git a/en-US/code/what-is-d-and-d/forest.JPG b/en-US/code/what-is-d-and-d/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/en-US/code/what-is-d-and-d/forest.JPG differ diff --git a/en-US/code/what-is-d-and-d/game-boy.jpg b/en-US/code/what-is-d-and-d/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/en-US/code/what-is-d-and-d/game-boy.jpg differ diff --git a/en-US/code/what-is-d-and-d/globe-in-water.JPG b/en-US/code/what-is-d-and-d/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/en-US/code/what-is-d-and-d/globe-in-water.JPG differ diff --git a/en-US/code/what-is-d-and-d/greenhouse.JPG b/en-US/code/what-is-d-and-d/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/en-US/code/what-is-d-and-d/greenhouse.JPG differ diff --git a/en-US/code/what-is-d-and-d/helpful-plumber.css b/en-US/code/what-is-d-and-d/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/en-US/code/what-is-d-and-d/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/en-US/code/what-is-d-and-d/illustrations.png b/en-US/code/what-is-d-and-d/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/en-US/code/what-is-d-and-d/illustrations.png differ diff --git a/en-US/code/what-is-d-and-d/index.html b/en-US/code/what-is-d-and-d/index.html new file mode 100644 index 00000000..1166c0b4 --- /dev/null +++ b/en-US/code/what-is-d-and-d/index.html @@ -0,0 +1,168 @@ + + + + + + + + + Dungeons and Dragons + + + + + + + + + + + + + + + +
+
+

Dungeons & Dragons

+
+
+
+

What is it?

+
+
+ + +
+
+

What is Dungeons & Dragons?

+

According to the company who makes it, Wizard of the Coast, it's the World's greatest role-playing game.

+
+

So what's a role-playing game? It's where you and your friends sit around pretending to be characters you made up, in a fantasy world created by the Dungeonmaster (DM for short). Your character can do anything you can imagine, and when you interact with the world, you roll some dice to determine the outcome or reaction to your actions.

+
+ +
+
+

"The essence of a role-playing game is that it is a group, cooperative experience."

+ - Gary Gygax (Inventor of D&D) +
+
+ +
+ The dungeon master knows and controls everything about the world for their players. In the image, a mighty wizard looks down upon a planet that appears small compared to their magical might. Lightning sprays blue from their outstretched fingers, doing their will upon the ground below. +
+

The Dungeonmaster (DM)

+

If D&D was like a video game, the DM is the console you play it on - they bring the world to life for you and determine how it reacts to your actions and the actions of the other players.

+
+

The DM portrays and decides the actions of all the other characters who inhabit the world, who are not controlled by the players. They resolve actions, determine outcomes and tell the story to the group of what is happening around them. The DM knows everything about the world, and what they don't know about it, they can just make up!

+
+

Whatever the DM says goes, as they are the referee, narrator and other characters all rolled into one!

+
+
+ +
+
+

Classes

+
+ +

Classes are the way your character behaves in the game mechanically, or what abilities or skills they have and special tricks they can do. Mighty warriors for example, are better at fighting with weapons and strength, while clever wizards use their magical studies to create mighty spells.


+

Classes come in two kinds: Martial classes which focus on combat and non-magical skills, and Spellcasting Classes which focus on affecting the world around them with magical means.


+

Below is a selection of just some of the available classes in Dungeons and Dragons:

+
+
+

Martial Classes

+
+
+
+
+
+

Rogue

+

🤫

+
+
+

Sneaky and quick, rogues move in the shadows and are skilled operators.

+
+
+
+ +
+
+
+

🤺

+

Fighter

+
+
+

Trained in martial skills from an early age, Fighters are powerful and skilled warriors.

+
+
+
+ +
+
+
+

Barbarian

+

😡

+
+
+

Fuelled by their mighty rage, Barbarians charge through battle caring little for the damage they take or inflict. +

+
+
+
+ +
+
+

Spellcasting Classes

+
+
+ +
+
+
+

Cleric

+

😇

+
+
+

Faithful workshipers of mighty deities, Clerics are granted magical powers by their gods.

+
+
+
+ +
+
+
+

🧙‍♀️

+

Wizard

+
+
+

Skilled and learned in the ways of magic, Wizards have studied many years to obtain their power.

+
+
+
+ +
+
+
+

Druid

+

🐾

+
+
+

Tapping into the power of nature for their magic, Druids are able to take animal form and cast healing spells.

+
+
+
+ +
+ +
+ + + + + + diff --git a/en-US/code/what-is-d-and-d/lake-mountains.JPG b/en-US/code/what-is-d-and-d/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/en-US/code/what-is-d-and-d/lake-mountains.JPG differ diff --git a/en-US/code/what-is-d-and-d/land-animals.css b/en-US/code/what-is-d-and-d/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/en-US/code/what-is-d-and-d/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/medal.jpg b/en-US/code/what-is-d-and-d/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/en-US/code/what-is-d-and-d/medal.jpg differ diff --git a/en-US/code/what-is-d-and-d/medals.css b/en-US/code/what-is-d-and-d/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/en-US/code/what-is-d-and-d/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/money.css b/en-US/code/what-is-d-and-d/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/en-US/code/what-is-d-and-d/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/en-US/code/what-is-d-and-d/monkey.JPG b/en-US/code/what-is-d-and-d/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/en-US/code/what-is-d-and-d/monkey.JPG differ diff --git a/en-US/code/what-is-d-and-d/moon-art.png b/en-US/code/what-is-d-and-d/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/en-US/code/what-is-d-and-d/moon-art.png differ diff --git a/en-US/code/what-is-d-and-d/mushroom.JPG b/en-US/code/what-is-d-and-d/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/en-US/code/what-is-d-and-d/mushroom.JPG differ diff --git a/en-US/code/what-is-d-and-d/nature.css b/en-US/code/what-is-d-and-d/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/en-US/code/what-is-d-and-d/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/pansies.JPG b/en-US/code/what-is-d-and-d/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/en-US/code/what-is-d-and-d/pansies.JPG differ diff --git a/en-US/code/what-is-d-and-d/pastel-hearts.jpg b/en-US/code/what-is-d-and-d/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/en-US/code/what-is-d-and-d/pastel-hearts.jpg differ diff --git a/en-US/code/what-is-d-and-d/pastel.css b/en-US/code/what-is-d-and-d/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/en-US/code/what-is-d-and-d/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/piggy-bank.jpg b/en-US/code/what-is-d-and-d/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/en-US/code/what-is-d-and-d/piggy-bank.jpg differ diff --git a/en-US/code/what-is-d-and-d/placeholder.png b/en-US/code/what-is-d-and-d/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/en-US/code/what-is-d-and-d/placeholder.png differ diff --git a/en-US/code/what-is-d-and-d/primary.css b/en-US/code/what-is-d-and-d/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/en-US/code/what-is-d-and-d/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/project_config.yml b/en-US/code/what-is-d-and-d/project_config.yml new file mode 100644 index 00000000..d231f406 --- /dev/null +++ b/en-US/code/what-is-d-and-d/project_config.yml @@ -0,0 +1,3 @@ +name: 'What is D&D' +identifier: 'what-is-d-and-d' +type: 'html' diff --git a/en-US/code/what-is-d-and-d/pumpkins.JPG b/en-US/code/what-is-d-and-d/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/en-US/code/what-is-d-and-d/pumpkins.JPG differ diff --git a/en-US/code/what-is-d-and-d/rainbow-forest.JPG b/en-US/code/what-is-d-and-d/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/en-US/code/what-is-d-and-d/rainbow-forest.JPG differ diff --git a/en-US/code/what-is-d-and-d/rhino.JPG b/en-US/code/what-is-d-and-d/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/en-US/code/what-is-d-and-d/rhino.JPG differ diff --git a/en-US/code/what-is-d-and-d/smokey.css b/en-US/code/what-is-d-and-d/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/en-US/code/what-is-d-and-d/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/space.css b/en-US/code/what-is-d-and-d/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/en-US/code/what-is-d-and-d/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/spider-web.jpg b/en-US/code/what-is-d-and-d/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/en-US/code/what-is-d-and-d/spider-web.jpg differ diff --git a/en-US/code/what-is-d-and-d/style.css b/en-US/code/what-is-d-and-d/style.css new file mode 100644 index 00000000..6589bd8b --- /dev/null +++ b/en-US/code/what-is-d-and-d/style.css @@ -0,0 +1,316 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/en-US/code/what-is-d-and-d/sunflowers.JPG b/en-US/code/what-is-d-and-d/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/en-US/code/what-is-d-and-d/sunflowers.JPG differ diff --git a/en-US/code/what-is-d-and-d/sunset-beach.JPG b/en-US/code/what-is-d-and-d/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/en-US/code/what-is-d-and-d/sunset-beach.JPG differ diff --git a/en-US/code/what-is-d-and-d/sunset-person.jpg b/en-US/code/what-is-d-and-d/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/en-US/code/what-is-d-and-d/sunset-person.jpg differ diff --git a/en-US/code/what-is-d-and-d/sunset.JPG b/en-US/code/what-is-d-and-d/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/en-US/code/what-is-d-and-d/sunset.JPG differ diff --git a/en-US/code/what-is-d-and-d/sunset.css b/en-US/code/what-is-d-and-d/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/en-US/code/what-is-d-and-d/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/sunshine.css b/en-US/code/what-is-d-and-d/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/en-US/code/what-is-d-and-d/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/thriller.css b/en-US/code/what-is-d-and-d/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/en-US/code/what-is-d-and-d/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/water-animals.css b/en-US/code/what-is-d-and-d/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/en-US/code/what-is-d-and-d/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/en-US/code/what-is-d-and-d/woodland.css b/en-US/code/what-is-d-and-d/woodland.css new file mode 100644 index 00000000..38edf4aa --- /dev/null +++ b/en-US/code/what-is-d-and-d/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ebd5b3; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/en-US/images/ally.png b/en-US/images/ally.png new file mode 100644 index 00000000..c0066239 Binary files /dev/null and b/en-US/images/ally.png differ diff --git a/en-US/images/banner.png b/en-US/images/banner.png new file mode 100644 index 00000000..5d6eb8ad Binary files /dev/null and b/en-US/images/banner.png differ diff --git a/en-US/images/favourite.png b/en-US/images/favourite.png new file mode 100644 index 00000000..432fbc7b Binary files /dev/null and b/en-US/images/favourite.png differ diff --git a/en-US/images/filter.png b/en-US/images/filter.png new file mode 100644 index 00000000..35d48567 Binary files /dev/null and b/en-US/images/filter.png differ diff --git a/en-US/images/pico.png b/en-US/images/pico.png new file mode 100644 index 00000000..8997540f Binary files /dev/null and b/en-US/images/pico.png differ diff --git a/en-US/images/step-three.PNG b/en-US/images/step-three.PNG new file mode 100644 index 00000000..426f2a2f Binary files /dev/null and b/en-US/images/step-three.PNG differ diff --git a/en-US/images/step-two.jpg b/en-US/images/step-two.jpg new file mode 100644 index 00000000..6b95a1d3 Binary files /dev/null and b/en-US/images/step-two.jpg differ diff --git a/en-US/meta.yml b/en-US/meta.yml new file mode 100644 index 00000000..75c85b8f --- /dev/null +++ b/en-US/meta.yml @@ -0,0 +1,27 @@ +title: Build a webpage +hero_image: images/banner.png +description: Build a webpage about something you want to share. +meta_title: Learn web development for beginners | Build a webpage +meta_description: Learn web development for beginners with the Raspberry Pi Foundation. Build a webpage with a variety of HTML elements. Add CSS classes to style your page. +version: 4 +listed: true +copyedit: true +last_tested: "2021-03-26" +steps: + - + title: Introduction + - + title: Your topic + - + title: Build and test + completion: engaged + - + title: Share + completion: internal + - + title: Reflection + completion: external + - + title: Upgrade your project + - + title: What next? diff --git a/en-US/step_1.md b/en-US/step_1.md new file mode 100644 index 00000000..e7ed8154 --- /dev/null +++ b/en-US/step_1.md @@ -0,0 +1,91 @@ +## Introduction + +In this project you will use the skills you have developed in the [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path to create a webpage about something you want to share. + +

+The World Wide Web or web is a vast collection of connected webpages. The web allows people to view content from all over the world and create their own webpages to share with others. Can you imagine what life was like before the web? +

+ +You will: ++ Build a webpage to share information with others ++ Create a webpage using multiple sections with a variety of HTML elements ++ Use and customise or add CSS classes to style your page + +--- no-print --- + +--- task --- + +### Try it +
+
+Can you identify the HTML elements that are used in this project? How has CSS been used to style and animate the page? +
+**Favourite things**: [See inside](https://editor.raspberrypi.org/en/projects/favourite-things){:target="_blank"} +
+ +
+ +
+ +--- /task --- + +--- /no-print --- + +
+ +### PROJECT BRIEF: Build a webpage +
+ +Create a webpage about a topic that you find interesting and want to share with others. It could be helpful information for pet owners, a page of your favourite jokes, a walkthrough for a game you enjoy, some advice you have found helpful, a list of useful websites, or whatever you want to share with webpage visitors. + +Your webpage should: ++ Have multiple sections that contain different types of content including text and images, emojis, headings, quotations, lists, or links ++ Use a colour palette, fonts, and CSS styles that work well together ++ Be accessible by using good colour contrast and font sizes + +Your webpage could: ++ Use custom CSS classes that you create and apply ++ Use animations or flip cards to create interest ++ Be shared to the Raspberry Pi Foundation community gallery to inspire others + +
+ +--- no-print --- + +### Get inspiration + +--- task --- + +As you look at these webpages, consider what makes them useful and informative, as well as fun and accessible: + +⭐ Share your finished project for a chance of it being featured here. + +
**⭐ Introduction to Raspberry Pi Pico**: [See inside](https://editor.raspberrypi.org/en/projects/raspberry-pi-pico){:target="_blank"} +
+ +
+ +**⭐ Book review**: [See inside](https://editor.raspberrypi.org/en/projects/book-review){:target="_blank"} +
+ +
+ +**⭐ Egypt**: [See inside](https://editor.raspberrypi.org/en/projects/egypt){:target="_blank"} +
+ +
+ +**⭐ Fashion Pi**: [See inside](https://editor.raspberrypi.org/en/projects/fashion-pi){:target="_blank"} +
+ +
+ +--- /task --- + +--- /no-print --- + +--- print-only --- + +![Complete project](images/favourite.png) ![Complete project](images/pico.png) ![Complete project](images/filter.png) + +--- /print-only --- diff --git a/en-US/step_2.md b/en-US/step_2.md new file mode 100644 index 00000000..2f151377 --- /dev/null +++ b/en-US/step_2.md @@ -0,0 +1,71 @@ +## Your topic + +
+
+In this step you will decide what your webpage is about. +
+
+![A hand-drawn design of the layout of a webpage.](images/step-two.jpg){:width="300px"} +
+
+ +### What do you want to share? + +--- task --- + +Think about the purpose of your webpage. + +It could be: + ++ ℹ️ An information page about a topic you are interested in ++ 🔗 A collection of links to the best webpages on a topic ++ 🧧 Information about a celebration or an event from your culture ++ 😜 Your favourite (polite!) jokes ++ 🎮 A game walkthrough or other tutorial ++ 🐙 Information about a pet or an animal ++ 💬 Some advice that you have found helpful ++ 🏞️ Tourist information about a place you have visited or would like to visit ++ 👩🏿‍🦼 Information about a medical condition or disability that you think more people should be aware of + +**Tip:** Try to choose a topic that you already know something about. This is so you can spend your time building your webpage, not researching a topic. + +--- /task --- + +### Who is it for? + +--- task --- + +Who are you making your webpage for? You may find it helpful to think about the types of visitors you want to make your page for. + ++ How old will your visitors be? ++ How much will they know about your topic? ++ Is the page for other experts in your topic or is it for beginners? + +**Tip:** If you make a page about a topic you know lots about, make sure you explain it clearly to other people. + +--- /task --- + +### Get started + +--- task --- + +If you have paper and a pen or pencil, you could sketch out your webpage layout. + +You could also make a bullet point list of information that you want to include. + +--- /task --- + +--- task --- + +Open the [Build a webpage starter project](https://editor.raspberrypi.org/en/projects/build-a-web-page-starter){:target="_blank"}. Trinket will open in another browser tab. + +--- /task --- + +--- task --- + +Change the `` element text to the title of your page. + +[[[web-add-title-head]]] + +--- /task --- + diff --git a/en-US/step_3.md b/en-US/step_3.md new file mode 100644 index 00000000..7ba2c089 --- /dev/null +++ b/en-US/step_3.md @@ -0,0 +1,206 @@ +## Build and test + +<div style="display: flex; flex-wrap: wrap"> +<div style="flex-basis: 200px; flex-grow: 1; margin-right: 15px;"> +Now it's time to build your webpage. + +</div> +<div> +![alt=""](images/step-three.PNG){:width="300px"} +</div> +</div> + +**Tip:** Plan your project so you can create a basic webpage in the time you have available and then upgrade the project if you have time left. + +**Tip:** Remember to test your project each time you add something. It is much easier to find and fix bugs before you make more changes. + +--- task --- + +You have built up some really useful skills. Here is a reminder to help you make your webpage: + +### Colour palette + +[[[web-colour-palette-variables]]] + +Use or personalise starter project colour palettes. + +[[[hex-colour-palettes]]] + +[[[web-colour-palette]]] + +Create a colour palette from an image. + +[[[rpfeditor-image-library]]] + +[[[colours-from-image]]] + +Customise colour palettes for style and accessibility. + +[[[contrast-checker]]] + +[[[add-colour-variables]]] + +Use your colour palettes to set text and background colours. + +[[[web-primary-secondary]]] + +### Structure + +[[[overall-page-structure]]] + +[[[full-width-section]]] + +[[[full-width-quote]]] + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +Webpages can be viewed on many different devices and should be <span style="color: #0faeb0">**responsive**</span> to each device. This means that if a user views your website on a mobile phone, it should respond to a smaller screen and if they view it on a desktop PC, it should respond to a larger screen. +</p> + +[[[using-rem]]] + +CSS can also be used to responsively change the layout of the webpage. + +[[[side-by-side-section]]] + +[[[wrapped-regular-width]]] + +[[[wrapped-wide-narrow]]] + +[[[web-large-text-tiles]]] + +[[[three-text-tiles]]] + +[[[text-image-text]]] + +[[[web-wrap-gap]]] + +Align and space your content to improve the look of your webpage. + +[[[web-x-y-centering]]] + +[[[padding-margins]]] + +### Fonts and text elements + +Choose fonts to use on your webpage. + +[[[included-fonts]]] + +[[[web-fonts]]] + +[[[google-fonts]]] + +You can use placeholder text while you work on your layout. + +[[[add-placeholder-text]]] + +Insert text elements. + +[[[web-ordered-list]]] + +[[[web-unordered-list]]] + +[[[full-width-quote]]] + +Style your text. + +[[[web-headers-large-text]]] + +[[[web-center-text]]] + +[[[web-strong-em]]] + +### Images + +Insert an image from the starter project library. + +[[[trinket-image-library]]] + +[[[web-alt-text]]] + +Use an emoji as an image. + +[[[choose-an-emoji]]] + +[[[huge-emoji]]] + +Add a background image. + +[[[web-background-image]]] + +[[[add-transparency]]] + +**Tip:** You can style your images with rounded corners or borders. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[web-box-shadow]]] + +### Animations + +Create web flip cards. + +[[[web-flip-cards]]] + +Use animations to change the appearance or position of elements on your page over time. + +[[[web-starter-animations]]] + +[[[web-customise-animations]]] + +### More style + +Add more style to any elements on your webpage. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[add-a-gradient]]] + +[[[web-animate-span]]] + +[[[web-box-shadow]]] + +You can create your own class to make a new style. + +[[[web-add-class]]] + +--- /task --- + +--- task --- + +**Test:** Show someone else your project and get their feedback. Do you want to make any changes to your webpage? + +**Tip:** Now is a good time to add comments to your code to make it easier to debug and upgrade. Comments also help other people read you code. + +[[[web-comment-code]]] + +--- /task --- + +--- task --- + +**Debug:** You might find some bugs in your HTML or CSS that you need to fix. Here are some common bugs. + +**My webpage isn't displaying correctly** + +[[[incorrect-tags]]] + +[[[mismatched-tags]]] + +**Further debug questions** + +[[[image-not-displayed]]] + +[[[font-not-displayed]]] + +[[[web-debug-link]]] + +You might find a bug not listed here. Can you figure out how to fix the bug? + +We love hearing about your bugs and how you fixed them. Use the **Send feedback** button at the bottom of this page if you found a different bug in your project. + +--- /task --- + diff --git a/en-US/step_4.md b/en-US/step_4.md new file mode 100644 index 00000000..20d14120 --- /dev/null +++ b/en-US/step_4.md @@ -0,0 +1,10 @@ +## Share + +Now is the time to share your webpage so that it can receive visitors. + +**Note:** Remember to check that you haven't included any personal information in your webpage. + +Why not show your project to one of your friends? + +Why not invite your friends to create a project? Let them know how you had fun. + diff --git a/en-US/step_5.md b/en-US/step_5.md new file mode 100644 index 00000000..9d493cdf --- /dev/null +++ b/en-US/step_5.md @@ -0,0 +1,81 @@ +## Reflection + +Did you meet the **project brief**? Think about your project and go through the checklist below and check off the points that apply to your project. + +Does your webpage have: + +--- task --- + +Multiple sections that contain different types of content, such as text and images, emojis, headings, quotations, lists, or links? + +--- /task --- + +--- task --- + +A colour palette, fonts, and CSS styles that work well together? You could ask other people for their opinion, but you don't have to make changes if you don't agree with them. + +--- /task --- + +--- task --- + +Accessibility through a good colour contrast and easily readable font sizes? + +--- /task --- + + +Your webpage could: + +--- task --- + +Use custom CSS classes that you created and applied. + +--- /task --- + +--- task --- + +Use animations or flip cards to create interest. + +--- /task --- + +--- task --- + +Be shared to the Raspberry Pi Foundation community gallery to inspire others. + +--- /task --- + + +When you reflect on how you made your webpage, it will help you in your future projects. + +Answer the questions below. You can draw, write, type in a document, talk to someone, or answer the questions in your own creative way that works best for you. + +--- task --- + +How did you choose the topic for your webpage? + +--- /task --- + +--- task --- + +Which HTML or CSS technique do you like best? + +--- /task --- + +--- task --- + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +"Design isn't finished until someone is using it." (Brenda Laurel). +</p> + +In the 'Introduction to web' path you used lots of different design skills, including visual design, design for accessibility and user experience, and technical design. Which type of design do you enjoy most? + +--- /task --- + +### Now you are a web content developer! + +Take a moment to celebrate what you have made. + +--- task --- + +Where will you take your new powers? Who will you show your webpages to? What will you make next? + +--- /task --- diff --git a/en-US/step_6.md b/en-US/step_6.md new file mode 100644 index 00000000..f1d2f870 --- /dev/null +++ b/en-US/step_6.md @@ -0,0 +1,51 @@ +## Upgrade your project + +If you have time, you can upgrade your webpage. You might already have ideas to add to your webpage or you might want to go back to the first step and look at other example projects again for more inspiration. + +Each example project in the [Introduction](.) has a ‘See Inside’ link for you to open the project and look at the code to get ideas and see how they work. + +--- task --- + +On your webpage, you could improve the: + +**Visual design** ++ The layout ++ Colours ++ Fonts ++ Emojis ++ Graphics ++ Borders and box shadows ++ Gradients ++ Background images + +**Accessibility** ++ Colour contrast ++ Font sizes ++ `alt` text on images + +**Content** ++ The words you have used. ++ Can you add more useful information? ++ Would a list be more effective? ++ Should you use different heading elements? ++ Are there other webpages that you could link to? + +**User experience** + ++ Is your page well laid out so that information is easy to find? ++ If you have used animation, make sure it is not too distracting for visitors to your webpage. + +**Technical design** + ++ Consider whether you could organise your CSS properties into classes that you would want to reuse. ++ Make sure you have used sensible names for CSS classes. ++ Add helpful comments to your HTML and CSS. + +--- /task --- + +**Dungeons and Dragons Example**: [See inside](https://editor.raspberrypi.org/en/projects/what-is-d-and-d){:target="_blank"} +<div> +<iframe src="https://editor.raspberrypi.org/en/embed/viewer/what-is-d-and-d" width="600" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe> +</div> + + diff --git a/en-US/step_7.md b/en-US/step_7.md new file mode 100644 index 00000000..4e8273dd --- /dev/null +++ b/en-US/step_7.md @@ -0,0 +1,11 @@ +## What next? + +You have reached the end of the [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path! + +Now you can create webpages on any topic you are interested in and share them. Try using HTML and CSS to design and build more webpages. If you need a reminder of what you have learned, you can go to the [Web guide](https://projects.raspberrypi.org/en/projects/getting-started-web-dev/0). + +You could enter one of your Design or Invent projects into Coolest Projects, or make a completely new webpage. + +[[[web-coolest-projects]]] + +You can also explore our [other web projects](https://projects.raspberrypi.org/en/projects?software%5B%5D=html-css-javascript) and try them out. diff --git a/es-419/code/book-review/animation.css b/es-419/code/book-review/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/es-419/code/book-review/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/es-419/code/book-review/beetle.jpg b/es-419/code/book-review/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/es-419/code/book-review/beetle.jpg differ diff --git a/es-419/code/book-review/butterfly.JPG b/es-419/code/book-review/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/es-419/code/book-review/butterfly.JPG differ diff --git a/es-419/code/book-review/cacti.JPG b/es-419/code/book-review/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/es-419/code/book-review/cacti.JPG differ diff --git a/es-419/code/book-review/cafe.css b/es-419/code/book-review/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/es-419/code/book-review/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/es-419/code/book-review/cafe.jpg b/es-419/code/book-review/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/es-419/code/book-review/cafe.jpg differ diff --git a/es-419/code/book-review/candles.JPG b/es-419/code/book-review/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/es-419/code/book-review/candles.JPG differ diff --git a/es-419/code/book-review/carnival.jpg b/es-419/code/book-review/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/es-419/code/book-review/carnival.jpg differ diff --git a/es-419/code/book-review/colour-festival.jpg b/es-419/code/book-review/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/es-419/code/book-review/colour-festival.jpg differ diff --git a/es-419/code/book-review/comic-books.jpg b/es-419/code/book-review/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/es-419/code/book-review/comic-books.jpg differ diff --git a/es-419/code/book-review/comic.css b/es-419/code/book-review/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/es-419/code/book-review/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/es-419/code/book-review/companion.css b/es-419/code/book-review/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/es-419/code/book-review/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/es-419/code/book-review/crayons.jpg b/es-419/code/book-review/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/es-419/code/book-review/crayons.jpg differ diff --git a/es-419/code/book-review/default.css b/es-419/code/book-review/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/es-419/code/book-review/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/disco-ball.jpg b/es-419/code/book-review/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/es-419/code/book-review/disco-ball.jpg differ diff --git a/es-419/code/book-review/disco-flowers.JPG b/es-419/code/book-review/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/es-419/code/book-review/disco-flowers.JPG differ diff --git a/es-419/code/book-review/disco.css b/es-419/code/book-review/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/es-419/code/book-review/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/es-419/code/book-review/drone.JPG b/es-419/code/book-review/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/es-419/code/book-review/drone.JPG differ diff --git a/es-419/code/book-review/exotic-plants.jpg b/es-419/code/book-review/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/es-419/code/book-review/exotic-plants.jpg differ diff --git a/es-419/code/book-review/ferns.jpg b/es-419/code/book-review/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/es-419/code/book-review/ferns.jpg differ diff --git a/es-419/code/book-review/festival.css b/es-419/code/book-review/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/es-419/code/book-review/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/fiesta.css b/es-419/code/book-review/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/es-419/code/book-review/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/es-419/code/book-review/fire.jpg b/es-419/code/book-review/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/es-419/code/book-review/fire.jpg differ diff --git a/es-419/code/book-review/fish.jpg b/es-419/code/book-review/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/es-419/code/book-review/fish.jpg differ diff --git a/es-419/code/book-review/forest.JPG b/es-419/code/book-review/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/es-419/code/book-review/forest.JPG differ diff --git a/es-419/code/book-review/game-boy.jpg b/es-419/code/book-review/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/es-419/code/book-review/game-boy.jpg differ diff --git a/es-419/code/book-review/globe-in-water.JPG b/es-419/code/book-review/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/es-419/code/book-review/globe-in-water.JPG differ diff --git a/es-419/code/book-review/greenhouse.JPG b/es-419/code/book-review/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/es-419/code/book-review/greenhouse.JPG differ diff --git a/es-419/code/book-review/helpful-plumber.css b/es-419/code/book-review/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/es-419/code/book-review/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/es-419/code/book-review/illustrations.png b/es-419/code/book-review/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/es-419/code/book-review/illustrations.png differ diff --git a/es-419/code/book-review/index.html b/es-419/code/book-review/index.html new file mode 100644 index 00000000..c4197a95 --- /dev/null +++ b/es-419/code/book-review/index.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html lang="es"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="ie=edge" /> + + <!-- Title shown in web browsers--> + <title>Tango makes three + + + + + + + + + + + + + + + +
+

Tango makes three

+
+ + +
+
+

My book review.

+
+
+ Description of the image. +
+
+
+

"tango makes three is an amazing story that has won lots of awards so you should totally read it"

+ - me. +
+
+
+
+

I thought this was a brilliant book and it's based on a true story so you learn loads too.

+
+

I wont spoil the book but it has two male penguins called Roy and Silo who are given an egg and create a same-sex family.

+
+

Reading about diverse families is super important.

+
+

Reasons to read Tango Makes Three recap:

+
+ +
+ + +
+
+
+

Reason 1

+
+ +
+

It's won loads of awards - and I mean loads

+
+
+
+ +
+
+
+

Reason 2

+
+ +
+

It's based on a true story so you learn loads about nature

+
+
+
+ +
+
+
+

Reason 3

+
+ +
+

Some adults have banned it but we know best

+
+
+
+
+
+
+ + + + + + + diff --git a/es-419/code/book-review/lake-mountains.JPG b/es-419/code/book-review/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/es-419/code/book-review/lake-mountains.JPG differ diff --git a/es-419/code/book-review/land-animals.css b/es-419/code/book-review/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/es-419/code/book-review/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/medal.jpg b/es-419/code/book-review/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/es-419/code/book-review/medal.jpg differ diff --git a/es-419/code/book-review/medals.css b/es-419/code/book-review/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/es-419/code/book-review/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/money.css b/es-419/code/book-review/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/es-419/code/book-review/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/es-419/code/book-review/monkey.JPG b/es-419/code/book-review/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/es-419/code/book-review/monkey.JPG differ diff --git a/es-419/code/book-review/moon-art.png b/es-419/code/book-review/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/es-419/code/book-review/moon-art.png differ diff --git a/es-419/code/book-review/mushroom.JPG b/es-419/code/book-review/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/es-419/code/book-review/mushroom.JPG differ diff --git a/es-419/code/book-review/nature.css b/es-419/code/book-review/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/es-419/code/book-review/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/pansies.JPG b/es-419/code/book-review/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/es-419/code/book-review/pansies.JPG differ diff --git a/es-419/code/book-review/pastel-hearts.jpg b/es-419/code/book-review/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/es-419/code/book-review/pastel-hearts.jpg differ diff --git a/es-419/code/book-review/pastel.css b/es-419/code/book-review/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/es-419/code/book-review/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/piggy-bank.jpg b/es-419/code/book-review/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/es-419/code/book-review/piggy-bank.jpg differ diff --git a/es-419/code/book-review/placeholder.png b/es-419/code/book-review/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/es-419/code/book-review/placeholder.png differ diff --git a/es-419/code/book-review/primary.css b/es-419/code/book-review/primary.css new file mode 100644 index 00000000..be901099 --- /dev/null +++ b/es-419/code/book-review/primary.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/project_config.yml b/es-419/code/book-review/project_config.yml new file mode 100644 index 00000000..110ea8c2 --- /dev/null +++ b/es-419/code/book-review/project_config.yml @@ -0,0 +1,3 @@ +name: 'Book review' +identifier: 'book-review' +type: 'html' diff --git a/es-419/code/book-review/pumpkins.JPG b/es-419/code/book-review/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/es-419/code/book-review/pumpkins.JPG differ diff --git a/es-419/code/book-review/rainbow-forest.JPG b/es-419/code/book-review/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/es-419/code/book-review/rainbow-forest.JPG differ diff --git a/es-419/code/book-review/rhino.JPG b/es-419/code/book-review/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/es-419/code/book-review/rhino.JPG differ diff --git a/es-419/code/book-review/smokey.css b/es-419/code/book-review/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/es-419/code/book-review/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/space.css b/es-419/code/book-review/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/es-419/code/book-review/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/spider-web.jpg b/es-419/code/book-review/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/es-419/code/book-review/spider-web.jpg differ diff --git a/es-419/code/book-review/style.css b/es-419/code/book-review/style.css new file mode 100644 index 00000000..ae79bc6b --- /dev/null +++ b/es-419/code/book-review/style.css @@ -0,0 +1,335 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail1); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/es-419/code/book-review/sunflowers.JPG b/es-419/code/book-review/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/es-419/code/book-review/sunflowers.JPG differ diff --git a/es-419/code/book-review/sunset-beach.JPG b/es-419/code/book-review/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/es-419/code/book-review/sunset-beach.JPG differ diff --git a/es-419/code/book-review/sunset-person.jpg b/es-419/code/book-review/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/es-419/code/book-review/sunset-person.jpg differ diff --git a/es-419/code/book-review/sunset.JPG b/es-419/code/book-review/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/es-419/code/book-review/sunset.JPG differ diff --git a/es-419/code/book-review/sunset.css b/es-419/code/book-review/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/es-419/code/book-review/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/sunshine.css b/es-419/code/book-review/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/es-419/code/book-review/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/tango.jpeg b/es-419/code/book-review/tango.jpeg new file mode 100644 index 00000000..d91acb15 Binary files /dev/null and b/es-419/code/book-review/tango.jpeg differ diff --git a/es-419/code/book-review/thriller.css b/es-419/code/book-review/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/es-419/code/book-review/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/water-animals.css b/es-419/code/book-review/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/es-419/code/book-review/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/es-419/code/book-review/woodland.css b/es-419/code/book-review/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/es-419/code/book-review/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/animation.css b/es-419/code/build-a-web-page-starter/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/es-419/code/build-a-web-page-starter/beetle.jpg b/es-419/code/build-a-web-page-starter/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/beetle.jpg differ diff --git a/es-419/code/build-a-web-page-starter/butterfly.JPG b/es-419/code/build-a-web-page-starter/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/butterfly.JPG differ diff --git a/es-419/code/build-a-web-page-starter/cacti.JPG b/es-419/code/build-a-web-page-starter/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/es-419/code/build-a-web-page-starter/cacti.JPG differ diff --git a/es-419/code/build-a-web-page-starter/cafe.css b/es-419/code/build-a-web-page-starter/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/cafe.jpg b/es-419/code/build-a-web-page-starter/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/cafe.jpg differ diff --git a/es-419/code/build-a-web-page-starter/candles.JPG b/es-419/code/build-a-web-page-starter/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/es-419/code/build-a-web-page-starter/candles.JPG differ diff --git a/es-419/code/build-a-web-page-starter/carnival.jpg b/es-419/code/build-a-web-page-starter/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/carnival.jpg differ diff --git a/es-419/code/build-a-web-page-starter/colour-festival.jpg b/es-419/code/build-a-web-page-starter/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/es-419/code/build-a-web-page-starter/colour-festival.jpg differ diff --git a/es-419/code/build-a-web-page-starter/comic-books.jpg b/es-419/code/build-a-web-page-starter/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/es-419/code/build-a-web-page-starter/comic-books.jpg differ diff --git a/es-419/code/build-a-web-page-starter/comic.css b/es-419/code/build-a-web-page-starter/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/es-419/code/build-a-web-page-starter/companion.css b/es-419/code/build-a-web-page-starter/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/es-419/code/build-a-web-page-starter/crayons.jpg b/es-419/code/build-a-web-page-starter/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/crayons.jpg differ diff --git a/es-419/code/build-a-web-page-starter/default.css b/es-419/code/build-a-web-page-starter/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/disco-ball.jpg b/es-419/code/build-a-web-page-starter/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/disco-ball.jpg differ diff --git a/es-419/code/build-a-web-page-starter/disco-flowers.JPG b/es-419/code/build-a-web-page-starter/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/es-419/code/build-a-web-page-starter/disco-flowers.JPG differ diff --git a/es-419/code/build-a-web-page-starter/disco.css b/es-419/code/build-a-web-page-starter/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/es-419/code/build-a-web-page-starter/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/es-419/code/build-a-web-page-starter/drone.JPG b/es-419/code/build-a-web-page-starter/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/drone.JPG differ diff --git a/es-419/code/build-a-web-page-starter/exotic-plants.jpg b/es-419/code/build-a-web-page-starter/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/exotic-plants.jpg differ diff --git a/es-419/code/build-a-web-page-starter/ferns.jpg b/es-419/code/build-a-web-page-starter/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/ferns.jpg differ diff --git a/es-419/code/build-a-web-page-starter/festival.css b/es-419/code/build-a-web-page-starter/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/fiesta.css b/es-419/code/build-a-web-page-starter/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/es-419/code/build-a-web-page-starter/fire.jpg b/es-419/code/build-a-web-page-starter/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/fire.jpg differ diff --git a/es-419/code/build-a-web-page-starter/fish.jpg b/es-419/code/build-a-web-page-starter/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/es-419/code/build-a-web-page-starter/fish.jpg differ diff --git a/es-419/code/build-a-web-page-starter/forest.JPG b/es-419/code/build-a-web-page-starter/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/forest.JPG differ diff --git a/es-419/code/build-a-web-page-starter/game-boy.jpg b/es-419/code/build-a-web-page-starter/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/game-boy.jpg differ diff --git a/es-419/code/build-a-web-page-starter/globe-in-water.JPG b/es-419/code/build-a-web-page-starter/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/globe-in-water.JPG differ diff --git a/es-419/code/build-a-web-page-starter/greenhouse.JPG b/es-419/code/build-a-web-page-starter/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/greenhouse.JPG differ diff --git a/es-419/code/build-a-web-page-starter/helpful-plumber.css b/es-419/code/build-a-web-page-starter/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/es-419/code/build-a-web-page-starter/illustrations.png b/es-419/code/build-a-web-page-starter/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/illustrations.png differ diff --git a/es-419/code/build-a-web-page-starter/index.html b/es-419/code/build-a-web-page-starter/index.html new file mode 100644 index 00000000..261f9bf0 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/index.html @@ -0,0 +1,45 @@ + + + + + + + + + My website title + + + + + + + + + + + + + + + +
+

Big Title

+
+ + +
+
+

Lorem ipsum dolor sit amet.

+
+
+ + + + + + diff --git a/es-419/code/build-a-web-page-starter/lake-mountains.JPG b/es-419/code/build-a-web-page-starter/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/lake-mountains.JPG differ diff --git a/es-419/code/build-a-web-page-starter/land-animals.css b/es-419/code/build-a-web-page-starter/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/es-419/code/build-a-web-page-starter/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/medal.jpg b/es-419/code/build-a-web-page-starter/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/es-419/code/build-a-web-page-starter/medal.jpg differ diff --git a/es-419/code/build-a-web-page-starter/medals.css b/es-419/code/build-a-web-page-starter/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/money.css b/es-419/code/build-a-web-page-starter/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/es-419/code/build-a-web-page-starter/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/es-419/code/build-a-web-page-starter/monkey.JPG b/es-419/code/build-a-web-page-starter/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/monkey.JPG differ diff --git a/es-419/code/build-a-web-page-starter/moon-art.png b/es-419/code/build-a-web-page-starter/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/moon-art.png differ diff --git a/es-419/code/build-a-web-page-starter/mushroom.JPG b/es-419/code/build-a-web-page-starter/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/mushroom.JPG differ diff --git a/es-419/code/build-a-web-page-starter/nature.css b/es-419/code/build-a-web-page-starter/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/es-419/code/build-a-web-page-starter/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/pansies.JPG b/es-419/code/build-a-web-page-starter/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/es-419/code/build-a-web-page-starter/pansies.JPG differ diff --git a/es-419/code/build-a-web-page-starter/pastel-hearts.jpg b/es-419/code/build-a-web-page-starter/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/pastel-hearts.jpg differ diff --git a/es-419/code/build-a-web-page-starter/pastel.css b/es-419/code/build-a-web-page-starter/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/es-419/code/build-a-web-page-starter/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/piggy-bank.jpg b/es-419/code/build-a-web-page-starter/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/piggy-bank.jpg differ diff --git a/es-419/code/build-a-web-page-starter/placeholder.png b/es-419/code/build-a-web-page-starter/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/placeholder.png differ diff --git a/es-419/code/build-a-web-page-starter/primary.css b/es-419/code/build-a-web-page-starter/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/es-419/code/build-a-web-page-starter/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/project_config.yml b/es-419/code/build-a-web-page-starter/project_config.yml new file mode 100644 index 00000000..6801264a --- /dev/null +++ b/es-419/code/build-a-web-page-starter/project_config.yml @@ -0,0 +1,3 @@ +name: 'Build a web page starter' +identifier: 'build-a-web-page-starter' +type: 'html' diff --git a/es-419/code/build-a-web-page-starter/pumpkins.JPG b/es-419/code/build-a-web-page-starter/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/pumpkins.JPG differ diff --git a/es-419/code/build-a-web-page-starter/rainbow-forest.JPG b/es-419/code/build-a-web-page-starter/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/es-419/code/build-a-web-page-starter/rainbow-forest.JPG differ diff --git a/es-419/code/build-a-web-page-starter/rhino.JPG b/es-419/code/build-a-web-page-starter/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/rhino.JPG differ diff --git a/es-419/code/build-a-web-page-starter/smokey.css b/es-419/code/build-a-web-page-starter/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/space.css b/es-419/code/build-a-web-page-starter/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/es-419/code/build-a-web-page-starter/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/spider-web.jpg b/es-419/code/build-a-web-page-starter/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/spider-web.jpg differ diff --git a/es-419/code/build-a-web-page-starter/style.css b/es-419/code/build-a-web-page-starter/style.css new file mode 100644 index 00000000..6589bd8b --- /dev/null +++ b/es-419/code/build-a-web-page-starter/style.css @@ -0,0 +1,316 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/es-419/code/build-a-web-page-starter/sunflowers.JPG b/es-419/code/build-a-web-page-starter/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/sunflowers.JPG differ diff --git a/es-419/code/build-a-web-page-starter/sunset-beach.JPG b/es-419/code/build-a-web-page-starter/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/sunset-beach.JPG differ diff --git a/es-419/code/build-a-web-page-starter/sunset-person.jpg b/es-419/code/build-a-web-page-starter/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/es-419/code/build-a-web-page-starter/sunset-person.jpg differ diff --git a/es-419/code/build-a-web-page-starter/sunset.JPG b/es-419/code/build-a-web-page-starter/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/es-419/code/build-a-web-page-starter/sunset.JPG differ diff --git a/es-419/code/build-a-web-page-starter/sunset.css b/es-419/code/build-a-web-page-starter/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/es-419/code/build-a-web-page-starter/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/sunshine.css b/es-419/code/build-a-web-page-starter/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/es-419/code/build-a-web-page-starter/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/thriller.css b/es-419/code/build-a-web-page-starter/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/es-419/code/build-a-web-page-starter/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/water-animals.css b/es-419/code/build-a-web-page-starter/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/es-419/code/build-a-web-page-starter/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/es-419/code/build-a-web-page-starter/woodland.css b/es-419/code/build-a-web-page-starter/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/es-419/code/build-a-web-page-starter/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/es-419/code/egypt/Egypt-Valley-of-the-kings.jpg b/es-419/code/egypt/Egypt-Valley-of-the-kings.jpg new file mode 100644 index 00000000..cbad0b30 Binary files /dev/null and b/es-419/code/egypt/Egypt-Valley-of-the-kings.jpg differ diff --git a/es-419/code/egypt/Explore.css b/es-419/code/egypt/Explore.css new file mode 100644 index 00000000..7f086722 --- /dev/null +++ b/es-419/code/egypt/Explore.css @@ -0,0 +1,197 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +html{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ +height: 12%; +display: flex; +align-items: center; +} + +.logo{ +width: 50px; +cursor: pointer; +color: white; +font-size: 20px; +} + +.navbar i{ +width: 30px; +cursor: pointer; +margin-left: 40px; +} + +nav{ +flex: 1; +text-align: right; +} + +nav ul li{ +list-style: none; +display: inline-block; +margin-left: 60px; +color: white; +font-size: 13px; +} + +/* Information boxes */ + +.wrapper{ +display: grid; +margin: 200px 90px auto; +grid-gap: 20px; +grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { +.wrapper{ + margin: 200px auto; +} +} +.wrapper .box{ +width: 350px; +margin: 0 auto; +position: relative; +perspective: 1000px; +border: #000000; +border-radius: 2px; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +padding-bottom: 75px; +padding-right: 75px; +} +.wrapper .box .front-face{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); +background-size: cover; +height: 220px; +width: 100%; +display: flex; +flex-direction: column; +justify-content: center; +border-radius: 2px; +border-color: #000000; +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ +font-size: 22px; +font-weight: 600; +text-transform: uppercase; +} + +.box .front-face span{ +background: linear-gradient(-135deg, #000000, #000000); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +text-align: center; +} + + +.box .back-face{ +position: absolute; +top: 0; +left: 0; +z-index: 1; +height: 220px; +width: 100%; +padding: 30px; +color: #fff; +opacity: 0; +transform-style: preserve-3d; +backface-visibility: hidden; +background: linear-gradient(-135deg, #000000, #000000); +transform: translateY(110px) rotateX(-90deg); +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +} + +.box .back-face p{ +margin-top: 10px; +text-align: justify; +} + +.box:hover .back-face{ +opacity: 1; +transform: rotateX(0deg); +} + +.box:hover .front-face{ +opacity: 0; +transform: translateY(-110px) rotateX(90deg); +} + + +/*Boxes Backgrounds*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg); + } + + .box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg); + } + + .box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg); + } + + .box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg); + } + + .box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg); + } + + .box .front-face.face6{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg); + } + + .box .front-face.face7{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg); + } + + .box .front-face.face{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); + } + + .box .back-face button{ + height: 60px; + width: 100%; + margin-top: 55px; + background-color: rgb(52, 52, 255); + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -ms-border-radius: 30px; + -o-border-radius: 30px; + text-align: center; + font-size: xx-large; +} + +.box .back-face a{ + text-decoration: none; +} \ No newline at end of file diff --git a/es-419/code/egypt/Explore.html b/es-419/code/egypt/Explore.html new file mode 100644 index 00000000..fe082ce0 --- /dev/null +++ b/es-419/code/egypt/Explore.html @@ -0,0 +1,116 @@ + + + + + + + Explore Egypt + + + +
+
+ + + +
+
+
+
+ Valley of the Kings +
+
+ Valley of the Kings +

+ We all know about King Tut and it is here that you can visit his tomb. In fact, you can visit all of the Kings of the Pharaoh’s tombs. Ramses, I-V, and everyone in between was entombed in extravagant tombs filled with riches and jewels on the West Bank of the Nile. +

+
+
+
+
+ Islamic Cairo +
+
+ Islamic Cairo +

+ Islamic Cairo is known as the “City of Citadels” with many mosques to visit including the Sultan Hussan Mosque and the Alabaster Mosque aka, The Mosque of Muhammad Ali. It is the most visited mosque in all of Egypt and with good reason. +

+
+
+
+
+ Egyptian Museum +
+
+ Egyptian Museum +

+ Other museums around the world have Egyptian artifacts but this takes it to the next level. + +It is worth touring the museum because when visiting the temples of Egypt, there is nothing inside they have all been moved to the safety of the museum where you can see them with your own eyes. +

+
+
+
+
+ El Gouna +
+
+ El Gouna +

+ For a luxury escape in Egypt, El Gouna is a popular holiday destination. It’s popular spot for diving in the Red Sea, chilling out at the beach, and dolphin spotting. +

+
+
+
+
+ Sharm El Sheik +
+
+ Sharm El Sheik +

+ Sharm El Sheik is Egypt’s most popular resort destinations located on the Sinai Peninsula. It is yet another excellent spot for scuba diving, but with its convenient location, it is also a great spot for adventure. You can climb Mount Sinai or take a trip to the desert to experience one of the Bedouin camps +

+
+
+
+
+ Saint Catherine’s Monastery +
+
+ Saint Catherine’s Monastery +

+ Located at the foot of Mount Sinai, a visit to Saint Catherine’s Monastery is a must visit when in the Sinai Peninsula. It is the very place where God spoke to Moses as a burning bush. Dating back to the 500s AD, this is the oldest continuously working Christian monastery in the world. +

+
+
+
+
+ Alexandria +
+
+ Alexandria +

+ Located on the Mediterranean Sea, Alexandria is where East meets West. Alexandrea was founded by Alexander the Great and housed one of the seven ancient wonders of the world, the Alexandria Lighthouse. Psst: The Great Pyramids are another ancient wonder. +

+
+
+
+
+ Visit Egyptian Ministry of tourism +
+
+ Visit Egyptian Ministry of tourism + +
+
+
+
+ + + \ No newline at end of file diff --git a/es-419/code/egypt/History.css b/es-419/code/egypt/History.css new file mode 100644 index 00000000..5c7a641f --- /dev/null +++ b/es-419/code/egypt/History.css @@ -0,0 +1,166 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + } + +html{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +/* Information boxes */ + +.wrapper{ + display: grid; + margin: 200px 90px auto; + grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { + .wrapper{ + margin: 200px auto; + } +} +.wrapper .box{ + width: 350px; + margin: 0 auto; + position: relative; + perspective: 1000px; + border: #000000; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; + padding-bottom: 75px; + padding-right: 75px; +} +.wrapper .box .front-face{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-size: cover; + height: 220px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 2px; + border-color: #000000; + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ + font-size: 22px; + font-weight: 600; + text-transform: uppercase; +} + +.box .front-face span{ + background: linear-gradient(-135deg, #000000, #000000); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; +} + + +.box .back-face{ + position: absolute; + top: 0; + left: 0; + z-index: 1; + height: 220px; + width: 100%; + padding: 30px; + color: #fff; + opacity: 0; + transform-style: preserve-3d; + backface-visibility: hidden; + background: linear-gradient(-135deg, #000000, #000000); + transform: translateY(110px) rotateX(-90deg); + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; +} + +.box .back-face p{ + margin-top: 10px; + text-align: justify; +} + +.box:hover .back-face{ + opacity: 1; + transform: rotateX(0deg); +} + +.box:hover .front-face{ + opacity: 0; + transform: translateY(-110px) rotateX(90deg); +} + +/*Boxes Backgrounds*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg); +} + +.box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg); +} + +.box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg); +} + +.box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg); +} + +.box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); +} \ No newline at end of file diff --git a/es-419/code/egypt/History.html b/es-419/code/egypt/History.html new file mode 100644 index 00000000..b521b33a --- /dev/null +++ b/es-419/code/egypt/History.html @@ -0,0 +1,85 @@ + + + + + + + Egypt's History + + + +
+
+ + + +
+
+
+
+ Ancient Egypt +
+
+ Ancient Egypt +

+ Ancient Egypt is divided into three “kingdom” periods—Old, Middle, and New—with shorter intermediate periods separating the kingdoms. Even before the Old Kingdom period, the foundations of Egyptian civilization were being laid for thousands of years, as people living near the Nile increasingly focused on sedentary agriculture, which led to urbanization and specialized, non-agricultural economic activity. +

+
+
+
+
+ OLD Ancient Egypt Kingdom +
+
+ OLD Ancient Egypt Kingdom +

+ Evidence of human habitation in Egypt stretches back tens of thousands of years. It was only in about 6000 BCE, however, that widespread settlement began in the region. Around this time, the Sahara Desert expanded. Some scientists think this expansion was caused by a slight shift in the tilt of the Earth. Others have explored changing rainfall patterns, but the specific causes are not entirely clear.
The most important result of this expansion of the Sahara for human civilization was that it pushed humans closer to the Nile River in search of reliable water sources. +

+
+
+
+
+ MIDDLE Ancient Egypt Kingdom +
+
+ MIDDLE Ancient Egypt Kingdom +

+ The Middle Kingdom saw Egypt unified again as kings found ways to take back power from regional governors. From the Middle Kingdom era forward, Egyptian kings often kept well-trained standing armies. The ability of the Egyptian state to create and maintain a standing military force and to build fortifications showed that it had regained control of substantial resources. + Political fragmentation led to the Second Intermediate Period. The precise dates are unclear; even though writing allowed for more events to be recorded, most things still were not, and many more records have been lost or destroyed. +

+
+
+
+
+ NEW Ancient Egypt Kingdom +
+
+ NEW Ancient Egypt Kingdom +

+ Around 1550 BCE, the New Kingdom period of Egyptian history began with the expulsion of the Hyksos from Egypt and the restoration of centralized political control. This period was Egypt's most prosperous time and marked the peak of its power. + Also in this period, Hatshepsut, Egypt’s most famous female ruler, established trade networks that helped build the wealth of Egypt and commissioned hundreds of construction projects and pieces of statuary, as well as an impressive mortuary temple at Deir el-Bahri. She also ordered repairs to temples that had been neglected or damaged during the period of Hyksos rule. +

+
+
+
+
+ Egypt now +
+
+ Egypt now +

+ Nowadays Egypt's currency, people, goverment, land changed & Egypt became one of the important countries in Africa & the middle east, Now Egypt is ruled by military ruling, Islam became the major religion after christianity, Egypt’s capital is now Cairo but goverment is trying to change it to the New Administrative Capital +

+
+
+
+
+ + + diff --git a/es-419/code/egypt/alexandria-egypt-library.jpg b/es-419/code/egypt/alexandria-egypt-library.jpg new file mode 100644 index 00000000..719f0a4b Binary files /dev/null and b/es-419/code/egypt/alexandria-egypt-library.jpg differ diff --git a/es-419/code/egypt/background.jpg b/es-419/code/egypt/background.jpg new file mode 100644 index 00000000..6dcf3d1c Binary files /dev/null and b/es-419/code/egypt/background.jpg differ diff --git a/es-419/code/egypt/card1.jpg b/es-419/code/egypt/card1.jpg new file mode 100644 index 00000000..ceed5b4d Binary files /dev/null and b/es-419/code/egypt/card1.jpg differ diff --git a/es-419/code/egypt/card2.jpg b/es-419/code/egypt/card2.jpg new file mode 100644 index 00000000..51a30437 Binary files /dev/null and b/es-419/code/egypt/card2.jpg differ diff --git a/es-419/code/egypt/card3.jpg b/es-419/code/egypt/card3.jpg new file mode 100644 index 00000000..39ac3b27 Binary files /dev/null and b/es-419/code/egypt/card3.jpg differ diff --git a/es-419/code/egypt/card4.jpg b/es-419/code/egypt/card4.jpg new file mode 100644 index 00000000..44b112e5 Binary files /dev/null and b/es-419/code/egypt/card4.jpg differ diff --git a/es-419/code/egypt/egypt-mosque-cairo.jpg b/es-419/code/egypt/egypt-mosque-cairo.jpg new file mode 100644 index 00000000..2b676239 Binary files /dev/null and b/es-419/code/egypt/egypt-mosque-cairo.jpg differ diff --git a/es-419/code/egypt/egypt-temples.jpg b/es-419/code/egypt/egypt-temples.jpg new file mode 100644 index 00000000..890c6ee6 Binary files /dev/null and b/es-419/code/egypt/egypt-temples.jpg differ diff --git a/es-419/code/egypt/flag.jpg b/es-419/code/egypt/flag.jpg new file mode 100644 index 00000000..cf78620f Binary files /dev/null and b/es-419/code/egypt/flag.jpg differ diff --git a/es-419/code/egypt/gouna.jpg b/es-419/code/egypt/gouna.jpg new file mode 100644 index 00000000..c219f9b2 Binary files /dev/null and b/es-419/code/egypt/gouna.jpg differ diff --git a/es-419/code/egypt/index.html b/es-419/code/egypt/index.html new file mode 100644 index 00000000..0d3c0c05 --- /dev/null +++ b/es-419/code/egypt/index.html @@ -0,0 +1,53 @@ + + + + + + + Document + + + + + +
+
+ + + +
+
+
+

Egypt

+

The Mother of the world & the start Civilization

+ +
+
+
+
Abu Simbel
+

Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC

+
+
+
Siwa Oasis
+

Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.

+
+
+
Giza Necropolis
+

The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure

+
+
+
Red Sea Reef
+

The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.

+
+
+
+
+ + + \ No newline at end of file diff --git a/es-419/code/egypt/info-box1.jpg b/es-419/code/egypt/info-box1.jpg new file mode 100644 index 00000000..1bc81989 Binary files /dev/null and b/es-419/code/egypt/info-box1.jpg differ diff --git a/es-419/code/egypt/info-box2.jpg b/es-419/code/egypt/info-box2.jpg new file mode 100644 index 00000000..c21fae32 Binary files /dev/null and b/es-419/code/egypt/info-box2.jpg differ diff --git a/es-419/code/egypt/info-box3.jpg b/es-419/code/egypt/info-box3.jpg new file mode 100644 index 00000000..53938681 Binary files /dev/null and b/es-419/code/egypt/info-box3.jpg differ diff --git a/es-419/code/egypt/info-box4.jpg b/es-419/code/egypt/info-box4.jpg new file mode 100644 index 00000000..1c69ef25 Binary files /dev/null and b/es-419/code/egypt/info-box4.jpg differ diff --git a/es-419/code/egypt/project_config.yml b/es-419/code/egypt/project_config.yml new file mode 100644 index 00000000..ed541982 --- /dev/null +++ b/es-419/code/egypt/project_config.yml @@ -0,0 +1,3 @@ +name: 'Egypt' +identifier: 'egypt' +type: 'html' diff --git a/es-419/code/egypt/saint-catherines-monastery.jpg b/es-419/code/egypt/saint-catherines-monastery.jpg new file mode 100644 index 00000000..6fae8542 Binary files /dev/null and b/es-419/code/egypt/saint-catherines-monastery.jpg differ diff --git a/es-419/code/egypt/script.js b/es-419/code/egypt/script.js new file mode 100644 index 00000000..cef41022 --- /dev/null +++ b/es-419/code/egypt/script.js @@ -0,0 +1,23 @@ +//Nav li +var button = document.getElementById('li1'); +button.addEventListener('click', function () { + document.location.href = 'index.html'; +}); +var button = document.getElementById('li2'); +button.addEventListener('click', function () { + document.location.href = 'History.html'; +}); +var button = document.getElementById('li3'); +button.addEventListener('click', function () { + document.location.href = 'Explore.html'; +}); + +//btns +var button = document.getElementById('btn1'); +button.addEventListener('click', function () { + document.location.href = '/Explore.html'; +}); +var button = document.getElementById('btn2'); +button.addEventListener('click', function () { + document.location.href = 'www.google.com/maps/place/Egypt'; +}); diff --git a/es-419/code/egypt/sharm.jpg b/es-419/code/egypt/sharm.jpg new file mode 100644 index 00000000..065f8017 Binary files /dev/null and b/es-419/code/egypt/sharm.jpg differ diff --git a/es-419/code/egypt/style.css b/es-419/code/egypt/style.css new file mode 100644 index 00000000..bc6dd623 --- /dev/null +++ b/es-419/code/egypt/style.css @@ -0,0 +1,122 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +.container{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-position: center; + background-size: cover; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; +} + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +.row{ + display: flex; + height: 88%; + align-items: center; +} + +.col { + flex-basis: 50%; +} + +h1{ + color: white; + font-size: 100px; +} + +p{ + color: white; + font-size: 11px; + line-height: 15px; +} + +button{ + width: 180px; + color: #000; + font-size: 12px; + padding: 12px 0; + background: whitesmoke; + border: 0; + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -ms-border-radius: 20px; + -o-border-radius: 20px; + outline: none; + margin-top: 30px; +} + +.card { + width: 200px; + height: 230px; + display: inline-block; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + padding: 15px 25px; + box-sizing: border-box; + margin: 10px 15px; + background-position: center; + background-size: cover; +} + +.card h5{ + color: white; + text-decoration: bold; +} + +.card1{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg); +} + +.card2{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg); +} + +.card3{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg); +} + +.card4{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg); +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/afrobeats.jpg b/es-419/code/fashion-pi/afrobeats.jpg new file mode 100644 index 00000000..1e9e37b9 Binary files /dev/null and b/es-419/code/fashion-pi/afrobeats.jpg differ diff --git a/es-419/code/fashion-pi/animation.css b/es-419/code/fashion-pi/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/es-419/code/fashion-pi/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/es-419/code/fashion-pi/cafe.css b/es-419/code/fashion-pi/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/es-419/code/fashion-pi/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/comic.css b/es-419/code/fashion-pi/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/es-419/code/fashion-pi/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/es-419/code/fashion-pi/companion.css b/es-419/code/fashion-pi/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/es-419/code/fashion-pi/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/es-419/code/fashion-pi/default.css b/es-419/code/fashion-pi/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/es-419/code/fashion-pi/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/denim.jpg b/es-419/code/fashion-pi/denim.jpg new file mode 100644 index 00000000..95d6aa3f Binary files /dev/null and b/es-419/code/fashion-pi/denim.jpg differ diff --git a/es-419/code/fashion-pi/disco.css b/es-419/code/fashion-pi/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/es-419/code/fashion-pi/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/es-419/code/fashion-pi/festival.css b/es-419/code/fashion-pi/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/es-419/code/fashion-pi/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/fiesta.css b/es-419/code/fashion-pi/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/es-419/code/fashion-pi/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/es-419/code/fashion-pi/flare-trousers.jpg b/es-419/code/fashion-pi/flare-trousers.jpg new file mode 100644 index 00000000..776f1394 Binary files /dev/null and b/es-419/code/fashion-pi/flare-trousers.jpg differ diff --git a/es-419/code/fashion-pi/helpful-plumber.css b/es-419/code/fashion-pi/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/es-419/code/fashion-pi/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/es-419/code/fashion-pi/index.html b/es-419/code/fashion-pi/index.html new file mode 100644 index 00000000..5d4314ff --- /dev/null +++ b/es-419/code/fashion-pi/index.html @@ -0,0 +1,103 @@ + + + + + + + + + Fashion Pi + + + + + + + + + + + + + + + + + + + +
+

🥻Fashion Pi 🥧

+

Fashion trends| Latest news| Hot gossip

+
+ + +
+

Comeback trends in fashion.

+
+ Male and female model wearing denim bottoms and top. +
+

Denim on denim has made a big comeback in fashion.

+
+
+
+
+

Flare bottom pants have also made a big comeback.

+
+ Two black flare trousers on two female models. +
+
+

Latest trends in fashion.

+
+
+
+
+
+
+ Artwork showing instruments shaped as a woman's hair and the words Afrobats below +
+
+

Afrobeats

+

Afrobeats is a genre of music making waves in fashion.

+
+
+
+
+ +
+
+
+
+ Woman with dramatic makeup and beads on her face +
+
+

Makeup

+

Makeup & fashion are linked in the world of beauty and personal style.

.

+
+
+
+
+ +
+
+
+

"Fashion week is a must attend to celebrate all the designers, models and magazines. The Big 4 are: Paris, Milan, London, New York."

+ -Fashion Pi. +
+
+ +
+ + + + + + + + + diff --git a/es-419/code/fashion-pi/land-animals.css b/es-419/code/fashion-pi/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/es-419/code/fashion-pi/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/makeup-fashion.jpg b/es-419/code/fashion-pi/makeup-fashion.jpg new file mode 100644 index 00000000..96ef90f1 Binary files /dev/null and b/es-419/code/fashion-pi/makeup-fashion.jpg differ diff --git a/es-419/code/fashion-pi/medals.css b/es-419/code/fashion-pi/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/es-419/code/fashion-pi/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/money.css b/es-419/code/fashion-pi/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/es-419/code/fashion-pi/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/es-419/code/fashion-pi/nature.css b/es-419/code/fashion-pi/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/es-419/code/fashion-pi/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/pastel.css b/es-419/code/fashion-pi/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/es-419/code/fashion-pi/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/primary.css b/es-419/code/fashion-pi/primary.css new file mode 100644 index 00000000..be901099 --- /dev/null +++ b/es-419/code/fashion-pi/primary.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/project_config.yml b/es-419/code/fashion-pi/project_config.yml new file mode 100644 index 00000000..415eb347 --- /dev/null +++ b/es-419/code/fashion-pi/project_config.yml @@ -0,0 +1,3 @@ +name: 'Fashion Pi' +identifier: 'fashion-pi' +type: 'html' diff --git a/es-419/code/fashion-pi/smokey.css b/es-419/code/fashion-pi/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/es-419/code/fashion-pi/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/space.css b/es-419/code/fashion-pi/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/es-419/code/fashion-pi/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/style.css b/es-419/code/fashion-pi/style.css new file mode 100644 index 00000000..ae79bc6b --- /dev/null +++ b/es-419/code/fashion-pi/style.css @@ -0,0 +1,335 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail1); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/es-419/code/fashion-pi/sunset.css b/es-419/code/fashion-pi/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/es-419/code/fashion-pi/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/sunshine.css b/es-419/code/fashion-pi/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/es-419/code/fashion-pi/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/thriller.css b/es-419/code/fashion-pi/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/es-419/code/fashion-pi/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/water-animals.css b/es-419/code/fashion-pi/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/es-419/code/fashion-pi/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/es-419/code/fashion-pi/woodland.css b/es-419/code/fashion-pi/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/es-419/code/fashion-pi/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/animation.css b/es-419/code/favourite-things/animation.css new file mode 100644 index 00000000..add81618 --- /dev/null +++ b/es-419/code/favourite-things/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Time taken for animation and number of repetitions */ + display: inline-block; /* Important to allow rotation */ +} + +@keyframes rotate-center { + /* The spin me animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes scale { + /* The twinkle animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/es-419/code/favourite-things/beetle.jpg b/es-419/code/favourite-things/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/es-419/code/favourite-things/beetle.jpg differ diff --git a/es-419/code/favourite-things/bird.png b/es-419/code/favourite-things/bird.png new file mode 100644 index 00000000..bc3ecabf Binary files /dev/null and b/es-419/code/favourite-things/bird.png differ diff --git a/es-419/code/favourite-things/butterfly.JPG b/es-419/code/favourite-things/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/es-419/code/favourite-things/butterfly.JPG differ diff --git a/es-419/code/favourite-things/cacti.JPG b/es-419/code/favourite-things/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/es-419/code/favourite-things/cacti.JPG differ diff --git a/es-419/code/favourite-things/cafe.css b/es-419/code/favourite-things/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/es-419/code/favourite-things/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/es-419/code/favourite-things/cafe.jpg b/es-419/code/favourite-things/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/es-419/code/favourite-things/cafe.jpg differ diff --git a/es-419/code/favourite-things/candles.JPG b/es-419/code/favourite-things/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/es-419/code/favourite-things/candles.JPG differ diff --git a/es-419/code/favourite-things/carnival.jpg b/es-419/code/favourite-things/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/es-419/code/favourite-things/carnival.jpg differ diff --git a/es-419/code/favourite-things/colour-festival.jpg b/es-419/code/favourite-things/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/es-419/code/favourite-things/colour-festival.jpg differ diff --git a/es-419/code/favourite-things/comic-books.jpg b/es-419/code/favourite-things/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/es-419/code/favourite-things/comic-books.jpg differ diff --git a/es-419/code/favourite-things/comic.css b/es-419/code/favourite-things/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/es-419/code/favourite-things/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/es-419/code/favourite-things/companion.css b/es-419/code/favourite-things/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/es-419/code/favourite-things/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/es-419/code/favourite-things/crayons.jpg b/es-419/code/favourite-things/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/es-419/code/favourite-things/crayons.jpg differ diff --git a/es-419/code/favourite-things/default.css b/es-419/code/favourite-things/default.css new file mode 100644 index 00000000..af622e4e --- /dev/null +++ b/es-419/code/favourite-things/default.css @@ -0,0 +1,19 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffffff; + --secondary: #ed923c; + --tertiary: #d8f1ee; + --page: #ffffff; + --onprimary: #664300; + --onsecondary: #ffffff; + --ontertiary: #5e5e5e; + --onpage: #750787; + --detail: #5e5e5e; + --detail2: #57b9ab; + + --body-font: 1.1rem 'Cairo', sans-serif; + --header-font: lighter 3rem 'Ceviche One', cursive; + --title-font: lighter 1.5rem 'Cairo', cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/disco-ball.jpg b/es-419/code/favourite-things/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/es-419/code/favourite-things/disco-ball.jpg differ diff --git a/es-419/code/favourite-things/disco-flowers.JPG b/es-419/code/favourite-things/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/es-419/code/favourite-things/disco-flowers.JPG differ diff --git a/es-419/code/favourite-things/disco.css b/es-419/code/favourite-things/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/es-419/code/favourite-things/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/es-419/code/favourite-things/dog.png b/es-419/code/favourite-things/dog.png new file mode 100644 index 00000000..a944ece9 Binary files /dev/null and b/es-419/code/favourite-things/dog.png differ diff --git a/es-419/code/favourite-things/drone.JPG b/es-419/code/favourite-things/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/es-419/code/favourite-things/drone.JPG differ diff --git a/es-419/code/favourite-things/drum.png b/es-419/code/favourite-things/drum.png new file mode 100644 index 00000000..3fba65c8 Binary files /dev/null and b/es-419/code/favourite-things/drum.png differ diff --git a/es-419/code/favourite-things/exotic-plants.jpg b/es-419/code/favourite-things/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/es-419/code/favourite-things/exotic-plants.jpg differ diff --git a/es-419/code/favourite-things/fave.png b/es-419/code/favourite-things/fave.png new file mode 100644 index 00000000..05e1b6fb Binary files /dev/null and b/es-419/code/favourite-things/fave.png differ diff --git a/es-419/code/favourite-things/ferns.jpg b/es-419/code/favourite-things/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/es-419/code/favourite-things/ferns.jpg differ diff --git a/es-419/code/favourite-things/festival.css b/es-419/code/favourite-things/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/es-419/code/favourite-things/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/fiesta.css b/es-419/code/favourite-things/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/es-419/code/favourite-things/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/es-419/code/favourite-things/fire.jpg b/es-419/code/favourite-things/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/es-419/code/favourite-things/fire.jpg differ diff --git a/es-419/code/favourite-things/fish.jpg b/es-419/code/favourite-things/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/es-419/code/favourite-things/fish.jpg differ diff --git a/es-419/code/favourite-things/forest.JPG b/es-419/code/favourite-things/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/es-419/code/favourite-things/forest.JPG differ diff --git a/es-419/code/favourite-things/game-boy.jpg b/es-419/code/favourite-things/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/es-419/code/favourite-things/game-boy.jpg differ diff --git a/es-419/code/favourite-things/globe-in-water.JPG b/es-419/code/favourite-things/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/es-419/code/favourite-things/globe-in-water.JPG differ diff --git a/es-419/code/favourite-things/greenhouse.JPG b/es-419/code/favourite-things/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/es-419/code/favourite-things/greenhouse.JPG differ diff --git a/es-419/code/favourite-things/helpful-plumber.css b/es-419/code/favourite-things/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/es-419/code/favourite-things/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/es-419/code/favourite-things/illustrations.png b/es-419/code/favourite-things/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/es-419/code/favourite-things/illustrations.png differ diff --git a/es-419/code/favourite-things/index.html b/es-419/code/favourite-things/index.html new file mode 100644 index 00000000..c84d063c --- /dev/null +++ b/es-419/code/favourite-things/index.html @@ -0,0 +1,90 @@ + + + + + + + + + My favourite things + + + + + + + + + + + + + + + + + + +
+

🏆 My favourite things 🏆

+
+ + +
+
+

Lists of my favourite things

+
+ +
+

My favourite ways to make art:

+
+
+ +
    +
  1. Watercolour
    2. +
  2. Digital
    3. +
  3. Fine liners
    4. +
+ +
+ + +
+

My favourite animals:

+
+
+ +
    +
  1. Giraffe
    2. +
  2. Lynx
    3. +
  3. Penguin
    4. +
+ +
+ +
+

My favourite places to travel:

+
+
+ +
    +
  1. Norway
    2. +
  2. Italy
    3. +
  3. Scotland
    4. +
+ +
+ +
+ + + + + + diff --git a/es-419/code/favourite-things/lake-mountains.JPG b/es-419/code/favourite-things/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/es-419/code/favourite-things/lake-mountains.JPG differ diff --git a/es-419/code/favourite-things/land-animals.css b/es-419/code/favourite-things/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/es-419/code/favourite-things/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/mandala.png b/es-419/code/favourite-things/mandala.png new file mode 100644 index 00000000..6b072a92 Binary files /dev/null and b/es-419/code/favourite-things/mandala.png differ diff --git a/es-419/code/favourite-things/map.png b/es-419/code/favourite-things/map.png new file mode 100644 index 00000000..09acad40 Binary files /dev/null and b/es-419/code/favourite-things/map.png differ diff --git a/es-419/code/favourite-things/medal.jpg b/es-419/code/favourite-things/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/es-419/code/favourite-things/medal.jpg differ diff --git a/es-419/code/favourite-things/medals.css b/es-419/code/favourite-things/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/es-419/code/favourite-things/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/money.css b/es-419/code/favourite-things/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/es-419/code/favourite-things/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/es-419/code/favourite-things/monkey.JPG b/es-419/code/favourite-things/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/es-419/code/favourite-things/monkey.JPG differ diff --git a/es-419/code/favourite-things/moon-art.png b/es-419/code/favourite-things/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/es-419/code/favourite-things/moon-art.png differ diff --git a/es-419/code/favourite-things/mountain.png b/es-419/code/favourite-things/mountain.png new file mode 100644 index 00000000..5527d6c7 Binary files /dev/null and b/es-419/code/favourite-things/mountain.png differ diff --git a/es-419/code/favourite-things/mushroom.JPG b/es-419/code/favourite-things/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/es-419/code/favourite-things/mushroom.JPG differ diff --git a/es-419/code/favourite-things/music.png b/es-419/code/favourite-things/music.png new file mode 100644 index 00000000..1633c3ec Binary files /dev/null and b/es-419/code/favourite-things/music.png differ diff --git a/es-419/code/favourite-things/nature.css b/es-419/code/favourite-things/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/es-419/code/favourite-things/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/painting.png b/es-419/code/favourite-things/painting.png new file mode 100644 index 00000000..21442674 Binary files /dev/null and b/es-419/code/favourite-things/painting.png differ diff --git a/es-419/code/favourite-things/pansies.JPG b/es-419/code/favourite-things/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/es-419/code/favourite-things/pansies.JPG differ diff --git a/es-419/code/favourite-things/pastel-hearts.jpg b/es-419/code/favourite-things/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/es-419/code/favourite-things/pastel-hearts.jpg differ diff --git a/es-419/code/favourite-things/pastel.css b/es-419/code/favourite-things/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/es-419/code/favourite-things/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/piggy-bank.jpg b/es-419/code/favourite-things/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/es-419/code/favourite-things/piggy-bank.jpg differ diff --git a/es-419/code/favourite-things/placeholder.png b/es-419/code/favourite-things/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/es-419/code/favourite-things/placeholder.png differ diff --git a/es-419/code/favourite-things/primary.css b/es-419/code/favourite-things/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/es-419/code/favourite-things/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/project_config.yml b/es-419/code/favourite-things/project_config.yml new file mode 100644 index 00000000..77973dd2 --- /dev/null +++ b/es-419/code/favourite-things/project_config.yml @@ -0,0 +1,3 @@ +name: 'Favourite things' +identifier: 'favourite-things' +type: 'html' diff --git a/es-419/code/favourite-things/pumpkins.JPG b/es-419/code/favourite-things/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/es-419/code/favourite-things/pumpkins.JPG differ diff --git a/es-419/code/favourite-things/rainbow-forest.JPG b/es-419/code/favourite-things/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/es-419/code/favourite-things/rainbow-forest.JPG differ diff --git a/es-419/code/favourite-things/rhino.JPG b/es-419/code/favourite-things/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/es-419/code/favourite-things/rhino.JPG differ diff --git a/es-419/code/favourite-things/smokey.css b/es-419/code/favourite-things/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/es-419/code/favourite-things/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/space.css b/es-419/code/favourite-things/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/es-419/code/favourite-things/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/spider-web.jpg b/es-419/code/favourite-things/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/es-419/code/favourite-things/spider-web.jpg differ diff --git a/es-419/code/favourite-things/style.css b/es-419/code/favourite-things/style.css new file mode 100644 index 00000000..6bb97c40 --- /dev/null +++ b/es-419/code/favourite-things/style.css @@ -0,0 +1,284 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + background-image: url('fave.png'); +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 5rem; + display: block; + padding: 0rem; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + diff --git a/es-419/code/favourite-things/sunflowers.JPG b/es-419/code/favourite-things/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/es-419/code/favourite-things/sunflowers.JPG differ diff --git a/es-419/code/favourite-things/sunset-beach.JPG b/es-419/code/favourite-things/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/es-419/code/favourite-things/sunset-beach.JPG differ diff --git a/es-419/code/favourite-things/sunset-person.jpg b/es-419/code/favourite-things/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/es-419/code/favourite-things/sunset-person.jpg differ diff --git a/es-419/code/favourite-things/sunset.JPG b/es-419/code/favourite-things/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/es-419/code/favourite-things/sunset.JPG differ diff --git a/es-419/code/favourite-things/sunset.css b/es-419/code/favourite-things/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/es-419/code/favourite-things/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/sunshine.css b/es-419/code/favourite-things/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/es-419/code/favourite-things/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/thriller.css b/es-419/code/favourite-things/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/es-419/code/favourite-things/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/water-animals.css b/es-419/code/favourite-things/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/es-419/code/favourite-things/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/es-419/code/favourite-things/woodland.css b/es-419/code/favourite-things/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/es-419/code/favourite-things/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/animation.css b/es-419/code/raspberry-pi-pico/animation.css new file mode 100644 index 00000000..add81618 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Time taken for animation and number of repetitions */ + display: inline-block; /* Important to allow rotation */ +} + +@keyframes rotate-center { + /* The spin me animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation twice. */ + display: inline-block; +} + +@keyframes scale { + /* The twinkle animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/es-419/code/raspberry-pi-pico/beetle.jpg b/es-419/code/raspberry-pi-pico/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/beetle.jpg differ diff --git a/es-419/code/raspberry-pi-pico/butterfly.JPG b/es-419/code/raspberry-pi-pico/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/butterfly.JPG differ diff --git a/es-419/code/raspberry-pi-pico/button.png b/es-419/code/raspberry-pi-pico/button.png new file mode 100644 index 00000000..84141380 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/button.png differ diff --git a/es-419/code/raspberry-pi-pico/buzzer.png b/es-419/code/raspberry-pi-pico/buzzer.png new file mode 100644 index 00000000..717770f1 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/buzzer.png differ diff --git a/es-419/code/raspberry-pi-pico/cacti.JPG b/es-419/code/raspberry-pi-pico/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/es-419/code/raspberry-pi-pico/cacti.JPG differ diff --git a/es-419/code/raspberry-pi-pico/cafe.css b/es-419/code/raspberry-pi-pico/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/cafe.jpg b/es-419/code/raspberry-pi-pico/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/cafe.jpg differ diff --git a/es-419/code/raspberry-pi-pico/candles.JPG b/es-419/code/raspberry-pi-pico/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/es-419/code/raspberry-pi-pico/candles.JPG differ diff --git a/es-419/code/raspberry-pi-pico/carnival.jpg b/es-419/code/raspberry-pi-pico/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/carnival.jpg differ diff --git a/es-419/code/raspberry-pi-pico/colour-festival.jpg b/es-419/code/raspberry-pi-pico/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/es-419/code/raspberry-pi-pico/colour-festival.jpg differ diff --git a/es-419/code/raspberry-pi-pico/comic-books.jpg b/es-419/code/raspberry-pi-pico/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/es-419/code/raspberry-pi-pico/comic-books.jpg differ diff --git a/es-419/code/raspberry-pi-pico/comic.css b/es-419/code/raspberry-pi-pico/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/es-419/code/raspberry-pi-pico/companion.css b/es-419/code/raspberry-pi-pico/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/es-419/code/raspberry-pi-pico/crayons.jpg b/es-419/code/raspberry-pi-pico/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/crayons.jpg differ diff --git a/es-419/code/raspberry-pi-pico/default.css b/es-419/code/raspberry-pi-pico/default.css new file mode 100644 index 00000000..0adb336d --- /dev/null +++ b/es-419/code/raspberry-pi-pico/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffffff; + --secondary: #c51a4a; + --tertiary: #6cc04a; + --page: #000000; + --onprimary: #555559; + --onsecondary: #ffffff; + --ontertiary: #555559; + --onpage: #000000; + --detail: #999798; + --detail2: #c9c8c7; + + --body-font: 1rem 'Nunito', sans-serif; + --header-font: lighter 3rem 'Russo One', sans-serif; + --title-font: lighter 1.5rem 'Nunito', sans-serif; + --quote-font: lighter 1.5rem 'Nunito', sans-serif; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/disco-ball.jpg b/es-419/code/raspberry-pi-pico/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/disco-ball.jpg differ diff --git a/es-419/code/raspberry-pi-pico/disco-flowers.JPG b/es-419/code/raspberry-pi-pico/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/es-419/code/raspberry-pi-pico/disco-flowers.JPG differ diff --git a/es-419/code/raspberry-pi-pico/disco.css b/es-419/code/raspberry-pi-pico/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/es-419/code/raspberry-pi-pico/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/es-419/code/raspberry-pi-pico/drone.JPG b/es-419/code/raspberry-pi-pico/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/drone.JPG differ diff --git a/es-419/code/raspberry-pi-pico/exotic-plants.jpg b/es-419/code/raspberry-pi-pico/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/exotic-plants.jpg differ diff --git a/es-419/code/raspberry-pi-pico/ferns.jpg b/es-419/code/raspberry-pi-pico/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/ferns.jpg differ diff --git a/es-419/code/raspberry-pi-pico/festival.css b/es-419/code/raspberry-pi-pico/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/fiesta.css b/es-419/code/raspberry-pi-pico/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/es-419/code/raspberry-pi-pico/fire.jpg b/es-419/code/raspberry-pi-pico/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/fire.jpg differ diff --git a/es-419/code/raspberry-pi-pico/fish.jpg b/es-419/code/raspberry-pi-pico/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/es-419/code/raspberry-pi-pico/fish.jpg differ diff --git a/es-419/code/raspberry-pi-pico/forest.JPG b/es-419/code/raspberry-pi-pico/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/forest.JPG differ diff --git a/es-419/code/raspberry-pi-pico/game-boy.jpg b/es-419/code/raspberry-pi-pico/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/game-boy.jpg differ diff --git a/es-419/code/raspberry-pi-pico/globe-in-water.JPG b/es-419/code/raspberry-pi-pico/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/globe-in-water.JPG differ diff --git a/es-419/code/raspberry-pi-pico/greenhouse.JPG b/es-419/code/raspberry-pi-pico/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/greenhouse.JPG differ diff --git a/es-419/code/raspberry-pi-pico/helpful-plumber.css b/es-419/code/raspberry-pi-pico/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/es-419/code/raspberry-pi-pico/illustrations.png b/es-419/code/raspberry-pi-pico/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/illustrations.png differ diff --git a/es-419/code/raspberry-pi-pico/index.html b/es-419/code/raspberry-pi-pico/index.html new file mode 100644 index 00000000..a3fae6bb --- /dev/null +++ b/es-419/code/raspberry-pi-pico/index.html @@ -0,0 +1,165 @@ + + + + + + + + + Raspberry Pi Pico + + + + + + + + + + + + + + + +
+

The Raspberry Pi Pico

+
+ + +
+ + + +
+ The love facial expression. +

The Raspberry Pi Pico is a low-cost microcontroller used to make electronic products.

+
+ + + +
+

The Inputs and Outputs I have used are:

+
+

Inputs

+
    +
  • Switch
    • +
  • Button
    • +
  • Potentiometer
    • +
+
+ +
+

Outputs

+
    +
  • LED
    • +
  • RGB LED
    • +
  • Buzzer
    • +
+
+

Hover over the cards to find out more:

+
+ + + +

Inputs

+ +
+ + + +
+
+
+

Switch

+ +
+
+

A switch is an electrical component that can be closed to allow electrical current to flow and opened to prevent electrical current from flowing.

+
+
+
+ +
+
+
+

Button

+ +
+
+

A button is a kind of switch that makes a connection when it is pressed.

+
+
+
+ +
+
+
+

Potentiometer

+ +
+
+

A potentiometer is an analogue input component that changes its resistance depending on the position of the dial.

+
+
+
+ +
+ + + +

Outputs

+ +
+ + + +
+
+
+

LED

+ +
+
+

LED stands for light-emitting diode. It has a material lights up when an electrical current passes through it.

+
+
+
+ +
+
+
+

RGB LED

+ +
+
+

RGB stands for Red Green Blue. RGB LEDs allow you to use code to control how much of each colour is emitted.

+
+
+
+ +
+
+
+

Buzzer

+ +
+
+

A passive buzzer can play a variety of tones. It requires a connection to be made and a specific signal to play the chosen tone.

+
+
+
+ +
+
+ + + + + + diff --git a/es-419/code/raspberry-pi-pico/lake-mountains.JPG b/es-419/code/raspberry-pi-pico/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/lake-mountains.JPG differ diff --git a/es-419/code/raspberry-pi-pico/land-animals.css b/es-419/code/raspberry-pi-pico/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/es-419/code/raspberry-pi-pico/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/led.png b/es-419/code/raspberry-pi-pico/led.png new file mode 100644 index 00000000..0a273225 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/led.png differ diff --git a/es-419/code/raspberry-pi-pico/medal.jpg b/es-419/code/raspberry-pi-pico/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/es-419/code/raspberry-pi-pico/medal.jpg differ diff --git a/es-419/code/raspberry-pi-pico/medals.css b/es-419/code/raspberry-pi-pico/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/money.css b/es-419/code/raspberry-pi-pico/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/es-419/code/raspberry-pi-pico/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/es-419/code/raspberry-pi-pico/monkey.JPG b/es-419/code/raspberry-pi-pico/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/monkey.JPG differ diff --git a/es-419/code/raspberry-pi-pico/moon-art.png b/es-419/code/raspberry-pi-pico/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/moon-art.png differ diff --git a/es-419/code/raspberry-pi-pico/mushroom.JPG b/es-419/code/raspberry-pi-pico/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/mushroom.JPG differ diff --git a/es-419/code/raspberry-pi-pico/nature.css b/es-419/code/raspberry-pi-pico/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/es-419/code/raspberry-pi-pico/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/pansies.JPG b/es-419/code/raspberry-pi-pico/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/es-419/code/raspberry-pi-pico/pansies.JPG differ diff --git a/es-419/code/raspberry-pi-pico/pastel-hearts.jpg b/es-419/code/raspberry-pi-pico/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/pastel-hearts.jpg differ diff --git a/es-419/code/raspberry-pi-pico/pastel.css b/es-419/code/raspberry-pi-pico/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/es-419/code/raspberry-pi-pico/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/pico-hand.png b/es-419/code/raspberry-pi-pico/pico-hand.png new file mode 100644 index 00000000..31577c88 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/pico-hand.png differ diff --git a/es-419/code/raspberry-pi-pico/piggy-bank.jpg b/es-419/code/raspberry-pi-pico/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/piggy-bank.jpg differ diff --git a/es-419/code/raspberry-pi-pico/placeholder.png b/es-419/code/raspberry-pi-pico/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/placeholder.png differ diff --git a/es-419/code/raspberry-pi-pico/pot.png b/es-419/code/raspberry-pi-pico/pot.png new file mode 100644 index 00000000..817fea4e Binary files /dev/null and b/es-419/code/raspberry-pi-pico/pot.png differ diff --git a/es-419/code/raspberry-pi-pico/primary.css b/es-419/code/raspberry-pi-pico/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/es-419/code/raspberry-pi-pico/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/project_config.yml b/es-419/code/raspberry-pi-pico/project_config.yml new file mode 100644 index 00000000..62c199fa --- /dev/null +++ b/es-419/code/raspberry-pi-pico/project_config.yml @@ -0,0 +1,3 @@ +name: 'Raspberry Pi Pico' +identifier: 'raspberry-pi-pico' +type: 'html' diff --git a/es-419/code/raspberry-pi-pico/pumpkins.JPG b/es-419/code/raspberry-pi-pico/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/pumpkins.JPG differ diff --git a/es-419/code/raspberry-pi-pico/rainbow-forest.JPG b/es-419/code/raspberry-pi-pico/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/es-419/code/raspberry-pi-pico/rainbow-forest.JPG differ diff --git a/es-419/code/raspberry-pi-pico/rgb-led.png b/es-419/code/raspberry-pi-pico/rgb-led.png new file mode 100644 index 00000000..cd3b4538 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/rgb-led.png differ diff --git a/es-419/code/raspberry-pi-pico/rhino.JPG b/es-419/code/raspberry-pi-pico/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/rhino.JPG differ diff --git a/es-419/code/raspberry-pi-pico/smokey.css b/es-419/code/raspberry-pi-pico/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/space.css b/es-419/code/raspberry-pi-pico/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/es-419/code/raspberry-pi-pico/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/spider-web.jpg b/es-419/code/raspberry-pi-pico/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/spider-web.jpg differ diff --git a/es-419/code/raspberry-pi-pico/style.css b/es-419/code/raspberry-pi-pico/style.css new file mode 100644 index 00000000..7b5c8c4e --- /dev/null +++ b/es-419/code/raspberry-pi-pico/style.css @@ -0,0 +1,331 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Card colours */ + +.purple { + background: #9a6faa; + color: #000000; +} + +.brickred { + background: #f27b5c; + color: #000000; +} + +.yellow { + background: #fddd42; + color: #000000; +} + +.turquoise { + background: #15bcac; + color: #000000; +} + +.blue { + background: #51a4dc; + color: #000000; +} + +.orange { + background: #ffbd5c; + color: #000000; +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +.ytop { + display: flex; + justify-content: top; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 15rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; + font: var(--body-font); +} + +.card img { + max-width: 80%; + max-height: 80%; +} + diff --git a/es-419/code/raspberry-pi-pico/sunflowers.JPG b/es-419/code/raspberry-pi-pico/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/sunflowers.JPG differ diff --git a/es-419/code/raspberry-pi-pico/sunset-beach.JPG b/es-419/code/raspberry-pi-pico/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/sunset-beach.JPG differ diff --git a/es-419/code/raspberry-pi-pico/sunset-person.jpg b/es-419/code/raspberry-pi-pico/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/es-419/code/raspberry-pi-pico/sunset-person.jpg differ diff --git a/es-419/code/raspberry-pi-pico/sunset.JPG b/es-419/code/raspberry-pi-pico/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/sunset.JPG differ diff --git a/es-419/code/raspberry-pi-pico/sunset.css b/es-419/code/raspberry-pi-pico/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/es-419/code/raspberry-pi-pico/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/sunshine.css b/es-419/code/raspberry-pi-pico/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/es-419/code/raspberry-pi-pico/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/switch.png b/es-419/code/raspberry-pi-pico/switch.png new file mode 100644 index 00000000..46f288a8 Binary files /dev/null and b/es-419/code/raspberry-pi-pico/switch.png differ diff --git a/es-419/code/raspberry-pi-pico/thriller.css b/es-419/code/raspberry-pi-pico/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/es-419/code/raspberry-pi-pico/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/water-animals.css b/es-419/code/raspberry-pi-pico/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/es-419/code/raspberry-pi-pico/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/es-419/code/raspberry-pi-pico/woodland.css b/es-419/code/raspberry-pi-pico/woodland.css new file mode 100644 index 00000000..88a3222c --- /dev/null +++ b/es-419/code/raspberry-pi-pico/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/animation.css b/es-419/code/what-is-d-and-d/animation.css new file mode 100644 index 00000000..cef7f584 --- /dev/null +++ b/es-419/code/what-is-d-and-d/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* runs the 'rotate-centre' animation with linear timing (same pace all the way through) for eight seconds. Runs the animation twice. */ + display: inline-block; /* Important so the animated element is not split to a new line */ +} + +@keyframes rotate-center { + /* The rotate animation code */ + 0% { + /* Rotate from 0 to 360 degrees */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */ + display: inline-block; +} + +@keyframes bounce { + /* The bounce animation code */ + 0% { + transform: scale(1, 1) translateY(0); /* Starting position and actual size */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* runs the 'scale' animation with ease timing (slow start and end) for two seconds. Runs the animation forever. */ + display: inline-block; +} + +@keyframes scale { + /* The scale animation code */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* The roll animation code */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* The roll animation code */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* The move animation code */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* The move animation code */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/es-419/code/what-is-d-and-d/beetle.jpg b/es-419/code/what-is-d-and-d/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/es-419/code/what-is-d-and-d/beetle.jpg differ diff --git a/es-419/code/what-is-d-and-d/butterfly.JPG b/es-419/code/what-is-d-and-d/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/es-419/code/what-is-d-and-d/butterfly.JPG differ diff --git a/es-419/code/what-is-d-and-d/cacti.JPG b/es-419/code/what-is-d-and-d/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/es-419/code/what-is-d-and-d/cacti.JPG differ diff --git a/es-419/code/what-is-d-and-d/cafe.css b/es-419/code/what-is-d-and-d/cafe.css new file mode 100644 index 00000000..81c5fbd4 --- /dev/null +++ b/es-419/code/what-is-d-and-d/cafe.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/cafe.jpg b/es-419/code/what-is-d-and-d/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/es-419/code/what-is-d-and-d/cafe.jpg differ diff --git a/es-419/code/what-is-d-and-d/candles.JPG b/es-419/code/what-is-d-and-d/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/es-419/code/what-is-d-and-d/candles.JPG differ diff --git a/es-419/code/what-is-d-and-d/carnival.jpg b/es-419/code/what-is-d-and-d/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/es-419/code/what-is-d-and-d/carnival.jpg differ diff --git a/es-419/code/what-is-d-and-d/colour-festival.jpg b/es-419/code/what-is-d-and-d/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/es-419/code/what-is-d-and-d/colour-festival.jpg differ diff --git a/es-419/code/what-is-d-and-d/comic-books.jpg b/es-419/code/what-is-d-and-d/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/es-419/code/what-is-d-and-d/comic-books.jpg differ diff --git a/es-419/code/what-is-d-and-d/comic.css b/es-419/code/what-is-d-and-d/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/es-419/code/what-is-d-and-d/comic.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/es-419/code/what-is-d-and-d/companion.css b/es-419/code/what-is-d-and-d/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/es-419/code/what-is-d-and-d/companion.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/es-419/code/what-is-d-and-d/crayons.jpg b/es-419/code/what-is-d-and-d/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/es-419/code/what-is-d-and-d/crayons.jpg differ diff --git a/es-419/code/what-is-d-and-d/default.css b/es-419/code/what-is-d-and-d/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/es-419/code/what-is-d-and-d/default.css @@ -0,0 +1,20 @@ + +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/disco-ball.jpg b/es-419/code/what-is-d-and-d/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/es-419/code/what-is-d-and-d/disco-ball.jpg differ diff --git a/es-419/code/what-is-d-and-d/disco-flowers.JPG b/es-419/code/what-is-d-and-d/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/es-419/code/what-is-d-and-d/disco-flowers.JPG differ diff --git a/es-419/code/what-is-d-and-d/disco.css b/es-419/code/what-is-d-and-d/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/es-419/code/what-is-d-and-d/disco.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/es-419/code/what-is-d-and-d/dm.jpg b/es-419/code/what-is-d-and-d/dm.jpg new file mode 100644 index 00000000..5ee5f0a4 Binary files /dev/null and b/es-419/code/what-is-d-and-d/dm.jpg differ diff --git a/es-419/code/what-is-d-and-d/dm2.jpg b/es-419/code/what-is-d-and-d/dm2.jpg new file mode 100644 index 00000000..a97ece6d Binary files /dev/null and b/es-419/code/what-is-d-and-d/dm2.jpg differ diff --git a/es-419/code/what-is-d-and-d/drone.JPG b/es-419/code/what-is-d-and-d/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/es-419/code/what-is-d-and-d/drone.JPG differ diff --git a/es-419/code/what-is-d-and-d/exotic-plants.jpg b/es-419/code/what-is-d-and-d/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/es-419/code/what-is-d-and-d/exotic-plants.jpg differ diff --git a/es-419/code/what-is-d-and-d/ferns.jpg b/es-419/code/what-is-d-and-d/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/es-419/code/what-is-d-and-d/ferns.jpg differ diff --git a/es-419/code/what-is-d-and-d/festival.css b/es-419/code/what-is-d-and-d/festival.css new file mode 100644 index 00000000..26b04b51 --- /dev/null +++ b/es-419/code/what-is-d-and-d/festival.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/fiesta.css b/es-419/code/what-is-d-and-d/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/es-419/code/what-is-d-and-d/fiesta.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/es-419/code/what-is-d-and-d/fire.jpg b/es-419/code/what-is-d-and-d/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/es-419/code/what-is-d-and-d/fire.jpg differ diff --git a/es-419/code/what-is-d-and-d/fish.jpg b/es-419/code/what-is-d-and-d/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/es-419/code/what-is-d-and-d/fish.jpg differ diff --git a/es-419/code/what-is-d-and-d/forest.JPG b/es-419/code/what-is-d-and-d/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/es-419/code/what-is-d-and-d/forest.JPG differ diff --git a/es-419/code/what-is-d-and-d/game-boy.jpg b/es-419/code/what-is-d-and-d/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/es-419/code/what-is-d-and-d/game-boy.jpg differ diff --git a/es-419/code/what-is-d-and-d/globe-in-water.JPG b/es-419/code/what-is-d-and-d/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/es-419/code/what-is-d-and-d/globe-in-water.JPG differ diff --git a/es-419/code/what-is-d-and-d/greenhouse.JPG b/es-419/code/what-is-d-and-d/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/es-419/code/what-is-d-and-d/greenhouse.JPG differ diff --git a/es-419/code/what-is-d-and-d/helpful-plumber.css b/es-419/code/what-is-d-and-d/helpful-plumber.css new file mode 100644 index 00000000..a278bd87 --- /dev/null +++ b/es-419/code/what-is-d-and-d/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/es-419/code/what-is-d-and-d/illustrations.png b/es-419/code/what-is-d-and-d/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/es-419/code/what-is-d-and-d/illustrations.png differ diff --git a/es-419/code/what-is-d-and-d/index.html b/es-419/code/what-is-d-and-d/index.html new file mode 100644 index 00000000..06fa339d --- /dev/null +++ b/es-419/code/what-is-d-and-d/index.html @@ -0,0 +1,168 @@ + + + + + + + + + Dungeons and Dragons + + + + + + + + + + + + + + + +
+
+

Dungeons & Dragons

+
+
+
+

What is it?

+
+
+ + +
+
+

What is Dungeons & Dragons?

+

According to the company who makes it, Wizard of the Coast, it's the World's greatest role-playing game.

+
+

So what's a role-playing game? It's where you and your friends sit around pretending to be characters you made up, in a fantasy world created by the Dungeonmaster (DM for short). Your character can do anything you can imagine, and when you interact with the world, you roll some dice to determine the outcome or reaction to your actions.

+
+ +
+
+

"The essence of a role-playing game is that it is a group, cooperative experience."

+ - Gary Gygax (Inventor of D&D) +
+
+ +
+ The dungeon master knows and controls everything about the world for their players. In the image, a mighty wizard looks down upon a planet that appears small compared to their magical might. Lightning sprays blue from their outstretched fingers, doing their will upon the ground below. +
+

The Dungeonmaster (DM)

+

If D&D was like a video game, the DM is the console you play it on - they bring the world to life for you and determine how it reacts to your actions and the actions of the other players.

+
+

The DM portrays and decides the actions of all the other characters who inhabit the world, who are not controlled by the players. They resolve actions, determine outcomes and tell the story to the group of what is happening around them. The DM knows everything about the world, and what they don't know about it, they can just make up!

+
+

Whatever the DM says goes, as they are the referee, narrator and other characters all rolled into one!

+
+
+ +
+
+

Classes

+
+ +

Classes are the way your character behaves in the game mechanically, or what abilities or skills they have and special tricks they can do. Mighty warriors for example, are better at fighting with weapons and strength, while clever wizards use their magical studies to create mighty spells.


+

Classes come in two kinds: Martial classes which focus on combat and non-magical skills, and Spellcasting Classes which focus on affecting the world around them with magical means.


+

Below is a selection of just some of the available classes in Dungeons and Dragons:

+
+
+

Martial Classes

+
+
+
+
+
+

Rogue

+

🤫

+
+
+

Sneaky and quick, rogues move in the shadows and are skilled operators.

+
+
+
+ +
+
+
+

🤺

+

Fighter

+
+
+

Trained in martial skills from an early age, Fighters are powerful and skilled warriors.

+
+
+
+ +
+
+
+

Barbarian

+

😡

+
+
+

Fuelled by their mighty rage, Barbarians charge through battle caring little for the damage they take or inflict. +

+
+
+
+ +
+
+

Spellcasting Classes

+
+
+ +
+
+
+

Cleric

+

😇

+
+
+

Faithful workshipers of mighty deities, Clerics are granted magical powers by their gods.

+
+
+
+ +
+
+
+

🧙‍♀️

+

Wizard

+
+
+

Skilled and learned in the ways of magic, Wizards have studied many years to obtain their power.

+
+
+
+ +
+
+
+

Druid

+

🐾

+
+
+

Tapping into the power of nature for their magic, Druids are able to take animal form and cast healing spells.

+
+
+
+ +
+ +
+ + + + + + diff --git a/es-419/code/what-is-d-and-d/lake-mountains.JPG b/es-419/code/what-is-d-and-d/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/es-419/code/what-is-d-and-d/lake-mountains.JPG differ diff --git a/es-419/code/what-is-d-and-d/land-animals.css b/es-419/code/what-is-d-and-d/land-animals.css new file mode 100644 index 00000000..62670a3d --- /dev/null +++ b/es-419/code/what-is-d-and-d/land-animals.css @@ -0,0 +1,20 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/medal.jpg b/es-419/code/what-is-d-and-d/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/es-419/code/what-is-d-and-d/medal.jpg differ diff --git a/es-419/code/what-is-d-and-d/medals.css b/es-419/code/what-is-d-and-d/medals.css new file mode 100644 index 00000000..bd5ec663 --- /dev/null +++ b/es-419/code/what-is-d-and-d/medals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/money.css b/es-419/code/what-is-d-and-d/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/es-419/code/what-is-d-and-d/money.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/es-419/code/what-is-d-and-d/monkey.JPG b/es-419/code/what-is-d-and-d/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/es-419/code/what-is-d-and-d/monkey.JPG differ diff --git a/es-419/code/what-is-d-and-d/moon-art.png b/es-419/code/what-is-d-and-d/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/es-419/code/what-is-d-and-d/moon-art.png differ diff --git a/es-419/code/what-is-d-and-d/mushroom.JPG b/es-419/code/what-is-d-and-d/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/es-419/code/what-is-d-and-d/mushroom.JPG differ diff --git a/es-419/code/what-is-d-and-d/nature.css b/es-419/code/what-is-d-and-d/nature.css new file mode 100644 index 00000000..f7612a5b --- /dev/null +++ b/es-419/code/what-is-d-and-d/nature.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/pansies.JPG b/es-419/code/what-is-d-and-d/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/es-419/code/what-is-d-and-d/pansies.JPG differ diff --git a/es-419/code/what-is-d-and-d/pastel-hearts.jpg b/es-419/code/what-is-d-and-d/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/es-419/code/what-is-d-and-d/pastel-hearts.jpg differ diff --git a/es-419/code/what-is-d-and-d/pastel.css b/es-419/code/what-is-d-and-d/pastel.css new file mode 100644 index 00000000..77cac5ee --- /dev/null +++ b/es-419/code/what-is-d-and-d/pastel.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/piggy-bank.jpg b/es-419/code/what-is-d-and-d/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/es-419/code/what-is-d-and-d/piggy-bank.jpg differ diff --git a/es-419/code/what-is-d-and-d/placeholder.png b/es-419/code/what-is-d-and-d/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/es-419/code/what-is-d-and-d/placeholder.png differ diff --git a/es-419/code/what-is-d-and-d/primary.css b/es-419/code/what-is-d-and-d/primary.css new file mode 100644 index 00000000..c0c31b2d --- /dev/null +++ b/es-419/code/what-is-d-and-d/primary.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/project_config.yml b/es-419/code/what-is-d-and-d/project_config.yml new file mode 100644 index 00000000..d231f406 --- /dev/null +++ b/es-419/code/what-is-d-and-d/project_config.yml @@ -0,0 +1,3 @@ +name: 'What is D&D' +identifier: 'what-is-d-and-d' +type: 'html' diff --git a/es-419/code/what-is-d-and-d/pumpkins.JPG b/es-419/code/what-is-d-and-d/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/es-419/code/what-is-d-and-d/pumpkins.JPG differ diff --git a/es-419/code/what-is-d-and-d/rainbow-forest.JPG b/es-419/code/what-is-d-and-d/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/es-419/code/what-is-d-and-d/rainbow-forest.JPG differ diff --git a/es-419/code/what-is-d-and-d/rhino.JPG b/es-419/code/what-is-d-and-d/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/es-419/code/what-is-d-and-d/rhino.JPG differ diff --git a/es-419/code/what-is-d-and-d/smokey.css b/es-419/code/what-is-d-and-d/smokey.css new file mode 100644 index 00000000..d2599c44 --- /dev/null +++ b/es-419/code/what-is-d-and-d/smokey.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/space.css b/es-419/code/what-is-d-and-d/space.css new file mode 100644 index 00000000..42664374 --- /dev/null +++ b/es-419/code/what-is-d-and-d/space.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/spider-web.jpg b/es-419/code/what-is-d-and-d/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/es-419/code/what-is-d-and-d/spider-web.jpg differ diff --git a/es-419/code/what-is-d-and-d/style.css b/es-419/code/what-is-d-and-d/style.css new file mode 100644 index 00000000..6589bd8b --- /dev/null +++ b/es-419/code/what-is-d-and-d/style.css @@ -0,0 +1,316 @@ +/* Colour pairings */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Apply everywhere */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Padding and border don't make a box bigger */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Make the content fill the page so the footer is at the bottom */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* add a background image to body */ + +body { + /*background-image: url('name.jpg');*/ /* Uncomment and change filename to add a background image */ + /*background-repeat: repeat;*/ /* Make the image repeat */ + /*background-size: cover;*/ /* Make the image cover the whole container */ +} + +/* The main content of the page between the header and footer */ +main { + background: var(--primary); /* Colour the background */ + color: var(--onprimary); /* Colour the text */ + margin: 0 auto; /* Center if the browser is really wide */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Gap before the footer */ +} + +/* Header and footer element styles */ + +header, +footer { + text-align: center; + width: 100%; /* Fill the full width of the window */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Section styles */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Border styles */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Add a solid */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Add a solid line above the footer */ +} + +/* Add a transparent effect */ + +.transparent { + opacity: 0.95; +} + +/* Styles just for h1 elements */ + +h1 { + font: var(--header-font); /* Font style stored in the header-font variable */ + padding: 2rem; + margin: 0; /* Center if the browser is really wide */ +} + +/* Styles just for h2 elements */ + +h2 { + font: var(--title-font); /* Font style stored in the title-font variable */ +} + +/* Highlight key words in bold and apply an alternative text colour */ + +strong { + color: var(--detail2); /* Text colour stored in the caption variable */ + font-weight: bold; /* Makes text weight stronger than the default*/ +} + +/* Style for ordered and unordered lists */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Padding around paragraphs */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style for links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Use the colour of the parent element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles just for the .wrap class */ + +.wrap { + /* Make content wrap over mutiple rows */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* For creating fancy boxes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles for the div tags that are inside a .wrap class */ + +.wrap > div { + width: 14rem; +} + +/* Styles for the img tags that are inside a .wrap class */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles for the p tags that are inside a .wrap class */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specific styles for this project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Used to make a large emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specific styles for this project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* right and bottom shadow size, blur, spread and colour */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Printed photo style */ + +.photo { + border: 1px solid #D0D0D0; /* Add a solid border */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* right and bottom shadow, blur, spread and colour */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/es-419/code/what-is-d-and-d/sunflowers.JPG b/es-419/code/what-is-d-and-d/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/es-419/code/what-is-d-and-d/sunflowers.JPG differ diff --git a/es-419/code/what-is-d-and-d/sunset-beach.JPG b/es-419/code/what-is-d-and-d/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/es-419/code/what-is-d-and-d/sunset-beach.JPG differ diff --git a/es-419/code/what-is-d-and-d/sunset-person.jpg b/es-419/code/what-is-d-and-d/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/es-419/code/what-is-d-and-d/sunset-person.jpg differ diff --git a/es-419/code/what-is-d-and-d/sunset.JPG b/es-419/code/what-is-d-and-d/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/es-419/code/what-is-d-and-d/sunset.JPG differ diff --git a/es-419/code/what-is-d-and-d/sunset.css b/es-419/code/what-is-d-and-d/sunset.css new file mode 100644 index 00000000..e995f4cd --- /dev/null +++ b/es-419/code/what-is-d-and-d/sunset.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/sunshine.css b/es-419/code/what-is-d-and-d/sunshine.css new file mode 100644 index 00000000..647175fe --- /dev/null +++ b/es-419/code/what-is-d-and-d/sunshine.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/thriller.css b/es-419/code/what-is-d-and-d/thriller.css new file mode 100644 index 00000000..3403fd5c --- /dev/null +++ b/es-419/code/what-is-d-and-d/thriller.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/water-animals.css b/es-419/code/what-is-d-and-d/water-animals.css new file mode 100644 index 00000000..4c86e5fc --- /dev/null +++ b/es-419/code/what-is-d-and-d/water-animals.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/es-419/code/what-is-d-and-d/woodland.css b/es-419/code/what-is-d-and-d/woodland.css new file mode 100644 index 00000000..38edf4aa --- /dev/null +++ b/es-419/code/what-is-d-and-d/woodland.css @@ -0,0 +1,19 @@ +/* Set up colour palette and fonts using variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ebd5b3; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/es-419/images/ally.png b/es-419/images/ally.png new file mode 100644 index 00000000..c0066239 Binary files /dev/null and b/es-419/images/ally.png differ diff --git a/es-419/images/banner.png b/es-419/images/banner.png new file mode 100644 index 00000000..5d6eb8ad Binary files /dev/null and b/es-419/images/banner.png differ diff --git a/es-419/images/favourite.png b/es-419/images/favourite.png new file mode 100644 index 00000000..432fbc7b Binary files /dev/null and b/es-419/images/favourite.png differ diff --git a/es-419/images/filter.png b/es-419/images/filter.png new file mode 100644 index 00000000..35d48567 Binary files /dev/null and b/es-419/images/filter.png differ diff --git a/es-419/images/pico.png b/es-419/images/pico.png new file mode 100644 index 00000000..8997540f Binary files /dev/null and b/es-419/images/pico.png differ diff --git a/es-419/images/step-three.PNG b/es-419/images/step-three.PNG new file mode 100644 index 00000000..426f2a2f Binary files /dev/null and b/es-419/images/step-three.PNG differ diff --git a/es-419/images/step-two.jpg b/es-419/images/step-two.jpg new file mode 100644 index 00000000..6b95a1d3 Binary files /dev/null and b/es-419/images/step-two.jpg differ diff --git a/es-419/meta.yml b/es-419/meta.yml new file mode 100644 index 00000000..75c85b8f --- /dev/null +++ b/es-419/meta.yml @@ -0,0 +1,27 @@ +title: Build a webpage +hero_image: images/banner.png +description: Build a webpage about something you want to share. +meta_title: Learn web development for beginners | Build a webpage +meta_description: Learn web development for beginners with the Raspberry Pi Foundation. Build a webpage with a variety of HTML elements. Add CSS classes to style your page. +version: 4 +listed: true +copyedit: true +last_tested: "2021-03-26" +steps: + - + title: Introduction + - + title: Your topic + - + title: Build and test + completion: engaged + - + title: Share + completion: internal + - + title: Reflection + completion: external + - + title: Upgrade your project + - + title: What next? diff --git a/es-419/step_1.md b/es-419/step_1.md new file mode 100644 index 00000000..6f2ff896 --- /dev/null +++ b/es-419/step_1.md @@ -0,0 +1,103 @@ +## Introduction + +In this project you will use the skills you have developed in the [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path to create a webpage about something you want to share. + +

+The World Wide Web or web is a vast collection of connected webpages. The web allows people to view content from all over the world and create their own webpages to share with others. Can you imagine what life was like before the web? +

+ +You will: + +- Build a webpage to share information with others +- Create a webpage using multiple sections with a variety of HTML elements +- Use and customise or add CSS classes to style your page + +\--- no-print --- + +\--- task --- + +### Try it + +
+
+Can you identify the HTML elements that are used in this project? How has CSS been used to style and animate the page? +
+ +**Favourite things**: [See inside](https://editor.raspberrypi.org/en/projects/favourite-things){:target="_blank"} +
+ +
+ +
+ +\--- /task --- + +\--- /no-print --- + +
+ +### PROJECT BRIEF: Build a webpage + +
+ +Create a webpage about a topic that you find interesting and want to share with others. It could be helpful information for pet owners, a page of your favourite jokes, a walkthrough for a game you enjoy, some advice you have found helpful, a list of useful websites, or whatever you want to share with webpage visitors. + +Your webpage should: + +- Have multiple sections that contain different types of content including text and images, emojis, headings, quotations, lists, or links +- Use a colour palette, fonts, and CSS styles that work well together +- Be accessible by using good colour contrast and font sizes + +Your webpage could: + +- Use custom CSS classes that you create and apply +- Use animations or flip cards to create interest +- Be shared to the Raspberry Pi Foundation community gallery to inspire others + +
+ +\--- no-print --- + +### Get inspiration + +\--- task --- + +As you look at these webpages, consider what makes them useful and informative, as well as fun and accessible: + +⭐ Share your finished project for a chance of it being featured here. + +
+**⭐ Introduction to Raspberry Pi Pico**: [See inside](https://editor.raspberrypi.org/en/projects/raspberry-pi-pico){:target="_blank"} +
+ +
+ +**⭐ Book review**: [See inside](https://editor.raspberrypi.org/en/projects/book-review){:target="_blank"} + +
+ +
+ +**⭐ Egypt**: [See inside](https://editor.raspberrypi.org/en/projects/egypt){:target="_blank"} + +
+ +
+ +**⭐ Fashion Pi**: [See inside](https://editor.raspberrypi.org/en/projects/fashion-pi){:target="_blank"} + +
+ +
+ +\--- /task --- + +\--- /no-print --- + +\--- print-only --- + +![Complete project](images/favourite.png) +![Complete project](images/pico.png) +![Complete project](images/filter.png) + +\--- /print-only --- diff --git a/es-419/step_2.md b/es-419/step_2.md new file mode 100644 index 00000000..4a7d257e --- /dev/null +++ b/es-419/step_2.md @@ -0,0 +1,70 @@ +## Your topic + +
+
+In this step you will decide what your webpage is about. +
+
+![A hand-drawn design of the layout of a webpage.](images/step-two.jpg){:width="300px"} +
+
+ +### What do you want to share? + +\--- task --- + +Think about the purpose of your webpage. + +It could be: + +- ℹ️ An information page about a topic you are interested in +- 🔗 A collection of links to the best webpages on a topic +- 🧧 Information about a celebration or an event from your culture +- 😜 Your favourite (polite!) jokes +- 🎮 A game walkthrough or other tutorial +- 🐙 Information about a pet or an animal +- 💬 Some advice that you have found helpful +- 🏞️ Tourist information about a place you have visited or would like to visit +- 👩🏿‍🦼 Information about a medical condition or disability that you think more people should be aware of + +**Tip:** Try to choose a topic that you already know something about. This is so you can spend your time building your webpage, not researching a topic. + +\--- /task --- + +### Who is it for? + +\--- task --- + +Who are you making your webpage for? You may find it helpful to think about the types of visitors you want to make your page for. + +- How old will your visitors be? +- How much will they know about your topic? +- Is the page for other experts in your topic or is it for beginners? + +**Tip:** If you make a page about a topic you know lots about, make sure you explain it clearly to other people. + +\--- /task --- + +### Get started + +\--- task --- + +If you have paper and a pen or pencil, you could sketch out your webpage layout. + +You could also make a bullet point list of information that you want to include. + +\--- /task --- + +\--- task --- + +Open the [Build a webpage starter project](https://editor.raspberrypi.org/en/projects/build-a-web-page-starter){:target="_blank"}. The code editor will open in another browser tab. + +\--- /task --- + +\--- task --- + +Change the `` element text to the title of your page. + +[[[web-add-title-head]]] + +\--- /task --- diff --git a/es-419/step_3.md b/es-419/step_3.md new file mode 100644 index 00000000..5c12159c --- /dev/null +++ b/es-419/step_3.md @@ -0,0 +1,205 @@ +## Build and test + +<div style="display: flex; flex-wrap: wrap"> +<div style="flex-basis: 200px; flex-grow: 1; margin-right: 15px;"> +Now it's time to build your webpage. + +</div> +<div> +![alt=""](images/step-three.PNG){:width="300px"} +</div> +</div> + +**Tip:** Plan your project so you can create a basic webpage in the time you have available and then upgrade the project if you have time left. + +**Tip:** Remember to test your project each time you add something. It is much easier to find and fix bugs before you make more changes. + +\--- task --- + +You have built up some really useful skills. Here is a reminder to help you make your webpage: + +### Colour palette + +[[[web-colour-palette-variables]]] + +Use or personalise starter project colour palettes. + +[[[hex-colour-palettes]]] + +[[[web-colour-palette]]] + +Create a colour palette from an image. + +[[[rpfeditor-image-library]]] + +[[[colours-from-image]]] + +Customise colour palettes for style and accessibility. + +[[[contrast-checker]]] + +[[[add-colour-variables]]] + +Use your colour palettes to set text and background colours. + +[[[web-primary-secondary]]] + +### Structure + +[[[overall-page-structure]]] + +[[[full-width-section]]] + +[[[full-width-quote]]] + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +Webpages can be viewed on many different devices and should be <span style="color: #0faeb0">**responsive**</span> to each device. This means that if a user views your website on a mobile phone, it should respond to a smaller screen and if they view it on a desktop PC, it should respond to a larger screen. +</p> + +[[[using-rem]]] + +CSS can also be used to responsively change the layout of the webpage. + +[[[side-by-side-section]]] + +[[[wrapped-regular-width]]] + +[[[wrapped-wide-narrow]]] + +[[[web-large-text-tiles]]] + +[[[three-text-tiles]]] + +[[[text-image-text]]] + +[[[web-wrap-gap]]] + +Align and space your content to improve the look of your webpage. + +[[[web-x-y-centering]]] + +[[[padding-margins]]] + +### Fonts and text elements + +Choose fonts to use on your webpage. + +[[[included-fonts]]] + +[[[web-fonts]]] + +[[[google-fonts]]] + +You can use placeholder text while you work on your layout. + +[[[add-placeholder-text]]] + +Insert text elements. + +[[[web-ordered-list]]] + +[[[web-unordered-list]]] + +[[[full-width-quote]]] + +Style your text. + +[[[web-headers-large-text]]] + +[[[web-center-text]]] + +[[[web-strong-em]]] + +### Images + +Insert an image from the starter project library. + +[[[trinket-image-library]]] + +[[[web-alt-text]]] + +Use an emoji as an image. + +[[[choose-an-emoji]]] + +[[[huge-emoji]]] + +Add a background image. + +[[[web-background-image]]] + +[[[add-transparency]]] + +**Tip:** You can style your images with rounded corners or borders. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[web-box-shadow]]] + +### Animations + +Create web flip cards. + +[[[web-flip-cards]]] + +Use animations to change the appearance or position of elements on your page over time. + +[[[web-starter-animations]]] + +[[[web-customise-animations]]] + +### More style + +Add more style to any elements on your webpage. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[add-a-gradient]]] + +[[[web-animate-span]]] + +[[[web-box-shadow]]] + +You can create your own class to make a new style. + +[[[web-add-class]]] + +\--- /task --- + +\--- task --- + +**Test:** Show someone else your project and get their feedback. Do you want to make any changes to your webpage? + +**Tip:** Now is a good time to add comments to your code to make it easier to debug and upgrade. Comments also help other people read you code. + +[[[web-comment-code]]] + +\--- /task --- + +\--- task --- + +**Debug:** You might find some bugs in your HTML or CSS that you need to fix. Here are some common bugs. + +**My webpage isn't displaying correctly** + +[[[incorrect-tags]]] + +[[[mismatched-tags]]] + +**Further debug questions** + +[[[image-not-displayed]]] + +[[[font-not-displayed]]] + +[[[web-debug-link]]] + +You might find a bug not listed here. Can you figure out how to fix the bug? + +We love hearing about your bugs and how you fixed them. Use the **Send feedback** button at the bottom of this page if you found a different bug in your project. + +\--- /task --- diff --git a/es-419/step_4.md b/es-419/step_4.md new file mode 100644 index 00000000..6b9ae42d --- /dev/null +++ b/es-419/step_4.md @@ -0,0 +1,9 @@ +## Share + +Now is the time to share your webpage so that it can receive visitors. + +**Note:** Remember to check that you haven't included any personal information in your webpage. + +Why not show your project to one of your friends? + +Why not invite your friends to create a project? Let them know how you had fun. diff --git a/es-419/step_5.md b/es-419/step_5.md new file mode 100644 index 00000000..00f06749 --- /dev/null +++ b/es-419/step_5.md @@ -0,0 +1,79 @@ +## Reflection + +Did you meet the **project brief**? Think about your project and go through the checklist below and check off the points that apply to your project. + +Does your webpage have: + +\--- task --- + +Multiple sections that contain different types of content, such as text and images, emojis, headings, quotations, lists, or links? + +\--- /task --- + +\--- task --- + +A colour palette, fonts, and CSS styles that work well together? You could ask other people for their opinion, but you don't have to make changes if you don't agree with them. + +\--- /task --- + +\--- task --- + +Accessibility through a good colour contrast and easily readable font sizes? + +\--- /task --- + +Your webpage could: + +\--- task --- + +Use custom CSS classes that you created and applied. + +\--- /task --- + +\--- task --- + +Use animations or flip cards to create interest. + +\--- /task --- + +\--- task --- + +Be shared to the Raspberry Pi Foundation community gallery to inspire others. + +\--- /task --- + +When you reflect on how you made your webpage, it will help you in your future projects. + +Answer the questions below. You can draw, write, type in a document, talk to someone, or answer the questions in your own creative way that works best for you. + +\--- task --- + +How did you choose the topic for your webpage? + +\--- /task --- + +\--- task --- + +Which HTML or CSS technique do you like best? + +\--- /task --- + +\--- task --- + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +"Design isn't finished until someone is using it." (Brenda Laurel). +</p> + +In the 'Introduction to web' path you used lots of different design skills, including visual design, design for accessibility and user experience, and technical design. Which type of design do you enjoy most? + +\--- /task --- + +### Now you are a web content developer! + +Take a moment to celebrate what you have made. + +\--- task --- + +Where will you take your new powers? Who will you show your webpages to? What will you make next? + +\--- /task --- diff --git a/es-419/step_6.md b/es-419/step_6.md new file mode 100644 index 00000000..323aa18e --- /dev/null +++ b/es-419/step_6.md @@ -0,0 +1,53 @@ +## Upgrade your project + +If you have time, you can upgrade your webpage. You might already have ideas to add to your webpage or you might want to go back to the first step and look at other example projects again for more inspiration. + +Each example project in the [Introduction](.) has a ‘See Inside’ link for you to open the project and look at the code to get ideas and see how they work. + +\--- task --- + +On your webpage, you could improve the: + +**Visual design** + +- The layout +- Colours +- Fonts +- Emojis +- Graphics +- Borders and box shadows +- Gradients +- Background images + +**Accessibility** + +- Colour contrast +- Font sizes +- `alt` text on images + +**Content** + +- The words you have used. +- Can you add more useful information? +- Would a list be more effective? +- Should you use different heading elements? +- Are there other webpages that you could link to? + +**User experience** + +- Is your page well laid out so that information is easy to find? +- If you have used animation, make sure it is not too distracting for visitors to your webpage. + +**Technical design** + +- Consider whether you could organise your CSS properties into classes that you would want to reuse. +- Make sure you have used sensible names for CSS classes. +- Add helpful comments to your HTML and CSS. + +\--- /task --- + +**Dungeons and Dragons Example**: [See inside](https://editor.raspberrypi.org/en/projects/what-is-d-and-d){:target="_blank"} + +<div> +<iframe src="https://editor.raspberrypi.org/en/embed/viewer/what-is-d-and-d" width="600" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe> +</div> diff --git a/es-419/step_7.md b/es-419/step_7.md new file mode 100644 index 00000000..61419a70 --- /dev/null +++ b/es-419/step_7.md @@ -0,0 +1,11 @@ +## What next? + +You have reached the end of the [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path! + +Now you can create webpages on any topic you are interested in and share them. Try using HTML and CSS to design and build more webpages. If you want to continue learning about web development, you can have a look at the [More Web](https://projects.raspberrypi.org/en/pathways/more-web) path. + +You could enter one of your Design or Invent projects into Coolest Projects, or make a completely new webpage. + +[[[web-coolest-projects]]] + +You can also explore our [other web projects](https://projects.raspberrypi.org/en/projects?software%5B%5D=html-css-javascript) and try them out. diff --git a/es-419/web-comments.txt b/es-419/web-comments.txt new file mode 100644 index 00000000..d15eaf89 --- /dev/null +++ b/es-419/web-comments.txt @@ -0,0 +1,21 @@ +Title shown in web browsers + +Import fonts from Google + +Include CSS style file + +The page header code goes here + +The main content for the web page goes between the main tags + +A section with an image on the left and text on the right + +A section with two bulleted lists + +A heading for the inputs section + +Three flip cards with images on one side and text on the other + +A heading for the outputs section + +Footer with text and a hyperlink diff --git a/fr-FR/code/book-review/animation.css b/fr-FR/code/book-review/animation.css new file mode 100644 index 00000000..8bbe2da1 --- /dev/null +++ b/fr-FR/code/book-review/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* exécute l'animation 'rotate-centre' avec un timing linéaire (même rythme tout au long) pendant huit secondes. Exécute l'animation deux fois. */ + display: inline-block; /* Important pour que l'élément animé ne soit pas divisé sur une nouvelle ligne */ +} + +@keyframes rotate-center { + /* Le code d'animation de rotation */ + 0% { + /* Rotation de 0 à 360 degrés */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* exécute l'animation 'bounce' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation trois fois. */ + display: inline-block; +} + +@keyframes bounce { + /* Le code de l'animation de rebond */ + 0% { + transform: scale(1, 1) translateY(0); /* Position de départ et taille réelle */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Augmenter la largeur et réduire la hauteur pour un effet d'écrasement avant le rebond */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Remettre l'emoji à la position de départ */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* exécute l'animation 'scale' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation indéfiniment. */ + display: inline-block; +} + +@keyframes scale { + /* Le code d'animation d'échelle */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* Le code de l'animation du roulement */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* Le code de l'animation du roulement */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* Le code d'animation de déplacement */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* Le code d'animation de déplacement */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/fr-FR/code/book-review/beetle.jpg b/fr-FR/code/book-review/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/fr-FR/code/book-review/beetle.jpg differ diff --git a/fr-FR/code/book-review/butterfly.JPG b/fr-FR/code/book-review/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/fr-FR/code/book-review/butterfly.JPG differ diff --git a/fr-FR/code/book-review/cacti.JPG b/fr-FR/code/book-review/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/fr-FR/code/book-review/cacti.JPG differ diff --git a/fr-FR/code/book-review/cafe.css b/fr-FR/code/book-review/cafe.css new file mode 100644 index 00000000..775f9862 --- /dev/null +++ b/fr-FR/code/book-review/cafe.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/fr-FR/code/book-review/cafe.jpg b/fr-FR/code/book-review/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/fr-FR/code/book-review/cafe.jpg differ diff --git a/fr-FR/code/book-review/candles.JPG b/fr-FR/code/book-review/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/fr-FR/code/book-review/candles.JPG differ diff --git a/fr-FR/code/book-review/carnival.jpg b/fr-FR/code/book-review/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/fr-FR/code/book-review/carnival.jpg differ diff --git a/fr-FR/code/book-review/colour-festival.jpg b/fr-FR/code/book-review/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/fr-FR/code/book-review/colour-festival.jpg differ diff --git a/fr-FR/code/book-review/comic-books.jpg b/fr-FR/code/book-review/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/fr-FR/code/book-review/comic-books.jpg differ diff --git a/fr-FR/code/book-review/comic.css b/fr-FR/code/book-review/comic.css new file mode 100644 index 00000000..06de956e --- /dev/null +++ b/fr-FR/code/book-review/comic.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/fr-FR/code/book-review/companion.css b/fr-FR/code/book-review/companion.css new file mode 100644 index 00000000..e15f380a --- /dev/null +++ b/fr-FR/code/book-review/companion.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/fr-FR/code/book-review/crayons.jpg b/fr-FR/code/book-review/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/fr-FR/code/book-review/crayons.jpg differ diff --git a/fr-FR/code/book-review/default.css b/fr-FR/code/book-review/default.css new file mode 100644 index 00000000..418acba6 --- /dev/null +++ b/fr-FR/code/book-review/default.css @@ -0,0 +1,20 @@ + +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/disco-ball.jpg b/fr-FR/code/book-review/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/fr-FR/code/book-review/disco-ball.jpg differ diff --git a/fr-FR/code/book-review/disco-flowers.JPG b/fr-FR/code/book-review/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/fr-FR/code/book-review/disco-flowers.JPG differ diff --git a/fr-FR/code/book-review/disco.css b/fr-FR/code/book-review/disco.css new file mode 100644 index 00000000..f70a924f --- /dev/null +++ b/fr-FR/code/book-review/disco.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/fr-FR/code/book-review/drone.JPG b/fr-FR/code/book-review/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/fr-FR/code/book-review/drone.JPG differ diff --git a/fr-FR/code/book-review/exotic-plants.jpg b/fr-FR/code/book-review/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/fr-FR/code/book-review/exotic-plants.jpg differ diff --git a/fr-FR/code/book-review/ferns.jpg b/fr-FR/code/book-review/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/fr-FR/code/book-review/ferns.jpg differ diff --git a/fr-FR/code/book-review/festival.css b/fr-FR/code/book-review/festival.css new file mode 100644 index 00000000..9b7a1964 --- /dev/null +++ b/fr-FR/code/book-review/festival.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/fiesta.css b/fr-FR/code/book-review/fiesta.css new file mode 100644 index 00000000..fc4108cb --- /dev/null +++ b/fr-FR/code/book-review/fiesta.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/fr-FR/code/book-review/fire.jpg b/fr-FR/code/book-review/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/fr-FR/code/book-review/fire.jpg differ diff --git a/fr-FR/code/book-review/fish.jpg b/fr-FR/code/book-review/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/fr-FR/code/book-review/fish.jpg differ diff --git a/fr-FR/code/book-review/forest.JPG b/fr-FR/code/book-review/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/fr-FR/code/book-review/forest.JPG differ diff --git a/fr-FR/code/book-review/game-boy.jpg b/fr-FR/code/book-review/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/fr-FR/code/book-review/game-boy.jpg differ diff --git a/fr-FR/code/book-review/globe-in-water.JPG b/fr-FR/code/book-review/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/fr-FR/code/book-review/globe-in-water.JPG differ diff --git a/fr-FR/code/book-review/greenhouse.JPG b/fr-FR/code/book-review/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/fr-FR/code/book-review/greenhouse.JPG differ diff --git a/fr-FR/code/book-review/helpful-plumber.css b/fr-FR/code/book-review/helpful-plumber.css new file mode 100644 index 00000000..7e148622 --- /dev/null +++ b/fr-FR/code/book-review/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/fr-FR/code/book-review/illustrations.png b/fr-FR/code/book-review/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/fr-FR/code/book-review/illustrations.png differ diff --git a/fr-FR/code/book-review/index.html b/fr-FR/code/book-review/index.html new file mode 100644 index 00000000..537b723a --- /dev/null +++ b/fr-FR/code/book-review/index.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="ie=edge" /> + + <!-- Title shown in web browsers--> + <title>Et avec Tango, nous voilà trois ! + + + + + + + + + + + + + + + +
+

Et avec Tango, nous voilà trois !

+
+ + +
+
+

Ma critique de livre.

+
+
+ Description de l'image. +
+
+
+

« Et avec Tango, nous voilà trois ! est une histoire incroyable qui a remporté de nombreux prix et à lire absolument »

+ - moi. +
+
+
+
+

J'ai trouvé ce livre génial et il est basé sur une histoire vraie, ce qui permet d'apprendre beaucoup de choses.

+
+

Je ne vais pas spoiler le livre, mais il s'agit de deux pingouins mâles, Roy et Silo, qui reçoivent un œuf et créent une famille du même sexe.

+
+

Il est très important de lire sur la diversité des familles.

+
+

Raisons de lire le résumé de Et avec Tango, nous voilà trois ! :

+
+ +
+ + +
+
+
+

Raison 1

+
+ +
+

Il a remporté de nombreux prix - et je dis bien de nombreux prix

+
+
+
+ +
+
+
+

Raison 2

+
+ +
+

C'est basé sur une histoire vraie, donc vous en apprenez beaucoup sur la nature

+
+
+
+ +
+
+
+

Raison 3

+
+ +
+

Certains adultes l'ont interdit, mais nous sommes les mieux placés pour le savoir

+
+
+
+
+
+
+ + + + + + + diff --git a/fr-FR/code/book-review/lake-mountains.JPG b/fr-FR/code/book-review/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/fr-FR/code/book-review/lake-mountains.JPG differ diff --git a/fr-FR/code/book-review/land-animals.css b/fr-FR/code/book-review/land-animals.css new file mode 100644 index 00000000..39ae6e74 --- /dev/null +++ b/fr-FR/code/book-review/land-animals.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/medal.jpg b/fr-FR/code/book-review/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/fr-FR/code/book-review/medal.jpg differ diff --git a/fr-FR/code/book-review/medals.css b/fr-FR/code/book-review/medals.css new file mode 100644 index 00000000..ae3722cd --- /dev/null +++ b/fr-FR/code/book-review/medals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/money.css b/fr-FR/code/book-review/money.css new file mode 100644 index 00000000..90e2a478 --- /dev/null +++ b/fr-FR/code/book-review/money.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/fr-FR/code/book-review/monkey.JPG b/fr-FR/code/book-review/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/fr-FR/code/book-review/monkey.JPG differ diff --git a/fr-FR/code/book-review/moon-art.png b/fr-FR/code/book-review/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/fr-FR/code/book-review/moon-art.png differ diff --git a/fr-FR/code/book-review/mushroom.JPG b/fr-FR/code/book-review/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/fr-FR/code/book-review/mushroom.JPG differ diff --git a/fr-FR/code/book-review/nature.css b/fr-FR/code/book-review/nature.css new file mode 100644 index 00000000..7dcba5a5 --- /dev/null +++ b/fr-FR/code/book-review/nature.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/pansies.JPG b/fr-FR/code/book-review/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/fr-FR/code/book-review/pansies.JPG differ diff --git a/fr-FR/code/book-review/pastel-hearts.jpg b/fr-FR/code/book-review/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/fr-FR/code/book-review/pastel-hearts.jpg differ diff --git a/fr-FR/code/book-review/pastel.css b/fr-FR/code/book-review/pastel.css new file mode 100644 index 00000000..04adedb6 --- /dev/null +++ b/fr-FR/code/book-review/pastel.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/piggy-bank.jpg b/fr-FR/code/book-review/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/fr-FR/code/book-review/piggy-bank.jpg differ diff --git a/fr-FR/code/book-review/placeholder.png b/fr-FR/code/book-review/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/fr-FR/code/book-review/placeholder.png differ diff --git a/fr-FR/code/book-review/primary.css b/fr-FR/code/book-review/primary.css new file mode 100644 index 00000000..2bc745d4 --- /dev/null +++ b/fr-FR/code/book-review/primary.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/project_config.yml b/fr-FR/code/book-review/project_config.yml new file mode 100644 index 00000000..ad7c3f54 --- /dev/null +++ b/fr-FR/code/book-review/project_config.yml @@ -0,0 +1,3 @@ +name: 'Critique de livre' +identifier: 'book-review' +type: 'html' diff --git a/fr-FR/code/book-review/pumpkins.JPG b/fr-FR/code/book-review/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/fr-FR/code/book-review/pumpkins.JPG differ diff --git a/fr-FR/code/book-review/rainbow-forest.JPG b/fr-FR/code/book-review/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/fr-FR/code/book-review/rainbow-forest.JPG differ diff --git a/fr-FR/code/book-review/rhino.JPG b/fr-FR/code/book-review/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/fr-FR/code/book-review/rhino.JPG differ diff --git a/fr-FR/code/book-review/smokey.css b/fr-FR/code/book-review/smokey.css new file mode 100644 index 00000000..e1991f74 --- /dev/null +++ b/fr-FR/code/book-review/smokey.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/space.css b/fr-FR/code/book-review/space.css new file mode 100644 index 00000000..d2a0230f --- /dev/null +++ b/fr-FR/code/book-review/space.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/spider-web.jpg b/fr-FR/code/book-review/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/fr-FR/code/book-review/spider-web.jpg differ diff --git a/fr-FR/code/book-review/style.css b/fr-FR/code/book-review/style.css new file mode 100644 index 00000000..40f542b3 --- /dev/null +++ b/fr-FR/code/book-review/style.css @@ -0,0 +1,335 @@ +/* Associations de couleurs */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Appliquer partout */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Remplissage et bordure ne rendent pas une boite plus grande */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Faire remplir le contenu de la page pour que le pied de page soit en bas */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* ajouter une image d'arrière-plan au corps */ + +body { + /*background-image: url('name.jpg');*/ /* Décommenter et changer le nom du fichier pour ajouter une image d'arrière-plan */ + /*background-repeat: repeat;*/ /* Fait répéter l'image */ + /*background-size: cover;*/ /* Fait en sorte que l'image recouvre tout le conteneur */ +} + +/* Le contenu principal de la page entre l'en-tête et le pied de page */ +main { + background: var(--primary); /* Colore l'arrière-plan */ + color: var(--onprimary); /* Colore le texte */ + margin: 0 auto; /* Centre si le navigateur est vraiment large */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Espace avant le pied de page */ +} + +/* Styles des éléments d'en-tête et de pied de page */ + +header, +footer { + text-align: center; + width: 100%; /* Remplit toute la largeur de la fenêtre */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Styles de sections */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Styles de bordure */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Ajoute un solide */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Ajoute une ligne continue au-dessus du pied de page */ +} + +/* Ajouter un effet de transparence */ + +.transparent { + opacity: 0.95; +} + +/* Styles uniquement pour les éléments h1 */ + +h1 { + font: var(--header-font); /* Style de police stocké dans la variable header-font */ + padding: 2rem; + margin: 0; /* Centre si le navigateur est vraiment large */ +} + +/* Styles uniquement pour les éléments h2 */ + +h2 { + font: var(--title-font); /* Style de police stocké dans la variable title-font */ +} + +/* Surligner les mots clés en gras et appliquer une couleur de texte alternative */ + +strong { + color: var(--detail1); /* Couleur du texte stockée dans la variable de légende */ + font-weight: bold; /* Renforce le poids du texte par rapport à la valeur par défaut*/ +} + +/* Style pour les listes ordonnées et non ordonnées */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Remplissage autour des paragraphes */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style pour les liens */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Utilise la couleur de l'élément parent */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles uniquement pour la classe .wrap */ + +.wrap { + /* Faire en sorte que le contenu s'étende sur plusieurs lignes */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* Pour créer des boites fantaisie */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles pour les balises div qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > div { + width: 14rem; +} + +/* Styles pour les balises img qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles pour les balises p qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Styles spécifiques pour ce projet */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Utilisé pour faire un grand emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Styles spécifiques pour ce projet */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* taille de l'ombre droite et inférieure, flou, répartition et couleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Style de photo imprimée */ + +.photo { + border: 1px solid #D0D0D0; /* Ajoute une bordure pleine */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* ombre droite et inférieure, flou, répartition et couleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/fr-FR/code/book-review/sunflowers.JPG b/fr-FR/code/book-review/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/fr-FR/code/book-review/sunflowers.JPG differ diff --git a/fr-FR/code/book-review/sunset-beach.JPG b/fr-FR/code/book-review/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/fr-FR/code/book-review/sunset-beach.JPG differ diff --git a/fr-FR/code/book-review/sunset-person.jpg b/fr-FR/code/book-review/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/fr-FR/code/book-review/sunset-person.jpg differ diff --git a/fr-FR/code/book-review/sunset.JPG b/fr-FR/code/book-review/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/fr-FR/code/book-review/sunset.JPG differ diff --git a/fr-FR/code/book-review/sunset.css b/fr-FR/code/book-review/sunset.css new file mode 100644 index 00000000..e1f836fc --- /dev/null +++ b/fr-FR/code/book-review/sunset.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/sunshine.css b/fr-FR/code/book-review/sunshine.css new file mode 100644 index 00000000..a1ce6165 --- /dev/null +++ b/fr-FR/code/book-review/sunshine.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/tango.jpeg b/fr-FR/code/book-review/tango.jpeg new file mode 100644 index 00000000..d91acb15 Binary files /dev/null and b/fr-FR/code/book-review/tango.jpeg differ diff --git a/fr-FR/code/book-review/thriller.css b/fr-FR/code/book-review/thriller.css new file mode 100644 index 00000000..1a470a3e --- /dev/null +++ b/fr-FR/code/book-review/thriller.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/water-animals.css b/fr-FR/code/book-review/water-animals.css new file mode 100644 index 00000000..c2e79a56 --- /dev/null +++ b/fr-FR/code/book-review/water-animals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/book-review/woodland.css b/fr-FR/code/book-review/woodland.css new file mode 100644 index 00000000..e2e38458 --- /dev/null +++ b/fr-FR/code/book-review/woodland.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/animation.css b/fr-FR/code/build-a-web-page-starter/animation.css new file mode 100644 index 00000000..eaa54e61 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* exécute l'animation 'rotate-centre' avec un timing linéaire (même rythme tout au long) pendant huit secondes. Exécute l'animation deux fois. */ + display: inline-block; /* Important pour que l'élément animé ne soit pas divisé sur une nouvelle ligne */ +} + +@keyframes rotate-center { + /* Le code d'animation de rotation */ + 0% { + /* Rotation de 0 à 360 degrés */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* exécute l'animation 'bounce' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation trois fois. */ + display: inline-block; +} + +@keyframes bounce { + /* Le code de l'animation de rebond */ + 0% { + transform: scale(1, 1) translateY(0); /* Position de départ et taille réelle */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Augmenter la largeur et réduire la hauteur pour un effet d'écrasement avant le rebond */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Revenir à la taille réelle et déplacer l'emoji de 100 pixels par rapport à la position actuelle */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Remettre l'emoji à la position de départ */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* exécute l'animation 'scale' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation indéfiniment. */ + display: inline-block; +} + +@keyframes scale { + /* Le code d'animation d'échelle */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* Le code de l'animation du roulement */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* Le code de l'animation du roulement */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* Le code d'animation de déplacement */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* Le code d'animation de déplacement */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/fr-FR/code/build-a-web-page-starter/beetle.jpg b/fr-FR/code/build-a-web-page-starter/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/beetle.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/butterfly.JPG b/fr-FR/code/build-a-web-page-starter/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/butterfly.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/cacti.JPG b/fr-FR/code/build-a-web-page-starter/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/cacti.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/cafe.css b/fr-FR/code/build-a-web-page-starter/cafe.css new file mode 100644 index 00000000..775f9862 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/cafe.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/cafe.jpg b/fr-FR/code/build-a-web-page-starter/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/cafe.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/candles.JPG b/fr-FR/code/build-a-web-page-starter/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/candles.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/carnival.jpg b/fr-FR/code/build-a-web-page-starter/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/carnival.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/colour-festival.jpg b/fr-FR/code/build-a-web-page-starter/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/colour-festival.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/comic-books.jpg b/fr-FR/code/build-a-web-page-starter/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/comic-books.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/comic.css b/fr-FR/code/build-a-web-page-starter/comic.css new file mode 100644 index 00000000..06de956e --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/comic.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/fr-FR/code/build-a-web-page-starter/companion.css b/fr-FR/code/build-a-web-page-starter/companion.css new file mode 100644 index 00000000..e15f380a --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/companion.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/fr-FR/code/build-a-web-page-starter/crayons.jpg b/fr-FR/code/build-a-web-page-starter/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/crayons.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/default.css b/fr-FR/code/build-a-web-page-starter/default.css new file mode 100644 index 00000000..418acba6 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/default.css @@ -0,0 +1,20 @@ + +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/disco-ball.jpg b/fr-FR/code/build-a-web-page-starter/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/disco-ball.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/disco-flowers.JPG b/fr-FR/code/build-a-web-page-starter/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/disco-flowers.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/disco.css b/fr-FR/code/build-a-web-page-starter/disco.css new file mode 100644 index 00000000..f70a924f --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/disco.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/fr-FR/code/build-a-web-page-starter/drone.JPG b/fr-FR/code/build-a-web-page-starter/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/drone.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/exotic-plants.jpg b/fr-FR/code/build-a-web-page-starter/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/exotic-plants.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/ferns.jpg b/fr-FR/code/build-a-web-page-starter/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/ferns.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/festival.css b/fr-FR/code/build-a-web-page-starter/festival.css new file mode 100644 index 00000000..9b7a1964 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/festival.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/fiesta.css b/fr-FR/code/build-a-web-page-starter/fiesta.css new file mode 100644 index 00000000..fc4108cb --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/fiesta.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/fr-FR/code/build-a-web-page-starter/fire.jpg b/fr-FR/code/build-a-web-page-starter/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/fire.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/fish.jpg b/fr-FR/code/build-a-web-page-starter/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/fish.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/forest.JPG b/fr-FR/code/build-a-web-page-starter/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/forest.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/game-boy.jpg b/fr-FR/code/build-a-web-page-starter/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/game-boy.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/globe-in-water.JPG b/fr-FR/code/build-a-web-page-starter/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/globe-in-water.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/greenhouse.JPG b/fr-FR/code/build-a-web-page-starter/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/greenhouse.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/helpful-plumber.css b/fr-FR/code/build-a-web-page-starter/helpful-plumber.css new file mode 100644 index 00000000..7e148622 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/fr-FR/code/build-a-web-page-starter/illustrations.png b/fr-FR/code/build-a-web-page-starter/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/illustrations.png differ diff --git a/fr-FR/code/build-a-web-page-starter/index.html b/fr-FR/code/build-a-web-page-starter/index.html new file mode 100644 index 00000000..757b0d91 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/index.html @@ -0,0 +1,45 @@ + + + + + + + + + Titre de mon site web + + + + + + + + + + + + + + + +
+

Grand titre

+
+ + +
+
+

Lorem ipsum dolor sit amet.

+
+
+ + + + + + diff --git a/fr-FR/code/build-a-web-page-starter/lake-mountains.JPG b/fr-FR/code/build-a-web-page-starter/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/lake-mountains.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/land-animals.css b/fr-FR/code/build-a-web-page-starter/land-animals.css new file mode 100644 index 00000000..39ae6e74 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/land-animals.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/medal.jpg b/fr-FR/code/build-a-web-page-starter/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/medal.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/medals.css b/fr-FR/code/build-a-web-page-starter/medals.css new file mode 100644 index 00000000..ae3722cd --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/medals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/money.css b/fr-FR/code/build-a-web-page-starter/money.css new file mode 100644 index 00000000..90e2a478 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/money.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/fr-FR/code/build-a-web-page-starter/monkey.JPG b/fr-FR/code/build-a-web-page-starter/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/monkey.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/moon-art.png b/fr-FR/code/build-a-web-page-starter/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/moon-art.png differ diff --git a/fr-FR/code/build-a-web-page-starter/mushroom.JPG b/fr-FR/code/build-a-web-page-starter/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/mushroom.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/nature.css b/fr-FR/code/build-a-web-page-starter/nature.css new file mode 100644 index 00000000..7dcba5a5 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/nature.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/pansies.JPG b/fr-FR/code/build-a-web-page-starter/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/pansies.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/pastel-hearts.jpg b/fr-FR/code/build-a-web-page-starter/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/pastel-hearts.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/pastel.css b/fr-FR/code/build-a-web-page-starter/pastel.css new file mode 100644 index 00000000..04adedb6 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/pastel.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/piggy-bank.jpg b/fr-FR/code/build-a-web-page-starter/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/piggy-bank.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/placeholder.png b/fr-FR/code/build-a-web-page-starter/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/placeholder.png differ diff --git a/fr-FR/code/build-a-web-page-starter/primary.css b/fr-FR/code/build-a-web-page-starter/primary.css new file mode 100644 index 00000000..43c7c072 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/primary.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/project_config.yml b/fr-FR/code/build-a-web-page-starter/project_config.yml new file mode 100644 index 00000000..48e421cc --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/project_config.yml @@ -0,0 +1,3 @@ +name: 'Créer une page web de démarrage' +identifier: 'build-a-web-page-starter' +type: 'html' diff --git a/fr-FR/code/build-a-web-page-starter/pumpkins.JPG b/fr-FR/code/build-a-web-page-starter/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/pumpkins.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/rainbow-forest.JPG b/fr-FR/code/build-a-web-page-starter/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/rainbow-forest.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/rhino.JPG b/fr-FR/code/build-a-web-page-starter/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/rhino.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/smokey.css b/fr-FR/code/build-a-web-page-starter/smokey.css new file mode 100644 index 00000000..e1991f74 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/smokey.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/space.css b/fr-FR/code/build-a-web-page-starter/space.css new file mode 100644 index 00000000..d2a0230f --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/space.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/spider-web.jpg b/fr-FR/code/build-a-web-page-starter/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/spider-web.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/style.css b/fr-FR/code/build-a-web-page-starter/style.css new file mode 100644 index 00000000..1c5380e8 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/style.css @@ -0,0 +1,316 @@ +/* Associations de couleurs */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Appliquer partout */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Remplissage et bordure ne rendent pas une boite plus grande */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Faire remplir le contenu de la page pour que le pied de page soit en bas */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* ajouter une image d'arrière-plan au corps */ + +body { + /*background-image: url('name.jpg');*/ /* Décommenter et changer le nom du fichier pour ajouter une image d'arrière-plan */ + /*background-repeat: repeat;*/ /* Fait répéter l'image */ + /*background-size: cover;*/ /* Fait en sorte que l'image recouvre tout le conteneur */ +} + +/* Le contenu principal de la page entre l'en-tête et le pied de page */ +main { + background: var(--primary); /* Colore l'arrière-plan */ + color: var(--onprimary); /* Colore le texte */ + margin: 0 auto; /* Centre si le navigateur est vraiment large */ + min-width: 25rem; /* Ne laisse pas le contenu devenir trop étroit */ + max-width: 70rem; /* Ne laisse pas le contenu devenir trop large */ + padding: 0; + padding-top: 0.5rem; /* Remplissage en haut */ + margin-bottom: 1em; /* Espace avant le pied de page */ +} + +/* Styles des éléments d'en-tête et de pied de page */ + +header, +footer { + text-align: center; + width: 100%; /* Remplit toute la largeur de la fenêtre */ + margin: 0; /* Supprime la marge par défaut */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Styles de sections */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Styles de bordure */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Ajoute un solide */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Ajoute une ligne continue au-dessus du pied de page */ +} + +/* Ajouter un effet de transparence */ + +.transparent { + opacity: 0.95; +} + +/* Styles uniquement pour les éléments h1 */ + +h1 { + font: var(--header-font); /* Style de police stocké dans la variable header-font */ + padding: 2rem; + margin: 0; /* Centre si le navigateur est vraiment large */ +} + +/* Styles uniquement pour les éléments h2 */ + +h2 { + font: var(--title-font); /* Style de police stocké dans la variable title-font */ +} + +/* Surligner les mots clés en gras et appliquer une couleur de texte alternative */ + +strong { + color: var(--detail2); /* Couleur du texte stockée dans la variable de légende */ + font-weight: bold; /* Renforce le poids du texte par rapport à la valeur par défaut*/ +} + +/* Style pour les listes ordonnées et non ordonnées */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Remplissage autour des paragraphes */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style pour les liens */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Utilise la couleur de l'élément parent */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles uniquement pour la classe .wrap */ + +.wrap { + /* Faire en sorte que le contenu s'étende sur plusieurs lignes */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* espacement horizontal et vertical */ +} + +/* Pour créer des boites fantaisie */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles pour les balises div qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > div { + width: 14rem; +} + +/* Styles pour les balises img qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles pour les balises p qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Styles spécifiques pour ce projet */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Utilisé pour faire un grand emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Styles spécifiques pour ce projet */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* taille de l'ombre droite et inférieure, flou, répartition et couleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Style de photo imprimée */ + +.photo { + border: 1px solid #D0D0D0; /* Ajoute une bordure pleine */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* ombre droite et inférieure, flou, répartition et couleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/fr-FR/code/build-a-web-page-starter/sunflowers.JPG b/fr-FR/code/build-a-web-page-starter/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/sunflowers.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/sunset-beach.JPG b/fr-FR/code/build-a-web-page-starter/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/sunset-beach.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/sunset-person.jpg b/fr-FR/code/build-a-web-page-starter/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/sunset-person.jpg differ diff --git a/fr-FR/code/build-a-web-page-starter/sunset.JPG b/fr-FR/code/build-a-web-page-starter/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/fr-FR/code/build-a-web-page-starter/sunset.JPG differ diff --git a/fr-FR/code/build-a-web-page-starter/sunset.css b/fr-FR/code/build-a-web-page-starter/sunset.css new file mode 100644 index 00000000..e1f836fc --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/sunset.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/sunshine.css b/fr-FR/code/build-a-web-page-starter/sunshine.css new file mode 100644 index 00000000..a1ce6165 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/sunshine.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/thriller.css b/fr-FR/code/build-a-web-page-starter/thriller.css new file mode 100644 index 00000000..1a470a3e --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/thriller.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/water-animals.css b/fr-FR/code/build-a-web-page-starter/water-animals.css new file mode 100644 index 00000000..c2e79a56 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/water-animals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/build-a-web-page-starter/woodland.css b/fr-FR/code/build-a-web-page-starter/woodland.css new file mode 100644 index 00000000..e2e38458 --- /dev/null +++ b/fr-FR/code/build-a-web-page-starter/woodland.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/egypt/Egypt-Valley-of-the-kings.jpg b/fr-FR/code/egypt/Egypt-Valley-of-the-kings.jpg new file mode 100644 index 00000000..cbad0b30 Binary files /dev/null and b/fr-FR/code/egypt/Egypt-Valley-of-the-kings.jpg differ diff --git a/fr-FR/code/egypt/Explore.css b/fr-FR/code/egypt/Explore.css new file mode 100644 index 00000000..6c57bec2 --- /dev/null +++ b/fr-FR/code/egypt/Explore.css @@ -0,0 +1,197 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +html{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ +height: 12%; +display: flex; +align-items: center; +} + +.logo{ +width: 50px; +cursor: pointer; +color: white; +font-size: 20px; +} + +.navbar i{ +width: 30px; +cursor: pointer; +margin-left: 40px; +} + +nav{ +flex: 1; +text-align: right; +} + +nav ul li{ +list-style: none; +display: inline-block; +margin-left: 60px; +color: white; +font-size: 13px; +} + +/* Boîtes d'information */ + +.wrapper{ +display: grid; +margin: 200px 90px auto; +grid-gap: 20px; +grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { +.wrapper{ + margin: 200px auto; +} +} +.wrapper .box{ +width: 350px; +margin: 0 auto; +position: relative; +perspective: 1000px; +border: #000000; +border-radius: 2px; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +padding-bottom: 75px; +padding-right: 75px; +} +.wrapper .box .front-face{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); +background-size: cover; +height: 220px; +width: 100%; +display: flex; +flex-direction: column; +justify-content: center; +border-radius: 2px; +border-color: #000000; +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ +font-size: 22px; +font-weight: 600; +text-transform: uppercase; +} + +.box .front-face span{ +background: linear-gradient(-135deg, #000000, #000000); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +text-align: center; +} + + +.box .back-face{ +position: absolute; +top: 0; +left: 0; +z-index: 1; +height: 220px; +width: 100%; +padding: 30px; +color: #fff; +opacity: 0; +transform-style: preserve-3d; +backface-visibility: hidden; +background: linear-gradient(-135deg, #000000, #000000); +transform: translateY(110px) rotateX(-90deg); +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +} + +.box .back-face p{ +margin-top: 10px; +text-align: justify; +} + +.box:hover .back-face{ +opacity: 1; +transform: rotateX(0deg); +} + +.box:hover .front-face{ +opacity: 0; +transform: translateY(-110px) rotateX(90deg); +} + + +/*Arrière-plans des boîtes*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg); + } + + .box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg); + } + + .box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg); + } + + .box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg); + } + + .box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg); + } + + .box .front-face.face6{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg); + } + + .box .front-face.face7{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg); + } + + .box .front-face.face{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); + } + + .box .back-face button{ + height: 60px; + width: 100%; + margin-top: 55px; + background-color: rgb(52, 52, 255); + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -ms-border-radius: 30px; + -o-border-radius: 30px; + text-align: center; + font-size: xx-large; +} + +.box .back-face a{ + text-decoration: none; +} \ No newline at end of file diff --git a/fr-FR/code/egypt/Explore.html b/fr-FR/code/egypt/Explore.html new file mode 100644 index 00000000..e3f3df9e --- /dev/null +++ b/fr-FR/code/egypt/Explore.html @@ -0,0 +1,116 @@ + + + + + + + Découvrir l'Égypte + + + +
+
+ + + +
+
+
+
+ Vallée des Rois +
+
+ Vallée des Rois +

+ Nous connaissons tous l'histoire du roi Toutankhamon et c'est ici que vous pouvez visiter sa tombe. En fait, vous pouvez visiter tous les tombeaux des rois pharaons. Ramsès, I-V et tous les autres ont été enterrés dans des tombes extravagantes remplies de richesses et de bijoux sur la rive ouest du Nil. +

+
+
+
+
+ Le Caire islamique +
+
+ Le Caire islamique +

+ Le Caire islamique est connu comme la « ville des citadelles » avec de nombreuses mosquées à visiter, notamment la mosquée du sultan Hussan et la mosquée d'albâtre, alias la mosquée de Muhammad Ali. C'est la mosquée la plus visitée de toute l'Égypte, et pour cause. +

+
+
+
+
+ Musée égyptien +
+
+ Musée égyptien +

+ D'autres musées dans le monde possèdent des objets égyptiens, mais celui-ci va au-delà. + +Cela vaut la peine de visiter le musée, car lorsque l'on visite les temples d'Égypte, il n'y a rien à l'intérieur. Ils ont tous été déplacés en toute sécurité dans le musée, où vous pouvez les voir de vos propres yeux. +

+
+
+
+
+ El Gouna +
+
+ El Gouna +

+ Pour une escapade de luxe en Égypte, El Gouna est une destination de vacances très prisée. C'est un endroit populaire pour la plongée en mer Rouge, la détente sur la plage et l'observation des dauphins. +

+
+
+
+
+ Charm El Sheik +
+
+ Charm El Sheik +

+ Sharm El Sheik est la station balnéaire la plus populaire d'Égypte, située dans la péninsule du Sinaï. C'est un autre excellent endroit pour la plongée sous-marine, mais grâce à son emplacement pratique, c'est aussi un endroit idéal pour l'aventure. Vous pouvez gravir le mont Sinaï ou faire une excursion dans le désert pour découvrir l'un des camps bédouins. +

+
+
+
+
+ Monastère de Sainte-Catherine +
+
+ Monastère de Sainte-Catherine +

+ Situé au pied du mont Sinaï, le monastère de Sainte-Catherine est une visite incontournable dans la péninsule du Sinaï. C'est l'endroit même où Dieu a parlé à Moïse sous la forme d'un buisson ardent. Datant des années 500 après J.-C., il s'agit du plus ancien monastère chrétien en activité dans le monde. +

+
+
+
+
+ Alexandrie +
+
+ Alexandrie +

+ Située au bord de la mer Méditerranée, Alexandrie est le point de rencontre entre l'Orient et l'Occident. Alexandrea a été fondée par Alexandre le Grand et a abrité l'une des sept anciennes merveilles du monde, le phare d'Alexandrie. Psst : les grandes pyramides sont une autre merveille de l'Antiquité. +

+
+
+
+
+ Visiter le ministère égyptien du tourisme +
+
+ Visiter le ministère égyptien du tourisme + +
+
+
+
+ + + \ No newline at end of file diff --git a/fr-FR/code/egypt/History.css b/fr-FR/code/egypt/History.css new file mode 100644 index 00000000..69962780 --- /dev/null +++ b/fr-FR/code/egypt/History.css @@ -0,0 +1,166 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + } + +html{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +/* Boîtes d'information */ + +.wrapper{ + display: grid; + margin: 200px 90px auto; + grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { + .wrapper{ + margin: 200px auto; + } +} +.wrapper .box{ + width: 350px; + margin: 0 auto; + position: relative; + perspective: 1000px; + border: #000000; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; + padding-bottom: 75px; + padding-right: 75px; +} +.wrapper .box .front-face{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-size: cover; + height: 220px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 2px; + border-color: #000000; + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ + font-size: 22px; + font-weight: 600; + text-transform: uppercase; +} + +.box .front-face span{ + background: linear-gradient(-135deg, #000000, #000000); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; +} + + +.box .back-face{ + position: absolute; + top: 0; + left: 0; + z-index: 1; + height: 220px; + width: 100%; + padding: 30px; + color: #fff; + opacity: 0; + transform-style: preserve-3d; + backface-visibility: hidden; + background: linear-gradient(-135deg, #000000, #000000); + transform: translateY(110px) rotateX(-90deg); + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; +} + +.box .back-face p{ + margin-top: 10px; + text-align: justify; +} + +.box:hover .back-face{ + opacity: 1; + transform: rotateX(0deg); +} + +.box:hover .front-face{ + opacity: 0; + transform: translateY(-110px) rotateX(90deg); +} + +/*Arrière-plans des boîtes*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg); +} + +.box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg); +} + +.box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg); +} + +.box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg); +} + +.box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); +} \ No newline at end of file diff --git a/fr-FR/code/egypt/History.html b/fr-FR/code/egypt/History.html new file mode 100644 index 00000000..035389ef --- /dev/null +++ b/fr-FR/code/egypt/History.html @@ -0,0 +1,85 @@ + + + + + + + L'histoire de l'Égypte + + + +
+
+ + + +
+
+
+
+ Égypte antique +
+
+ Égypte antique +

+ L’Égypte antique est divisée en trois périodes de « royaumes » – l’Ancien, le Moyen et le Nouveau – avec des périodes intermédiaires plus courtes séparant les royaumes. Avant même la période de l'Ancien Empire, les fondements de la civilisation égyptienne étaient déjà posés depuis des milliers d'années, les populations vivant près du Nil s'orientant de plus en plus vers l'agriculture sédentaire, ce qui a conduit à l'urbanisation et à des activités économiques spécialisées et non agricoles. +

+
+
+
+
+ L'Ancien Empire de l'Égypte antique +
+
+ L'Ancien Empire de l'Égypte antique +

+ Les preuves de présence humaine en Égypte remontent à des dizaines de milliers d’années. Ce n'est toutefois que vers 6000 avant notre ère que la région a commencé à se peupler. À cette époque, le désert du Sahara s’étendait. Certains scientifiques pensent que cette expansion a été causée par un léger changement dans l’inclinaison de la Terre. D'autres ont étudié l'évolution des régimes pluviométriques, mais les causes spécifiques ne sont pas tout à fait claires.
Le résultat le plus important de cette expansion du Sahara pour la civilisation humaine est qu'elle a poussé les hommes à se rapprocher du Nil à la recherche de sources d'eau fiables. +

+
+
+
+
+ Le Moyen Empire de l'Égypte Antique +
+
+ Le Moyen Empire de l'Égypte Antique +

+ Le Moyen Empire a vu l'Égypte s'unifier à nouveau, les rois ayant trouvé les moyens de reprendre le pouvoir aux gouverneurs régionaux. À partir de l'époque du Moyen Empire, les rois égyptiens ont souvent conservé des armées permanentes bien entraînées. La capacité de l'État égyptien à créer et à maintenir une force militaire permanente et à construire des fortifications montre qu'il a repris le contrôle de ressources substantielles. + La fragmentation politique a conduit à la deuxième période intermédiaire. Les dates précises ne sont pas claires ; même si l'écriture a permis de consigner davantage d'événements, la plupart d'entre eux ne l'ont pas été, et de nombreux autres documents ont été perdus ou détruits. +

+
+
+
+
+ Le Nouvel Empire de l'Égypte antique +
+
+ Le Nouvel Empire de l'Égypte antique +

+ Vers 1550 avant notre ère, la période du Nouvel Empire de l'histoire égyptienne commence avec l'expulsion des Hyksos d'Égypte et la restauration d'un contrôle politique centralisé. Cette période fut la période la plus prospère de l'Egypte et marqua le sommet de sa puissance. + C'est également à cette époque qu'Hatchepsut, la souveraine égyptienne la plus célèbre, a établi des réseaux commerciaux qui ont contribué à accroître la richesse de l'Égypte et a commandé des centaines de projets de construction et de statues, ainsi qu'un impressionnant temple funéraire à Deir el-Bahri. Elle a également ordonné la réparation des temples qui avaient été négligés ou endommagés pendant la période de domination des Hyksos. +

+
+
+
+
+ L'Egypte aujourd'hui +
+
+ L'Egypte aujourd'hui +

+ De nos jours, la monnaie, le peuple, le gouvernement et le territoire de l'Égypte ont changé et l'Égypte est devenue l'un des pays les plus importants d'Afrique et du Moyen-Orient. L'Égypte est désormais dirigée par un régime militaire, l'islam est devenu la religion principale après le christianisme. La capitale de l'Égypte est désormais Le Caire, mais le gouvernement tente de la changer en nouvelle capitale administrative. +

+
+
+
+
+ + + diff --git a/fr-FR/code/egypt/alexandria-egypt-library.jpg b/fr-FR/code/egypt/alexandria-egypt-library.jpg new file mode 100644 index 00000000..719f0a4b Binary files /dev/null and b/fr-FR/code/egypt/alexandria-egypt-library.jpg differ diff --git a/fr-FR/code/egypt/background.jpg b/fr-FR/code/egypt/background.jpg new file mode 100644 index 00000000..6dcf3d1c Binary files /dev/null and b/fr-FR/code/egypt/background.jpg differ diff --git a/fr-FR/code/egypt/card1.jpg b/fr-FR/code/egypt/card1.jpg new file mode 100644 index 00000000..ceed5b4d Binary files /dev/null and b/fr-FR/code/egypt/card1.jpg differ diff --git a/fr-FR/code/egypt/card2.jpg b/fr-FR/code/egypt/card2.jpg new file mode 100644 index 00000000..51a30437 Binary files /dev/null and b/fr-FR/code/egypt/card2.jpg differ diff --git a/fr-FR/code/egypt/card3.jpg b/fr-FR/code/egypt/card3.jpg new file mode 100644 index 00000000..39ac3b27 Binary files /dev/null and b/fr-FR/code/egypt/card3.jpg differ diff --git a/fr-FR/code/egypt/card4.jpg b/fr-FR/code/egypt/card4.jpg new file mode 100644 index 00000000..44b112e5 Binary files /dev/null and b/fr-FR/code/egypt/card4.jpg differ diff --git a/fr-FR/code/egypt/egypt-mosque-cairo.jpg b/fr-FR/code/egypt/egypt-mosque-cairo.jpg new file mode 100644 index 00000000..2b676239 Binary files /dev/null and b/fr-FR/code/egypt/egypt-mosque-cairo.jpg differ diff --git a/fr-FR/code/egypt/egypt-temples.jpg b/fr-FR/code/egypt/egypt-temples.jpg new file mode 100644 index 00000000..890c6ee6 Binary files /dev/null and b/fr-FR/code/egypt/egypt-temples.jpg differ diff --git a/fr-FR/code/egypt/flag.jpg b/fr-FR/code/egypt/flag.jpg new file mode 100644 index 00000000..cf78620f Binary files /dev/null and b/fr-FR/code/egypt/flag.jpg differ diff --git a/fr-FR/code/egypt/gouna.jpg b/fr-FR/code/egypt/gouna.jpg new file mode 100644 index 00000000..c219f9b2 Binary files /dev/null and b/fr-FR/code/egypt/gouna.jpg differ diff --git a/fr-FR/code/egypt/index.html b/fr-FR/code/egypt/index.html new file mode 100644 index 00000000..c61e7082 --- /dev/null +++ b/fr-FR/code/egypt/index.html @@ -0,0 +1,53 @@ + + + + + + + Documents + + + + + +
+
+ + + +
+
+
+

Égypte

+

La mère du monde et le début de la civilisation

+ +
+
+
+
Abou Simbel
+

Abou Simbel est un site archéologique composé de deux temples massifs taillés dans le roc, situé dans le sud de l'Égypte, sur la rive occidentale du lac Nasser. Les temples jumeaux ont été creusés à l'origine dans le flanc de la montagne sous le règne du pharaon Ramsès le Grand, au XIIIe siècle avant J.-C.

+
+
+
Oasis de Siwa
+

L'oasis de Siwa est l'un des territoires isolés d'Égypte. Située sur une ancienne route commerciale, Siwa était une oasis vitale pour la route commerciale, car les sources naturelles et les palmiers ombrageux offraient aux voyageurs un répit dans le désert.

+
+
+
Nécropole de Gizeh
+

Les pyramides de Gizeh, situées à proximité immédiate de la banlieue sud-ouest du Caire, sont incontestablement les principales attractions d'Égypte. Les pyramides de Gizeh ont été construites en l'espace de trois générations par Kheops, son second fils Khafre et Menkaure.

+
+
+
Récif de la mer Rouge
+

La mer Rouge, au large des côtes égyptiennes, est l'un des plus beaux endroits au monde pour faire de la plongée. Les eaux de la mer Rouge sont réputées pour leur visibilité spectaculaire et présentent certains des paysages marins les plus exotiques. Avec sa vaste étendue de formations coralliennes sur les récifs, il abrite des milliers de créatures marines différentes.

+
+
+
+
+ + + \ No newline at end of file diff --git a/fr-FR/code/egypt/info-box1.jpg b/fr-FR/code/egypt/info-box1.jpg new file mode 100644 index 00000000..1bc81989 Binary files /dev/null and b/fr-FR/code/egypt/info-box1.jpg differ diff --git a/fr-FR/code/egypt/info-box2.jpg b/fr-FR/code/egypt/info-box2.jpg new file mode 100644 index 00000000..c21fae32 Binary files /dev/null and b/fr-FR/code/egypt/info-box2.jpg differ diff --git a/fr-FR/code/egypt/info-box3.jpg b/fr-FR/code/egypt/info-box3.jpg new file mode 100644 index 00000000..53938681 Binary files /dev/null and b/fr-FR/code/egypt/info-box3.jpg differ diff --git a/fr-FR/code/egypt/info-box4.jpg b/fr-FR/code/egypt/info-box4.jpg new file mode 100644 index 00000000..1c69ef25 Binary files /dev/null and b/fr-FR/code/egypt/info-box4.jpg differ diff --git a/fr-FR/code/egypt/project_config.yml b/fr-FR/code/egypt/project_config.yml new file mode 100644 index 00000000..380b0d71 --- /dev/null +++ b/fr-FR/code/egypt/project_config.yml @@ -0,0 +1,3 @@ +name: 'Égypte' +identifier: 'egypt' +type: 'html' diff --git a/fr-FR/code/egypt/saint-catherines-monastery.jpg b/fr-FR/code/egypt/saint-catherines-monastery.jpg new file mode 100644 index 00000000..6fae8542 Binary files /dev/null and b/fr-FR/code/egypt/saint-catherines-monastery.jpg differ diff --git a/fr-FR/code/egypt/script.js b/fr-FR/code/egypt/script.js new file mode 100644 index 00000000..b92e609e --- /dev/null +++ b/fr-FR/code/egypt/script.js @@ -0,0 +1,23 @@ +//Nav li +var button = document.getElementById('li1'); +button.addEventListener('click', function () { + document.location.href = 'index.html'; +}); +var button = document.getElementById('li2'); +button.addEventListener('click', function () { + document.location.href = 'Histoire.html'; +}); +var button = document.getElementById('li3'); +button.addEventListener('click', function () { + document.location.href = 'Explorer.html'; +}); + +//btns +var button = document.getElementById('btn1'); +button.addEventListener('click', function () { + document.location.href = '/Explorer.html'; +}); +var button = document.getElementById('btn2'); +button.addEventListener('click', function () { + document.location.href = 'www.google.com/maps/place/Egypt'; +}); diff --git a/fr-FR/code/egypt/sharm.jpg b/fr-FR/code/egypt/sharm.jpg new file mode 100644 index 00000000..065f8017 Binary files /dev/null and b/fr-FR/code/egypt/sharm.jpg differ diff --git a/fr-FR/code/egypt/style.css b/fr-FR/code/egypt/style.css new file mode 100644 index 00000000..bc6dd623 --- /dev/null +++ b/fr-FR/code/egypt/style.css @@ -0,0 +1,122 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +.container{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-position: center; + background-size: cover; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; +} + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +.row{ + display: flex; + height: 88%; + align-items: center; +} + +.col { + flex-basis: 50%; +} + +h1{ + color: white; + font-size: 100px; +} + +p{ + color: white; + font-size: 11px; + line-height: 15px; +} + +button{ + width: 180px; + color: #000; + font-size: 12px; + padding: 12px 0; + background: whitesmoke; + border: 0; + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -ms-border-radius: 20px; + -o-border-radius: 20px; + outline: none; + margin-top: 30px; +} + +.card { + width: 200px; + height: 230px; + display: inline-block; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + padding: 15px 25px; + box-sizing: border-box; + margin: 10px 15px; + background-position: center; + background-size: cover; +} + +.card h5{ + color: white; + text-decoration: bold; +} + +.card1{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg); +} + +.card2{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg); +} + +.card3{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg); +} + +.card4{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg); +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/afrobeats.jpg b/fr-FR/code/fashion-pi/afrobeats.jpg new file mode 100644 index 00000000..1e9e37b9 Binary files /dev/null and b/fr-FR/code/fashion-pi/afrobeats.jpg differ diff --git a/fr-FR/code/fashion-pi/animation.css b/fr-FR/code/fashion-pi/animation.css new file mode 100644 index 00000000..eaa54e61 --- /dev/null +++ b/fr-FR/code/fashion-pi/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* exécute l'animation 'rotate-centre' avec un timing linéaire (même rythme tout au long) pendant huit secondes. Exécute l'animation deux fois. */ + display: inline-block; /* Important pour que l'élément animé ne soit pas divisé sur une nouvelle ligne */ +} + +@keyframes rotate-center { + /* Le code d'animation de rotation */ + 0% { + /* Rotation de 0 à 360 degrés */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* exécute l'animation 'bounce' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation trois fois. */ + display: inline-block; +} + +@keyframes bounce { + /* Le code de l'animation de rebond */ + 0% { + transform: scale(1, 1) translateY(0); /* Position de départ et taille réelle */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Augmenter la largeur et réduire la hauteur pour un effet d'écrasement avant le rebond */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Revenir à la taille réelle et déplacer l'emoji de 100 pixels par rapport à la position actuelle */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Remettre l'emoji à la position de départ */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* exécute l'animation 'scale' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation indéfiniment. */ + display: inline-block; +} + +@keyframes scale { + /* Le code d'animation d'échelle */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* Le code de l'animation du roulement */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* Le code de l'animation du roulement */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* Le code d'animation de déplacement */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* Le code d'animation de déplacement */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/fr-FR/code/fashion-pi/cafe.css b/fr-FR/code/fashion-pi/cafe.css new file mode 100644 index 00000000..775f9862 --- /dev/null +++ b/fr-FR/code/fashion-pi/cafe.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/comic.css b/fr-FR/code/fashion-pi/comic.css new file mode 100644 index 00000000..06de956e --- /dev/null +++ b/fr-FR/code/fashion-pi/comic.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/fr-FR/code/fashion-pi/companion.css b/fr-FR/code/fashion-pi/companion.css new file mode 100644 index 00000000..e15f380a --- /dev/null +++ b/fr-FR/code/fashion-pi/companion.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/fr-FR/code/fashion-pi/default.css b/fr-FR/code/fashion-pi/default.css new file mode 100644 index 00000000..418acba6 --- /dev/null +++ b/fr-FR/code/fashion-pi/default.css @@ -0,0 +1,20 @@ + +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/denim.jpg b/fr-FR/code/fashion-pi/denim.jpg new file mode 100644 index 00000000..95d6aa3f Binary files /dev/null and b/fr-FR/code/fashion-pi/denim.jpg differ diff --git a/fr-FR/code/fashion-pi/disco.css b/fr-FR/code/fashion-pi/disco.css new file mode 100644 index 00000000..f70a924f --- /dev/null +++ b/fr-FR/code/fashion-pi/disco.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/fr-FR/code/fashion-pi/festival.css b/fr-FR/code/fashion-pi/festival.css new file mode 100644 index 00000000..9b7a1964 --- /dev/null +++ b/fr-FR/code/fashion-pi/festival.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/fiesta.css b/fr-FR/code/fashion-pi/fiesta.css new file mode 100644 index 00000000..fc4108cb --- /dev/null +++ b/fr-FR/code/fashion-pi/fiesta.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/fr-FR/code/fashion-pi/flare-trousers.jpg b/fr-FR/code/fashion-pi/flare-trousers.jpg new file mode 100644 index 00000000..776f1394 Binary files /dev/null and b/fr-FR/code/fashion-pi/flare-trousers.jpg differ diff --git a/fr-FR/code/fashion-pi/helpful-plumber.css b/fr-FR/code/fashion-pi/helpful-plumber.css new file mode 100644 index 00000000..7e148622 --- /dev/null +++ b/fr-FR/code/fashion-pi/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/fr-FR/code/fashion-pi/index.html b/fr-FR/code/fashion-pi/index.html new file mode 100644 index 00000000..9c6f271b --- /dev/null +++ b/fr-FR/code/fashion-pi/index.html @@ -0,0 +1,103 @@ + + + + + + + + + Fashion Pi + + + + + + + + + + + + + + + + + + + +
+

🥻Fashion Pi 🥧

+

Tendances mode | Actualités | Potins

+
+ + +
+

Les grands retours de la mode.

+
+ Modèle homme et femme portant un bas et un haut en denim. +
+

Le denim sur denim a fait son grand retour dans la mode.

+
+
+
+
+

Les pantalons évasés ont également fait un grand retour.

+
+ Deux pantalons noirs évasés sur deux modèles féminins. +
+
+

Les dernières tendances de la mode.

+
+
+
+
+
+
+ Œuvre d'art montrant des instruments en forme de cheveux de femme et les mots Afrobats en dessous +
+
+

Afrobeats

+

L'afrobeats est un genre musical qui fait des vagues dans la mode.

+
+
+
+
+ +
+
+
+
+ Femme avec un maquillage dramatique et des perles sur le visage +
+
+

Maquillage

+

Le maquillage et la mode sont liés dans le monde de la beauté et du style personnel.

.

+
+
+
+
+ +
+
+
+

« La Fashion Week est un rendez-vous incontournable pour célébrer tous les créateurs, mannequins et magazines. Les Big 4 sont : Paris, Milan, Londres, New York. »

+ - Fashion Pi. +
+
+ +
+ + + + + + + + + diff --git a/fr-FR/code/fashion-pi/land-animals.css b/fr-FR/code/fashion-pi/land-animals.css new file mode 100644 index 00000000..39ae6e74 --- /dev/null +++ b/fr-FR/code/fashion-pi/land-animals.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/makeup-fashion.jpg b/fr-FR/code/fashion-pi/makeup-fashion.jpg new file mode 100644 index 00000000..96ef90f1 Binary files /dev/null and b/fr-FR/code/fashion-pi/makeup-fashion.jpg differ diff --git a/fr-FR/code/fashion-pi/medals.css b/fr-FR/code/fashion-pi/medals.css new file mode 100644 index 00000000..ae3722cd --- /dev/null +++ b/fr-FR/code/fashion-pi/medals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/money.css b/fr-FR/code/fashion-pi/money.css new file mode 100644 index 00000000..90e2a478 --- /dev/null +++ b/fr-FR/code/fashion-pi/money.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/fr-FR/code/fashion-pi/nature.css b/fr-FR/code/fashion-pi/nature.css new file mode 100644 index 00000000..7dcba5a5 --- /dev/null +++ b/fr-FR/code/fashion-pi/nature.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/pastel.css b/fr-FR/code/fashion-pi/pastel.css new file mode 100644 index 00000000..04adedb6 --- /dev/null +++ b/fr-FR/code/fashion-pi/pastel.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/primary.css b/fr-FR/code/fashion-pi/primary.css new file mode 100644 index 00000000..2bc745d4 --- /dev/null +++ b/fr-FR/code/fashion-pi/primary.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/project_config.yml b/fr-FR/code/fashion-pi/project_config.yml new file mode 100644 index 00000000..415eb347 --- /dev/null +++ b/fr-FR/code/fashion-pi/project_config.yml @@ -0,0 +1,3 @@ +name: 'Fashion Pi' +identifier: 'fashion-pi' +type: 'html' diff --git a/fr-FR/code/fashion-pi/smokey.css b/fr-FR/code/fashion-pi/smokey.css new file mode 100644 index 00000000..e1991f74 --- /dev/null +++ b/fr-FR/code/fashion-pi/smokey.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/space.css b/fr-FR/code/fashion-pi/space.css new file mode 100644 index 00000000..d2a0230f --- /dev/null +++ b/fr-FR/code/fashion-pi/space.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/style.css b/fr-FR/code/fashion-pi/style.css new file mode 100644 index 00000000..96560938 --- /dev/null +++ b/fr-FR/code/fashion-pi/style.css @@ -0,0 +1,335 @@ +/* Associations de couleurs */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Appliquer partout */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Remplissage et bordure ne rendent pas une boite plus grande */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Faire remplir le contenu de la page pour que le pied de page soit en bas */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* ajouter une image d'arrière-plan au corps */ + +body { + /*background-image: url('name.jpg');*/ /* Décommenter et changer le nom du fichier pour ajouter une image d'arrière-plan */ + /*background-repeat: repeat;*/ /* Fait répéter l'image */ + /*background-size: cover;*/ /* Fait en sorte que l'image recouvre tout le conteneur */ +} + +/* Le contenu principal de la page entre l'en-tête et le pied de page */ +main { + background: var(--primary); /* Colore l'arrière-plan */ + color: var(--onprimary); /* Colore le texte */ + margin: 0 auto; /* Centre si le navigateur est vraiment large */ + min-width: 25rem; /* Ne laisse pas le contenu devenir trop étroit */ + max-width: 70rem; /* Ne laisse pas le contenu devenir trop large */ + padding: 0; + padding-top: 0.5rem; /* Remplissage en haut */ + margin-bottom: 1em; /* Espace avant le pied de page */ +} + +/* Styles des éléments d'en-tête et de pied de page */ + +header, +footer { + text-align: center; + width: 100%; /* Remplit toute la largeur de la fenêtre */ + margin: 0; /* Supprime la marge par défaut */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Styles de sections */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Styles de bordure */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Ajoute un solide */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Ajoute une ligne continue au-dessus du pied de page */ +} + +/* Ajouter un effet de transparence */ + +.transparent { + opacity: 0.95; +} + +/* Styles uniquement pour les éléments h1 */ + +h1 { + font: var(--header-font); /* Style de police stocké dans la variable header-font */ + padding: 2rem; + margin: 0; /* Centre si le navigateur est vraiment large */ +} + +/* Styles uniquement pour les éléments h2 */ + +h2 { + font: var(--title-font); /* Style de police stocké dans la variable title-font */ +} + +/* Surligner les mots clés en gras et appliquer une couleur de texte alternative */ + +strong { + color: var(--detail1); /* Couleur du texte stockée dans la variable de légende */ + font-weight: bold; /* Renforce le poids du texte par rapport à la valeur par défaut*/ +} + +/* Style pour les listes ordonnées et non ordonnées */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Remplissage autour des paragraphes */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style pour les liens */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Utilise la couleur de l'élément parent */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles uniquement pour la classe .wrap */ + +.wrap { + /* Faire en sorte que le contenu s'étende sur plusieurs lignes */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* espacement horizontal et vertical */ +} + +/* Pour créer des boites fantaisie */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles pour les balises div qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > div { + width: 14rem; +} + +/* Styles pour les balises img qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles pour les balises p qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Styles spécifiques pour ce projet */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Utilisé pour faire un grand emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Styles spécifiques pour ce projet */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* taille de l'ombre droite et inférieure, flou, répartition et couleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Style de photo imprimée */ + +.photo { + border: 1px solid #D0D0D0; /* Ajoute une bordure pleine */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* ombre droite et inférieure, flou, répartition et couleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/fr-FR/code/fashion-pi/sunset.css b/fr-FR/code/fashion-pi/sunset.css new file mode 100644 index 00000000..e1f836fc --- /dev/null +++ b/fr-FR/code/fashion-pi/sunset.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/sunshine.css b/fr-FR/code/fashion-pi/sunshine.css new file mode 100644 index 00000000..a1ce6165 --- /dev/null +++ b/fr-FR/code/fashion-pi/sunshine.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/thriller.css b/fr-FR/code/fashion-pi/thriller.css new file mode 100644 index 00000000..1a470a3e --- /dev/null +++ b/fr-FR/code/fashion-pi/thriller.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/water-animals.css b/fr-FR/code/fashion-pi/water-animals.css new file mode 100644 index 00000000..c2e79a56 --- /dev/null +++ b/fr-FR/code/fashion-pi/water-animals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/fashion-pi/woodland.css b/fr-FR/code/fashion-pi/woodland.css new file mode 100644 index 00000000..e2e38458 --- /dev/null +++ b/fr-FR/code/fashion-pi/woodland.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/animation.css b/fr-FR/code/favourite-things/animation.css new file mode 100644 index 00000000..12869968 --- /dev/null +++ b/fr-FR/code/favourite-things/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Temps nécessaire à l'animation et nombre de répétitions*/ + display: inline-block; /* Important pour permettre la rotation */ +} + +@keyframes rotate-center { + /* Le code de l'animation spin me */ + 0% { + /* Rotation de 0 à 360 degrés */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* exécute l'animation 'bounce' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation deux fois. */ + display: inline-block; +} + +@keyframes bounce { + /* Le code de l'animation de rebond */ + 0% { + transform: scale(1, 1) translateY(0); /* Position de départ et taille réelle */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Augmenter la largeur et réduire la hauteur pour un effet d'écrasement avant le rebond */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Revenir à la taille réelle et déplacer l'emoji de 100 pixels par rapport à la position actuelle */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Remettre l'emoji à la position de départ */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* exécute l'animation 'scale' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation deux fois. */ + display: inline-block; +} + +@keyframes scale { + /* Le code d'animation de scintillement */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* Le code de l'animation du roulement */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* Le code de l'animation du roulement */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/fr-FR/code/favourite-things/beetle.jpg b/fr-FR/code/favourite-things/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/fr-FR/code/favourite-things/beetle.jpg differ diff --git a/fr-FR/code/favourite-things/bird.png b/fr-FR/code/favourite-things/bird.png new file mode 100644 index 00000000..bc3ecabf Binary files /dev/null and b/fr-FR/code/favourite-things/bird.png differ diff --git a/fr-FR/code/favourite-things/butterfly.JPG b/fr-FR/code/favourite-things/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/fr-FR/code/favourite-things/butterfly.JPG differ diff --git a/fr-FR/code/favourite-things/cacti.JPG b/fr-FR/code/favourite-things/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/fr-FR/code/favourite-things/cacti.JPG differ diff --git a/fr-FR/code/favourite-things/cafe.css b/fr-FR/code/favourite-things/cafe.css new file mode 100644 index 00000000..775f9862 --- /dev/null +++ b/fr-FR/code/favourite-things/cafe.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/cafe.jpg b/fr-FR/code/favourite-things/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/fr-FR/code/favourite-things/cafe.jpg differ diff --git a/fr-FR/code/favourite-things/candles.JPG b/fr-FR/code/favourite-things/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/fr-FR/code/favourite-things/candles.JPG differ diff --git a/fr-FR/code/favourite-things/carnival.jpg b/fr-FR/code/favourite-things/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/fr-FR/code/favourite-things/carnival.jpg differ diff --git a/fr-FR/code/favourite-things/colour-festival.jpg b/fr-FR/code/favourite-things/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/fr-FR/code/favourite-things/colour-festival.jpg differ diff --git a/fr-FR/code/favourite-things/comic-books.jpg b/fr-FR/code/favourite-things/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/fr-FR/code/favourite-things/comic-books.jpg differ diff --git a/fr-FR/code/favourite-things/comic.css b/fr-FR/code/favourite-things/comic.css new file mode 100644 index 00000000..06de956e --- /dev/null +++ b/fr-FR/code/favourite-things/comic.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/fr-FR/code/favourite-things/companion.css b/fr-FR/code/favourite-things/companion.css new file mode 100644 index 00000000..e15f380a --- /dev/null +++ b/fr-FR/code/favourite-things/companion.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/fr-FR/code/favourite-things/crayons.jpg b/fr-FR/code/favourite-things/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/fr-FR/code/favourite-things/crayons.jpg differ diff --git a/fr-FR/code/favourite-things/default.css b/fr-FR/code/favourite-things/default.css new file mode 100644 index 00000000..4f897d2d --- /dev/null +++ b/fr-FR/code/favourite-things/default.css @@ -0,0 +1,19 @@ + +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffffff; + --secondary: #ed923c; + --tertiary: #d8f1ee; + --page: #ffffff; + --onprimary: #664300; + --onsecondary: #ffffff; + --ontertiary: #5e5e5e; + --onpage: #750787; + --detail: #5e5e5e; + --detail2: #57b9ab; + + --body-font: 1.1rem 'Cairo', sans-serif; + --header-font: lighter 3rem 'Ceviche One', cursive; + --title-font: lighter 1.5rem 'Cairo', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/disco-ball.jpg b/fr-FR/code/favourite-things/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/fr-FR/code/favourite-things/disco-ball.jpg differ diff --git a/fr-FR/code/favourite-things/disco-flowers.JPG b/fr-FR/code/favourite-things/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/fr-FR/code/favourite-things/disco-flowers.JPG differ diff --git a/fr-FR/code/favourite-things/disco.css b/fr-FR/code/favourite-things/disco.css new file mode 100644 index 00000000..f70a924f --- /dev/null +++ b/fr-FR/code/favourite-things/disco.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/fr-FR/code/favourite-things/dog.png b/fr-FR/code/favourite-things/dog.png new file mode 100644 index 00000000..a944ece9 Binary files /dev/null and b/fr-FR/code/favourite-things/dog.png differ diff --git a/fr-FR/code/favourite-things/drone.JPG b/fr-FR/code/favourite-things/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/fr-FR/code/favourite-things/drone.JPG differ diff --git a/fr-FR/code/favourite-things/drum.png b/fr-FR/code/favourite-things/drum.png new file mode 100644 index 00000000..3fba65c8 Binary files /dev/null and b/fr-FR/code/favourite-things/drum.png differ diff --git a/fr-FR/code/favourite-things/exotic-plants.jpg b/fr-FR/code/favourite-things/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/fr-FR/code/favourite-things/exotic-plants.jpg differ diff --git a/fr-FR/code/favourite-things/fave.png b/fr-FR/code/favourite-things/fave.png new file mode 100644 index 00000000..05e1b6fb Binary files /dev/null and b/fr-FR/code/favourite-things/fave.png differ diff --git a/fr-FR/code/favourite-things/ferns.jpg b/fr-FR/code/favourite-things/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/fr-FR/code/favourite-things/ferns.jpg differ diff --git a/fr-FR/code/favourite-things/festival.css b/fr-FR/code/favourite-things/festival.css new file mode 100644 index 00000000..9b7a1964 --- /dev/null +++ b/fr-FR/code/favourite-things/festival.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/fiesta.css b/fr-FR/code/favourite-things/fiesta.css new file mode 100644 index 00000000..fc4108cb --- /dev/null +++ b/fr-FR/code/favourite-things/fiesta.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/fr-FR/code/favourite-things/fire.jpg b/fr-FR/code/favourite-things/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/fr-FR/code/favourite-things/fire.jpg differ diff --git a/fr-FR/code/favourite-things/fish.jpg b/fr-FR/code/favourite-things/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/fr-FR/code/favourite-things/fish.jpg differ diff --git a/fr-FR/code/favourite-things/forest.JPG b/fr-FR/code/favourite-things/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/fr-FR/code/favourite-things/forest.JPG differ diff --git a/fr-FR/code/favourite-things/game-boy.jpg b/fr-FR/code/favourite-things/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/fr-FR/code/favourite-things/game-boy.jpg differ diff --git a/fr-FR/code/favourite-things/globe-in-water.JPG b/fr-FR/code/favourite-things/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/fr-FR/code/favourite-things/globe-in-water.JPG differ diff --git a/fr-FR/code/favourite-things/greenhouse.JPG b/fr-FR/code/favourite-things/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/fr-FR/code/favourite-things/greenhouse.JPG differ diff --git a/fr-FR/code/favourite-things/helpful-plumber.css b/fr-FR/code/favourite-things/helpful-plumber.css new file mode 100644 index 00000000..7e148622 --- /dev/null +++ b/fr-FR/code/favourite-things/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/fr-FR/code/favourite-things/illustrations.png b/fr-FR/code/favourite-things/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/fr-FR/code/favourite-things/illustrations.png differ diff --git a/fr-FR/code/favourite-things/index.html b/fr-FR/code/favourite-things/index.html new file mode 100644 index 00000000..ebbf7552 --- /dev/null +++ b/fr-FR/code/favourite-things/index.html @@ -0,0 +1,90 @@ + + + + + + + + + Mes choses préférées + + + + + + + + + + + + + + + + + + +
+

🏆 Mes choses préférées 🏆

+
+ + +
+
+

Listes de mes choses préférées

+
+ +
+

Mes façons préférées de faire de l'art :

+
+
+ +
    +
  1. Aquarelle
    2. +
  2. Numérique
    3. +
  3. Fine liners
    4. +
+ +
+ + +
+

Mes animaux préférés :

+
+
+ +
    +
  1. Girafe
    2. +
  2. Lynx
    3. +
  3. Pingouin
    4. +
+ +
+ +
+

Mes lieux de voyage préférés :

+
+
+ +
    +
  1. Norvège
    2. +
  2. Italie
    3. +
  3. Écosse
    4. +
+ +
+ +
+ + + + + + diff --git a/fr-FR/code/favourite-things/lake-mountains.JPG b/fr-FR/code/favourite-things/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/fr-FR/code/favourite-things/lake-mountains.JPG differ diff --git a/fr-FR/code/favourite-things/land-animals.css b/fr-FR/code/favourite-things/land-animals.css new file mode 100644 index 00000000..39ae6e74 --- /dev/null +++ b/fr-FR/code/favourite-things/land-animals.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/mandala.png b/fr-FR/code/favourite-things/mandala.png new file mode 100644 index 00000000..6b072a92 Binary files /dev/null and b/fr-FR/code/favourite-things/mandala.png differ diff --git a/fr-FR/code/favourite-things/map.png b/fr-FR/code/favourite-things/map.png new file mode 100644 index 00000000..09acad40 Binary files /dev/null and b/fr-FR/code/favourite-things/map.png differ diff --git a/fr-FR/code/favourite-things/medal.jpg b/fr-FR/code/favourite-things/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/fr-FR/code/favourite-things/medal.jpg differ diff --git a/fr-FR/code/favourite-things/medals.css b/fr-FR/code/favourite-things/medals.css new file mode 100644 index 00000000..ae3722cd --- /dev/null +++ b/fr-FR/code/favourite-things/medals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/money.css b/fr-FR/code/favourite-things/money.css new file mode 100644 index 00000000..90e2a478 --- /dev/null +++ b/fr-FR/code/favourite-things/money.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/fr-FR/code/favourite-things/monkey.JPG b/fr-FR/code/favourite-things/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/fr-FR/code/favourite-things/monkey.JPG differ diff --git a/fr-FR/code/favourite-things/moon-art.png b/fr-FR/code/favourite-things/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/fr-FR/code/favourite-things/moon-art.png differ diff --git a/fr-FR/code/favourite-things/mountain.png b/fr-FR/code/favourite-things/mountain.png new file mode 100644 index 00000000..5527d6c7 Binary files /dev/null and b/fr-FR/code/favourite-things/mountain.png differ diff --git a/fr-FR/code/favourite-things/mushroom.JPG b/fr-FR/code/favourite-things/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/fr-FR/code/favourite-things/mushroom.JPG differ diff --git a/fr-FR/code/favourite-things/music.png b/fr-FR/code/favourite-things/music.png new file mode 100644 index 00000000..1633c3ec Binary files /dev/null and b/fr-FR/code/favourite-things/music.png differ diff --git a/fr-FR/code/favourite-things/nature.css b/fr-FR/code/favourite-things/nature.css new file mode 100644 index 00000000..7dcba5a5 --- /dev/null +++ b/fr-FR/code/favourite-things/nature.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/painting.png b/fr-FR/code/favourite-things/painting.png new file mode 100644 index 00000000..21442674 Binary files /dev/null and b/fr-FR/code/favourite-things/painting.png differ diff --git a/fr-FR/code/favourite-things/pansies.JPG b/fr-FR/code/favourite-things/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/fr-FR/code/favourite-things/pansies.JPG differ diff --git a/fr-FR/code/favourite-things/pastel-hearts.jpg b/fr-FR/code/favourite-things/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/fr-FR/code/favourite-things/pastel-hearts.jpg differ diff --git a/fr-FR/code/favourite-things/pastel.css b/fr-FR/code/favourite-things/pastel.css new file mode 100644 index 00000000..04adedb6 --- /dev/null +++ b/fr-FR/code/favourite-things/pastel.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/piggy-bank.jpg b/fr-FR/code/favourite-things/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/fr-FR/code/favourite-things/piggy-bank.jpg differ diff --git a/fr-FR/code/favourite-things/placeholder.png b/fr-FR/code/favourite-things/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/fr-FR/code/favourite-things/placeholder.png differ diff --git a/fr-FR/code/favourite-things/primary.css b/fr-FR/code/favourite-things/primary.css new file mode 100644 index 00000000..43c7c072 --- /dev/null +++ b/fr-FR/code/favourite-things/primary.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/project_config.yml b/fr-FR/code/favourite-things/project_config.yml new file mode 100644 index 00000000..4bc51e1f --- /dev/null +++ b/fr-FR/code/favourite-things/project_config.yml @@ -0,0 +1,3 @@ +name: 'Choses préférées' +identifier: 'favourite-things' +type: 'html' diff --git a/fr-FR/code/favourite-things/pumpkins.JPG b/fr-FR/code/favourite-things/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/fr-FR/code/favourite-things/pumpkins.JPG differ diff --git a/fr-FR/code/favourite-things/rainbow-forest.JPG b/fr-FR/code/favourite-things/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/fr-FR/code/favourite-things/rainbow-forest.JPG differ diff --git a/fr-FR/code/favourite-things/rhino.JPG b/fr-FR/code/favourite-things/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/fr-FR/code/favourite-things/rhino.JPG differ diff --git a/fr-FR/code/favourite-things/smokey.css b/fr-FR/code/favourite-things/smokey.css new file mode 100644 index 00000000..e1991f74 --- /dev/null +++ b/fr-FR/code/favourite-things/smokey.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/space.css b/fr-FR/code/favourite-things/space.css new file mode 100644 index 00000000..d2a0230f --- /dev/null +++ b/fr-FR/code/favourite-things/space.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/spider-web.jpg b/fr-FR/code/favourite-things/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/fr-FR/code/favourite-things/spider-web.jpg differ diff --git a/fr-FR/code/favourite-things/style.css b/fr-FR/code/favourite-things/style.css new file mode 100644 index 00000000..963b3720 --- /dev/null +++ b/fr-FR/code/favourite-things/style.css @@ -0,0 +1,284 @@ +/* Associations de couleurs */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Appliquer partout */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Remplissage et bordure ne rendent pas une boite plus grande */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Faire remplir le contenu de la page pour que le pied de page soit en bas */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* ajouter une image d'arrière-plan au corps */ + +body { + background-image: url('fave.png'); +} + +/* Le contenu principal de la page entre l'en-tête et le pied de page */ +main { + background: var(--primary); /* Colore l'arrière-plan */ + color: var(--onprimary); /* Colore le texte */ + margin: 0 auto; /* Centre si le navigateur est vraiment large */ + min-width: 25rem; /* Ne laisse pas le contenu devenir trop étroit */ + max-width: 70rem; /* Ne laisse pas le contenu devenir trop large */ + padding: 0; + padding-top: 0.5rem; /* Remplissage en haut */ + margin-bottom: 1em; /* Espace avant le pied de page */ +} + +/* Styles des éléments d'en-tête et de pied de page */ + +header, +footer { + text-align: center; + width: 100%; /* Remplit toute la largeur de la fenêtre */ + margin: 0; /* Supprime la marge par défaut */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Styles de sections */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Styles de bordure */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Ajoute un solide */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Ajoute une ligne continue au-dessus du pied de page */ +} + +/* Ajouter un effet de transparence */ + +.transparent { + opacity: 0.95; +} + +/* Styles uniquement pour les éléments h1 */ + +h1 { + font: var(--header-font); /* Style de police stocké dans la variable header-font */ + padding: 2rem; + margin: 0; /* Centre si le navigateur est vraiment large */ +} + +/* Styles uniquement pour les éléments h2 */ + +h2 { + font: var(--title-font); /* Style de police stocké dans la variable title-font */ +} + +/* Surligner les mots clés en gras et appliquer une couleur de texte alternative */ + +strong { + color: var(--detail2); /* Couleur du texte stockée dans la variable de légende */ + font-weight: bold; /* Renforce le poids du texte par rapport à la valeur par défaut*/ +} + +/* Style pour les listes ordonnées et non ordonnées */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Remplissage autour des paragraphes */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style pour les liens */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Utilise la couleur de l'élément parent */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles uniquement pour la classe .wrap */ + +.wrap { + /* Faire en sorte que le contenu s'étende sur plusieurs lignes */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* Pour créer des boites fantaisie */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles pour les balises div qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles pour les balises img qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > img { + width: 5rem; + display: block; + padding: 0rem; +} + +/* Styles pour les balises p qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Styles spécifiques pour ce projet */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Utilisé pour faire un grand emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Styles spécifiques pour ce projet */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + diff --git a/fr-FR/code/favourite-things/sunflowers.JPG b/fr-FR/code/favourite-things/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/fr-FR/code/favourite-things/sunflowers.JPG differ diff --git a/fr-FR/code/favourite-things/sunset-beach.JPG b/fr-FR/code/favourite-things/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/fr-FR/code/favourite-things/sunset-beach.JPG differ diff --git a/fr-FR/code/favourite-things/sunset-person.jpg b/fr-FR/code/favourite-things/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/fr-FR/code/favourite-things/sunset-person.jpg differ diff --git a/fr-FR/code/favourite-things/sunset.JPG b/fr-FR/code/favourite-things/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/fr-FR/code/favourite-things/sunset.JPG differ diff --git a/fr-FR/code/favourite-things/sunset.css b/fr-FR/code/favourite-things/sunset.css new file mode 100644 index 00000000..e1f836fc --- /dev/null +++ b/fr-FR/code/favourite-things/sunset.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/sunshine.css b/fr-FR/code/favourite-things/sunshine.css new file mode 100644 index 00000000..a1ce6165 --- /dev/null +++ b/fr-FR/code/favourite-things/sunshine.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/thriller.css b/fr-FR/code/favourite-things/thriller.css new file mode 100644 index 00000000..1a470a3e --- /dev/null +++ b/fr-FR/code/favourite-things/thriller.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/water-animals.css b/fr-FR/code/favourite-things/water-animals.css new file mode 100644 index 00000000..c2e79a56 --- /dev/null +++ b/fr-FR/code/favourite-things/water-animals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/favourite-things/woodland.css b/fr-FR/code/favourite-things/woodland.css new file mode 100644 index 00000000..e2e38458 --- /dev/null +++ b/fr-FR/code/favourite-things/woodland.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/animation.css b/fr-FR/code/raspberry-pi-pico/animation.css new file mode 100644 index 00000000..12869968 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center linear 8s 2; /* Temps nécessaire à l'animation et nombre de répétitions*/ + display: inline-block; /* Important pour permettre la rotation */ +} + +@keyframes rotate-center { + /* Le code de l'animation spin me */ + 0% { + /* Rotation de 0 à 360 degrés */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* exécute l'animation 'bounce' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation deux fois. */ + display: inline-block; +} + +@keyframes bounce { + /* Le code de l'animation de rebond */ + 0% { + transform: scale(1, 1) translateY(0); /* Position de départ et taille réelle */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Augmenter la largeur et réduire la hauteur pour un effet d'écrasement avant le rebond */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Revenir à la taille réelle et déplacer l'emoji de 100 pixels par rapport à la position actuelle */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Remettre l'emoji à la position de départ */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* exécute l'animation 'scale' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation deux fois. */ + display: inline-block; +} + +@keyframes scale { + /* Le code d'animation de scintillement */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* Le code de l'animation du roulement */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* Le code de l'animation du roulement */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/fr-FR/code/raspberry-pi-pico/beetle.jpg b/fr-FR/code/raspberry-pi-pico/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/beetle.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/butterfly.JPG b/fr-FR/code/raspberry-pi-pico/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/butterfly.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/button.png b/fr-FR/code/raspberry-pi-pico/button.png new file mode 100644 index 00000000..84141380 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/button.png differ diff --git a/fr-FR/code/raspberry-pi-pico/buzzer.png b/fr-FR/code/raspberry-pi-pico/buzzer.png new file mode 100644 index 00000000..717770f1 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/buzzer.png differ diff --git a/fr-FR/code/raspberry-pi-pico/cacti.JPG b/fr-FR/code/raspberry-pi-pico/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/cacti.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/cafe.css b/fr-FR/code/raspberry-pi-pico/cafe.css new file mode 100644 index 00000000..775f9862 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/cafe.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/cafe.jpg b/fr-FR/code/raspberry-pi-pico/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/cafe.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/candles.JPG b/fr-FR/code/raspberry-pi-pico/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/candles.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/carnival.jpg b/fr-FR/code/raspberry-pi-pico/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/carnival.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/colour-festival.jpg b/fr-FR/code/raspberry-pi-pico/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/colour-festival.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/comic-books.jpg b/fr-FR/code/raspberry-pi-pico/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/comic-books.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/comic.css b/fr-FR/code/raspberry-pi-pico/comic.css new file mode 100644 index 00000000..06de956e --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/comic.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/fr-FR/code/raspberry-pi-pico/companion.css b/fr-FR/code/raspberry-pi-pico/companion.css new file mode 100644 index 00000000..e15f380a --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/companion.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/fr-FR/code/raspberry-pi-pico/crayons.jpg b/fr-FR/code/raspberry-pi-pico/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/crayons.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/default.css b/fr-FR/code/raspberry-pi-pico/default.css new file mode 100644 index 00000000..9aed205b --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/default.css @@ -0,0 +1,20 @@ + +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffffff; + --secondary: #c51a4a; + --tertiary: #6cc04a; + --page: #000000; + --onprimary: #555559; + --onsecondary: #ffffff; + --ontertiary: #555559; + --onpage: #000000; + --detail: #999798; + --detail2: #c9c8c7; + + --body-font: 1rem 'Nunito', sans-serif; + --header-font: lighter 3rem 'Russo One', sans-serif; + --title-font: lighter 1.5rem 'Nunito', sans-serif; + --quote-font: lighter 1.5rem 'Nunito', sans-serif; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/disco-ball.jpg b/fr-FR/code/raspberry-pi-pico/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/disco-ball.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/disco-flowers.JPG b/fr-FR/code/raspberry-pi-pico/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/disco-flowers.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/disco.css b/fr-FR/code/raspberry-pi-pico/disco.css new file mode 100644 index 00000000..f70a924f --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/disco.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/fr-FR/code/raspberry-pi-pico/drone.JPG b/fr-FR/code/raspberry-pi-pico/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/drone.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/exotic-plants.jpg b/fr-FR/code/raspberry-pi-pico/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/exotic-plants.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/ferns.jpg b/fr-FR/code/raspberry-pi-pico/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/ferns.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/festival.css b/fr-FR/code/raspberry-pi-pico/festival.css new file mode 100644 index 00000000..9b7a1964 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/festival.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/fiesta.css b/fr-FR/code/raspberry-pi-pico/fiesta.css new file mode 100644 index 00000000..fc4108cb --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/fiesta.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/fr-FR/code/raspberry-pi-pico/fire.jpg b/fr-FR/code/raspberry-pi-pico/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/fire.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/fish.jpg b/fr-FR/code/raspberry-pi-pico/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/fish.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/forest.JPG b/fr-FR/code/raspberry-pi-pico/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/forest.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/game-boy.jpg b/fr-FR/code/raspberry-pi-pico/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/game-boy.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/globe-in-water.JPG b/fr-FR/code/raspberry-pi-pico/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/globe-in-water.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/greenhouse.JPG b/fr-FR/code/raspberry-pi-pico/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/greenhouse.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/helpful-plumber.css b/fr-FR/code/raspberry-pi-pico/helpful-plumber.css new file mode 100644 index 00000000..7e148622 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/fr-FR/code/raspberry-pi-pico/illustrations.png b/fr-FR/code/raspberry-pi-pico/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/illustrations.png differ diff --git a/fr-FR/code/raspberry-pi-pico/index.html b/fr-FR/code/raspberry-pi-pico/index.html new file mode 100644 index 00000000..230730db --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/index.html @@ -0,0 +1,165 @@ + + + + + + + + + Raspberry Pi Pico + + + + + + + + + + + + + + + +
+

Le Raspberry Pi Pico

+
+ + +
+ + + +
+ L’expression du visage amoureux. +

Le Raspberry Pi Pico est un microcontrôleur économique utilisé pour fabriquer des produits électroniques.

+
+ + + +
+

Les entrées et sorties que j'ai utilisées sont :

+
+

Entrées

+
    +
  • Interrupteur (switch)
    • +
  • Bouton
    • +
  • Potentiomètre
    • +
+
+ +
+

Sorties

+
    +
  • LED
    • +
  • LED RVB
    • +
  • Buzzer
    • +
+
+

Passez la souris sur les cartes pour en savoir plus :

+
+ + + +

Entrées

+ +
+ + + +
+
+
+

Interrupteur (switch)

+ +
+
+

Un interrupteur est un composant électrique qui peut être fermé pour permettre au courant électrique de circuler et ouvert pour empêcher le courant électrique de circuler.

+
+
+
+ +
+
+
+

Bouton

+ +
+
+

Un bouton est une sorte d’interrupteur qui établit une connexion lorsqu’il est enfoncé.

+
+
+
+ +
+
+
+

Potentiomètre

+ +
+
+

Un potentiomètre est un composant d'entrée analogique qui change sa résistance en fonction de la position du cadran.

+
+
+
+ +
+ + + +

Sorties

+ +
+ + + +
+
+
+

LED

+ +
+
+

LED signifie diode électroluminescente. Il possède un matériau qui s'illumine lorsqu'un courant électrique le traverse.

+
+
+
+ +
+
+
+

LED RVB

+ +
+
+

RVB signifie Rouge Vert Bleu. Les LED RVB vous permettent d'utiliser un code pour contrôler la quantité de chaque couleur émise.

+
+
+
+ +
+
+
+

Buzzer

+ +
+
+

Un buzzer passif peut émettre une variété de sons. Il nécessite une connexion et un signal spécifique pour jouer le son choisi.

+
+
+
+ +
+
+ + + + + + diff --git a/fr-FR/code/raspberry-pi-pico/lake-mountains.JPG b/fr-FR/code/raspberry-pi-pico/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/lake-mountains.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/land-animals.css b/fr-FR/code/raspberry-pi-pico/land-animals.css new file mode 100644 index 00000000..39ae6e74 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/land-animals.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/led.png b/fr-FR/code/raspberry-pi-pico/led.png new file mode 100644 index 00000000..0a273225 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/led.png differ diff --git a/fr-FR/code/raspberry-pi-pico/medal.jpg b/fr-FR/code/raspberry-pi-pico/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/medal.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/medals.css b/fr-FR/code/raspberry-pi-pico/medals.css new file mode 100644 index 00000000..ae3722cd --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/medals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/money.css b/fr-FR/code/raspberry-pi-pico/money.css new file mode 100644 index 00000000..90e2a478 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/money.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/fr-FR/code/raspberry-pi-pico/monkey.JPG b/fr-FR/code/raspberry-pi-pico/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/monkey.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/moon-art.png b/fr-FR/code/raspberry-pi-pico/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/moon-art.png differ diff --git a/fr-FR/code/raspberry-pi-pico/mushroom.JPG b/fr-FR/code/raspberry-pi-pico/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/mushroom.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/nature.css b/fr-FR/code/raspberry-pi-pico/nature.css new file mode 100644 index 00000000..7dcba5a5 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/nature.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/pansies.JPG b/fr-FR/code/raspberry-pi-pico/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/pansies.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/pastel-hearts.jpg b/fr-FR/code/raspberry-pi-pico/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/pastel-hearts.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/pastel.css b/fr-FR/code/raspberry-pi-pico/pastel.css new file mode 100644 index 00000000..04adedb6 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/pastel.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/pico-hand.png b/fr-FR/code/raspberry-pi-pico/pico-hand.png new file mode 100644 index 00000000..31577c88 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/pico-hand.png differ diff --git a/fr-FR/code/raspberry-pi-pico/piggy-bank.jpg b/fr-FR/code/raspberry-pi-pico/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/piggy-bank.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/placeholder.png b/fr-FR/code/raspberry-pi-pico/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/placeholder.png differ diff --git a/fr-FR/code/raspberry-pi-pico/pot.png b/fr-FR/code/raspberry-pi-pico/pot.png new file mode 100644 index 00000000..817fea4e Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/pot.png differ diff --git a/fr-FR/code/raspberry-pi-pico/primary.css b/fr-FR/code/raspberry-pi-pico/primary.css new file mode 100644 index 00000000..43c7c072 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/primary.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/project_config.yml b/fr-FR/code/raspberry-pi-pico/project_config.yml new file mode 100644 index 00000000..62c199fa --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/project_config.yml @@ -0,0 +1,3 @@ +name: 'Raspberry Pi Pico' +identifier: 'raspberry-pi-pico' +type: 'html' diff --git a/fr-FR/code/raspberry-pi-pico/pumpkins.JPG b/fr-FR/code/raspberry-pi-pico/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/pumpkins.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/rainbow-forest.JPG b/fr-FR/code/raspberry-pi-pico/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/rainbow-forest.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/rgb-led.png b/fr-FR/code/raspberry-pi-pico/rgb-led.png new file mode 100644 index 00000000..cd3b4538 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/rgb-led.png differ diff --git a/fr-FR/code/raspberry-pi-pico/rhino.JPG b/fr-FR/code/raspberry-pi-pico/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/rhino.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/smokey.css b/fr-FR/code/raspberry-pi-pico/smokey.css new file mode 100644 index 00000000..e1991f74 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/smokey.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/space.css b/fr-FR/code/raspberry-pi-pico/space.css new file mode 100644 index 00000000..d2a0230f --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/space.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/spider-web.jpg b/fr-FR/code/raspberry-pi-pico/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/spider-web.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/style.css b/fr-FR/code/raspberry-pi-pico/style.css new file mode 100644 index 00000000..ffda7a9f --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/style.css @@ -0,0 +1,331 @@ +/* Associations de couleurs */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Couleurs de la carte */ + +.purple { + background: #9a6faa; + color: #000000; +} + +.brickred { + background: #f27b5c; + color: #000000; +} + +.yellow { + background: #fddd42; + color: #000000; +} + +.turquoise { + background: #15bcac; + color: #000000; +} + +.blue { + background: #51a4dc; + color: #000000; +} + +.orange { + background: #ffbd5c; + color: #000000; +} + + +/* Appliquer partout */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Remplissage et bordure ne rendent pas une boite plus grande */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Faire remplir le contenu de la page pour que le pied de page soit en bas */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* ajouter une image d'arrière-plan au corps */ + +body { + /*background-image: url('name.jpg');*/ /* Décommenter et changer le nom du fichier pour ajouter une image d'arrière-plan */ + /*background-repeat: repeat;*/ /* Fait répéter l'image */ + /*background-size: cover;*/ /* Fait en sorte que l'image recouvre tout le conteneur */ +} + +/* Le contenu principal de la page entre l'en-tête et le pied de page */ +main { + background: var(--primary); /* Colore l'arrière-plan */ + color: var(--onprimary); /* Colore le texte */ + margin: 0 auto; /* Centre si le navigateur est vraiment large */ + min-width: 25rem; /* Ne laisse pas le contenu devenir trop étroit */ + max-width: 70rem; /* Ne laisse pas le contenu devenir trop large */ + padding: 0; + padding-top: 0.5rem; /* Remplissage en haut */ + margin-bottom: 1em; /* Espace avant le pied de page */ +} + +/* Styles des éléments d'en-tête et de pied de page */ + +header, +footer { + text-align: center; + width: 100%; /* Remplit toute la largeur de la fenêtre */ + margin: 0; /* Supprime la marge par défaut */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Styles de sections */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Styles de bordure */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Ajoute un solide */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Ajoute une ligne continue au-dessus du pied de page */ +} + +/* Ajouter un effet de transparence */ + +.transparent { + opacity: 0.95; +} + +/* Styles uniquement pour les éléments h1 */ + +h1 { + font: var(--header-font); /* Style de police stocké dans la variable header-font */ + padding: 2rem; + margin: 0; /* Centre si le navigateur est vraiment large */ +} + +/* Styles uniquement pour les éléments h2 */ + +h2 { + font: var(--title-font); /* Style de police stocké dans la variable title-font */ +} + +/* Surligner les mots clés en gras et appliquer une couleur de texte alternative */ + +strong { + color: var(--detail2); /* Couleur du texte stockée dans la variable de légende */ + font-weight: bold; /* Renforce le poids du texte par rapport à la valeur par défaut*/ +} + +/* Style pour les listes ordonnées et non ordonnées */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Remplissage autour des paragraphes */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style pour les liens */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Utilise la couleur de l'élément parent */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +.ytop { + display: flex; + justify-content: top; + flex-flow: column; +} + +/* Styles uniquement pour la classe .wrap */ + +.wrap { + /* Faire en sorte que le contenu s'étende sur plusieurs lignes */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* Pour créer des boites fantaisie */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles pour les balises div qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Styles pour les balises img qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > img { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Styles pour les balises p qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Styles spécifiques pour ce projet */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Utilisé pour faire un grand emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Styles spécifiques pour ce projet */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 15rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; + font: var(--body-font); +} + +.card img { + max-width: 80%; + max-height: 80%; +} + diff --git a/fr-FR/code/raspberry-pi-pico/sunflowers.JPG b/fr-FR/code/raspberry-pi-pico/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/sunflowers.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/sunset-beach.JPG b/fr-FR/code/raspberry-pi-pico/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/sunset-beach.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/sunset-person.jpg b/fr-FR/code/raspberry-pi-pico/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/sunset-person.jpg differ diff --git a/fr-FR/code/raspberry-pi-pico/sunset.JPG b/fr-FR/code/raspberry-pi-pico/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/sunset.JPG differ diff --git a/fr-FR/code/raspberry-pi-pico/sunset.css b/fr-FR/code/raspberry-pi-pico/sunset.css new file mode 100644 index 00000000..e1f836fc --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/sunset.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/sunshine.css b/fr-FR/code/raspberry-pi-pico/sunshine.css new file mode 100644 index 00000000..a1ce6165 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/sunshine.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/switch.png b/fr-FR/code/raspberry-pi-pico/switch.png new file mode 100644 index 00000000..46f288a8 Binary files /dev/null and b/fr-FR/code/raspberry-pi-pico/switch.png differ diff --git a/fr-FR/code/raspberry-pi-pico/thriller.css b/fr-FR/code/raspberry-pi-pico/thriller.css new file mode 100644 index 00000000..1a470a3e --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/thriller.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/water-animals.css b/fr-FR/code/raspberry-pi-pico/water-animals.css new file mode 100644 index 00000000..c2e79a56 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/water-animals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/raspberry-pi-pico/woodland.css b/fr-FR/code/raspberry-pi-pico/woodland.css new file mode 100644 index 00000000..e2e38458 --- /dev/null +++ b/fr-FR/code/raspberry-pi-pico/woodland.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/animation.css b/fr-FR/code/what-is-d-and-d/animation.css new file mode 100644 index 00000000..eaa54e61 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* exécute l'animation 'rotate-centre' avec un timing linéaire (même rythme tout au long) pendant huit secondes. Exécute l'animation deux fois. */ + display: inline-block; /* Important pour que l'élément animé ne soit pas divisé sur une nouvelle ligne */ +} + +@keyframes rotate-center { + /* Le code d'animation de rotation */ + 0% { + /* Rotation de 0 à 360 degrés */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* exécute l'animation 'bounce' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation trois fois. */ + display: inline-block; +} + +@keyframes bounce { + /* Le code de l'animation de rebond */ + 0% { + transform: scale(1, 1) translateY(0); /* Position de départ et taille réelle */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Augmenter la largeur et réduire la hauteur pour un effet d'écrasement avant le rebond */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Revenir à la taille réelle et déplacer l'emoji de 100 pixels par rapport à la position actuelle */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Remettre l'emoji à la position de départ */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* exécute l'animation 'scale' avec un timing facile (début et fin lents) pendant deux secondes. Exécute l'animation indéfiniment. */ + display: inline-block; +} + +@keyframes scale { + /* Le code d'animation d'échelle */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* Le code de l'animation du roulement */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* Le code de l'animation du roulement */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* Le code d'animation de déplacement */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* Le code d'animation de déplacement */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/fr-FR/code/what-is-d-and-d/beetle.jpg b/fr-FR/code/what-is-d-and-d/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/beetle.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/butterfly.JPG b/fr-FR/code/what-is-d-and-d/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/butterfly.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/cacti.JPG b/fr-FR/code/what-is-d-and-d/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/cacti.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/cafe.css b/fr-FR/code/what-is-d-and-d/cafe.css new file mode 100644 index 00000000..775f9862 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/cafe.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/cafe.jpg b/fr-FR/code/what-is-d-and-d/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/cafe.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/candles.JPG b/fr-FR/code/what-is-d-and-d/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/candles.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/carnival.jpg b/fr-FR/code/what-is-d-and-d/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/carnival.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/colour-festival.jpg b/fr-FR/code/what-is-d-and-d/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/colour-festival.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/comic-books.jpg b/fr-FR/code/what-is-d-and-d/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/comic-books.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/comic.css b/fr-FR/code/what-is-d-and-d/comic.css new file mode 100644 index 00000000..06de956e --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/comic.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/fr-FR/code/what-is-d-and-d/companion.css b/fr-FR/code/what-is-d-and-d/companion.css new file mode 100644 index 00000000..e15f380a --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/companion.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/fr-FR/code/what-is-d-and-d/crayons.jpg b/fr-FR/code/what-is-d-and-d/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/crayons.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/default.css b/fr-FR/code/what-is-d-and-d/default.css new file mode 100644 index 00000000..418acba6 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/default.css @@ -0,0 +1,20 @@ + +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/disco-ball.jpg b/fr-FR/code/what-is-d-and-d/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/disco-ball.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/disco-flowers.JPG b/fr-FR/code/what-is-d-and-d/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/disco-flowers.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/disco.css b/fr-FR/code/what-is-d-and-d/disco.css new file mode 100644 index 00000000..f70a924f --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/disco.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/fr-FR/code/what-is-d-and-d/dm.jpg b/fr-FR/code/what-is-d-and-d/dm.jpg new file mode 100644 index 00000000..5ee5f0a4 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/dm.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/dm2.jpg b/fr-FR/code/what-is-d-and-d/dm2.jpg new file mode 100644 index 00000000..a97ece6d Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/dm2.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/drone.JPG b/fr-FR/code/what-is-d-and-d/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/drone.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/exotic-plants.jpg b/fr-FR/code/what-is-d-and-d/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/exotic-plants.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/ferns.jpg b/fr-FR/code/what-is-d-and-d/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/ferns.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/festival.css b/fr-FR/code/what-is-d-and-d/festival.css new file mode 100644 index 00000000..9b7a1964 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/festival.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/fiesta.css b/fr-FR/code/what-is-d-and-d/fiesta.css new file mode 100644 index 00000000..fc4108cb --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/fiesta.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/fr-FR/code/what-is-d-and-d/fire.jpg b/fr-FR/code/what-is-d-and-d/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/fire.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/fish.jpg b/fr-FR/code/what-is-d-and-d/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/fish.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/forest.JPG b/fr-FR/code/what-is-d-and-d/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/forest.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/game-boy.jpg b/fr-FR/code/what-is-d-and-d/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/game-boy.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/globe-in-water.JPG b/fr-FR/code/what-is-d-and-d/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/globe-in-water.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/greenhouse.JPG b/fr-FR/code/what-is-d-and-d/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/greenhouse.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/helpful-plumber.css b/fr-FR/code/what-is-d-and-d/helpful-plumber.css new file mode 100644 index 00000000..7e148622 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/fr-FR/code/what-is-d-and-d/illustrations.png b/fr-FR/code/what-is-d-and-d/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/illustrations.png differ diff --git a/fr-FR/code/what-is-d-and-d/index.html b/fr-FR/code/what-is-d-and-d/index.html new file mode 100644 index 00000000..ceace62d --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/index.html @@ -0,0 +1,168 @@ + + + + + + + + + Donjons et Dragons + + + + + + + + + + + + + + + +
+
+

Donjons & Dragons

+
+
+
+

Qu'est-ce que c'est ?

+
+
+ + +
+
+

Qu'est-ce que Donjons & Dragons ?

+

Selon la société qui le fabrique, Wizard of the Coast, c'est le meilleur jeu de rôle du monde.

+
+

Mais qu'est-ce qu'un jeu de rôle ? Il s'agit d'un jeu dans lequel vous et vos amis vous asseyez en prétendant être des personnages que vous avez inventés, dans un monde fantastique créé par le maître du donjon (DM en abrégé). Votre personnage peut faire tout ce que vous pouvez imaginer, et lorsque vous interagissez avec le monde, vous lancez des dés pour déterminer le résultat ou la réaction à vos actions.

+
+ +
+
+

« L’essence d’un jeu de rôle est qu’il s’agit d’une expérience de groupe et de coopération. »

+ - Gary Gygax (inventeur de D&D) +
+
+ +
+ Le maître du donjon sait et contrôle tout sur le monde pour leurs joueurs. Sur l'image, un puissant sorcier regarde une planète qui semble petite comparée à sa puissance magique. Des éclairs bleus jaillissent de leurs doigts tendus, faisant leur volonté sur le sol en contrebas. +
+

Le Maître du Donjon (DM)

+

Si D&D était comme un jeu vidéo, le DM serait la console sur laquelle vous jouez : il donne vie au monde pour vous et détermine comment il réagit à vos actions et à celles des autres joueurs.

+
+

Le DM dépeint et décide des actions de tous les autres personnages qui habitent le monde, qui ne sont pas contrôlés par les joueurs. Ils résolvent les actions, déterminent les résultats et racontent l'histoire au groupe de ce qui se passe autour d'eux. Le DM sait tout du monde, et ce qu'il ne sait pas, il peut l'inventer !

+
+

Tout ce que dit le DM est valable, car il est à la fois l'arbitre, le narrateur et les autres personnages !

+
+
+ +
+
+

Classes

+
+ +

Les classes sont la façon dont votre personnage se comporte dans le jeu mécaniquement, ou les capacités ou compétences qu'il possède et les tours spéciaux qu'il peut faire. Les puissants guerriers, par exemple, sont plus doués au combat avec les armes et la force, tandis que les sorciers intelligents utilisent leurs études magiques pour créer de puissants sorts.


+

Les classes sont de deux types : les classes martiales qui se concentrent sur le combat et les compétences non magiques, et Les classes de lancement de sorts qui se concentrent sur l'influence du monde qui les entoure avec des moyens magiques.


+

Vous trouverez ci-dessous une sélection de quelques classes disponibles dans Donjons & Dragons :

+
+
+

Classes martiales

+
+
+
+
+
+

Voleur

+

🤫

+
+
+

Sournois et rapides, les voleurs se déplacent dans l'ombre et sont des opérateurs qualifiés.

+
+
+
+ +
+
+
+

🤺

+

Guerrier

+
+
+

Formés aux techniques martiales dès leur plus jeune âge, les combattants sont des guerriers puissants et compétents.

+
+
+
+ +
+
+
+

Barbare

+

😡

+
+
+

Forts de leur rage puissante, les Barbares chargent à travers la bataille sans se soucier des dégâts qu'ils subissent ou infligent. +

+
+
+
+ +
+
+

Classes de lanceur de sorts

+
+
+ +
+
+
+

Prêtre

+

😇

+
+
+

Fidèles serviteurs de puissantes divinités, les prêtres reçoivent des pouvoirs magiques de leurs dieux.

+
+
+
+ +
+
+
+

🧙‍♀️

+

Sorcier

+
+
+

Compétences et connaissances en magie, les sorciers ont étudié de nombreuses années pour obtenir leur pouvoir.

+
+
+
+ +
+
+
+

Druide

+

🐾

+
+
+

En s'appuyant sur la puissance de la nature pour leur magie, les druides peuvent prendre forme d'animaux et lancer des sorts de guérison.

+
+
+
+ +
+ +
+ + + + + + diff --git a/fr-FR/code/what-is-d-and-d/lake-mountains.JPG b/fr-FR/code/what-is-d-and-d/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/lake-mountains.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/land-animals.css b/fr-FR/code/what-is-d-and-d/land-animals.css new file mode 100644 index 00000000..39ae6e74 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/land-animals.css @@ -0,0 +1,20 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/medal.jpg b/fr-FR/code/what-is-d-and-d/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/medal.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/medals.css b/fr-FR/code/what-is-d-and-d/medals.css new file mode 100644 index 00000000..ae3722cd --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/medals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/money.css b/fr-FR/code/what-is-d-and-d/money.css new file mode 100644 index 00000000..90e2a478 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/money.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/fr-FR/code/what-is-d-and-d/monkey.JPG b/fr-FR/code/what-is-d-and-d/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/monkey.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/moon-art.png b/fr-FR/code/what-is-d-and-d/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/moon-art.png differ diff --git a/fr-FR/code/what-is-d-and-d/mushroom.JPG b/fr-FR/code/what-is-d-and-d/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/mushroom.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/nature.css b/fr-FR/code/what-is-d-and-d/nature.css new file mode 100644 index 00000000..7dcba5a5 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/nature.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/pansies.JPG b/fr-FR/code/what-is-d-and-d/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/pansies.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/pastel-hearts.jpg b/fr-FR/code/what-is-d-and-d/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/pastel-hearts.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/pastel.css b/fr-FR/code/what-is-d-and-d/pastel.css new file mode 100644 index 00000000..04adedb6 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/pastel.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/piggy-bank.jpg b/fr-FR/code/what-is-d-and-d/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/piggy-bank.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/placeholder.png b/fr-FR/code/what-is-d-and-d/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/placeholder.png differ diff --git a/fr-FR/code/what-is-d-and-d/primary.css b/fr-FR/code/what-is-d-and-d/primary.css new file mode 100644 index 00000000..43c7c072 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/primary.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/project_config.yml b/fr-FR/code/what-is-d-and-d/project_config.yml new file mode 100644 index 00000000..ae143d5b --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/project_config.yml @@ -0,0 +1,3 @@ +name: 'Qu''est-ce que D&D' +identifier: 'what-is-d-and-d' +type: 'html' diff --git a/fr-FR/code/what-is-d-and-d/pumpkins.JPG b/fr-FR/code/what-is-d-and-d/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/pumpkins.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/rainbow-forest.JPG b/fr-FR/code/what-is-d-and-d/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/rainbow-forest.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/rhino.JPG b/fr-FR/code/what-is-d-and-d/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/rhino.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/smokey.css b/fr-FR/code/what-is-d-and-d/smokey.css new file mode 100644 index 00000000..e1991f74 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/smokey.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/space.css b/fr-FR/code/what-is-d-and-d/space.css new file mode 100644 index 00000000..d2a0230f --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/space.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/spider-web.jpg b/fr-FR/code/what-is-d-and-d/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/spider-web.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/style.css b/fr-FR/code/what-is-d-and-d/style.css new file mode 100644 index 00000000..1c5380e8 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/style.css @@ -0,0 +1,316 @@ +/* Associations de couleurs */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Appliquer partout */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Remplissage et bordure ne rendent pas une boite plus grande */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Faire remplir le contenu de la page pour que le pied de page soit en bas */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* ajouter une image d'arrière-plan au corps */ + +body { + /*background-image: url('name.jpg');*/ /* Décommenter et changer le nom du fichier pour ajouter une image d'arrière-plan */ + /*background-repeat: repeat;*/ /* Fait répéter l'image */ + /*background-size: cover;*/ /* Fait en sorte que l'image recouvre tout le conteneur */ +} + +/* Le contenu principal de la page entre l'en-tête et le pied de page */ +main { + background: var(--primary); /* Colore l'arrière-plan */ + color: var(--onprimary); /* Colore le texte */ + margin: 0 auto; /* Centre si le navigateur est vraiment large */ + min-width: 25rem; /* Ne laisse pas le contenu devenir trop étroit */ + max-width: 70rem; /* Ne laisse pas le contenu devenir trop large */ + padding: 0; + padding-top: 0.5rem; /* Remplissage en haut */ + margin-bottom: 1em; /* Espace avant le pied de page */ +} + +/* Styles des éléments d'en-tête et de pied de page */ + +header, +footer { + text-align: center; + width: 100%; /* Remplit toute la largeur de la fenêtre */ + margin: 0; /* Supprime la marge par défaut */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Styles de sections */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Styles de bordure */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Ajoute un solide */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Ajoute une ligne continue au-dessus du pied de page */ +} + +/* Ajouter un effet de transparence */ + +.transparent { + opacity: 0.95; +} + +/* Styles uniquement pour les éléments h1 */ + +h1 { + font: var(--header-font); /* Style de police stocké dans la variable header-font */ + padding: 2rem; + margin: 0; /* Centre si le navigateur est vraiment large */ +} + +/* Styles uniquement pour les éléments h2 */ + +h2 { + font: var(--title-font); /* Style de police stocké dans la variable title-font */ +} + +/* Surligner les mots clés en gras et appliquer une couleur de texte alternative */ + +strong { + color: var(--detail2); /* Couleur du texte stockée dans la variable de légende */ + font-weight: bold; /* Renforce le poids du texte par rapport à la valeur par défaut*/ +} + +/* Style pour les listes ordonnées et non ordonnées */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Remplissage autour des paragraphes */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Style pour les liens */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Utilise la couleur de l'élément parent */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Styles uniquement pour la classe .wrap */ + +.wrap { + /* Faire en sorte que le contenu s'étende sur plusieurs lignes */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* espacement horizontal et vertical */ +} + +/* Pour créer des boites fantaisie */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Styles pour les balises div qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > div { + width: 14rem; +} + +/* Styles pour les balises img qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Styles pour les balises p qui se trouvent à l'intérieur d'une classe .wrap */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Styles spécifiques pour ce projet */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Utilisé pour faire un grand emoji */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Styles spécifiques pour ce projet */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* taille de l'ombre droite et inférieure, flou, répartition et couleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Style de photo imprimée */ + +.photo { + border: 1px solid #D0D0D0; /* Ajoute une bordure pleine */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* ombre droite et inférieure, flou, répartition et couleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/fr-FR/code/what-is-d-and-d/sunflowers.JPG b/fr-FR/code/what-is-d-and-d/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/sunflowers.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/sunset-beach.JPG b/fr-FR/code/what-is-d-and-d/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/sunset-beach.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/sunset-person.jpg b/fr-FR/code/what-is-d-and-d/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/sunset-person.jpg differ diff --git a/fr-FR/code/what-is-d-and-d/sunset.JPG b/fr-FR/code/what-is-d-and-d/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/fr-FR/code/what-is-d-and-d/sunset.JPG differ diff --git a/fr-FR/code/what-is-d-and-d/sunset.css b/fr-FR/code/what-is-d-and-d/sunset.css new file mode 100644 index 00000000..e1f836fc --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/sunset.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/sunshine.css b/fr-FR/code/what-is-d-and-d/sunshine.css new file mode 100644 index 00000000..a1ce6165 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/sunshine.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/thriller.css b/fr-FR/code/what-is-d-and-d/thriller.css new file mode 100644 index 00000000..1a470a3e --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/thriller.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/water-animals.css b/fr-FR/code/what-is-d-and-d/water-animals.css new file mode 100644 index 00000000..c2e79a56 --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/water-animals.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/fr-FR/code/what-is-d-and-d/woodland.css b/fr-FR/code/what-is-d-and-d/woodland.css new file mode 100644 index 00000000..2c2617cc --- /dev/null +++ b/fr-FR/code/what-is-d-and-d/woodland.css @@ -0,0 +1,19 @@ +/* Configurer la palette de couleurs et les polices en utilisant les variables */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ebd5b3; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/fr-FR/images/ally.png b/fr-FR/images/ally.png new file mode 100644 index 00000000..c0066239 Binary files /dev/null and b/fr-FR/images/ally.png differ diff --git a/fr-FR/images/banner.png b/fr-FR/images/banner.png new file mode 100644 index 00000000..5d6eb8ad Binary files /dev/null and b/fr-FR/images/banner.png differ diff --git a/fr-FR/images/favourite.png b/fr-FR/images/favourite.png new file mode 100644 index 00000000..432fbc7b Binary files /dev/null and b/fr-FR/images/favourite.png differ diff --git a/fr-FR/images/filter.png b/fr-FR/images/filter.png new file mode 100644 index 00000000..35d48567 Binary files /dev/null and b/fr-FR/images/filter.png differ diff --git a/fr-FR/images/pico.png b/fr-FR/images/pico.png new file mode 100644 index 00000000..8997540f Binary files /dev/null and b/fr-FR/images/pico.png differ diff --git a/fr-FR/images/step-three.PNG b/fr-FR/images/step-three.PNG new file mode 100644 index 00000000..426f2a2f Binary files /dev/null and b/fr-FR/images/step-three.PNG differ diff --git a/fr-FR/images/step-two.jpg b/fr-FR/images/step-two.jpg new file mode 100644 index 00000000..6b95a1d3 Binary files /dev/null and b/fr-FR/images/step-two.jpg differ diff --git a/fr-FR/meta.yml b/fr-FR/meta.yml new file mode 100644 index 00000000..95634537 --- /dev/null +++ b/fr-FR/meta.yml @@ -0,0 +1,27 @@ +title: Créer une page web +hero_image: images/banner.png +description: Crée une page web sur quelque chose que tu souhaites partager. +meta_title: Apprendre le développement web pour les débutants | Créer une page web +meta_description: Apprends le développement web pour les débutants avec la Raspberry Pi Foundation. Crée une page web avec une variété d'éléments HTML. Ajoute des classes CSS pour styliser ta page. +version: 4 +listed: true +copyedit: true +last_tested: "2021-03-26" +steps: + - + title: Introduction + - + title: Ton sujet + - + title: Créer et tester + completion: engaged + - + title: Partager + completion: internal + - + title: Réflexion + completion: external + - + title: Améliorer ton projet + - + title: Et ensuite ? diff --git a/fr-FR/step_1.md b/fr-FR/step_1.md new file mode 100644 index 00000000..22465999 --- /dev/null +++ b/fr-FR/step_1.md @@ -0,0 +1,103 @@ +## Introduction + +Dans ce projet, tu utiliseras les compétences que tu as développées dans le parcours [Intro au web](https://projects.raspberrypi.org/fr-FR/pathways/web-intro) pour créer une page web sur quelque chose que tu souhaites partager. + +

+Le World Wide Web ou web est une vaste collection de pages web connectées. Le web permet aux gens de consulter des contenus provenant du monde entier et de créer leurs propres pages web à partager avec d'autres. Peux-tu imaginer ce qu'était la vie avant le web ? +

+ +Tu vas : + +- Créer une page web pour partager des informations avec d'autres personnes +- Créer une page web en utilisant plusieurs sections avec une variété d'éléments HTML +- Utiliser et personnaliser ou ajouter des classes CSS pour styliser ta page + +\--- no-print --- + +\--- task --- + +### Essaie-le + +
+
+Peux-tu identifier les éléments HTML utilisés dans ce projet ? Comment CSS a-t-il été utilisé pour styliser et animer la page ? +
+ +**Choses préférées** : [voir à l'intérieur](https://editor.raspberrypi.org/fr-FR/projects/favourite-things){:target="_blank"} +
+ +
+ + + +\--- /task --- + +\--- /no-print --- + +
+ +### DESCRIPTION DU PROJET : créer une page web + +
+ +Crée une page web sur un sujet que tu trouves intéressant et que tu souhaites partager avec d’autres. Il peut s'agir d'informations utiles pour les propriétaires d'animaux de compagnie, d'une page de tes blagues préférées, d'une procédure pas à pas pour un jeu que tu aimes, de conseils que tu as trouvés utiles, d'une liste de sites web utiles ou de tout ce que tu souhaites partager avec les visiteurs de ta page web. + +Ta page web devrait : + +- Avoir plusieurs sections contenant différents types de contenu, notamment du texte et des images, des emojis, des titres, des citations, des listes ou des liens +- Utiliser une palette de couleurs, des polices et des styles CSS qui fonctionnent bien ensemble +- Être accessible en utilisant un bon contraste de couleurs et de bonnes tailles de police + +Ta page web pourrait : + +- Utiliser des classes CSS personnalisées que tu crées et appliques +- Utiliser des animations ou retourner des cartes pour susciter l'intérêt +- Être partagé à la galerie communautaire de la Raspberry Pi Foundation pour inspirer les autres + +
+ +\--- no-print --- + +### Trouve l'inspiration + +\--- task --- + +En consultant ces pages web, réfléchis à ce qui les rend utiles et informatives, mais aussi amusantes et accessibles : + +⭐ Partage ton projet terminé pour avoir une chance qu'il soit présenté ici. + +
+**⭐ Introduction au Raspberry Pi Pico** : [voir à l'intérieur](https://editor.raspberrypi.org/fr-FR/projects/raspberry-pi-pico){:target="_blank"} +
+ +
+ +**⭐ Critique de livre** : [voir à l'intérieur](https://editor.raspberrypi.org/fr-FR/projects/book-review){:target="_blank"} + +
+ +
+ +**⭐ Égypte** : [voir à l'intérieur](https://editor.raspberrypi.org/fr-FR/projects/egypt){:target="_blank"} + +
+ +
+ +**⭐ Fashion Pi** : [voir à l'intérieur](https://editor.raspberrypi.org/fr-FR/projects/fashion-pi){:target="_blank"} + +
+ +
+ +\--- /task --- + +\--- /no-print --- + +\--- print-only --- + +![Projet terminé](images/favourite.png) +![Projet terminé](images/pico.png) +![Projet terminé](images/filter.png) + +\--- /print-only --- diff --git a/fr-FR/step_2.md b/fr-FR/step_2.md new file mode 100644 index 00000000..870889aa --- /dev/null +++ b/fr-FR/step_2.md @@ -0,0 +1,70 @@ +## Ton sujet + +
+
+Dans cette étape, tu décideras du sujet de ta page web. +
+
+![Dessin à la main de la mise en page d'une page web.](images/step-two.jpg){:width="300px"} +
+
+ +### Que veux-tu partager ? + +\--- task --- + +Pense à l’objectif de ta page web. + +Ça pourrait être : + +- ℹ️ Une page d'information sur un sujet qui t'intéresse +- 🔗 Une collection de liens vers les meilleures pages web sur un sujet +- 🧧 Des informations sur une fête ou un événement de ta culture +- 😜 Ta blague favorite (polie !) +- 🎮 Une procédure pas à pas du jeu ou un autre tutoriel +- 🐙 Des informations sur un animal de compagnie ou un animal +- 💬 Quelques conseils que tu as trouvés utiles +- 🏞️ Des informations touristiques sur un lieu que tu as visité ou que tu aimerais visiter +- 👩🏿‍🦼 Des informations sur un problème de santé ou un handicap dont tu penses que davantage de personnes devraient être conscientes + +**Astuce :** essaie de choisir un sujet que tu connais déjà. Cela te permet de consacrer ton temps à la création de ta page web, et non à la recherche d'un sujet. + +\--- /task --- + +### À qui s'adresse-t-il ? + +\--- task --- + +Pour qui crées-tu ta page web ? Il peut être utile de réfléchir aux types de visiteurs pour lesquels tu souhaites créer ta page. + +- Quel sera l'âge de tes visiteurs ? +- Que sauront-ils de ton sujet ? +- La page est-elle destinée aux autres experts dans ton domaine ou aux débutants ? + +**Astuce :** si tu fais une page sur un sujet que tu connais bien, assure-toi de l'expliquer clairement à d'autres personnes. + +\--- /task --- + +### Commencer + +\--- task --- + +Si tu as du papier et un stylo ou un crayon, tu peux dessiner la mise en page de ta page web. + +Tu peux également créer une liste à puces des informations que tu souhaites inclure. + +\--- /task --- + +\--- task --- + +Ouvre le [projet de démarrage Créer une page web](https://editor.raspberrypi.org/fr-FR/projects/build-a-web-page-starter){:target="_blank"}. Le Code Editor s'ouvrira dans un autre onglet du navigateur. + +\--- /task --- + +\--- task --- + +Remplace le texte de l'élément `` par le titre de ta page. + +[[[web-add-title-head]]] + +\--- /task --- diff --git a/fr-FR/step_3.md b/fr-FR/step_3.md new file mode 100644 index 00000000..bc7f179f --- /dev/null +++ b/fr-FR/step_3.md @@ -0,0 +1,205 @@ +## Créer et tester + +<div style="display: flex; flex-wrap: wrap"> +<div style="flex-basis: 200px; flex-grow: 1; margin-right: 15px;"> +Il est maintenant temps de créer ta page web. + +</div> +<div> +![alt=""](images/step-three.PNG){:width="300px"} +</div> +</div> + +**Astuce :** planifie ton projet afin de pouvoir créer une page web de base dans le temps que tu as disponible, puis mets à jour le projet s'il te reste du temps. + +**Astuce :** n'oublie pas de tester ton projet chaque fois que tu ajoutes quelque chose. Il est beaucoup plus facile de trouver et de corriger les bogues avant d'apporter d'autres modifications. + +\--- task --- + +Tu as acquis des compétences vraiment utiles. Voici un rappel pour t'aider à réaliser ta page web : + +### Palettes de couleurs + +[[[web-colour-palette-variables]]] + +Utilise ou personnalise les palettes de couleurs du projet de démarrage. + +[[[hex-colour-palettes]]] + +[[[web-colour-palette]]] + +Crée une palette de couleurs à partir d'une image. + +[[[rpfeditor-image-library]]] + +[[[colours-from-image]]] + +Personnalise les palettes de couleurs pour le style et l'accessibilité. + +[[[contrast-checker]]] + +[[[add-colour-variables]]] + +Utilise tes palettes de couleurs pour définir des couleurs de texte et d'arrière-plan. + +[[[web-primary-secondary]]] + +### Structure + +[[[overall-page-structure]]] + +[[[full-width-section]]] + +[[[full-width-quote]]] + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +Les pages web peuvent être consultées sur de nombreux appareils différents et doivent être <span style="color: #0faeb0">**réactives**</span> pour chaque appareil. Cela signifie que si un utilisateur consulte ta page web sur un téléphone portable, elle doit répondre à un écran plus petit et s'il la consulte sur un ordinateur de bureau, elle doit répondre à un écran plus grand. +</p> + +[[[using-rem]]] + +CSS peut également être utilisé pour modifier de manière réactive la mise en page de la page web. + +[[[side-by-side-section]]] + +[[[wrapped-regular-width]]] + +[[[wrapped-wide-narrow]]] + +[[[web-large-text-tiles]]] + +[[[three-text-tiles]]] + +[[[text-image-text]]] + +[[[web-wrap-gap]]] + +Aligne et espace ton contenu pour améliorer l'apparence de ta page web. + +[[[web-x-y-centering]]] + +[[[padding-margins]]] + +### Polices et éléments texte + +Choisis les polices à utiliser sur ta page web. + +[[[included-fonts]]] + +[[[web-fonts]]] + +[[[google-fonts]]] + +Tu peux utiliser un texte de remplacement pendant que tu travailles sur ta mise en page. + +[[[add-placeholder-text]]] + +Insère des éléments texte. + +[[[web-ordered-list]]] + +[[[web-unordered-list]]] + +[[[full-width-quote]]] + +Stylise ton texte. + +[[[web-headers-large-text]]] + +[[[web-center-text]]] + +[[[web-strong-em]]] + +### Images + +Insère une image de la bibliothèque du projet de démarrage. + +[[[trinket-image-library]]] + +[[[web-alt-text]]] + +Utilise un emoji comme image. + +[[[choose-an-emoji]]] + +[[[huge-emoji]]] + +Ajoute une image d'arrière-plan. + +[[[web-background-image]]] + +[[[add-transparency]]] + +**Astuce :** tu peux styliser tes images avec des coins ou des bordures arrondis. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[web-box-shadow]]] + +### Animations + +Crée des cartes web à retourner. + +[[[web-flip-cards]]] + +Utilise des animations pour changer l'apparence ou la position des éléments sur ta page au fil du temps. + +[[[web-starter-animations]]] + +[[[web-customise-animations]]] + +### Plus de styles + +Ajoute plus de style à tous les éléments de ta page web. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[add-a-gradient]]] + +[[[web-animate-span]]] + +[[[web-box-shadow]]] + +Tu peux créer ta propre classe pour créer un nouveau style. + +[[[web-add-class]]] + +\--- /task --- + +\--- task --- + +**Test :** montre ton projet à quelqu'un d'autre pour avoir son avis. Souhaites-tu apporter des modifications à ta page web ? + +**Astuce :** c’est le moment idéal pour ajouter des commentaires à ton code afin de faciliter le débogage et l'amélioration. Les commentaires aident également les autres personnes à lire ton code. + +[[[web-comment-code]]] + +\--- /task --- + +\--- task --- + +**Débogage :** tu pourrais trouver des bogues dans ton code HTML ou CSS que tu dois corriger. Voici quelques bogues courants. + +**Ma page web ne s'affiche pas correctement** + +[[[incorrect-tags]]] + +[[[mismatched-tags]]] + +**Autres questions de débogage** + +[[[image-not-displayed]]] + +[[[font-not-displayed]]] + +[[[web-debug-link]]] + +Tu pourrais trouver un bogue qui n'est pas répertorié ici. Peux-tu trouver un moyen de le corriger ? + +Nous aimerions connaître tes bogues et la façon dont tu les as résolus. Utilise le bouton **Envoie un commentaire** au bas de cette page si tu as trouvé un autre bogue dans ton projet. + +\--- /task --- diff --git a/fr-FR/step_4.md b/fr-FR/step_4.md new file mode 100644 index 00000000..b4cdf9cb --- /dev/null +++ b/fr-FR/step_4.md @@ -0,0 +1,9 @@ +## Partager + +C'est maintenant le moment de partager ta page web afin qu'elle puisse recevoir des visiteurs. + +**Remarque :** n'oublie pas de vérifier que tu n'as inclus aucune information personnelle sur ta page web. + +Pourquoi ne pas montrer ton projet à l'un de tes amis ? + +Pourquoi ne pas inviter tes amis à créer un projet ? Fais-leur savoir comment tu t'es amusé(e). diff --git a/fr-FR/step_5.md b/fr-FR/step_5.md new file mode 100644 index 00000000..dc73f8d0 --- /dev/null +++ b/fr-FR/step_5.md @@ -0,0 +1,79 @@ +## Réflexion + +As-tu respecté le **descriptif du projet** ? Réfléchis à ton projet et parcours la checklist ci-dessous et coche les points qui s’appliquent à ton projet. + +Est-ce que ta page web contient : + +\--- task --- + +Plusieurs sections contenant différents types de contenu, tels que du texte et des images, des emojis, des titres, des citations, des listes ou des liens ? + +\--- /task --- + +\--- task --- + +Une palette de couleurs, des polices et des styles CSS qui fonctionnent bien ensemble ? Tu peux demander l’avis d’autres personnes, mais tu n’es pas obligé d’apporter des modifications si tu n’es pas d’accord avec elles. + +\--- /task --- + +\--- task --- + +Accessibilité grâce à un bon contraste des couleurs et à des tailles de caractères lisibles ? + +\--- /task --- + +Ta page web pourrait : + +\--- task --- + +Utiliser des classes CSS personnalisées que tu as créées et appliquées. + +\--- /task --- + +\--- task --- + +Utiliser des animations ou retourner des cartes pour susciter l'intérêt. + +\--- /task --- + +\--- task --- + +Être partagé à la galerie communautaire de la Raspberry Pi Foundation pour inspirer les autres. + +\--- /task --- + +Tu peux réfléchir à la façon dont tu as créé ta page web, cela t'aidera dans tes projets futurs. + +Réponds aux questions ci-dessous. Tu peux dessiner, écrire, taper un document, parler à quelqu'un ou répondre aux questions de ta propre façon créative qui te convient le mieux. + +\--- task --- + +Comment as-tu choisi le sujet de ta page web ? + +\--- /task --- + +\--- task --- + +Quelle technique HTML ou CSS préfères-tu ? + +\--- /task --- + +\--- task --- + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +« Un design n'est pas terminé avant que quelqu'un ne l'utilise. » (Brenda Laurel). +</p> + +Dans le parcours « Introduction au web », tu as utilisé beaucoup de compétences de conception différentes, notamment la conception visuelle, la conception pour l'accessibilité et l'expérience utilisateur et la conception technique. Quel type de design préfères-tu ? + +\--- /task --- + +### Maintenant, tu es un développeur de contenu web ! + +Prends un moment pour célébrer ce que tu as fait. + +\--- task --- + +Comment vas-tu utiliser tes nouveaux pouvoirs ? À qui montreras-tu tes pages web ? Que feras-tu ensuite ? + +\--- /task --- diff --git a/fr-FR/step_6.md b/fr-FR/step_6.md new file mode 100644 index 00000000..20071a18 --- /dev/null +++ b/fr-FR/step_6.md @@ -0,0 +1,53 @@ +## Améliorer ton projet + +Si tu as le temps, tu peux améliorer ta page web. Tu as peut-être déjà des idées à ajouter à ta page web ou tu souhaiteras peut-être revenir à la première étape et consulter à nouveau d’autres exemples de projets pour plus d’inspiration. + +Chaque exemple de projet dans [Introduction](.) a un lien « voir à l'intérieur » pour ouvrir le projet et regarder le code pour obtenir des idées et voir comment elles fonctionnent. + +\--- task --- + +Sur ta page web, tu pourrais améliorer : + +**Conception visuelle** + +- Mise en page +- Couleurs +- Polices +- Emojis +- Graphismes +- Bordures et ombres des boîtes +- Dégradés +- Images d'arrière-plan + +**Accessibilité** + +- Contraste des couleurs +- Tailles de police +- texte `alt` sur les images + +**Contenu** + +- Les mots que tu as utilisés. +- Peux-tu ajouter des informations plus utiles ? +- Une liste serait-elle plus efficace ? +- Dois-tu utiliser des éléments de titre différents ? +- Y a-t-il d'autres pages web vers lesquelles tu pourrais créer un lien ? + +**Expérience utilisateur** + +- Ta page est-elle bien présentée pour que les informations soient faciles à trouver ? +- Si tu as utilisé une animation, assure-toi qu'elle ne soit pas trop gênante pour les visiteurs de ta page web. + +**Design technique** + +- Considère si tu peux organiser tes propriétés CSS en classes que tu souhaiterais réutiliser. +- Assure-toi d'avoir utilisé des noms judicieux pour les classes CSS. +- Ajoute des commentaires utiles à ton HTML et CSS. + +\--- /task --- + +**Exemple de Donjons et Dragons** : [voir à l'intérieur](https://editor.raspberrypi.org/fr-FR/projects/what-is-d-and-d){:target="_blank"} + +<div> +<iframe src="https://editor.raspberrypi.org/en/embed/viewer/what-is-d-and-d" width="600" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe> +</div> diff --git a/fr-FR/step_7.md b/fr-FR/step_7.md new file mode 100644 index 00000000..a266799d --- /dev/null +++ b/fr-FR/step_7.md @@ -0,0 +1,11 @@ +## Et ensuite ? + +Tu as atteint la fin du parcours [Intro au web](https://projects.raspberrypi.org/fr-FR/pathways/web-intro) ! + +Tu peux maintenant créer des pages web sur tous les sujets qui t'intéressent et les partager. Essaie d’utiliser HTML et CSS pour concevoir et créer davantage de pages web. Si tu souhaites continuer à en apprendre davantage sur le développement web, tu peux consulter le parcours [Plus de web](https://projects.raspberrypi.org/fr-FR/pathways/more-web). + +Tu peux intégrer l'un de tes projets Concevoir ou Inventer dans Coolest Projects, ou créer une toute nouvelle page web complète. + +[[[web-coolest-projects]]] + +Tu peux également explorer nos [autres projets web](https://projects.raspberrypi.org/fr-FR/projects?software%5B%5D=html-css-javascript) et les essayer. diff --git a/fr-FR/web-comments.txt b/fr-FR/web-comments.txt new file mode 100644 index 00000000..9b81e1fe --- /dev/null +++ b/fr-FR/web-comments.txt @@ -0,0 +1,21 @@ +Titre affiché dans les navigateurs web + +Importer des polices depuis Google + +Inclure le fichier de style CSS + +Le code d'en-tête de la page va ici + +Le contenu principal de la page web se situe entre les balises principales + +Une section avec une image à gauche et du texte à droite + +Une section avec deux listes à puces + +Un titre pour la section des entrées + +Trois cartes à retourner avec des images d'un côté et du texte de l'autre + +Un titre pour la section des sorties + +Pied de page avec texte et lien hypertexte diff --git a/nl-NL/code/book-review/animation.css b/nl-NL/code/book-review/animation.css new file mode 100644 index 00000000..03885df5 --- /dev/null +++ b/nl-NL/code/book-review/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* voert de 'rotate-centre' animatie uit met lineaire timing (alles op hetzelfde tempo gedurende acht seconden). Voert de animatie twee keer uit. */ + display: inline-block; /* Belangrijk zodat het geanimeerde element niet wordt gesplitst naar een nieuwe regel */ +} + +@keyframes rotate-center { + /* De rotatie-animatiecode */ + 0% { + /* Roteren van 0 tot 360 graden */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* voert de 'bounce' animatie met 'ease timing' (langzame start en einde) gedurende twee seconden. Voert de animatie drie keer uit. */ + display: inline-block; +} + +@keyframes bounce { + /* De bounce-animatiecode */ + 0% { + transform: scale(1, 1) translateY(0); /* Beginpositie en werkelijke grootte */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Breedte vergroten en hoogte verkleinen voor pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Verplaats emoji terug naar de startpositie */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* voert de 'scale' animatie met 'ease timing' (langzame start en einde) uit gedurende twee seconden. Voert de animatie oneindig uit. */ + display: inline-block; +} + +@keyframes scale { + /* De scale animatiecode */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* De roll animatiecode */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* De roll animatiecode */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* De move animatiecode */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* De move animatiecode */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/nl-NL/code/book-review/beetle.jpg b/nl-NL/code/book-review/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/nl-NL/code/book-review/beetle.jpg differ diff --git a/nl-NL/code/book-review/butterfly.JPG b/nl-NL/code/book-review/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/nl-NL/code/book-review/butterfly.JPG differ diff --git a/nl-NL/code/book-review/cacti.JPG b/nl-NL/code/book-review/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/nl-NL/code/book-review/cacti.JPG differ diff --git a/nl-NL/code/book-review/cafe.css b/nl-NL/code/book-review/cafe.css new file mode 100644 index 00000000..e05a2b43 --- /dev/null +++ b/nl-NL/code/book-review/cafe.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/nl-NL/code/book-review/cafe.jpg b/nl-NL/code/book-review/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/nl-NL/code/book-review/cafe.jpg differ diff --git a/nl-NL/code/book-review/candles.JPG b/nl-NL/code/book-review/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/nl-NL/code/book-review/candles.JPG differ diff --git a/nl-NL/code/book-review/carnival.jpg b/nl-NL/code/book-review/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/nl-NL/code/book-review/carnival.jpg differ diff --git a/nl-NL/code/book-review/colour-festival.jpg b/nl-NL/code/book-review/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/nl-NL/code/book-review/colour-festival.jpg differ diff --git a/nl-NL/code/book-review/comic-books.jpg b/nl-NL/code/book-review/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/nl-NL/code/book-review/comic-books.jpg differ diff --git a/nl-NL/code/book-review/comic.css b/nl-NL/code/book-review/comic.css new file mode 100644 index 00000000..83bdeb61 --- /dev/null +++ b/nl-NL/code/book-review/comic.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/nl-NL/code/book-review/companion.css b/nl-NL/code/book-review/companion.css new file mode 100644 index 00000000..8af48be6 --- /dev/null +++ b/nl-NL/code/book-review/companion.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/nl-NL/code/book-review/crayons.jpg b/nl-NL/code/book-review/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/nl-NL/code/book-review/crayons.jpg differ diff --git a/nl-NL/code/book-review/default.css b/nl-NL/code/book-review/default.css new file mode 100644 index 00000000..69ed8275 --- /dev/null +++ b/nl-NL/code/book-review/default.css @@ -0,0 +1,20 @@ + +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/disco-ball.jpg b/nl-NL/code/book-review/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/nl-NL/code/book-review/disco-ball.jpg differ diff --git a/nl-NL/code/book-review/disco-flowers.JPG b/nl-NL/code/book-review/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/nl-NL/code/book-review/disco-flowers.JPG differ diff --git a/nl-NL/code/book-review/disco.css b/nl-NL/code/book-review/disco.css new file mode 100644 index 00000000..31be1664 --- /dev/null +++ b/nl-NL/code/book-review/disco.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/nl-NL/code/book-review/drone.JPG b/nl-NL/code/book-review/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/nl-NL/code/book-review/drone.JPG differ diff --git a/nl-NL/code/book-review/exotic-plants.jpg b/nl-NL/code/book-review/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/nl-NL/code/book-review/exotic-plants.jpg differ diff --git a/nl-NL/code/book-review/ferns.jpg b/nl-NL/code/book-review/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/nl-NL/code/book-review/ferns.jpg differ diff --git a/nl-NL/code/book-review/festival.css b/nl-NL/code/book-review/festival.css new file mode 100644 index 00000000..1b37e92f --- /dev/null +++ b/nl-NL/code/book-review/festival.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/fiesta.css b/nl-NL/code/book-review/fiesta.css new file mode 100644 index 00000000..6722fead --- /dev/null +++ b/nl-NL/code/book-review/fiesta.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/nl-NL/code/book-review/fire.jpg b/nl-NL/code/book-review/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/nl-NL/code/book-review/fire.jpg differ diff --git a/nl-NL/code/book-review/fish.jpg b/nl-NL/code/book-review/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/nl-NL/code/book-review/fish.jpg differ diff --git a/nl-NL/code/book-review/forest.JPG b/nl-NL/code/book-review/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/nl-NL/code/book-review/forest.JPG differ diff --git a/nl-NL/code/book-review/game-boy.jpg b/nl-NL/code/book-review/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/nl-NL/code/book-review/game-boy.jpg differ diff --git a/nl-NL/code/book-review/globe-in-water.JPG b/nl-NL/code/book-review/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/nl-NL/code/book-review/globe-in-water.JPG differ diff --git a/nl-NL/code/book-review/greenhouse.JPG b/nl-NL/code/book-review/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/nl-NL/code/book-review/greenhouse.JPG differ diff --git a/nl-NL/code/book-review/helpful-plumber.css b/nl-NL/code/book-review/helpful-plumber.css new file mode 100644 index 00000000..8b6f5fd1 --- /dev/null +++ b/nl-NL/code/book-review/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/nl-NL/code/book-review/illustrations.png b/nl-NL/code/book-review/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/nl-NL/code/book-review/illustrations.png differ diff --git a/nl-NL/code/book-review/index.html b/nl-NL/code/book-review/index.html new file mode 100644 index 00000000..5a303179 --- /dev/null +++ b/nl-NL/code/book-review/index.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html lang="nl"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="ie=edge" /> + + <!-- Title shown in web browsers--> + <title>Tango makes three + + + + + + + + + + + + + + + +
+

Tango makes three

+
+ + +
+
+

Mijn boekrecensie.

+
+
+ Beschrijving van de afbeelding. +
+
+
+

'tango makes three is een geweldig verhaal dat veel prijzen heeft gewonnen, dus je moet het zeker lezen"

+ - ik. +
+
+
+
+

Ik vond het een briljant boek. Het is gebaseerd op een waargebeurd verhaal, dus je leert er ook nog eens heel veel van.

+
+

Ik zal de inhoud van het verhaal niet verklappen, maar het gaat over twee mannelijke pinguïns, Roy en Silo, die een ei krijgen en een gezin van hetzelfde geslacht stichten.

+
+

Het is ontzettend belangrijk om over diverse families te lezen.

+
+

Samenvatting van de redenen om Tango Makes Three te lezen:

+
+ +
+ + +
+
+
+

Reden 1

+
+ +
+

Het heeft heel veel prijzen gewonnen - en ik bedoel echt heel veel

+
+
+
+ +
+
+
+

Reden 2

+
+ +
+

Het is gebaseerd op een waargebeurd verhaal, dus je leert veel over de natuur

+
+
+
+ +
+
+
+

Reden 3

+
+ +
+

Sommige volwassenen hebben het verboden, maar wij weten het beter

+
+
+
+
+
+
+ + + + + + + diff --git a/nl-NL/code/book-review/lake-mountains.JPG b/nl-NL/code/book-review/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/nl-NL/code/book-review/lake-mountains.JPG differ diff --git a/nl-NL/code/book-review/land-animals.css b/nl-NL/code/book-review/land-animals.css new file mode 100644 index 00000000..2f3162dc --- /dev/null +++ b/nl-NL/code/book-review/land-animals.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/medal.jpg b/nl-NL/code/book-review/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/nl-NL/code/book-review/medal.jpg differ diff --git a/nl-NL/code/book-review/medals.css b/nl-NL/code/book-review/medals.css new file mode 100644 index 00000000..7ac4f74b --- /dev/null +++ b/nl-NL/code/book-review/medals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/money.css b/nl-NL/code/book-review/money.css new file mode 100644 index 00000000..a05b3d82 --- /dev/null +++ b/nl-NL/code/book-review/money.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/nl-NL/code/book-review/monkey.JPG b/nl-NL/code/book-review/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/nl-NL/code/book-review/monkey.JPG differ diff --git a/nl-NL/code/book-review/moon-art.png b/nl-NL/code/book-review/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/nl-NL/code/book-review/moon-art.png differ diff --git a/nl-NL/code/book-review/mushroom.JPG b/nl-NL/code/book-review/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/nl-NL/code/book-review/mushroom.JPG differ diff --git a/nl-NL/code/book-review/nature.css b/nl-NL/code/book-review/nature.css new file mode 100644 index 00000000..c1989be7 --- /dev/null +++ b/nl-NL/code/book-review/nature.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/pansies.JPG b/nl-NL/code/book-review/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/nl-NL/code/book-review/pansies.JPG differ diff --git a/nl-NL/code/book-review/pastel-hearts.jpg b/nl-NL/code/book-review/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/nl-NL/code/book-review/pastel-hearts.jpg differ diff --git a/nl-NL/code/book-review/pastel.css b/nl-NL/code/book-review/pastel.css new file mode 100644 index 00000000..b8befe50 --- /dev/null +++ b/nl-NL/code/book-review/pastel.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/piggy-bank.jpg b/nl-NL/code/book-review/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/nl-NL/code/book-review/piggy-bank.jpg differ diff --git a/nl-NL/code/book-review/placeholder.png b/nl-NL/code/book-review/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/nl-NL/code/book-review/placeholder.png differ diff --git a/nl-NL/code/book-review/primary.css b/nl-NL/code/book-review/primary.css new file mode 100644 index 00000000..51add70b --- /dev/null +++ b/nl-NL/code/book-review/primary.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/project_config.yml b/nl-NL/code/book-review/project_config.yml new file mode 100644 index 00000000..f17b6302 --- /dev/null +++ b/nl-NL/code/book-review/project_config.yml @@ -0,0 +1,3 @@ +name: 'Boekrecensie' +identifier: 'book-review' +type: 'html' diff --git a/nl-NL/code/book-review/pumpkins.JPG b/nl-NL/code/book-review/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/nl-NL/code/book-review/pumpkins.JPG differ diff --git a/nl-NL/code/book-review/rainbow-forest.JPG b/nl-NL/code/book-review/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/nl-NL/code/book-review/rainbow-forest.JPG differ diff --git a/nl-NL/code/book-review/rhino.JPG b/nl-NL/code/book-review/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/nl-NL/code/book-review/rhino.JPG differ diff --git a/nl-NL/code/book-review/smokey.css b/nl-NL/code/book-review/smokey.css new file mode 100644 index 00000000..df2cba2d --- /dev/null +++ b/nl-NL/code/book-review/smokey.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/space.css b/nl-NL/code/book-review/space.css new file mode 100644 index 00000000..91fe44a1 --- /dev/null +++ b/nl-NL/code/book-review/space.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/spider-web.jpg b/nl-NL/code/book-review/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/nl-NL/code/book-review/spider-web.jpg differ diff --git a/nl-NL/code/book-review/style.css b/nl-NL/code/book-review/style.css new file mode 100644 index 00000000..1757c210 --- /dev/null +++ b/nl-NL/code/book-review/style.css @@ -0,0 +1,335 @@ +/* Kleurcombinaties */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Overal toepassen */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Opvulling en rand maken een vak niet groter */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Laat de inhoud de pagina vullen zodat de voettekst onderaan staat */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* voeg een achtergrondafbeelding toe aan de hoofdtekst */ + +body { + /*background-image: url('name.jpg');*/ /* Verwijder commentaar en wijzig de bestandsnaam om een achtergrondafbeelding toe te voegen */ + /*background-repeat: repeat;*/ /* Laat de afbeelding herhalen */ + /*background-size: cover;*/ /* Zorg ervoor dat de afbeelding de hele container bedekt */ +} + +/* De hoofdinhoud van de pagina tussen de kop- en voettekst */ +main { + background: var(--primary); /* Kleur de achtergrond */ + color: var(--onprimary); /* Kleur de tekst */ + margin: 0 auto; /* Centreren als de browser erg breed is */ + min-width: 25rem; /* Don't let the content get too narrow */ + max-width: 70rem; /* Don't let the content get too wide */ + padding: 0; + padding-top: 0.5rem; /* Padding at the top */ + margin-bottom: 1em; /* Tussenruimte vóór de voettekst */ +} + +/* Kop- en voettekst element stijlen */ + +header, +footer { + text-align: center; + width: 100%; /* Vul de volledige breedte van het venster */ + margin: 0; /* Remove the default margin */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Sectiestijlen */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Randstijlen */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Voeg een ononderbroken lijn toe */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Voeg een ononderbroken lijn toe boven de voettekst */ +} + +/* Voeg een transparant effect toe */ + +.transparent { + opacity: 0.95; +} + +/* Stijlen alleen voor h1-elementen */ + +h1 { + font: var(--header-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ + padding: 2rem; + margin: 0; /* Centreren als de browser erg breed is */ +} + +/* Stijlen alleen voor h2-elementen */ + +h2 { + font: var(--title-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ +} + +/* Markeer sleutelwoorden vet en pas een alternatieve tekstkleur toe */ + +strong { + color: var(--detail1); /* Tekstkleur opgeslagen in de bijschrift variabele */ + font-weight: bold; /* Maakt tekstgewicht sterker dan de standaard */ +} + +/* Stijl voor geordende en ongeordende lijsten */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Opvulling rond alinea's */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Stijl voor links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Gebruik de kleur van het bovenliggende element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Stijlen alleen voor de .wrap class */ + +.wrap { + /* Laat inhoud over meerdere rijen lopen */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontal and vertical gap */ +} + +/* Voor het maken van mooie vakjes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Stijlen voor de div tags die zich in een .wrap class bevinden */ + +.wrap > div { + width: 14rem; +} + +/* Stijlen voor de img tags die zich in een .wrap class bevinden */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Stijlen voor de p-tags die zich in een .wrap class bevinden */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specifieke stijlen voor dit project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Gebruikt om een grote emoji te maken */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specifieke stijlen voor dit project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* rechter- en onderste schaduwzijde, blur, spread en kleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Afgedrukte fotostijl */ + +.photo { + border: 1px solid #D0D0D0; /* Voeg een ononderbroken rand toe */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* rechts en onderste schaduw, blur, spread en kleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/nl-NL/code/book-review/sunflowers.JPG b/nl-NL/code/book-review/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/nl-NL/code/book-review/sunflowers.JPG differ diff --git a/nl-NL/code/book-review/sunset-beach.JPG b/nl-NL/code/book-review/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/nl-NL/code/book-review/sunset-beach.JPG differ diff --git a/nl-NL/code/book-review/sunset-person.jpg b/nl-NL/code/book-review/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/nl-NL/code/book-review/sunset-person.jpg differ diff --git a/nl-NL/code/book-review/sunset.JPG b/nl-NL/code/book-review/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/nl-NL/code/book-review/sunset.JPG differ diff --git a/nl-NL/code/book-review/sunset.css b/nl-NL/code/book-review/sunset.css new file mode 100644 index 00000000..4f655683 --- /dev/null +++ b/nl-NL/code/book-review/sunset.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/sunshine.css b/nl-NL/code/book-review/sunshine.css new file mode 100644 index 00000000..23eb3cec --- /dev/null +++ b/nl-NL/code/book-review/sunshine.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/tango.jpeg b/nl-NL/code/book-review/tango.jpeg new file mode 100644 index 00000000..d91acb15 Binary files /dev/null and b/nl-NL/code/book-review/tango.jpeg differ diff --git a/nl-NL/code/book-review/thriller.css b/nl-NL/code/book-review/thriller.css new file mode 100644 index 00000000..b70e7771 --- /dev/null +++ b/nl-NL/code/book-review/thriller.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/water-animals.css b/nl-NL/code/book-review/water-animals.css new file mode 100644 index 00000000..5a515ac7 --- /dev/null +++ b/nl-NL/code/book-review/water-animals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/book-review/woodland.css b/nl-NL/code/book-review/woodland.css new file mode 100644 index 00000000..22978fbf --- /dev/null +++ b/nl-NL/code/book-review/woodland.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/animation.css b/nl-NL/code/build-a-web-page-starter/animation.css new file mode 100644 index 00000000..e83db82b --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* voert de 'rotate-centre' animatie uit met lineaire timing (alles op hetzelfde tempo gedurende acht seconden). Voert de animatie twee keer uit. */ + display: inline-block; /* Belangrijk zodat het geanimeerde element niet wordt gesplitst naar een nieuwe regel */ +} + +@keyframes rotate-center { + /* De rotatie-animatiecode */ + 0% { + /* Roteren van 0 tot 360 graden */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* voert de 'bounce' animatie met 'ease timing' (langzame start en einde) gedurende twee seconden. Voert de animatie drie keer uit. */ + display: inline-block; +} + +@keyframes bounce { + /* De bounce-animatiecode */ + 0% { + transform: scale(1, 1) translateY(0); /* Beginpositie en werkelijke grootte */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Breedte vergroten en hoogte verkleinen voor pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Keer terug naar werkelijke grootte en verplaats emoji omhoog met 100px van de huidige positie */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Verplaats emoji terug naar de startpositie */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* voert de 'scale' animatie met 'ease timing' (langzame start en einde) uit gedurende twee seconden. Voert de animatie oneindig uit. */ + display: inline-block; +} + +@keyframes scale { + /* De scale animatiecode */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* De roll animatiecode */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* De roll animatiecode */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* De move animatiecode */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* De move animatiecode */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/nl-NL/code/build-a-web-page-starter/beetle.jpg b/nl-NL/code/build-a-web-page-starter/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/beetle.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/butterfly.JPG b/nl-NL/code/build-a-web-page-starter/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/butterfly.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/cacti.JPG b/nl-NL/code/build-a-web-page-starter/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/cacti.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/cafe.css b/nl-NL/code/build-a-web-page-starter/cafe.css new file mode 100644 index 00000000..e05a2b43 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/cafe.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/cafe.jpg b/nl-NL/code/build-a-web-page-starter/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/cafe.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/candles.JPG b/nl-NL/code/build-a-web-page-starter/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/candles.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/carnival.jpg b/nl-NL/code/build-a-web-page-starter/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/carnival.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/colour-festival.jpg b/nl-NL/code/build-a-web-page-starter/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/colour-festival.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/comic-books.jpg b/nl-NL/code/build-a-web-page-starter/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/comic-books.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/comic.css b/nl-NL/code/build-a-web-page-starter/comic.css new file mode 100644 index 00000000..83bdeb61 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/comic.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/nl-NL/code/build-a-web-page-starter/companion.css b/nl-NL/code/build-a-web-page-starter/companion.css new file mode 100644 index 00000000..8af48be6 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/companion.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/nl-NL/code/build-a-web-page-starter/crayons.jpg b/nl-NL/code/build-a-web-page-starter/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/crayons.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/default.css b/nl-NL/code/build-a-web-page-starter/default.css new file mode 100644 index 00000000..69ed8275 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/default.css @@ -0,0 +1,20 @@ + +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/disco-ball.jpg b/nl-NL/code/build-a-web-page-starter/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/disco-ball.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/disco-flowers.JPG b/nl-NL/code/build-a-web-page-starter/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/disco-flowers.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/disco.css b/nl-NL/code/build-a-web-page-starter/disco.css new file mode 100644 index 00000000..31be1664 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/disco.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/nl-NL/code/build-a-web-page-starter/drone.JPG b/nl-NL/code/build-a-web-page-starter/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/drone.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/exotic-plants.jpg b/nl-NL/code/build-a-web-page-starter/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/exotic-plants.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/ferns.jpg b/nl-NL/code/build-a-web-page-starter/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/ferns.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/festival.css b/nl-NL/code/build-a-web-page-starter/festival.css new file mode 100644 index 00000000..1b37e92f --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/festival.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/fiesta.css b/nl-NL/code/build-a-web-page-starter/fiesta.css new file mode 100644 index 00000000..6722fead --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/fiesta.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/nl-NL/code/build-a-web-page-starter/fire.jpg b/nl-NL/code/build-a-web-page-starter/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/fire.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/fish.jpg b/nl-NL/code/build-a-web-page-starter/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/fish.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/forest.JPG b/nl-NL/code/build-a-web-page-starter/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/forest.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/game-boy.jpg b/nl-NL/code/build-a-web-page-starter/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/game-boy.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/globe-in-water.JPG b/nl-NL/code/build-a-web-page-starter/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/globe-in-water.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/greenhouse.JPG b/nl-NL/code/build-a-web-page-starter/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/greenhouse.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/helpful-plumber.css b/nl-NL/code/build-a-web-page-starter/helpful-plumber.css new file mode 100644 index 00000000..8b6f5fd1 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/nl-NL/code/build-a-web-page-starter/illustrations.png b/nl-NL/code/build-a-web-page-starter/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/illustrations.png differ diff --git a/nl-NL/code/build-a-web-page-starter/index.html b/nl-NL/code/build-a-web-page-starter/index.html new file mode 100644 index 00000000..5252c91f --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/index.html @@ -0,0 +1,45 @@ + + + + + + + + + De titel van mijn website + + + + + + + + + + + + + + + +
+

Grote titel

+
+ + +
+
+

Lorem ipsum dolor sit amet.

+
+
+ + + + + + diff --git a/nl-NL/code/build-a-web-page-starter/lake-mountains.JPG b/nl-NL/code/build-a-web-page-starter/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/lake-mountains.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/land-animals.css b/nl-NL/code/build-a-web-page-starter/land-animals.css new file mode 100644 index 00000000..2f3162dc --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/land-animals.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/medal.jpg b/nl-NL/code/build-a-web-page-starter/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/medal.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/medals.css b/nl-NL/code/build-a-web-page-starter/medals.css new file mode 100644 index 00000000..7ac4f74b --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/medals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/money.css b/nl-NL/code/build-a-web-page-starter/money.css new file mode 100644 index 00000000..a05b3d82 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/money.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/nl-NL/code/build-a-web-page-starter/monkey.JPG b/nl-NL/code/build-a-web-page-starter/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/monkey.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/moon-art.png b/nl-NL/code/build-a-web-page-starter/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/moon-art.png differ diff --git a/nl-NL/code/build-a-web-page-starter/mushroom.JPG b/nl-NL/code/build-a-web-page-starter/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/mushroom.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/nature.css b/nl-NL/code/build-a-web-page-starter/nature.css new file mode 100644 index 00000000..c1989be7 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/nature.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/pansies.JPG b/nl-NL/code/build-a-web-page-starter/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/pansies.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/pastel-hearts.jpg b/nl-NL/code/build-a-web-page-starter/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/pastel-hearts.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/pastel.css b/nl-NL/code/build-a-web-page-starter/pastel.css new file mode 100644 index 00000000..b8befe50 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/pastel.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/piggy-bank.jpg b/nl-NL/code/build-a-web-page-starter/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/piggy-bank.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/placeholder.png b/nl-NL/code/build-a-web-page-starter/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/placeholder.png differ diff --git a/nl-NL/code/build-a-web-page-starter/primary.css b/nl-NL/code/build-a-web-page-starter/primary.css new file mode 100644 index 00000000..4a6a0cd4 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/primary.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/project_config.yml b/nl-NL/code/build-a-web-page-starter/project_config.yml new file mode 100644 index 00000000..b2b1e2a9 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/project_config.yml @@ -0,0 +1,3 @@ +name: 'Bouw een start voor een webpagina' +identifier: 'build-a-web-page-starter' +type: 'html' diff --git a/nl-NL/code/build-a-web-page-starter/pumpkins.JPG b/nl-NL/code/build-a-web-page-starter/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/pumpkins.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/rainbow-forest.JPG b/nl-NL/code/build-a-web-page-starter/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/rainbow-forest.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/rhino.JPG b/nl-NL/code/build-a-web-page-starter/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/rhino.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/smokey.css b/nl-NL/code/build-a-web-page-starter/smokey.css new file mode 100644 index 00000000..df2cba2d --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/smokey.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/space.css b/nl-NL/code/build-a-web-page-starter/space.css new file mode 100644 index 00000000..91fe44a1 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/space.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/spider-web.jpg b/nl-NL/code/build-a-web-page-starter/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/spider-web.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/style.css b/nl-NL/code/build-a-web-page-starter/style.css new file mode 100644 index 00000000..fb989537 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/style.css @@ -0,0 +1,316 @@ +/* Kleurcombinaties */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Overal toepassen */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Opvulling en rand maken een vak niet groter */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Laat de inhoud de pagina vullen zodat de voettekst onderaan staat */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* voeg een achtergrondafbeelding toe aan de hoofdtekst */ + +body { + /*background-image: url('name.jpg');*/ /* Verwijder commentaar en wijzig de bestandsnaam om een achtergrondafbeelding toe te voegen */ + /*background-repeat: repeat;*/ /* Laat de afbeelding herhalen */ + /*background-size: cover;*/ /* Zorg ervoor dat de afbeelding de hele container bedekt */ +} + +/* De hoofdinhoud van de pagina tussen de kop- en voettekst */ +main { + background: var(--primary); /* Kleur de achtergrond */ + color: var(--onprimary); /* Kleur de tekst */ + margin: 0 auto; /* Centreren als de browser erg breed is */ + min-width: 25rem; /* Laat de inhoud niet te smal worden */ + max-width: 70rem; /* Laat de inhoud niet te breed worden */ + padding: 0; + padding-top: 0.5rem; /* Vulling bovenaan */ + margin-bottom: 1em; /* Tussenruimte vóór de voettekst */ +} + +/* Kop- en voettekst element stijlen */ + +header, +footer { + text-align: center; + width: 100%; /* Vul de volledige breedte van het venster */ + margin: 0; /* Verwijder de standaardmarge */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Sectiestijlen */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Randstijlen */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Voeg een ononderbroken lijn toe */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Voeg een ononderbroken lijn toe boven de voettekst */ +} + +/* Voeg een transparant effect toe */ + +.transparent { + opacity: 0.95; +} + +/* Stijlen alleen voor h1-elementen */ + +h1 { + font: var(--header-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ + padding: 2rem; + margin: 0; /* Centreren als de browser erg breed is */ +} + +/* Stijlen alleen voor h2-elementen */ + +h2 { + font: var(--title-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ +} + +/* Markeer sleutelwoorden vet en pas een alternatieve tekstkleur toe */ + +strong { + color: var(--detail2); /* Tekst kleur opgeslagen in de bijschrift variabele */ + font-weight: bold; /* Maakt tekstgewicht sterker dan de standaard */ +} + +/* Stijl voor geordende en ongeordende lijsten */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Opvulling rond alinea's */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Stijl voor links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Gebruik de kleur van het bovenliggende element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Stijlen alleen voor de .wrap class */ + +.wrap { + /* Laat inhoud over meerdere rijen lopen */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontale en verticale ruimte */ +} + +/* Voor het maken van mooie vakjes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Stijlen voor de div tags die zich in een .wrap class bevinden */ + +.wrap > div { + width: 14rem; +} + +/* Stijlen voor de img tags die zich in een .wrap class bevinden */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Stijlen voor de p-tags die zich in een .wrap class bevinden */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specifieke stijlen voor dit project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Gebruikt om een grote emoji te maken */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specifieke stijlen voor dit project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* rechter- en onderste schaduwzijde, blur, spread en kleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Afgedrukte fotostijl */ + +.photo { + border: 1px solid #D0D0D0; /* Voeg een ononderbroken rand toe */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* rechts en onderste schaduw, blur, spread en kleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/nl-NL/code/build-a-web-page-starter/sunflowers.JPG b/nl-NL/code/build-a-web-page-starter/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/sunflowers.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/sunset-beach.JPG b/nl-NL/code/build-a-web-page-starter/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/sunset-beach.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/sunset-person.jpg b/nl-NL/code/build-a-web-page-starter/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/sunset-person.jpg differ diff --git a/nl-NL/code/build-a-web-page-starter/sunset.JPG b/nl-NL/code/build-a-web-page-starter/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/nl-NL/code/build-a-web-page-starter/sunset.JPG differ diff --git a/nl-NL/code/build-a-web-page-starter/sunset.css b/nl-NL/code/build-a-web-page-starter/sunset.css new file mode 100644 index 00000000..4f655683 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/sunset.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/sunshine.css b/nl-NL/code/build-a-web-page-starter/sunshine.css new file mode 100644 index 00000000..23eb3cec --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/sunshine.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/thriller.css b/nl-NL/code/build-a-web-page-starter/thriller.css new file mode 100644 index 00000000..b70e7771 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/thriller.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/water-animals.css b/nl-NL/code/build-a-web-page-starter/water-animals.css new file mode 100644 index 00000000..5a515ac7 --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/water-animals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/build-a-web-page-starter/woodland.css b/nl-NL/code/build-a-web-page-starter/woodland.css new file mode 100644 index 00000000..22978fbf --- /dev/null +++ b/nl-NL/code/build-a-web-page-starter/woodland.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/egypt/Egypt-Valley-of-the-kings.jpg b/nl-NL/code/egypt/Egypt-Valley-of-the-kings.jpg new file mode 100644 index 00000000..cbad0b30 Binary files /dev/null and b/nl-NL/code/egypt/Egypt-Valley-of-the-kings.jpg differ diff --git a/nl-NL/code/egypt/Explore.css b/nl-NL/code/egypt/Explore.css new file mode 100644 index 00000000..35edf8bf --- /dev/null +++ b/nl-NL/code/egypt/Explore.css @@ -0,0 +1,197 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +html{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ +height: 12%; +display: flex; +align-items: center; +} + +.logo{ +width: 50px; +cursor: pointer; +color: white; +font-size: 20px; +} + +.navbar i{ +width: 30px; +cursor: pointer; +margin-left: 40px; +} + +nav{ +flex: 1; +text-align: right; +} + +nav ul li{ +list-style: none; +display: inline-block; +margin-left: 60px; +color: white; +font-size: 13px; +} + +/* Informatievakken */ + +.wrapper{ +display: grid; +margin: 200px 90px auto; +grid-gap: 20px; +grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { +.wrapper{ + margin: 200px auto; +} +} +.wrapper .box{ +width: 350px; +margin: 0 auto; +position: relative; +perspective: 1000px; +border: #000000; +border-radius: 2px; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +padding-bottom: 75px; +padding-right: 75px; +} +.wrapper .box .front-face{ +background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); +background-size: cover; +height: 220px; +width: 100%; +display: flex; +flex-direction: column; +justify-content: center; +border-radius: 2px; +border-color: #000000; +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +-webkit-border-radius: 2px; +-moz-border-radius: 2px; +-ms-border-radius: 2px; +-o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ +font-size: 22px; +font-weight: 600; +text-transform: uppercase; +} + +.box .front-face span{ +background: linear-gradient(-135deg, #000000, #000000); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +text-align: center; +} + + +.box .back-face{ +position: absolute; +top: 0; +left: 0; +z-index: 1; +height: 220px; +width: 100%; +padding: 30px; +color: #fff; +opacity: 0; +transform-style: preserve-3d; +backface-visibility: hidden; +background: linear-gradient(-135deg, #000000, #000000); +transform: translateY(110px) rotateX(-90deg); +box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); +transition: all 0.5s ease; +} + +.box .back-face p{ +margin-top: 10px; +text-align: justify; +} + +.box:hover .back-face{ +opacity: 1; +transform: rotateX(0deg); +} + +.box:hover .front-face{ +opacity: 0; +transform: translateY(-110px) rotateX(90deg); +} + + +/*Achtergronden van vakken*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg); + } + + .box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg); + } + + .box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg); + } + + .box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg); + } + + .box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg); + } + + .box .front-face.face6{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg); + } + + .box .front-face.face7{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg); + } + + .box .front-face.face{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); + } + + .box .back-face button{ + height: 60px; + width: 100%; + margin-top: 55px; + background-color: rgb(52, 52, 255); + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -ms-border-radius: 30px; + -o-border-radius: 30px; + text-align: center; + font-size: xx-large; +} + +.box .back-face a{ + text-decoration: none; +} \ No newline at end of file diff --git a/nl-NL/code/egypt/Explore.html b/nl-NL/code/egypt/Explore.html new file mode 100644 index 00000000..c9b2d895 --- /dev/null +++ b/nl-NL/code/egypt/Explore.html @@ -0,0 +1,116 @@ + + + + + + + Egypte verkennen + + + +
+
+ + + +
+
+
+
+ Vallei der Koningen +
+
+ Vallei der Koningen +

+ We kennen allemaal Toetanchamon en hier kun je zijn graf bezoeken. Je kunt zelfs alle graven van de koningen van de farao's bezoeken. Ramses Iv en alle anderen werden bijgezet in extravagante graven vol rijkdommen en juwelen op de westelijke Nijloever. +

+
+
+
+
+ Islamitisch Caïro +
+
+ Islamitisch Caïro +

+ Het islamitische Caïro staat bekend als de “Stad der Citadellen” met vele moskeeën om te bezoeken, waaronder de Sultan Hussan Moskee en de Alabaster Moskee, ook wel bekend als de Moskee van Muhammad Ali. Het is de meest bezochte moskee in heel Egypte en terecht. +

+
+
+
+
+ Egyptisch Museum +
+
+ Egyptisch Museum +

+ Andere musea over de hele wereld bezitten ook Egyptische artefacten, maar dit museum tilt het naar een hoger niveau. + +Het is de moeite waard om het museum te bezoeken, want als je de tempels van Egypte bezoekt, zie je daarbinnen niets. De objecten zijn allemaal naar de veilige plek van het museum gebracht, waar je ze met eigen ogen kunt bekijken. +

+
+
+
+
+ El Gouna +
+
+ El Gouna +

+ Voor een luxe vakantie in Egypte is El Gouna een populaire vakantiebestemming. Het is een populaire plek om te duiken in de Rode Zee, te ontspannen op het strand en dolfijnen te spotten. +

+
+
+
+
+ Sharm El-Sheikh +
+
+ Sharm El-Sheikh +

+ Sharm El Sheik is een van de populairste vakantiebestemmingen in Egypte en ligt op het Sinaï-schiereiland. Het is wederom een uitstekende plek om te duiken, maar dankzij de gunstige ligging is het ook een geweldige plek voor avontuur. Je kunt de Sinaï beklimmen of een uitstapje maken naar de woestijn om een van de Bedoeïenenkampen te ervaren +

+
+
+
+
+ Klooster van Sint-Catharina +
+
+ Klooster van Sint-Catharina +

+ Een bezoek aan het Sint-Catharinaklooster, gelegen aan de voet van de Sinaï, is een must-see als je op het Sinaï-schiereiland bent. Het is de plaats waar God tot Mozes sprak als een brandende struik. Dit klooster dateert uit de 5e eeuw na Christus en is het oudste nog actieve christelijke klooster ter wereld. +

+
+
+
+
+ Alexandrië +
+
+ Alexandrië +

+ Gelegen aan de Middellandse Zee, is Alexandrië de plek waar oost en west samenkomen. Alexandrië werd gesticht door Alexander de Grote en herbergde een van de zeven antieke wereldwonderen: de vuurtoren van Alexandrië. Psst: De Grote Piramiden zijn nog zo'n oud wereldwonder. +

+
+
+
+
+ Bezoek het Egyptische Ministerie van Toerisme +
+
+ Bezoek het Egyptische Ministerie van Toerisme + +
+
+
+
+ + + \ No newline at end of file diff --git a/nl-NL/code/egypt/History.css b/nl-NL/code/egypt/History.css new file mode 100644 index 00000000..cc610fa9 --- /dev/null +++ b/nl-NL/code/egypt/History.css @@ -0,0 +1,166 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + } + +html{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +} + +.container{ + width: 100%; + height: auto; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +/* Informatievakken */ + +.wrapper{ + display: grid; + margin: 200px 90px auto; + grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} +@media (max-width: 700px) { + .wrapper{ + margin: 200px auto; + } +} +.wrapper .box{ + width: 350px; + margin: 0 auto; + position: relative; + perspective: 1000px; + border: #000000; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; + padding-bottom: 75px; + padding-right: 75px; +} +.wrapper .box .front-face{ + background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-size: cover; + height: 220px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 2px; + border-color: #000000; + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; +} + +.box .front-face span, +.box .back-face span{ + font-size: 22px; + font-weight: 600; + text-transform: uppercase; +} + +.box .front-face span{ + background: linear-gradient(-135deg, #000000, #000000); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; +} + + +.box .back-face{ + position: absolute; + top: 0; + left: 0; + z-index: 1; + height: 220px; + width: 100%; + padding: 30px; + color: #fff; + opacity: 0; + transform-style: preserve-3d; + backface-visibility: hidden; + background: linear-gradient(-135deg, #000000, #000000); + transform: translateY(110px) rotateX(-90deg); + box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1); + transition: all 0.5s ease; +} + +.box .back-face p{ + margin-top: 10px; + text-align: justify; +} + +.box:hover .back-face{ + opacity: 1; + transform: rotateX(0deg); +} + +.box:hover .front-face{ + opacity: 0; + transform: translateY(-110px) rotateX(90deg); +} + +/*Achtergronden van vakken*/ + +.box .front-face.face1{ + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg); +} + +.box .front-face.face2{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg); +} + +.box .front-face.face3{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg); +} + +.box .front-face.face4{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg); +} + +.box .front-face.face5{ + background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); +} \ No newline at end of file diff --git a/nl-NL/code/egypt/History.html b/nl-NL/code/egypt/History.html new file mode 100644 index 00000000..8b23c1bb --- /dev/null +++ b/nl-NL/code/egypt/History.html @@ -0,0 +1,85 @@ + + + + + + + Geschiedenis van Egypte + + + +
+
+ + + +
+
+
+
+ Het Oude Egypte +
+
+ Het Oude Egypte +

+ Het oude Egypte is verdeeld in drie ‘koninkrijksperioden’: het Oude, het Midden en het Nieuwe, met kortere tussenliggende periodes die de koninkrijken van elkaar scheiden. Al vóór het Oude Rijk werden de fundamenten van de Egyptische beschaving gelegd. Duizenden jaren lang al, toen de mensen die in de buurt van de Nijl woonden, zich steeds meer op permanente landbouw gingen richten. Dit leidde tot verstedelijking en gespecialiseerde, niet-agrarische economische activiteiten. +

+
+
+
+
+ OUD Oud Egyptisch Koninkrijk +
+
+ OUD Oud Egyptisch Koninkrijk +

+ Bewijzen van menselijke bewoning in Egypte gaan tienduizenden jaren terug. Pas rond 6000 v. Chr. ontstond er een grootschalige nederzetting in de regio. Rond deze tijd breidde de Saharawoestijn zich uit. Sommige wetenschappers denken dat deze uitbreiding werd veroorzaakt door een kleine verschuiving in de helling van de Aarde. Anderen hebben onderzoek gedaan naar veranderende regenvalpatronen, maar de specifieke oorzaken zijn niet helemaal duidelijk.
Het belangrijkste resultaat van deze uitbreiding van de Sahara voor de menselijke beschaving was dat het mensen dichter naar de rivier de Nijl dreef, op zoek naar betrouwbare waterbronnen. +

+
+
+
+
+ MIDDEN Oud Egyptisch Koninkrijk +
+
+ MIDDEN Oud Egyptisch Koninkrijk +

+ In het Middenrijk werd Egypte weer verenigd, omdat koningen manieren vonden om de macht terug te nemen van regionale gouverneurs. Vanaf het Middenrijk hadden Egyptische koningen vaak goed getrainde legers. Het feit dat de Egyptische staat erin slaagde een permanente militaire macht op te zetten en te onderhouden en versterkingen te bouwen, toonde aan dat het de controle over aanzienlijke middelen had herwonnen. + Politieke fragmentatie leidde tot de Tweede Tussenperiode. De precieze data zijn onduidelijk. Er konden weliswaar meer gebeurtenissen worden vastgelegd, maar de meeste zaken werden toch nog steeds niet vastgelegd. Bovendien zijn er nog veel documenten verloren gegaan of vernietigd. +

+
+
+
+
+ NIEUW Oud Egyptisch Koninkrijk +
+
+ NIEUW Oud Egyptisch Koninkrijk +

+ Rond 1550 v. Chr. begon het Nieuwe Rijk in de Egyptische geschiedenis met de verdrijving van de Hyksos uit Egypte en het herstel van de gecentraliseerde politieke controle. Deze periode was de meest welvarende periode van Egypte en markeerde het hoogtepunt van haar macht. + Ook Hatsjepsoet, de beroemdste vrouwelijke heerser van Egypte, zette in deze periode handelsnetwerken op die bijdroegen aan de welvaart van Egypte. Ze gaf opdracht voor honderden bouwprojecten en beeldhouwwerken, en ook voor de bouw van een indrukwekkende dodentempel in Deir el-Bahri. Ze gaf ook opdracht tot het herstellen van tempels die verwaarloosd of beschadigd waren geraakt tijdens de periode van de Hyksos-heerschappij. +

+
+
+
+
+ Egypte nu +
+
+ Egypte nu +

+ Tegenwoordig is de munteenheid, bevolking, regering en het land van Egypte veranderd en is Egypte een van de belangrijkste landen in Afrika en het Midden-Oosten geworden. Nu wordt Egypte geregeerd door militairen, is de islam de belangrijkste religie na het christendom, is de hoofdstad van Egypte nu Caïro, maar de regering probeert het te veranderen in de nieuwe administratieve hoofdstad +

+
+
+
+
+ + + diff --git a/nl-NL/code/egypt/alexandria-egypt-library.jpg b/nl-NL/code/egypt/alexandria-egypt-library.jpg new file mode 100644 index 00000000..719f0a4b Binary files /dev/null and b/nl-NL/code/egypt/alexandria-egypt-library.jpg differ diff --git a/nl-NL/code/egypt/background.jpg b/nl-NL/code/egypt/background.jpg new file mode 100644 index 00000000..6dcf3d1c Binary files /dev/null and b/nl-NL/code/egypt/background.jpg differ diff --git a/nl-NL/code/egypt/card1.jpg b/nl-NL/code/egypt/card1.jpg new file mode 100644 index 00000000..ceed5b4d Binary files /dev/null and b/nl-NL/code/egypt/card1.jpg differ diff --git a/nl-NL/code/egypt/card2.jpg b/nl-NL/code/egypt/card2.jpg new file mode 100644 index 00000000..51a30437 Binary files /dev/null and b/nl-NL/code/egypt/card2.jpg differ diff --git a/nl-NL/code/egypt/card3.jpg b/nl-NL/code/egypt/card3.jpg new file mode 100644 index 00000000..39ac3b27 Binary files /dev/null and b/nl-NL/code/egypt/card3.jpg differ diff --git a/nl-NL/code/egypt/card4.jpg b/nl-NL/code/egypt/card4.jpg new file mode 100644 index 00000000..44b112e5 Binary files /dev/null and b/nl-NL/code/egypt/card4.jpg differ diff --git a/nl-NL/code/egypt/egypt-mosque-cairo.jpg b/nl-NL/code/egypt/egypt-mosque-cairo.jpg new file mode 100644 index 00000000..2b676239 Binary files /dev/null and b/nl-NL/code/egypt/egypt-mosque-cairo.jpg differ diff --git a/nl-NL/code/egypt/egypt-temples.jpg b/nl-NL/code/egypt/egypt-temples.jpg new file mode 100644 index 00000000..890c6ee6 Binary files /dev/null and b/nl-NL/code/egypt/egypt-temples.jpg differ diff --git a/nl-NL/code/egypt/flag.jpg b/nl-NL/code/egypt/flag.jpg new file mode 100644 index 00000000..cf78620f Binary files /dev/null and b/nl-NL/code/egypt/flag.jpg differ diff --git a/nl-NL/code/egypt/gouna.jpg b/nl-NL/code/egypt/gouna.jpg new file mode 100644 index 00000000..c219f9b2 Binary files /dev/null and b/nl-NL/code/egypt/gouna.jpg differ diff --git a/nl-NL/code/egypt/index.html b/nl-NL/code/egypt/index.html new file mode 100644 index 00000000..83016dc9 --- /dev/null +++ b/nl-NL/code/egypt/index.html @@ -0,0 +1,53 @@ + + + + + + + Document + + + + + +
+
+ + + +
+
+
+

Egypte

+

De Moeder van de wereld & de start van de beschaving

+ +
+
+
+
Abu Simbel
+

Abu Simbel is een archeologische vindplaats met twee enorme, in de rotsen uitgehouwen tempels in het zuiden van Egypte, aan de westelijke oever van het Nassermeer. De twee tempels werden oorspronkelijk uit de berghelling gehouwen tijdens de regering van farao Ramses de Grote in de 13e eeuw voor Christus

+
+
+
Siwa-oase
+

De Siwa-oase is een van de afgelegen nederzettingen van Egypte. Siwa ligt aan een oude dadelroute en was een belangrijke oase voor deze handelsroute. De natuurlijke bronnen en de schaduwrijke palmbomen boden reizigers een toevluchtsoord om te ontsnappen aan de woestijn.

+
+
+
Necropolis van Gizeh
+

De piramides van Gizeh, gelegen in de directe omgeving van de zuidwestelijke buitenwijken van Caïro, zijn onbetwist de topattracties van Egypte. De piramides van Gizeh werden gebouwd in de loop van drie generaties door Khufu, zijn tweede regerende zoon Chefren en Menkaure

+
+
+
Rode Zee Rif
+

De Rode Zee, voor de kust van Egypte, is een van de mooiste plekken ter wereld om te duiken. De wateren van de Rode Zee staan bekend om hun spectaculaire zichtbaarheid en bieden een aantal van de meest exotische zeegezichten. Dankzij de uitgestrekte koraalformaties op de riffen leven er duizenden verschillende zeedieren.

+
+
+
+
+ + + \ No newline at end of file diff --git a/nl-NL/code/egypt/info-box1.jpg b/nl-NL/code/egypt/info-box1.jpg new file mode 100644 index 00000000..1bc81989 Binary files /dev/null and b/nl-NL/code/egypt/info-box1.jpg differ diff --git a/nl-NL/code/egypt/info-box2.jpg b/nl-NL/code/egypt/info-box2.jpg new file mode 100644 index 00000000..c21fae32 Binary files /dev/null and b/nl-NL/code/egypt/info-box2.jpg differ diff --git a/nl-NL/code/egypt/info-box3.jpg b/nl-NL/code/egypt/info-box3.jpg new file mode 100644 index 00000000..53938681 Binary files /dev/null and b/nl-NL/code/egypt/info-box3.jpg differ diff --git a/nl-NL/code/egypt/info-box4.jpg b/nl-NL/code/egypt/info-box4.jpg new file mode 100644 index 00000000..1c69ef25 Binary files /dev/null and b/nl-NL/code/egypt/info-box4.jpg differ diff --git a/nl-NL/code/egypt/project_config.yml b/nl-NL/code/egypt/project_config.yml new file mode 100644 index 00000000..9787f4df --- /dev/null +++ b/nl-NL/code/egypt/project_config.yml @@ -0,0 +1,3 @@ +name: 'Egypte' +identifier: 'egypt' +type: 'html' diff --git a/nl-NL/code/egypt/saint-catherines-monastery.jpg b/nl-NL/code/egypt/saint-catherines-monastery.jpg new file mode 100644 index 00000000..6fae8542 Binary files /dev/null and b/nl-NL/code/egypt/saint-catherines-monastery.jpg differ diff --git a/nl-NL/code/egypt/script.js b/nl-NL/code/egypt/script.js new file mode 100644 index 00000000..cef41022 --- /dev/null +++ b/nl-NL/code/egypt/script.js @@ -0,0 +1,23 @@ +//Nav li +var button = document.getElementById('li1'); +button.addEventListener('click', function () { + document.location.href = 'index.html'; +}); +var button = document.getElementById('li2'); +button.addEventListener('click', function () { + document.location.href = 'History.html'; +}); +var button = document.getElementById('li3'); +button.addEventListener('click', function () { + document.location.href = 'Explore.html'; +}); + +//btns +var button = document.getElementById('btn1'); +button.addEventListener('click', function () { + document.location.href = '/Explore.html'; +}); +var button = document.getElementById('btn2'); +button.addEventListener('click', function () { + document.location.href = 'www.google.com/maps/place/Egypt'; +}); diff --git a/nl-NL/code/egypt/sharm.jpg b/nl-NL/code/egypt/sharm.jpg new file mode 100644 index 00000000..065f8017 Binary files /dev/null and b/nl-NL/code/egypt/sharm.jpg differ diff --git a/nl-NL/code/egypt/style.css b/nl-NL/code/egypt/style.css new file mode 100644 index 00000000..bc6dd623 --- /dev/null +++ b/nl-NL/code/egypt/style.css @@ -0,0 +1,122 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +.container{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background-position: center; + background-size: cover; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; +} + +.navbar{ + height: 12%; + display: flex; + align-items: center; +} + +.logo{ + width: 50px; + cursor: pointer; + color: white; + font-size: 20px; +} + +.navbar i{ + width: 30px; + cursor: pointer; + margin-left: 40px; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; + color: white; + font-size: 13px; +} + +.row{ + display: flex; + height: 88%; + align-items: center; +} + +.col { + flex-basis: 50%; +} + +h1{ + color: white; + font-size: 100px; +} + +p{ + color: white; + font-size: 11px; + line-height: 15px; +} + +button{ + width: 180px; + color: #000; + font-size: 12px; + padding: 12px 0; + background: whitesmoke; + border: 0; + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -ms-border-radius: 20px; + -o-border-radius: 20px; + outline: none; + margin-top: 30px; +} + +.card { + width: 200px; + height: 230px; + display: inline-block; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + padding: 15px 25px; + box-sizing: border-box; + margin: 10px 15px; + background-position: center; + background-size: cover; +} + +.card h5{ + color: white; + text-decoration: bold; +} + +.card1{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg); +} + +.card2{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg); +} + +.card3{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg); +} + +.card4{ + background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg); +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/afrobeats.jpg b/nl-NL/code/fashion-pi/afrobeats.jpg new file mode 100644 index 00000000..1e9e37b9 Binary files /dev/null and b/nl-NL/code/fashion-pi/afrobeats.jpg differ diff --git a/nl-NL/code/fashion-pi/animation.css b/nl-NL/code/fashion-pi/animation.css new file mode 100644 index 00000000..e83db82b --- /dev/null +++ b/nl-NL/code/fashion-pi/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* voert de 'rotate-centre' animatie uit met lineaire timing (alles op hetzelfde tempo gedurende acht seconden). Voert de animatie twee keer uit. */ + display: inline-block; /* Belangrijk zodat het geanimeerde element niet wordt gesplitst naar een nieuwe regel */ +} + +@keyframes rotate-center { + /* De rotatie-animatiecode */ + 0% { + /* Roteren van 0 tot 360 graden */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* voert de 'bounce' animatie met 'ease timing' (langzame start en einde) gedurende twee seconden. Voert de animatie drie keer uit. */ + display: inline-block; +} + +@keyframes bounce { + /* De bounce-animatiecode */ + 0% { + transform: scale(1, 1) translateY(0); /* Beginpositie en werkelijke grootte */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Breedte vergroten en hoogte verkleinen voor pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Keer terug naar werkelijke grootte en verplaats emoji omhoog met 100px van de huidige positie */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Verplaats emoji terug naar de startpositie */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* voert de 'scale' animatie met 'ease timing' (langzame start en einde) uit gedurende twee seconden. Voert de animatie oneindig uit. */ + display: inline-block; +} + +@keyframes scale { + /* De scale animatiecode */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* De roll animatiecode */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* De roll animatiecode */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* De move animatiecode */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* De move animatiecode */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/nl-NL/code/fashion-pi/cafe.css b/nl-NL/code/fashion-pi/cafe.css new file mode 100644 index 00000000..e05a2b43 --- /dev/null +++ b/nl-NL/code/fashion-pi/cafe.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/comic.css b/nl-NL/code/fashion-pi/comic.css new file mode 100644 index 00000000..83bdeb61 --- /dev/null +++ b/nl-NL/code/fashion-pi/comic.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/nl-NL/code/fashion-pi/companion.css b/nl-NL/code/fashion-pi/companion.css new file mode 100644 index 00000000..8af48be6 --- /dev/null +++ b/nl-NL/code/fashion-pi/companion.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/nl-NL/code/fashion-pi/default.css b/nl-NL/code/fashion-pi/default.css new file mode 100644 index 00000000..69ed8275 --- /dev/null +++ b/nl-NL/code/fashion-pi/default.css @@ -0,0 +1,20 @@ + +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/denim.jpg b/nl-NL/code/fashion-pi/denim.jpg new file mode 100644 index 00000000..95d6aa3f Binary files /dev/null and b/nl-NL/code/fashion-pi/denim.jpg differ diff --git a/nl-NL/code/fashion-pi/disco.css b/nl-NL/code/fashion-pi/disco.css new file mode 100644 index 00000000..31be1664 --- /dev/null +++ b/nl-NL/code/fashion-pi/disco.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/nl-NL/code/fashion-pi/festival.css b/nl-NL/code/fashion-pi/festival.css new file mode 100644 index 00000000..1b37e92f --- /dev/null +++ b/nl-NL/code/fashion-pi/festival.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/fiesta.css b/nl-NL/code/fashion-pi/fiesta.css new file mode 100644 index 00000000..6722fead --- /dev/null +++ b/nl-NL/code/fashion-pi/fiesta.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/nl-NL/code/fashion-pi/flare-trousers.jpg b/nl-NL/code/fashion-pi/flare-trousers.jpg new file mode 100644 index 00000000..776f1394 Binary files /dev/null and b/nl-NL/code/fashion-pi/flare-trousers.jpg differ diff --git a/nl-NL/code/fashion-pi/helpful-plumber.css b/nl-NL/code/fashion-pi/helpful-plumber.css new file mode 100644 index 00000000..8b6f5fd1 --- /dev/null +++ b/nl-NL/code/fashion-pi/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/nl-NL/code/fashion-pi/index.html b/nl-NL/code/fashion-pi/index.html new file mode 100644 index 00000000..b9f4a536 --- /dev/null +++ b/nl-NL/code/fashion-pi/index.html @@ -0,0 +1,103 @@ + + + + + + + + + Fashion Pi + + + + + + + + + + + + + + + + + + + +
+

🥻Fashion Pi 🥧

+

Modetrends| Laatste nieuws| Roddels

+
+ + +
+

Terugkerende trends in de mode.

+
+ Mannelijk en vrouwelijk model die een denim broek en top dragen. +
+

Denim op denim is weer helemaal terug in de mode.

+
+
+
+
+

Ook de broek met wijde pijpen is weer helemaal terug.

+
+ Twee vrouwelijke modellen met een zwarte broek met wijde pijpen. +
+
+

De laatste modetrends.

+
+
+
+
+
+
+ Kunstwerk met instrumenten in de vorm van vrouwenhaar en daaronder de woorden Afrobeats +
+
+

Afrobeats

+

Afrobeats is een muziekgenre dat voor opschudding zorgt in de mode.

+
+
+
+
+ +
+
+
+
+ Vrouw met dramatische make-up en kralen op haar gezicht +
+
+

Make-up

+

Make-up en mode zijn onlosmakelijk met elkaar verbonden in de wereld van schoonheid en persoonlijke stijl.

.

+
+
+
+
+ +
+
+
+

"De modeweek is een must-see om alle ontwerpers, modellen en tijdschriften te eren. De Grote 4 zijn: Parijs, Milaan, Londen en New York."

+ -Fashion Pi. +
+
+ +
+ + + + + + + + + diff --git a/nl-NL/code/fashion-pi/land-animals.css b/nl-NL/code/fashion-pi/land-animals.css new file mode 100644 index 00000000..2f3162dc --- /dev/null +++ b/nl-NL/code/fashion-pi/land-animals.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/makeup-fashion.jpg b/nl-NL/code/fashion-pi/makeup-fashion.jpg new file mode 100644 index 00000000..96ef90f1 Binary files /dev/null and b/nl-NL/code/fashion-pi/makeup-fashion.jpg differ diff --git a/nl-NL/code/fashion-pi/medals.css b/nl-NL/code/fashion-pi/medals.css new file mode 100644 index 00000000..7ac4f74b --- /dev/null +++ b/nl-NL/code/fashion-pi/medals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/money.css b/nl-NL/code/fashion-pi/money.css new file mode 100644 index 00000000..a05b3d82 --- /dev/null +++ b/nl-NL/code/fashion-pi/money.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/nl-NL/code/fashion-pi/nature.css b/nl-NL/code/fashion-pi/nature.css new file mode 100644 index 00000000..c1989be7 --- /dev/null +++ b/nl-NL/code/fashion-pi/nature.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/pastel.css b/nl-NL/code/fashion-pi/pastel.css new file mode 100644 index 00000000..b8befe50 --- /dev/null +++ b/nl-NL/code/fashion-pi/pastel.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/primary.css b/nl-NL/code/fashion-pi/primary.css new file mode 100644 index 00000000..51add70b --- /dev/null +++ b/nl-NL/code/fashion-pi/primary.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff9900; /* */ + --onprimary: #000000; /* */ + --secondary: #ff0000; /* */ + --onsecondary: #000000; /* */ + --tertiary: #059f2d; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #fffe13; /* */ + --detail2: #9101a1; /* */ + --detail3: #014fe8; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Luckiest Guy", cursive; + --title-font: lighter 2rem "Luckiest Guy", cursive; + --quote-font: lighter 1.5rem "Luckiest Guy", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/project_config.yml b/nl-NL/code/fashion-pi/project_config.yml new file mode 100644 index 00000000..415eb347 --- /dev/null +++ b/nl-NL/code/fashion-pi/project_config.yml @@ -0,0 +1,3 @@ +name: 'Fashion Pi' +identifier: 'fashion-pi' +type: 'html' diff --git a/nl-NL/code/fashion-pi/smokey.css b/nl-NL/code/fashion-pi/smokey.css new file mode 100644 index 00000000..df2cba2d --- /dev/null +++ b/nl-NL/code/fashion-pi/smokey.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/space.css b/nl-NL/code/fashion-pi/space.css new file mode 100644 index 00000000..91fe44a1 --- /dev/null +++ b/nl-NL/code/fashion-pi/space.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/style.css b/nl-NL/code/fashion-pi/style.css new file mode 100644 index 00000000..b03f74f7 --- /dev/null +++ b/nl-NL/code/fashion-pi/style.css @@ -0,0 +1,335 @@ +/* Kleurcombinaties */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--detail3); + color: var(--onpage); +} + +.detail3 { + background: #014fe8; + color: var(--onpage); +} + +.detail1 { + background: #059f2d; + color: var(--onpage); +} + +.detail2 { + background: #9101a1; + color: #ffffff; +} + +.detail4 { + background: #fffe13; + color: var(--onpage); +} + +/* Overal toepassen */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Opvulling en rand maken een vak niet groter */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Laat de inhoud de pagina vullen zodat de voettekst onderaan staat */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* voeg een achtergrondafbeelding toe aan de hoofdtekst */ + +body { + /*background-image: url('name.jpg');*/ /* Verwijder commentaar en wijzig de bestandsnaam om een achtergrondafbeelding toe te voegen */ + /*background-repeat: repeat;*/ /* Laat de afbeelding herhalen */ + /*background-size: cover;*/ /* Zorg ervoor dat de afbeelding de hele container bedekt */ +} + +/* De hoofdinhoud van de pagina tussen de kop- en voettekst */ +main { + background: var(--primary); /* Kleur de achtergrond */ + color: var(--onprimary); /* Kleur de tekst */ + margin: 0 auto; /* Centreren als de browser erg breed is */ + min-width: 25rem; /* Laat de inhoud niet te smal worden */ + max-width: 70rem; /* Laat de inhoud niet te breed worden */ + padding: 0; + padding-top: 0.5rem; /* Vulling bovenaan */ + margin-bottom: 1em; /* Tussenruimte vóór de voettekst */ +} + +/* Kop- en voettekst element stijlen */ + +header, +footer { + text-align: center; + width: 100%; /* Vul de volledige breedte van het venster */ + margin: 0; /* Verwijder de standaardmarge */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Sectiestijlen */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Randstijlen */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Voeg een ononderbroken lijn toe */ +} + +.border-top { + border-top: 10px solid var(--tertiary); /* Voeg een ononderbroken lijn toe boven de voettekst */ +} + +/* Voeg een transparant effect toe */ + +.transparent { + opacity: 0.95; +} + +/* Stijlen alleen voor h1-elementen */ + +h1 { + font: var(--header-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ + padding: 2rem; + margin: 0; /* Centreren als de browser erg breed is */ +} + +/* Stijlen alleen voor h2-elementen */ + +h2 { + font: var(--title-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ +} + +/* Markeer sleutelwoorden vet en pas een alternatieve tekstkleur toe */ + +strong { + color: var(--detail1); /* Tekstkleur opgeslagen in de bijschrift variabele */ + font-weight: bold; /* Maakt tekstgewicht sterker dan de standaard */ +} + +/* Stijl voor geordende en ongeordende lijsten */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Opvulling rond alinea's */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Stijl voor links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Gebruik de kleur van het bovenliggende element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Stijlen alleen voor de .wrap class */ + +.wrap { + /* Laat inhoud over meerdere rijen lopen */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontale en verticale ruimte */ +} + +/* Voor het maken van mooie vakjes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Stijlen voor de div tags die zich in een .wrap class bevinden */ + +.wrap > div { + width: 14rem; +} + +/* Stijlen voor de img tags die zich in een .wrap class bevinden */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Stijlen voor de p-tags die zich in een .wrap class bevinden */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specifieke stijlen voor dit project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Gebruikt om een grote emoji te maken */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specifieke stijlen voor dit project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* rechter- en onderste schaduwzijde, blur, spread en kleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Afgedrukte fotostijl */ + +.photo { + border: 1px solid #D0D0D0; /* Voeg een ononderbroken rand toe */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* rechts en onderste schaduw, blur, spread en kleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/nl-NL/code/fashion-pi/sunset.css b/nl-NL/code/fashion-pi/sunset.css new file mode 100644 index 00000000..4f655683 --- /dev/null +++ b/nl-NL/code/fashion-pi/sunset.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/sunshine.css b/nl-NL/code/fashion-pi/sunshine.css new file mode 100644 index 00000000..23eb3cec --- /dev/null +++ b/nl-NL/code/fashion-pi/sunshine.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/thriller.css b/nl-NL/code/fashion-pi/thriller.css new file mode 100644 index 00000000..b70e7771 --- /dev/null +++ b/nl-NL/code/fashion-pi/thriller.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/water-animals.css b/nl-NL/code/fashion-pi/water-animals.css new file mode 100644 index 00000000..5a515ac7 --- /dev/null +++ b/nl-NL/code/fashion-pi/water-animals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/fashion-pi/woodland.css b/nl-NL/code/fashion-pi/woodland.css new file mode 100644 index 00000000..22978fbf --- /dev/null +++ b/nl-NL/code/fashion-pi/woodland.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/animation.css b/nl-NL/code/favourite-things/animation.css new file mode 100644 index 00000000..570b9f3c --- /dev/null +++ b/nl-NL/code/favourite-things/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center lineair 8s 2; /* Tijd nodig voor animatie en aantal herhalingen * + display: inline-block; /* Belangrijk om rotatie mogelijk te maken */ +} + +@keyframes rotate-center { + /* De spin-me-animatiecode */ + 0% { + /* Roteren van 0 tot 360 graden */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* voert de 'bounce' animatie met 'ease timing' (langzame start en einde) gedurende twee seconden. Voert de animatie twee keer uit. */ + display: inline-block; +} + +@keyframes bounce { + /* De bounce-animatiecode */ + 0% { + transform: scale(1, 1) translateY(0); /* Beginpositie en werkelijke grootte */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Breedte vergroten en hoogte verkleinen voor pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Keer terug naar werkelijke grootte en verplaats emoji omhoog met 100px van de huidige positie */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Verplaats emoji terug naar de startpositie */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* voert de 'scale' animatie met 'ease timing' (langzame start en einde) uit gedurende twee seconden. Voert de animatie twee keer uit. */ + display: inline-block; +} + +@keyframes scale { + /* De twinkle-animatiecode */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* De roll animatiecode */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* De roll animatiecode */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/nl-NL/code/favourite-things/beetle.jpg b/nl-NL/code/favourite-things/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/nl-NL/code/favourite-things/beetle.jpg differ diff --git a/nl-NL/code/favourite-things/bird.png b/nl-NL/code/favourite-things/bird.png new file mode 100644 index 00000000..bc3ecabf Binary files /dev/null and b/nl-NL/code/favourite-things/bird.png differ diff --git a/nl-NL/code/favourite-things/butterfly.JPG b/nl-NL/code/favourite-things/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/nl-NL/code/favourite-things/butterfly.JPG differ diff --git a/nl-NL/code/favourite-things/cacti.JPG b/nl-NL/code/favourite-things/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/nl-NL/code/favourite-things/cacti.JPG differ diff --git a/nl-NL/code/favourite-things/cafe.css b/nl-NL/code/favourite-things/cafe.css new file mode 100644 index 00000000..e05a2b43 --- /dev/null +++ b/nl-NL/code/favourite-things/cafe.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/cafe.jpg b/nl-NL/code/favourite-things/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/nl-NL/code/favourite-things/cafe.jpg differ diff --git a/nl-NL/code/favourite-things/candles.JPG b/nl-NL/code/favourite-things/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/nl-NL/code/favourite-things/candles.JPG differ diff --git a/nl-NL/code/favourite-things/carnival.jpg b/nl-NL/code/favourite-things/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/nl-NL/code/favourite-things/carnival.jpg differ diff --git a/nl-NL/code/favourite-things/colour-festival.jpg b/nl-NL/code/favourite-things/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/nl-NL/code/favourite-things/colour-festival.jpg differ diff --git a/nl-NL/code/favourite-things/comic-books.jpg b/nl-NL/code/favourite-things/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/nl-NL/code/favourite-things/comic-books.jpg differ diff --git a/nl-NL/code/favourite-things/comic.css b/nl-NL/code/favourite-things/comic.css new file mode 100644 index 00000000..83bdeb61 --- /dev/null +++ b/nl-NL/code/favourite-things/comic.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/nl-NL/code/favourite-things/companion.css b/nl-NL/code/favourite-things/companion.css new file mode 100644 index 00000000..8af48be6 --- /dev/null +++ b/nl-NL/code/favourite-things/companion.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/nl-NL/code/favourite-things/crayons.jpg b/nl-NL/code/favourite-things/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/nl-NL/code/favourite-things/crayons.jpg differ diff --git a/nl-NL/code/favourite-things/default.css b/nl-NL/code/favourite-things/default.css new file mode 100644 index 00000000..0c5dffab --- /dev/null +++ b/nl-NL/code/favourite-things/default.css @@ -0,0 +1,19 @@ + +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffffff; + --secondary: #ed923c; + --tertiary: #d8f1ee; + --page: #ffffff; + --onprimary: #664300; + --onsecondary: #ffffff; + --ontertiary: #5e5e5e; + --onpage: #750787; + --detail: #5e5e5e; + --detail2: #57b9ab; + + --body-font: 1.1rem 'Cairo', sans-serif; + --header-font: lighter 3rem 'Ceviche One', cursive; + --title-font: lighter 1.5rem 'Cairo', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/disco-ball.jpg b/nl-NL/code/favourite-things/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/nl-NL/code/favourite-things/disco-ball.jpg differ diff --git a/nl-NL/code/favourite-things/disco-flowers.JPG b/nl-NL/code/favourite-things/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/nl-NL/code/favourite-things/disco-flowers.JPG differ diff --git a/nl-NL/code/favourite-things/disco.css b/nl-NL/code/favourite-things/disco.css new file mode 100644 index 00000000..31be1664 --- /dev/null +++ b/nl-NL/code/favourite-things/disco.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/nl-NL/code/favourite-things/dog.png b/nl-NL/code/favourite-things/dog.png new file mode 100644 index 00000000..a944ece9 Binary files /dev/null and b/nl-NL/code/favourite-things/dog.png differ diff --git a/nl-NL/code/favourite-things/drone.JPG b/nl-NL/code/favourite-things/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/nl-NL/code/favourite-things/drone.JPG differ diff --git a/nl-NL/code/favourite-things/drum.png b/nl-NL/code/favourite-things/drum.png new file mode 100644 index 00000000..3fba65c8 Binary files /dev/null and b/nl-NL/code/favourite-things/drum.png differ diff --git a/nl-NL/code/favourite-things/exotic-plants.jpg b/nl-NL/code/favourite-things/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/nl-NL/code/favourite-things/exotic-plants.jpg differ diff --git a/nl-NL/code/favourite-things/fave.png b/nl-NL/code/favourite-things/fave.png new file mode 100644 index 00000000..05e1b6fb Binary files /dev/null and b/nl-NL/code/favourite-things/fave.png differ diff --git a/nl-NL/code/favourite-things/ferns.jpg b/nl-NL/code/favourite-things/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/nl-NL/code/favourite-things/ferns.jpg differ diff --git a/nl-NL/code/favourite-things/festival.css b/nl-NL/code/favourite-things/festival.css new file mode 100644 index 00000000..1b37e92f --- /dev/null +++ b/nl-NL/code/favourite-things/festival.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/fiesta.css b/nl-NL/code/favourite-things/fiesta.css new file mode 100644 index 00000000..6722fead --- /dev/null +++ b/nl-NL/code/favourite-things/fiesta.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/nl-NL/code/favourite-things/fire.jpg b/nl-NL/code/favourite-things/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/nl-NL/code/favourite-things/fire.jpg differ diff --git a/nl-NL/code/favourite-things/fish.jpg b/nl-NL/code/favourite-things/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/nl-NL/code/favourite-things/fish.jpg differ diff --git a/nl-NL/code/favourite-things/forest.JPG b/nl-NL/code/favourite-things/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/nl-NL/code/favourite-things/forest.JPG differ diff --git a/nl-NL/code/favourite-things/game-boy.jpg b/nl-NL/code/favourite-things/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/nl-NL/code/favourite-things/game-boy.jpg differ diff --git a/nl-NL/code/favourite-things/globe-in-water.JPG b/nl-NL/code/favourite-things/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/nl-NL/code/favourite-things/globe-in-water.JPG differ diff --git a/nl-NL/code/favourite-things/greenhouse.JPG b/nl-NL/code/favourite-things/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/nl-NL/code/favourite-things/greenhouse.JPG differ diff --git a/nl-NL/code/favourite-things/helpful-plumber.css b/nl-NL/code/favourite-things/helpful-plumber.css new file mode 100644 index 00000000..8b6f5fd1 --- /dev/null +++ b/nl-NL/code/favourite-things/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/nl-NL/code/favourite-things/illustrations.png b/nl-NL/code/favourite-things/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/nl-NL/code/favourite-things/illustrations.png differ diff --git a/nl-NL/code/favourite-things/index.html b/nl-NL/code/favourite-things/index.html new file mode 100644 index 00000000..35219b20 --- /dev/null +++ b/nl-NL/code/favourite-things/index.html @@ -0,0 +1,90 @@ + + + + + + + + + Mijn favoriete dingen + + + + + + + + + + + + + + + + + + +
+

🏆 Mijn favoriete dingen 🏆

+
+ + +
+
+

Lijsten met mijn favoriete dingen

+
+ +
+

Mijn favoriete manieren om kunst te maken:

+
+
+ +
    +
  1. Waterverf
    2. +
  2. Digitaal
    3. +
  3. Viltstiften
    4. +
+ +
+ + +
+

Mijn favoriete dieren:

+
+
+ +
    +
  1. Giraf
    2. +
  2. Lynx
    3. +
  3. Pinguïn
    4. +
+ +
+ +
+

Mijn favoriete reisbestemmingen:

+
+
+ +
    +
  1. Noorwegen
    2. +
  2. Italië
    3. +
  3. Schotland
    4. +
+ +
+ +
+ + + + + + diff --git a/nl-NL/code/favourite-things/lake-mountains.JPG b/nl-NL/code/favourite-things/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/nl-NL/code/favourite-things/lake-mountains.JPG differ diff --git a/nl-NL/code/favourite-things/land-animals.css b/nl-NL/code/favourite-things/land-animals.css new file mode 100644 index 00000000..2f3162dc --- /dev/null +++ b/nl-NL/code/favourite-things/land-animals.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/mandala.png b/nl-NL/code/favourite-things/mandala.png new file mode 100644 index 00000000..6b072a92 Binary files /dev/null and b/nl-NL/code/favourite-things/mandala.png differ diff --git a/nl-NL/code/favourite-things/map.png b/nl-NL/code/favourite-things/map.png new file mode 100644 index 00000000..09acad40 Binary files /dev/null and b/nl-NL/code/favourite-things/map.png differ diff --git a/nl-NL/code/favourite-things/medal.jpg b/nl-NL/code/favourite-things/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/nl-NL/code/favourite-things/medal.jpg differ diff --git a/nl-NL/code/favourite-things/medals.css b/nl-NL/code/favourite-things/medals.css new file mode 100644 index 00000000..7ac4f74b --- /dev/null +++ b/nl-NL/code/favourite-things/medals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/money.css b/nl-NL/code/favourite-things/money.css new file mode 100644 index 00000000..a05b3d82 --- /dev/null +++ b/nl-NL/code/favourite-things/money.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/nl-NL/code/favourite-things/monkey.JPG b/nl-NL/code/favourite-things/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/nl-NL/code/favourite-things/monkey.JPG differ diff --git a/nl-NL/code/favourite-things/moon-art.png b/nl-NL/code/favourite-things/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/nl-NL/code/favourite-things/moon-art.png differ diff --git a/nl-NL/code/favourite-things/mountain.png b/nl-NL/code/favourite-things/mountain.png new file mode 100644 index 00000000..5527d6c7 Binary files /dev/null and b/nl-NL/code/favourite-things/mountain.png differ diff --git a/nl-NL/code/favourite-things/mushroom.JPG b/nl-NL/code/favourite-things/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/nl-NL/code/favourite-things/mushroom.JPG differ diff --git a/nl-NL/code/favourite-things/music.png b/nl-NL/code/favourite-things/music.png new file mode 100644 index 00000000..1633c3ec Binary files /dev/null and b/nl-NL/code/favourite-things/music.png differ diff --git a/nl-NL/code/favourite-things/nature.css b/nl-NL/code/favourite-things/nature.css new file mode 100644 index 00000000..c1989be7 --- /dev/null +++ b/nl-NL/code/favourite-things/nature.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/painting.png b/nl-NL/code/favourite-things/painting.png new file mode 100644 index 00000000..21442674 Binary files /dev/null and b/nl-NL/code/favourite-things/painting.png differ diff --git a/nl-NL/code/favourite-things/pansies.JPG b/nl-NL/code/favourite-things/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/nl-NL/code/favourite-things/pansies.JPG differ diff --git a/nl-NL/code/favourite-things/pastel-hearts.jpg b/nl-NL/code/favourite-things/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/nl-NL/code/favourite-things/pastel-hearts.jpg differ diff --git a/nl-NL/code/favourite-things/pastel.css b/nl-NL/code/favourite-things/pastel.css new file mode 100644 index 00000000..b8befe50 --- /dev/null +++ b/nl-NL/code/favourite-things/pastel.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/piggy-bank.jpg b/nl-NL/code/favourite-things/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/nl-NL/code/favourite-things/piggy-bank.jpg differ diff --git a/nl-NL/code/favourite-things/placeholder.png b/nl-NL/code/favourite-things/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/nl-NL/code/favourite-things/placeholder.png differ diff --git a/nl-NL/code/favourite-things/primary.css b/nl-NL/code/favourite-things/primary.css new file mode 100644 index 00000000..4a6a0cd4 --- /dev/null +++ b/nl-NL/code/favourite-things/primary.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/project_config.yml b/nl-NL/code/favourite-things/project_config.yml new file mode 100644 index 00000000..ffc59a1b --- /dev/null +++ b/nl-NL/code/favourite-things/project_config.yml @@ -0,0 +1,3 @@ +name: 'Favoriete dingen' +identifier: 'favourite-things' +type: 'html' diff --git a/nl-NL/code/favourite-things/pumpkins.JPG b/nl-NL/code/favourite-things/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/nl-NL/code/favourite-things/pumpkins.JPG differ diff --git a/nl-NL/code/favourite-things/rainbow-forest.JPG b/nl-NL/code/favourite-things/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/nl-NL/code/favourite-things/rainbow-forest.JPG differ diff --git a/nl-NL/code/favourite-things/rhino.JPG b/nl-NL/code/favourite-things/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/nl-NL/code/favourite-things/rhino.JPG differ diff --git a/nl-NL/code/favourite-things/smokey.css b/nl-NL/code/favourite-things/smokey.css new file mode 100644 index 00000000..df2cba2d --- /dev/null +++ b/nl-NL/code/favourite-things/smokey.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/space.css b/nl-NL/code/favourite-things/space.css new file mode 100644 index 00000000..91fe44a1 --- /dev/null +++ b/nl-NL/code/favourite-things/space.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/spider-web.jpg b/nl-NL/code/favourite-things/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/nl-NL/code/favourite-things/spider-web.jpg differ diff --git a/nl-NL/code/favourite-things/style.css b/nl-NL/code/favourite-things/style.css new file mode 100644 index 00000000..33ff11b0 --- /dev/null +++ b/nl-NL/code/favourite-things/style.css @@ -0,0 +1,284 @@ +/* Kleurcombinaties */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Overal toepassen */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Opvulling en rand maken een vak niet groter */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Laat de inhoud de pagina vullen zodat de voettekst onderaan staat */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* voeg een achtergrondafbeelding toe aan de hoofdtekst */ + +body { + background-image: url('fave.png'); +} + +/* De hoofdinhoud van de pagina tussen de kop- en voettekst */ +main { + background: var(--primary); /* Kleur de achtergrond */ + color: var(--onprimary); /* Kleur de tekst */ + margin: 0 auto; /* Centreren als de browser erg breed is */ + min-width: 25rem; /* Laat de inhoud niet te smal worden */ + max-width: 70rem; /* Laat de inhoud niet te breed worden */ + padding: 0; + padding-top: 0.5rem; /* Vulling bovenaan */ + margin-bottom: 1em; /* Tussenruimte vóór de voettekst */ +} + +/* Kop- en voettekst element stijlen */ + +header, +footer { + text-align: center; + width: 100%; /* Vul de volledige breedte van het venster */ + margin: 0; /* Verwijder de standaardmarge */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Sectiestijlen */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Randstijlen */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Voeg een ononderbroken lijn toe */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Voeg een ononderbroken lijn toe boven de voettekst */ +} + +/* Voeg een transparant effect toe */ + +.transparent { + opacity: 0.95; +} + +/* Stijlen alleen voor h1-elementen */ + +h1 { + font: var(--header-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ + padding: 2rem; + margin: 0; /* Centreren als de browser erg breed is */ +} + +/* Stijlen alleen voor h2-elementen */ + +h2 { + font: var(--title-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ +} + +/* Markeer sleutelwoorden vet en pas een alternatieve tekstkleur toe */ + +strong { + color: var(--detail2); /* Tekst kleur opgeslagen in de bijschrift variabele */ + font-weight: bold; /* Maakt tekstgewicht sterker dan de standaard */ +} + +/* Stijl voor geordende en ongeordende lijsten */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Opvulling rond alinea's */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Stijl voor links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Gebruik de kleur van het bovenliggende element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Stijlen alleen voor de .wrap class */ + +.wrap { + /* Laat inhoud over meerdere rijen lopen */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* Voor het maken van mooie vakjes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Stijlen voor de div tags die zich in een .wrap class bevinden */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Stijlen voor de img tags die zich in een .wrap class bevinden */ + +.wrap > img { + width: 5rem; + display: block; + padding: 0rem; +} + +/* Stijlen voor de p-tags die zich in een .wrap class bevinden */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specifieke stijlen voor dit project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Gebruikt om een grote emoji te maken */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specifieke stijlen voor dit project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + diff --git a/nl-NL/code/favourite-things/sunflowers.JPG b/nl-NL/code/favourite-things/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/nl-NL/code/favourite-things/sunflowers.JPG differ diff --git a/nl-NL/code/favourite-things/sunset-beach.JPG b/nl-NL/code/favourite-things/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/nl-NL/code/favourite-things/sunset-beach.JPG differ diff --git a/nl-NL/code/favourite-things/sunset-person.jpg b/nl-NL/code/favourite-things/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/nl-NL/code/favourite-things/sunset-person.jpg differ diff --git a/nl-NL/code/favourite-things/sunset.JPG b/nl-NL/code/favourite-things/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/nl-NL/code/favourite-things/sunset.JPG differ diff --git a/nl-NL/code/favourite-things/sunset.css b/nl-NL/code/favourite-things/sunset.css new file mode 100644 index 00000000..4f655683 --- /dev/null +++ b/nl-NL/code/favourite-things/sunset.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/sunshine.css b/nl-NL/code/favourite-things/sunshine.css new file mode 100644 index 00000000..23eb3cec --- /dev/null +++ b/nl-NL/code/favourite-things/sunshine.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/thriller.css b/nl-NL/code/favourite-things/thriller.css new file mode 100644 index 00000000..b70e7771 --- /dev/null +++ b/nl-NL/code/favourite-things/thriller.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/water-animals.css b/nl-NL/code/favourite-things/water-animals.css new file mode 100644 index 00000000..5a515ac7 --- /dev/null +++ b/nl-NL/code/favourite-things/water-animals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/favourite-things/woodland.css b/nl-NL/code/favourite-things/woodland.css new file mode 100644 index 00000000..22978fbf --- /dev/null +++ b/nl-NL/code/favourite-things/woodland.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/animation.css b/nl-NL/code/raspberry-pi-pico/animation.css new file mode 100644 index 00000000..570b9f3c --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/animation.css @@ -0,0 +1,100 @@ + .spinme { + animation: rotate-center lineair 8s 2; /* Tijd nodig voor animatie en aantal herhalingen * + display: inline-block; /* Belangrijk om rotatie mogelijk te maken */ +} + +@keyframes rotate-center { + /* De spin-me-animatiecode */ + 0% { + /* Roteren van 0 tot 360 graden */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* voert de 'bounce' animatie met 'ease timing' (langzame start en einde) gedurende twee seconden. Voert de animatie twee keer uit. */ + display: inline-block; +} + +@keyframes bounce { + /* De bounce-animatiecode */ + 0% { + transform: scale(1, 1) translateY(0); /* Beginpositie en werkelijke grootte */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Breedte vergroten en hoogte verkleinen voor pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Keer terug naar werkelijke grootte en verplaats emoji omhoog met 100px van de huidige positie */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Verplaats emoji terug naar de startpositie */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* voert de 'scale' animatie met 'ease timing' (langzame start en einde) uit gedurende twee seconden. Voert de animatie twee keer uit. */ + display: inline-block; +} + +@keyframes scale { + /* De twinkle-animatiecode */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* De roll animatiecode */ + from { + transform: translate(-60vw) rotate(0deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(360deg); + transform-origin: center; + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* De roll animatiecode */ + from { + transform: translate(60vw) rotate(360deg); + transform-origin: center; + } + + to { + transform: translate(0vw) rotate(00deg); + transform-origin: center; + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/nl-NL/code/raspberry-pi-pico/beetle.jpg b/nl-NL/code/raspberry-pi-pico/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/beetle.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/butterfly.JPG b/nl-NL/code/raspberry-pi-pico/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/butterfly.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/button.png b/nl-NL/code/raspberry-pi-pico/button.png new file mode 100644 index 00000000..84141380 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/button.png differ diff --git a/nl-NL/code/raspberry-pi-pico/buzzer.png b/nl-NL/code/raspberry-pi-pico/buzzer.png new file mode 100644 index 00000000..717770f1 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/buzzer.png differ diff --git a/nl-NL/code/raspberry-pi-pico/cacti.JPG b/nl-NL/code/raspberry-pi-pico/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/cacti.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/cafe.css b/nl-NL/code/raspberry-pi-pico/cafe.css new file mode 100644 index 00000000..e05a2b43 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/cafe.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/cafe.jpg b/nl-NL/code/raspberry-pi-pico/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/cafe.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/candles.JPG b/nl-NL/code/raspberry-pi-pico/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/candles.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/carnival.jpg b/nl-NL/code/raspberry-pi-pico/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/carnival.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/colour-festival.jpg b/nl-NL/code/raspberry-pi-pico/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/colour-festival.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/comic-books.jpg b/nl-NL/code/raspberry-pi-pico/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/comic-books.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/comic.css b/nl-NL/code/raspberry-pi-pico/comic.css new file mode 100644 index 00000000..83bdeb61 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/comic.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/nl-NL/code/raspberry-pi-pico/companion.css b/nl-NL/code/raspberry-pi-pico/companion.css new file mode 100644 index 00000000..8af48be6 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/companion.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/nl-NL/code/raspberry-pi-pico/crayons.jpg b/nl-NL/code/raspberry-pi-pico/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/crayons.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/default.css b/nl-NL/code/raspberry-pi-pico/default.css new file mode 100644 index 00000000..d65883f0 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/default.css @@ -0,0 +1,20 @@ + +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffffff; + --secondary: #c51a4a; + --tertiary: #6cc04a; + --page: #000000; + --onprimary: #555559; + --onsecondary: #ffffff; + --ontertiary: #555559; + --onpage: #000000; + --detail: #999798; + --detail2: #c9c8c7; + + --body-font: 1rem 'Nunito', sans-serif; + --header-font: lighter 3rem 'Russo One', sans-serif; + --title-font: lighter 1.5rem 'Nunito', sans-serif; + --quote-font: lighter 1.5rem 'Nunito', sans-serif; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/disco-ball.jpg b/nl-NL/code/raspberry-pi-pico/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/disco-ball.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/disco-flowers.JPG b/nl-NL/code/raspberry-pi-pico/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/disco-flowers.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/disco.css b/nl-NL/code/raspberry-pi-pico/disco.css new file mode 100644 index 00000000..31be1664 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/disco.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/nl-NL/code/raspberry-pi-pico/drone.JPG b/nl-NL/code/raspberry-pi-pico/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/drone.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/exotic-plants.jpg b/nl-NL/code/raspberry-pi-pico/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/exotic-plants.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/ferns.jpg b/nl-NL/code/raspberry-pi-pico/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/ferns.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/festival.css b/nl-NL/code/raspberry-pi-pico/festival.css new file mode 100644 index 00000000..1b37e92f --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/festival.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/fiesta.css b/nl-NL/code/raspberry-pi-pico/fiesta.css new file mode 100644 index 00000000..6722fead --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/fiesta.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/nl-NL/code/raspberry-pi-pico/fire.jpg b/nl-NL/code/raspberry-pi-pico/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/fire.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/fish.jpg b/nl-NL/code/raspberry-pi-pico/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/fish.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/forest.JPG b/nl-NL/code/raspberry-pi-pico/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/forest.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/game-boy.jpg b/nl-NL/code/raspberry-pi-pico/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/game-boy.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/globe-in-water.JPG b/nl-NL/code/raspberry-pi-pico/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/globe-in-water.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/greenhouse.JPG b/nl-NL/code/raspberry-pi-pico/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/greenhouse.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/helpful-plumber.css b/nl-NL/code/raspberry-pi-pico/helpful-plumber.css new file mode 100644 index 00000000..8b6f5fd1 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/nl-NL/code/raspberry-pi-pico/illustrations.png b/nl-NL/code/raspberry-pi-pico/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/illustrations.png differ diff --git a/nl-NL/code/raspberry-pi-pico/index.html b/nl-NL/code/raspberry-pi-pico/index.html new file mode 100644 index 00000000..77939b12 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/index.html @@ -0,0 +1,165 @@ + + + + + + + + + Raspberry Pi Pico + + + + + + + + + + + + + + + +
+

De Raspberry Pi Pico

+
+ + +
+ + + +
+ De liefde gezichtsuitdrukking. +

De Raspberry Pi Pico is een goedkope microcontroller die gebruikt wordt voor het maken van elektronische producten.

+
+ + + +
+

De invoer en uitvoer die ik heb gebruikt zijn:

+
+

Invoer

+
    +
  • Schakelaar
    • +
  • Drukknop
    • +
  • Potentiometer
    • +
+
+ +
+

Uitvoer

+
    +
  • LED
    • +
  • RGB LED
    • +
  • Zoemer
    • +
+
+

Beweeg de muis over de kaarten voor meer informatie:

+
+ + + +

Invoer

+ +
+ + + +
+
+
+

Schakelaar

+ +
+
+

Een schakelaar is een elektrische component die gesloten kan worden om electriciteit te laten stromen en geopend om te voorkomen dat electriciteit stroomt.

+
+
+
+ +
+
+
+

Drukknop

+ +
+
+

Een knop is een soort schakelaar die een verbinding maakt wanneer deze wordt ingedrukt.

+
+
+
+ +
+
+
+

Potentiometer

+ +
+
+

Een potentiometer is een analoog invoeronderdeel dat zijn weerstand verandert afhankelijk van de positie van het instelwiel.

+
+
+
+ +
+ + + +

Uitvoer

+ +
+ + + +
+
+
+

LED

+ +
+
+

LED staat voor light-emitting diode. Het bevat een materiaal dat oplicht als er een elektrische stroom doorheen gaat.

+
+
+
+ +
+
+
+

RGB LED

+ +
+
+

RGB staat voor Rood Groen Blauw. Met RGB LED's kun je code gebruiken om te bepalen hoeveel van elke kleur wordt uitgestraald.

+
+
+
+ +
+
+
+

Zoemer

+ +
+
+

Een passieve zoemer kan verschillende tonen afspelen. Het vereist een verbinding en een specifiek signaal om de gekozen toon te kunnen afspelen.

+
+
+
+ +
+
+ + + + + + diff --git a/nl-NL/code/raspberry-pi-pico/lake-mountains.JPG b/nl-NL/code/raspberry-pi-pico/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/lake-mountains.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/land-animals.css b/nl-NL/code/raspberry-pi-pico/land-animals.css new file mode 100644 index 00000000..2f3162dc --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/land-animals.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/led.png b/nl-NL/code/raspberry-pi-pico/led.png new file mode 100644 index 00000000..0a273225 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/led.png differ diff --git a/nl-NL/code/raspberry-pi-pico/medal.jpg b/nl-NL/code/raspberry-pi-pico/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/medal.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/medals.css b/nl-NL/code/raspberry-pi-pico/medals.css new file mode 100644 index 00000000..7ac4f74b --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/medals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/money.css b/nl-NL/code/raspberry-pi-pico/money.css new file mode 100644 index 00000000..a05b3d82 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/money.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/nl-NL/code/raspberry-pi-pico/monkey.JPG b/nl-NL/code/raspberry-pi-pico/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/monkey.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/moon-art.png b/nl-NL/code/raspberry-pi-pico/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/moon-art.png differ diff --git a/nl-NL/code/raspberry-pi-pico/mushroom.JPG b/nl-NL/code/raspberry-pi-pico/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/mushroom.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/nature.css b/nl-NL/code/raspberry-pi-pico/nature.css new file mode 100644 index 00000000..c1989be7 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/nature.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/pansies.JPG b/nl-NL/code/raspberry-pi-pico/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/pansies.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/pastel-hearts.jpg b/nl-NL/code/raspberry-pi-pico/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/pastel-hearts.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/pastel.css b/nl-NL/code/raspberry-pi-pico/pastel.css new file mode 100644 index 00000000..b8befe50 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/pastel.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/pico-hand.png b/nl-NL/code/raspberry-pi-pico/pico-hand.png new file mode 100644 index 00000000..31577c88 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/pico-hand.png differ diff --git a/nl-NL/code/raspberry-pi-pico/piggy-bank.jpg b/nl-NL/code/raspberry-pi-pico/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/piggy-bank.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/placeholder.png b/nl-NL/code/raspberry-pi-pico/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/placeholder.png differ diff --git a/nl-NL/code/raspberry-pi-pico/pot.png b/nl-NL/code/raspberry-pi-pico/pot.png new file mode 100644 index 00000000..817fea4e Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/pot.png differ diff --git a/nl-NL/code/raspberry-pi-pico/primary.css b/nl-NL/code/raspberry-pi-pico/primary.css new file mode 100644 index 00000000..4a6a0cd4 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/primary.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/project_config.yml b/nl-NL/code/raspberry-pi-pico/project_config.yml new file mode 100644 index 00000000..62c199fa --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/project_config.yml @@ -0,0 +1,3 @@ +name: 'Raspberry Pi Pico' +identifier: 'raspberry-pi-pico' +type: 'html' diff --git a/nl-NL/code/raspberry-pi-pico/pumpkins.JPG b/nl-NL/code/raspberry-pi-pico/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/pumpkins.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/rainbow-forest.JPG b/nl-NL/code/raspberry-pi-pico/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/rainbow-forest.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/rgb-led.png b/nl-NL/code/raspberry-pi-pico/rgb-led.png new file mode 100644 index 00000000..cd3b4538 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/rgb-led.png differ diff --git a/nl-NL/code/raspberry-pi-pico/rhino.JPG b/nl-NL/code/raspberry-pi-pico/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/rhino.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/smokey.css b/nl-NL/code/raspberry-pi-pico/smokey.css new file mode 100644 index 00000000..df2cba2d --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/smokey.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/space.css b/nl-NL/code/raspberry-pi-pico/space.css new file mode 100644 index 00000000..91fe44a1 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/space.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/spider-web.jpg b/nl-NL/code/raspberry-pi-pico/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/spider-web.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/style.css b/nl-NL/code/raspberry-pi-pico/style.css new file mode 100644 index 00000000..700e95e1 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/style.css @@ -0,0 +1,331 @@ +/* Kleurcombinaties */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + + +/* Kaartkleuren */ + +.purple { + background: #9a6faa; + color: #000000; +} + +.brickred { + background: #f27b5c; + color: #000000; +} + +.yellow { + background: #fddd42; + color: #000000; +} + +.turquoise { + background: #15bcac; + color: #000000; +} + +.blue { + background: #51a4dc; + color: #000000; +} + +.orange { + background: #ffbd5c; + color: #000000; +} + + +/* Overal toepassen */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Opvulling en rand maken een vak niet groter */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Laat de inhoud de pagina vullen zodat de voettekst onderaan staat */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* voeg een achtergrondafbeelding toe aan de hoofdtekst */ + +body { + /*background-image: url('name.jpg');*/ /* Verwijder commentaar en wijzig de bestandsnaam om een achtergrondafbeelding toe te voegen */ + /*background-repeat: repeat;*/ /* Laat de afbeelding herhalen */ + /*background-size: cover;*/ /* Zorg ervoor dat de afbeelding de hele container bedekt */ +} + +/* De hoofdinhoud van de pagina tussen de kop- en voettekst */ +main { + background: var(--primary); /* Kleur de achtergrond */ + color: var(--onprimary); /* Kleur de tekst */ + margin: 0 auto; /* Centreren als de browser erg breed is */ + min-width: 25rem; /* Laat de inhoud niet te smal worden */ + max-width: 70rem; /* Laat de inhoud niet te breed worden */ + padding: 0; + padding-top: 0.5rem; /* Vulling bovenaan */ + margin-bottom: 1em; /* Tussenruimte vóór de voettekst */ +} + +/* Kop- en voettekst element stijlen */ + +header, +footer { + text-align: center; + width: 100%; /* Vul de volledige breedte van het venster */ + margin: 0; /* Verwijder de standaardmarge */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Sectiestijlen */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Randstijlen */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Voeg een ononderbroken lijn toe */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Voeg een ononderbroken lijn toe boven de voettekst */ +} + +/* Voeg een transparant effect toe */ + +.transparent { + opacity: 0.95; +} + +/* Stijlen alleen voor h1-elementen */ + +h1 { + font: var(--header-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ + padding: 2rem; + margin: 0; /* Centreren als de browser erg breed is */ +} + +/* Stijlen alleen voor h2-elementen */ + +h2 { + font: var(--title-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ +} + +/* Markeer sleutelwoorden vet en pas een alternatieve tekstkleur toe */ + +strong { + color: var(--detail2); /* Tekst kleur opgeslagen in de bijschrift variabele */ + font-weight: bold; /* Maakt tekstgewicht sterker dan de standaard */ +} + +/* Stijl voor geordende en ongeordende lijsten */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Opvulling rond alinea's */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Stijl voor links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Gebruik de kleur van het bovenliggende element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +.ytop { + display: flex; + justify-content: top; + flex-flow: column; +} + +/* Stijlen alleen voor de .wrap class */ + +.wrap { + /* Laat inhoud over meerdere rijen lopen */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; +} + +/* Voor het maken van mooie vakjes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Stijlen voor de div tags die zich in een .wrap class bevinden */ + +.wrap > div { + width: 14rem; + padding: 0rem; +} + +/* Stijlen voor de img tags die zich in een .wrap class bevinden */ + +.wrap > img { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Stijlen voor de p-tags die zich in een .wrap class bevinden */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; + padding: 0rem; +} + +/* Specifieke stijlen voor dit project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Gebruikt om een grote emoji te maken */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specifieke stijlen voor dit project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.wrap .card { + width: 10rem; + height: 15rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; + font: var(--body-font); +} + +.card img { + max-width: 80%; + max-height: 80%; +} + diff --git a/nl-NL/code/raspberry-pi-pico/sunflowers.JPG b/nl-NL/code/raspberry-pi-pico/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/sunflowers.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/sunset-beach.JPG b/nl-NL/code/raspberry-pi-pico/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/sunset-beach.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/sunset-person.jpg b/nl-NL/code/raspberry-pi-pico/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/sunset-person.jpg differ diff --git a/nl-NL/code/raspberry-pi-pico/sunset.JPG b/nl-NL/code/raspberry-pi-pico/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/sunset.JPG differ diff --git a/nl-NL/code/raspberry-pi-pico/sunset.css b/nl-NL/code/raspberry-pi-pico/sunset.css new file mode 100644 index 00000000..4f655683 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/sunset.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/sunshine.css b/nl-NL/code/raspberry-pi-pico/sunshine.css new file mode 100644 index 00000000..23eb3cec --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/sunshine.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/switch.png b/nl-NL/code/raspberry-pi-pico/switch.png new file mode 100644 index 00000000..46f288a8 Binary files /dev/null and b/nl-NL/code/raspberry-pi-pico/switch.png differ diff --git a/nl-NL/code/raspberry-pi-pico/thriller.css b/nl-NL/code/raspberry-pi-pico/thriller.css new file mode 100644 index 00000000..b70e7771 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/thriller.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/water-animals.css b/nl-NL/code/raspberry-pi-pico/water-animals.css new file mode 100644 index 00000000..5a515ac7 --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/water-animals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/raspberry-pi-pico/woodland.css b/nl-NL/code/raspberry-pi-pico/woodland.css new file mode 100644 index 00000000..22978fbf --- /dev/null +++ b/nl-NL/code/raspberry-pi-pico/woodland.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/animation.css b/nl-NL/code/what-is-d-and-d/animation.css new file mode 100644 index 00000000..e83db82b --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/animation.css @@ -0,0 +1,128 @@ +.spinme { + animation: rotate-center linear 8s 2; /* voert de 'rotate-centre' animatie uit met lineaire timing (alles op hetzelfde tempo gedurende acht seconden). Voert de animatie twee keer uit. */ + display: inline-block; /* Belangrijk zodat het geanimeerde element niet wordt gesplitst naar een nieuwe regel */ +} + +@keyframes rotate-center { + /* De rotatie-animatiecode */ + 0% { + /* Roteren van 0 tot 360 graden */ + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.bounceme { + animation: bounce ease 2s 3; /* voert de 'bounce' animatie met 'ease timing' (langzame start en einde) gedurende twee seconden. Voert de animatie drie keer uit. */ + display: inline-block; +} + +@keyframes bounce { + /* De bounce-animatiecode */ + 0% { + transform: scale(1, 1) translateY(0); /* Beginpositie en werkelijke grootte */ + } + 10% { + transform: scale(1.1, 0.9) translateY(0); /* Breedte vergroten en hoogte verkleinen voor pre bounce squash effect */ + } + 30% { + transform: scale(1, 1) translateY(-6rem); /* Keer terug naar werkelijke grootte en verplaats emoji omhoog met 100px van de huidige positie */ + } + 50% { + transform: scale(1, 1) translateY(0); /* Verplaats emoji terug naar de startpositie */ + } +} + +.scaleme { + animation: scale ease 2s infinite; /* voert de 'scale' animatie met 'ease timing' (langzame start en einde) uit gedurende twee seconden. Voert de animatie oneindig uit. */ + display: inline-block; +} + +@keyframes scale { + /* De scale animatiecode */ + 0% { + transform: scale(1, 1); + } + 20% { + transform: scale(1.1, 1.1); + } + 40% { + transform: scale(1.2, 1.2); + } + 60% { + transform: scale(1.1, 1.1); + } + 80% { + transform: scale(1, 1); + } +} + +.rollmeleft { + animation: rollleft ease 8s 1; + display: inline-block; +} + +@keyframes rollleft { + /* De roll animatiecode */ + from { + transform: translate(-60vw) rotate(0deg); + } + + to { + transform: translate(0vw) rotate(360deg); + } +} + +.rollmeright { + animation: rollright ease 8s 1; + display: inline-block; +} + +@keyframes rollright { + /* De roll animatiecode */ + from { + transform: translate(60vw) rotate(360deg); + } + + to { + transform: translate(0vw) rotate(00deg); + } +} + +.movemeleft { + animation: moveleft ease 8s 1; + display: inline-block; +} + +@keyframes moveleft { + /* De move animatiecode */ + from { + transform: translate(-60vw); + } + + to { + transform: translate(0vw); + } +} + +.movemeright { + animation: moveright ease 8s 1; + display: inline-block; +} + +@keyframes moveright { + /* De move animatiecode */ + from { + transform: translate(60vw); + } + + to { + transform: translate(0vw); + } +} + +.flipme { + transform: rotateY(180deg); +} diff --git a/nl-NL/code/what-is-d-and-d/beetle.jpg b/nl-NL/code/what-is-d-and-d/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/beetle.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/butterfly.JPG b/nl-NL/code/what-is-d-and-d/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/butterfly.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/cacti.JPG b/nl-NL/code/what-is-d-and-d/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/cacti.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/cafe.css b/nl-NL/code/what-is-d-and-d/cafe.css new file mode 100644 index 00000000..e05a2b43 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/cafe.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f9ead7; /* */ + --onprimary: #000000; /* */ + --secondary: #c9898d; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f5aaaa; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #ae6c58; /* */ + --detail2: #825959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "spirax", cursive; + --title-font: lighter 2rem "spirax", cursive; + --quote-font: lighter 1.5rem "spirax", cursive; + +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/cafe.jpg b/nl-NL/code/what-is-d-and-d/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/cafe.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/candles.JPG b/nl-NL/code/what-is-d-and-d/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/candles.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/carnival.jpg b/nl-NL/code/what-is-d-and-d/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/carnival.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/colour-festival.jpg b/nl-NL/code/what-is-d-and-d/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/colour-festival.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/comic-books.jpg b/nl-NL/code/what-is-d-and-d/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/comic-books.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/comic.css b/nl-NL/code/what-is-d-and-d/comic.css new file mode 100644 index 00000000..83bdeb61 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/comic.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f0d59b; /* */ + --onprimary: #000000; /* */ + --secondary: #f03d25; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1b78a7; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #193543; /* */ + --detail2: #8c2421; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Titan One", cursive; + --title-font: lighter 2rem "Titan One", cursive; + --quote-font: lighter 1.5rem "Titan One", cursive; +} diff --git a/nl-NL/code/what-is-d-and-d/companion.css b/nl-NL/code/what-is-d-and-d/companion.css new file mode 100644 index 00000000..8af48be6 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/companion.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fad61d; + --onprimary: #000000; + --secondary: #f8d006; + --onsecondary: #000000; + --tertiary: #f62d14; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #3f3025; + --detail: #fdea8d; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Hanalei Fill", cursive; + --title-font: lighter 2rem "Hanalei Fill", cursive; + --quote-font: lighter 1.5rem "Hanalei Fill", cursive; +} diff --git a/nl-NL/code/what-is-d-and-d/crayons.jpg b/nl-NL/code/what-is-d-and-d/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/crayons.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/default.css b/nl-NL/code/what-is-d-and-d/default.css new file mode 100644 index 00000000..69ed8275 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/default.css @@ -0,0 +1,20 @@ + +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #bccad0; + --onprimary:#4f4e4e; + --secondary: #495054; + --onsecondary:#ffffff; + --tertiary:#747474; + --ontertiary: #ffffff; + --page:#ffffff; + --onpage:#000000; + --detail: #9ba8ae; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/disco-ball.jpg b/nl-NL/code/what-is-d-and-d/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/disco-ball.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/disco-flowers.JPG b/nl-NL/code/what-is-d-and-d/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/disco-flowers.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/disco.css b/nl-NL/code/what-is-d-and-d/disco.css new file mode 100644 index 00000000..31be1664 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/disco.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #fb33db; /* */ + --onprimary: #000000; /* */ + --secondary: #7fff00; /* */ + --onsecondary: #000000; /* */ + --tertiary: #1f1fff; /* */ + --ontertiary: #ffffff; /* */ + --page: #000000; /* */ + --onpage: #ffffff; /* */ + --detail: #03dddc; /* */ + --detail2: #fcf340; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Monoton", cursive; + --title-font: lighter 2rem "Monoton", cursive; + --quote-font: lighter 1.5rem "Monoton", cursive; +} diff --git a/nl-NL/code/what-is-d-and-d/dm.jpg b/nl-NL/code/what-is-d-and-d/dm.jpg new file mode 100644 index 00000000..5ee5f0a4 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/dm.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/dm2.jpg b/nl-NL/code/what-is-d-and-d/dm2.jpg new file mode 100644 index 00000000..a97ece6d Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/dm2.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/drone.JPG b/nl-NL/code/what-is-d-and-d/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/drone.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/exotic-plants.jpg b/nl-NL/code/what-is-d-and-d/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/exotic-plants.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/ferns.jpg b/nl-NL/code/what-is-d-and-d/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/ferns.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/festival.css b/nl-NL/code/what-is-d-and-d/festival.css new file mode 100644 index 00000000..1b37e92f --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/festival.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ff981b; /* */ + --onprimary: #000000; /* */ + --secondary: #b61023; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #0aac69; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #3b8545; /* */ + --detail2: #850f00; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Miltonian", cursive; + --title-font: lighter 2rem "Miltonian", cursive; + --quote-font: lighter 1.5rem "Miltonian", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/fiesta.css b/nl-NL/code/what-is-d-and-d/fiesta.css new file mode 100644 index 00000000..6722fead --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/fiesta.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #5ed3ed; /* */ + --onprimary: #000000; /* */ + --secondary: #e21844; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #ffd439; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #a0c409; /* */ + --detail2: #522300; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Flavors", cursive; + --title-font: lighter 2rem "Flavors", cursive; + --quote-font: lighter 1.5rem "Flavors", cursive; +} diff --git a/nl-NL/code/what-is-d-and-d/fire.jpg b/nl-NL/code/what-is-d-and-d/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/fire.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/fish.jpg b/nl-NL/code/what-is-d-and-d/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/fish.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/forest.JPG b/nl-NL/code/what-is-d-and-d/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/forest.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/game-boy.jpg b/nl-NL/code/what-is-d-and-d/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/game-boy.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/globe-in-water.JPG b/nl-NL/code/what-is-d-and-d/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/globe-in-water.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/greenhouse.JPG b/nl-NL/code/what-is-d-and-d/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/greenhouse.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/helpful-plumber.css b/nl-NL/code/what-is-d-and-d/helpful-plumber.css new file mode 100644 index 00000000..8b6f5fd1 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/helpful-plumber.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #FFDE00; + --onprimary: #000000; + --secondary: #2967D8; + --onsecondary: #ffffff; + --tertiary: #ED145B; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #45D849; + --detail2: #000000; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Luckiest Guy', cursive; + --title-font: lighter 2rem 'Luckiest Guy', cursive; + --quote-font: lighter 1.5rem 'Luckiest Guy', cursive; +} diff --git a/nl-NL/code/what-is-d-and-d/illustrations.png b/nl-NL/code/what-is-d-and-d/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/illustrations.png differ diff --git a/nl-NL/code/what-is-d-and-d/index.html b/nl-NL/code/what-is-d-and-d/index.html new file mode 100644 index 00000000..595e2219 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/index.html @@ -0,0 +1,168 @@ + + + + + + + + + Dungeons & Dragons + + + + + + + + + + + + + + + +
+
+

Dungeons & Dragons

+
+
+
+

Wat is het?

+
+
+ + +
+
+

Wat is Dungeons & Dragons?

+

Volgens het bedrijf dat het maakt, Wizard of the Coast, is het 's werelds beste rollenspel.

+
+

Wat is een rollenspel? Het is een spel waarbij jij en je vrienden doen alsof je een personage bent dat je zelf hebt bedacht, in een fantasiewereld die is gecreëerd door de Dungeonmaster (kortweg DM). Jouw personage kan alles doen wat je maar kunt bedenken. Wanneer je interactie hebt met de wereld, gooi je met dobbelstenen om de uitkomst of reactie op jouw acties te bepalen.

+
+ +
+
+

"De essentie van een rollenspel is dat het een groeps- en coöperatieve ervaring is."

+ - Gary Gygax (uitvinder van D&D) +
+
+ +
+ De Dungeonmaster weet en controleert alles over de wereld voor zijn spelers. Op de afbeelding kijkt een machtige tovenaar neer op een planeet die klein lijkt vergeleken met zijn magische kracht. Bliksemschichten schieten blauw uit hun uitgestrekte vingers en voeren hun wil uit op de grond beneden. +
+

De Dungeonmaster (DM)

+

Als D&D een videogame zou zijn, dan zou de DM de console zijn waarop je het spel speelt. Hij of zij brengt de wereld tot leven en bepaalt hoe de wereld reageert op jouw acties en de acties van de andere spelers.

+
+

De DM bedenkt en bepaalt de acties van alle andere personages (die niet door de spelers worden bestuurd) die de wereld bewonen. Ze lossen acties op, bepalen resultaten en vertellen het verhaal aan de groep van wat er om hen heen gebeurt. De DM weet alles over de wereld, en wat hij niet weet, verzint hij gewoon!

+
+

Wat de DM ook zegt is wet, hij of zij is scheidsrechter, verteller en andere personages in één!

+
+
+ +
+
+

Klassen

+
+ +

Klassen zijn de manier waarop je personage zich in het spel gedraagt mechanisch, of welke vaardigheden of talenten ze hebben en welke speciale trucs ze kunnen doen. Machtige krijgers zijn bijvoorbeeld beter in vechten met wapens en kracht, terwijl slimme tovenaars hun magische gaven gebruiken om krachtige betoveringen te creëren.


+

Er zijn twee soorten klassen: Krijgskunstklassen die zich richten op gevechten en niet-magische vaardigheden, en Betoveringsklassen die zich richten op het beïnvloeden van de wereld om hen heen met magische middelen.


+

Hieronder vind je een selectie van slechts enkele van de beschikbare klassen in Dungeons and Dragons:

+
+
+

Krijgskunstklassen

+
+
+
+
+
+

Schurk

+

🤫

+
+
+

Schurken bewegen zich sluw en snel in de schaduw en zijn bekwame agenten.

+
+
+
+ +
+
+
+

🤺

+

Krijger

+
+
+

Krijgers worden al op jonge leeftijd getraind in vechttechnieken en zijn daardoor krachtige en bekwame vechters.

+
+
+
+ +
+
+
+

Barbaar

+

😡

+
+
+

Barbaren worden gedreven door hun enorme woede en gaan voluit voor de strijd. Ze trekken zich niets aan van de schade die ze oplopen of toebrengen. +

+
+
+
+ +
+
+

Betoveringsklassen

+
+
+ +
+
+
+

Geestelijke

+

😇

+
+
+

Als trouwe werklieden van machtige godheden, krijgen geestelijken magische krachten van hun goden.

+
+
+
+ +
+
+
+

🧙‍♀️

+

Tovenaar

+
+
+

Tovenaars hebben jarenlang gestudeerd om hun kracht te verwerven, en ze hebben zo gezien en geleerd hoe tovenaar te zijn.

+
+
+
+ +
+
+
+

Druïde

+

🐾

+
+
+

Druïden maken voor hun magie gebruik van de kracht van de natuur. Ze kunnen de vorm van een dier aannemen en helende spreuken uitspreken.

+
+
+
+ +
+ +
+ + + + + + diff --git a/nl-NL/code/what-is-d-and-d/lake-mountains.JPG b/nl-NL/code/what-is-d-and-d/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/lake-mountains.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/land-animals.css b/nl-NL/code/what-is-d-and-d/land-animals.css new file mode 100644 index 00000000..2f3162dc --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/land-animals.css @@ -0,0 +1,20 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #01957d; + --onprimary: #000000; + --secondary: #e65c1e; + --onsecondary: #000000; + --tertiary: #a8d67e; + --ontertiary: #fbfbfb; + --page: #ffffff; + --onpage: #000000; + --detail: #fddb81; + --detail2: #470f01; + + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Ranchers', cursive; + --title-font: lighter 2rem 'Ranchers', cursive; + --quote-font: lighter 1.5rem 'Ranchers', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/medal.jpg b/nl-NL/code/what-is-d-and-d/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/medal.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/medals.css b/nl-NL/code/what-is-d-and-d/medals.css new file mode 100644 index 00000000..7ac4f74b --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/medals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #b4b4b4; /* */ + --onprimary: #000000; /* */ + --secondary: #c9b037; /* */ + --onsecondary: #000000; /* */ + --tertiary: #ad8a56; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #af9500; /* */ + --detail2: #6a3805; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Faster One", cursive; + --title-font: lighter 2rem "Faster One", cursive; + --quote-font: lighter 1.5rem "Faster One", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/money.css b/nl-NL/code/what-is-d-and-d/money.css new file mode 100644 index 00000000..a05b3d82 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/money.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #e1ebf5; /* */ + --onprimary: #000000; /* */ + --secondary: #2161af; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #68a7f4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #5c667c; /* */ + --detail2: #e17c18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Lobster", cursive; + --title-font: lighter 2rem "Lobster", cursive; + --quote-font: lighter 1.5rem "Lobster", cursive; +} diff --git a/nl-NL/code/what-is-d-and-d/monkey.JPG b/nl-NL/code/what-is-d-and-d/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/monkey.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/moon-art.png b/nl-NL/code/what-is-d-and-d/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/moon-art.png differ diff --git a/nl-NL/code/what-is-d-and-d/mushroom.JPG b/nl-NL/code/what-is-d-and-d/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/mushroom.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/nature.css b/nl-NL/code/what-is-d-and-d/nature.css new file mode 100644 index 00000000..c1989be7 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/nature.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f8ffb8; /* */ + --onprimary: #000000; /* */ + --secondary: #5fc971; /* */ + --onsecondary: #000000; /* */ + --tertiary: #a2ed71; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #c5e48b; /* */ + --detail2: #107f65; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Eater", cursive; + --title-font: lighter 2rem "Eater", cursive; + --quote-font: lighter 1.5rem "Eater", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/pansies.JPG b/nl-NL/code/what-is-d-and-d/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/pansies.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/pastel-hearts.jpg b/nl-NL/code/what-is-d-and-d/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/pastel-hearts.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/pastel.css b/nl-NL/code/what-is-d-and-d/pastel.css new file mode 100644 index 00000000..b8befe50 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/pastel.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #f7e49b; /* */ + --onprimary: #000000; /* */ + --secondary: #fa9dc2; /* */ + --onsecondary: #000000; /* */ + --tertiary: #73e2b4; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #afa1eb; /* */ + --detail2: #084959; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Finger Paint", cursive; + --title-font: lighter 2rem "Finger Paint", cursive; + --quote-font: lighter 1.5rem "Finger Paint", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/piggy-bank.jpg b/nl-NL/code/what-is-d-and-d/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/piggy-bank.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/placeholder.png b/nl-NL/code/what-is-d-and-d/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/placeholder.png differ diff --git a/nl-NL/code/what-is-d-and-d/primary.css b/nl-NL/code/what-is-d-and-d/primary.css new file mode 100644 index 00000000..4a6a0cd4 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/primary.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #43c743; /* */ + --onprimary: #000000; /* */ + --secondary: #d80303; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2c2ce6; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9e925; /* */ + --detail2: #70008f; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Freckle Face", cursive; + --title-font: lighter 2rem "Freckle Face", cursive; + --quote-font: lighter 1.5rem "Freckle Face", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/project_config.yml b/nl-NL/code/what-is-d-and-d/project_config.yml new file mode 100644 index 00000000..e4b2ba53 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/project_config.yml @@ -0,0 +1,3 @@ +name: 'Wat is D&D' +identifier: 'what-is-d-and-d' +type: 'html' diff --git a/nl-NL/code/what-is-d-and-d/pumpkins.JPG b/nl-NL/code/what-is-d-and-d/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/pumpkins.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/rainbow-forest.JPG b/nl-NL/code/what-is-d-and-d/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/rainbow-forest.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/rhino.JPG b/nl-NL/code/what-is-d-and-d/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/rhino.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/smokey.css b/nl-NL/code/what-is-d-and-d/smokey.css new file mode 100644 index 00000000..df2cba2d --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/smokey.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #918c87; /* */ + --onprimary: #000000; /* */ + --secondary: #575b60; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #2a2c2e; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #cd2527; /* */ + --detail2: #520000; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Codystar", cursive; + --title-font: lighter 2rem "Codystar", cursive; + --quote-font: lighter 1.5rem "Codystar", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/space.css b/nl-NL/code/what-is-d-and-d/space.css new file mode 100644 index 00000000..91fe44a1 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/space.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #583f8f; /* */ + --onprimary: #ffffff; /* */ + --secondary: #000000; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #3d75a0; /* */ + --ontertiary: #ffffff; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #0b5f7b; /* */ + --detail2: #B7CAD7; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Rubik Moonrocks", cursive; + --title-font: lighter 2rem "Rubik Moonrocks", cursive; + --quote-font: lighter 1.5rem "Rubik Moonrocks", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/spider-web.jpg b/nl-NL/code/what-is-d-and-d/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/spider-web.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/style.css b/nl-NL/code/what-is-d-and-d/style.css new file mode 100644 index 00000000..fb989537 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/style.css @@ -0,0 +1,316 @@ +/* Kleurcombinaties */ + +.primary { + background: var(--primary); + color: var(--onprimary); +} + +.secondary { + background: var(--secondary); + color: var(--onsecondary); +} + +.tertiary { + background: var(--tertiary); + color: var(--ontertiary); +} + +.page { + background: var(--page); + color: var(--onpage); +} + + +/* Overal toepassen */ + +* { + margin: 0rem; + padding: 0rem; + box-sizing: border-box; /* Opvulling en rand maken een vak niet groter */ +} + +html, +body { + width: 100%; + margin: 0rem auto; + background: var(--page); + color: var(--onpage); + font: var(--body-font); + min-height: 100vh; /* Laat de inhoud de pagina vullen zodat de voettekst onderaan staat */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* voeg een achtergrondafbeelding toe aan de hoofdtekst */ + +body { + /*background-image: url('name.jpg');*/ /* Verwijder commentaar en wijzig de bestandsnaam om een achtergrondafbeelding toe te voegen */ + /*background-repeat: repeat;*/ /* Laat de afbeelding herhalen */ + /*background-size: cover;*/ /* Zorg ervoor dat de afbeelding de hele container bedekt */ +} + +/* De hoofdinhoud van de pagina tussen de kop- en voettekst */ +main { + background: var(--primary); /* Kleur de achtergrond */ + color: var(--onprimary); /* Kleur de tekst */ + margin: 0 auto; /* Centreren als de browser erg breed is */ + min-width: 25rem; /* Laat de inhoud niet te smal worden */ + max-width: 70rem; /* Laat de inhoud niet te breed worden */ + padding: 0; + padding-top: 0.5rem; /* Vulling bovenaan */ + margin-bottom: 1em; /* Tussenruimte vóór de voettekst */ +} + +/* Kop- en voettekst element stijlen */ + +header, +footer { + text-align: center; + width: 100%; /* Vul de volledige breedte van het venster */ + margin: 0; /* Verwijder de standaardmarge */ + min-height: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Sectiestijlen */ + +section { + padding: 1rem 2rem; + margin: 1rem auto; +} + +/* Randstijlen */ + +.border-bottom { + border-bottom: 20px solid var(--detail); /* Voeg een ononderbroken lijn toe */ +} + +.border-top { + border-top: 10px solid var(--detail2); /* Voeg een ononderbroken lijn toe boven de voettekst */ +} + +/* Voeg een transparant effect toe */ + +.transparent { + opacity: 0.95; +} + +/* Stijlen alleen voor h1-elementen */ + +h1 { + font: var(--header-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ + padding: 2rem; + margin: 0; /* Centreren als de browser erg breed is */ +} + +/* Stijlen alleen voor h2-elementen */ + +h2 { + font: var(--title-font); /* Lettertype stijl opgeslagen in de kop-lettertype variabele */ +} + +/* Markeer sleutelwoorden vet en pas een alternatieve tekstkleur toe */ + +strong { + color: var(--detail2); /* Tekst kleur opgeslagen in de bijschrift variabele */ + font-weight: bold; /* Maakt tekstgewicht sterker dan de standaard */ +} + +/* Stijl voor geordende en ongeordende lijsten */ + +ol, +ul { + display: inline-block; + text-align: left; + padding-left: 2rem; +} + +/* Opvulling rond alinea's */ + +p { + padding: 0.25rem 0.5rem; +} + +/* Stijl voor links */ + +a:link, +a:visited { + font-weight: bold; + color: inherit; /* Gebruik de kleur van het bovenliggende element */ +} + +.xcenter { + text-align: center; +} + +.ycenter { + display: flex; + justify-content: center; + flex-flow: column; +} + +/* Stijlen alleen voor de .wrap class */ + +.wrap { + /* Laat inhoud over meerdere rijen lopen */ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 0rem 0rem; /* horizontale en verticale ruimte */ +} + +/* Voor het maken van mooie vakjes */ + +.dashed-border { + border: 0.25rem dashed var(--detail2); +} + +.solid-border { + border: 0.25rem solid var(--detail2); +} + +/* Stijlen voor de div tags die zich in een .wrap class bevinden */ + +.wrap > div { + width: 14rem; +} + +/* Stijlen voor de img tags die zich in een .wrap class bevinden */ + +.wrap > img { + width: 14rem; + display: block; +} + +/* Stijlen voor de p-tags die zich in een .wrap class bevinden */ + +.wrap > p, +.wrap > span { + width: 14rem; + display: block; +} + +/* Specifieke stijlen voor dit project */ + +.bigfont { + font-size: 3rem; +} + +.hugefont { + /* Gebruikt om een grote emoji te maken */ + font-size: 6rem; + text-align: center; + padding: 1rem; +} + +.wrap .narrow { + width: 10rem; +} + +.wrap .wide { + width: 20rem; +} + +blockquote { + font: var(--quote-font); + color: var(--detail); + text-align: center; + padding: 0rem; + max-width: 25rem; +} + +cite { + color: var(--detail); + font-size: small; +} + +/* Specifieke stijlen voor dit project */ + +.tile { + height: 9.4rem; +} + +.rounded { + border-radius: 1rem; +} + +.gradient1 { + background-image: linear-gradient( + to bottom right, + var(--secondary), + var(--detail) + ); + color: var(--onsecondary); +} + +.gradient2 { + background-image: linear-gradient( + to top right, + var(--tertiary), + var(--detail2) + ); + color: var(--ontertiary); +} + +.shadow { + box-shadow: 5px 5px 3px 0px #888888; /* rechter- en onderste schaduwzijde, blur, spread en kleur */ + /*box-shadow: 5px 5px 4px 2px var(--detail);*/ +} + +.wrap .card { + width: 10rem; + height: 10rem; + border: 0.1rem solid transparent; +} + +.card-content { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 1s; + transform-style: preserve-3d; + perspective: 60rem; +} + +.card:hover .card-content { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card p { + padding: 0.5rem; +} + +/* Afgedrukte fotostijl */ + +.photo { + border: 1px solid #D0D0D0; /* Voeg een ononderbroken rand toe */ + width: 14rem; + height: 15rem; + background: #ffffff; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 3rem; + box-shadow: 8px 8px 10px 4px #888888; /* rechts en onderste schaduw, blur, spread en kleur */ + transform: rotate(3deg); +} + +.photo:hover { + transform: rotate(-3deg); +} + +.hugefont:hover { + transform: scale(1.2); +} diff --git a/nl-NL/code/what-is-d-and-d/sunflowers.JPG b/nl-NL/code/what-is-d-and-d/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/sunflowers.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/sunset-beach.JPG b/nl-NL/code/what-is-d-and-d/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/sunset-beach.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/sunset-person.jpg b/nl-NL/code/what-is-d-and-d/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/sunset-person.jpg differ diff --git a/nl-NL/code/what-is-d-and-d/sunset.JPG b/nl-NL/code/what-is-d-and-d/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/nl-NL/code/what-is-d-and-d/sunset.JPG differ diff --git a/nl-NL/code/what-is-d-and-d/sunset.css b/nl-NL/code/what-is-d-and-d/sunset.css new file mode 100644 index 00000000..4f655683 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/sunset.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #36114d; /* */ + --onprimary: #ffffff; /* */ + --secondary: #783a82; /* */ + --onsecondary: #ffffff; /* */ + --tertiary: #f0a576; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #e9928f; /* */ + --detail2: #f4cdcd; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Bungee Shade", cursive; + --title-font: lighter 2rem "Bungee Shade", cursive; + --quote-font: lighter 1.5rem "Bungee Shade", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/sunshine.css b/nl-NL/code/what-is-d-and-d/sunshine.css new file mode 100644 index 00000000..23eb3cec --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/sunshine.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #ffc20b; /* */ + --onprimary: #000000; /* */ + --secondary: #ff8c08; /* */ + --onsecondary: #000000; /* */ + --tertiary: #f7e363; /* */ + --ontertiary: #000000; /* */ + --page: #ffffff; /* */ + --onpage: #000000; /* */ + --detail: #f9f642; /* */ + --detail2: #594D18; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Gorditas", cursive; + --title-font: lighter 2rem "Gorditas", cursive; + --quote-font: lighter 1.5rem "Gorditas", cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/thriller.css b/nl-NL/code/what-is-d-and-d/thriller.css new file mode 100644 index 00000000..b70e7771 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/thriller.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #6E6868; + --onprimary: #ffffff; + --secondary: #000000; + --onsecondary: #F81111; + --tertiary: #edeaeb; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #F81111; + --detail2: #f6f6f6; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Creepster', cursive; + --title-font: lighter 2rem 'Creepster', cursive; + --quote-font: lighter 1.5rem 'Creepster', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/water-animals.css b/nl-NL/code/what-is-d-and-d/water-animals.css new file mode 100644 index 00000000..5a515ac7 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/water-animals.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #58A7E4; + --onprimary: #000000; + --secondary: #0D6C86; + --onsecondary: #ffffff; + --tertiary: #3669D5; + --ontertiary: #000000; + --page: #ffffff; + --onpage: #000000; + --detail: #2140A3; + --detail2: #161F6F; + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem 'Shrikhand', cursive; + --title-font: lighter 2rem 'Shrikhand', cursive; + --quote-font: lighter 1.5rem 'Shrikhand', cursive; +} \ No newline at end of file diff --git a/nl-NL/code/what-is-d-and-d/woodland.css b/nl-NL/code/what-is-d-and-d/woodland.css new file mode 100644 index 00000000..749bdf52 --- /dev/null +++ b/nl-NL/code/what-is-d-and-d/woodland.css @@ -0,0 +1,19 @@ +/* Kleurenpalet en lettertypen instellen met variabelen */ + +:root { + --primary: #cc9c20; /* */ + --onprimary: #000000; /* */ + --secondary: #8da205; /* */ + --onsecondary: #000000; /* */ + --tertiary: #373402; /* */ + --ontertiary: #ffffff; /* */ + --page: #ebd5b3; /* */ + --onpage: #000000; /* */ + --detail: #ddd53a; /* */ + --detail2: #223701; /* */ + + --body-font: 1rem Verdana, sans-serif; + --header-font: lighter 3rem "Fredericka the Great", cursive; + --title-font: lighter 2rem "Fredericka the Great", cursive; + --quote-font: lighter 1.5rem "Fredericka the Great", cursive; +} \ No newline at end of file diff --git a/nl-NL/images/ally.png b/nl-NL/images/ally.png new file mode 100644 index 00000000..c0066239 Binary files /dev/null and b/nl-NL/images/ally.png differ diff --git a/nl-NL/images/banner.png b/nl-NL/images/banner.png new file mode 100644 index 00000000..5d6eb8ad Binary files /dev/null and b/nl-NL/images/banner.png differ diff --git a/nl-NL/images/favourite.png b/nl-NL/images/favourite.png new file mode 100644 index 00000000..432fbc7b Binary files /dev/null and b/nl-NL/images/favourite.png differ diff --git a/nl-NL/images/filter.png b/nl-NL/images/filter.png new file mode 100644 index 00000000..35d48567 Binary files /dev/null and b/nl-NL/images/filter.png differ diff --git a/nl-NL/images/pico.png b/nl-NL/images/pico.png new file mode 100644 index 00000000..8997540f Binary files /dev/null and b/nl-NL/images/pico.png differ diff --git a/nl-NL/images/step-three.PNG b/nl-NL/images/step-three.PNG new file mode 100644 index 00000000..426f2a2f Binary files /dev/null and b/nl-NL/images/step-three.PNG differ diff --git a/nl-NL/images/step-two.jpg b/nl-NL/images/step-two.jpg new file mode 100644 index 00000000..6b95a1d3 Binary files /dev/null and b/nl-NL/images/step-two.jpg differ diff --git a/nl-NL/meta.yml b/nl-NL/meta.yml new file mode 100644 index 00000000..dd90253d --- /dev/null +++ b/nl-NL/meta.yml @@ -0,0 +1,27 @@ +title: Bouw een webpagina +hero_image: images/banner.png +description: Bouw een webpagina over iets dat je wilt delen. +meta_title: Leer webontwikkeling voor beginners | Bouw een webpagina +meta_description: Leer webontwikkeling voor beginners met de Raspberry Pi Foundation. Bouw een webpagina met verschillende HTML-elementen. Voeg CSS-klassen toe om jouw pagina te stylen. +version: 4 +listed: true +copyedit: true +last_tested: "2021-03-26" +steps: + - + title: Inleiding + - + title: Jouw onderwerp + - + title: Bouw en test + completion: engaged + - + title: Deel + completion: internal + - + title: Reflectie + completion: external + - + title: Verbeter je project + - + title: Wat kun je verder nog doen? diff --git a/nl-NL/step_1.md b/nl-NL/step_1.md new file mode 100644 index 00000000..40f73773 --- /dev/null +++ b/nl-NL/step_1.md @@ -0,0 +1,103 @@ +## Inleiding + +In dit project ga je de vaardigheden die je hebt ontwikkeld in het pad [Inleiding tot web](https://projects.raspberrypi.org/en/pathways/web-intro) gebruiken om een webpagina te maken over iets dat je wilt delen. + +

+Het World Wide Web of web is een grote verzameling van met elkaar verbonden webpagina's. Dankzij het web kunnen mensen content van over de hele wereld bekijken en hun eigen webpagina's maken die ze met anderen kunnen delen. Kun je je voorstellen hoe het leven was vóór het internet? +

+ +Je gaat: + +- Een webpagina bouwen om informatie met anderen te delen +- Een webpagina maken met meerdere secties met verschillende HTML-elementen +- CSS-klassen gebruiken en aanpassen of toevoegen om jouw pagina te stylen + +\--- no-print --- + +\--- task --- + +### Probeer het uit + +
+
+Kun je de HTML-elementen identificeren die in dit project worden gebruikt? Hoe is CSS gebruikt om de pagina te stylen en te animeren? +
+ +**Favoriete dingen**: [Bekijk van binnen](https://editor.raspberrypi.org/en/projects/favourite-things){:target="_blank"} +
+ +
+ + + +\--- /task --- + +\--- /no-print --- + +
+ +### PROJECT SAMENVATTING: Bouw een webpagina + +
+ +Maak een webpagina over een onderwerp dat je interessant vindt en met anderen wilt delen. Het zou nuttige informatie kunnen zijn voor huisdiereigenaren, een pagina met je favoriete grapjes, een stap voor stap uitleg voor een spel wat je graag speelt, een aantal handige adviezen, een lijst met nuttige websites of wat je ook maar wilt delen met bezoekers van de webpagina. + +Je webpagina zou: + +- Meerdere secties met verschillende soorten inhoud, zoals tekst en afbeeldingen, emoji's, koppen, citaten, lijsten of links moeten hebben +- Een kleurenpalet, lettertypen en CSS-stijlen moeten gebruiken die goed samengaan +- Toegankelijk moeten zijn door te zorgen voor goede kleurcontrasten en lettergroottes + +Je webpagina zou: + +- Aangepaste CSS klassen kunnen gebruiken die je zelft maakt en toepast +- Animaties of flipcards kunnen gebruiken om interesse te wekken +- Kunnen worden gedeeld met de Raspberry Pi Foundation galerij om anderen te inspireren + +
+ +\--- no-print --- + +### Doe inspiratie op + +\--- task --- + +Terwijl je naar deze webpagina's kijkt, bedenk dan wat ze nuttig en informatief maakt, maar ook leuk en toegankelijk: + +⭐ Deel je voltooide project en maak kans dat het hier wordt getoond. + +
+**⭐ Inleiding tot Raspberry Pi Pico**: [Bekijk van binnen](https://editor.raspberrypi.org/en/projects/raspberry-pi-pico){:target="_blank"} +
+ +
+ +**⭐ Boekrecensie**: [Bekijk van binnen](https://editor.raspberrypi.org/en/projects/book-review){:target="_blank"} + +
+ +
+ +**⭐ Egypte**: [Bekijk van binnen](https://editor.raspberrypi.org/en/projects/egypt){:target="_blank"} + +
+ +
+ +**⭐ Fashion Pi**: [Bekijk van binnen](https://editor.raspberrypi.org/en/projects/fashion-pi){:target="_blank"} + +
+ +
+ +\--- /task --- + +\--- /no-print --- + +\--- print-only --- + +![Voltooid project](images/favourite.png) +![Voltooid project](images/pico.png) +![Voltooid project](images/filter.png) + +\--- /print-only --- diff --git a/nl-NL/step_2.md b/nl-NL/step_2.md new file mode 100644 index 00000000..301b4f80 --- /dev/null +++ b/nl-NL/step_2.md @@ -0,0 +1,70 @@ +## Jouw onderwerp + +
+
+In deze stap beslis je waar je webpagina over gaat. +
+
+![Een hand-getekend ontwerp van de lay-out van een webpagina.](images/step-two.jpg){:width="300px"} +
+
+ +### Wat wil je delen? + +\--- task --- + +Denk na over het doel van je webpagina. + +Dat kan zijn: + +- ℹ️ Een informatiepagina over een onderwerp waar je in geïnteresseerd bent +- 🔗 Een verzameling links naar de beste webpagina's over een onderwerp +- 🧧 Informatie over een feestdag of een gebeurtenis uit jouw cultuur +- 😜 Jouw favoriet (beleefd!) grappen +- 🎮 Een stap voor stap uitleg van een spel of een andere zelfstudie +- 🐙 Informatie over een huisdier of een dier +- 💬 Handige adviezen +- 🏞️ Toeristische informatie over een plek die je hebt bezocht of wilt bezoeken +- 👩🏿‍🦼 Informatie over een medische aandoening of beperking waarvan je vindt dat meer mensen bewust zouden van moeten zijn + +**Tip:** Probeer een onderwerp te kiezen waar je al iets vanaf weet. Zo kunt je je tijd besteden aan het bouwen van je webpagina, en niet aan het onderzoeken van een onderwerp. + +\--- /task --- + +### Voor wie is het? + +\--- task --- + +Voor wie maak je je webpagina? Misschien is het handig om na te denken over het type bezoekers waarvoor je je pagina wilt maken. + +- Hoe oud zullen jullie bezoekers zijn? +- Hoeveel weten ze over je onderwerp? +- Is de pagina bedoeld voor andere experts in jouw onderwerp of is het bedoeld voor beginners? + +**Tip:** Als je een pagina maakt over een onderwerp waar je veel over weet, zorg er dan voor dat je het duidelijk uitlegt aan andere mensen. + +\--- /task --- + +### Aan de slag + +\--- task --- + +Als je papier en een pen of potlood hebt, kun je de lay-out van je webpagina schetsen. + +Je kunt ook een kort lijstje maken met informatie die je wilt opnemen. + +\--- /task --- + +\--- task --- + +Open het [Bouw een webpagina startproject](https://editor.raspberrypi.org/en/projects/build-a-web-page-starter){:target="_blank"}. The code editor will open in another browser tab. + +\--- /task --- + +\--- task --- + +Wijzig de `` elementtekst in de titel van jouw pagina. + +[[[web-add-title-head]]] + +\--- /task --- diff --git a/nl-NL/step_3.md b/nl-NL/step_3.md new file mode 100644 index 00000000..67c493e2 --- /dev/null +++ b/nl-NL/step_3.md @@ -0,0 +1,205 @@ +## Bouw en test + +<div style="display: flex; flex-wrap: wrap"> +<div style="flex-basis: 200px; flex-grow: 1; margin-right: 15px;"> +Nu is het tijd om jouw webpagina te bouwen. + +</div> +<div> +![alt=""](images/step-three.PNG){:width="300px"} +</div> +</div> + +**Tip:** Plan jouw project zodat je een basis webpagina kunt maken in de tijd die je nu hebt voorzien en vervolgens het project kunt upgraden als je nog tijd over hebt. + +\*\*Tip: \*\* Vergeet niet om je project elke keer te testen wanneer je iets toevoegt. Het is veel gemakkelijker om bugs te vinden en op te lossen voordat je meer wijzigingen aanbrengt. + +\--- task --- + +Je hebt een aantal heel nuttige vaardigheden opgebouwd. Hier is een geheugensteuntje om je te helpen bij het maken van jouw webpagina: + +### Kleurenpalet + +[[[web-colour-palette-variables]]] + +Gebruik of personaliseer de kleurenpaletten van het startproject. + +[[[hex-colour-palettes]]] + +[[[web-colour-palette]]] + +Maak een kleurenpalet van een afbeelding. + +[[[rpfeditor-image-library]]] + +[[[colours-from-image]]] + +Pas kleurenpaletten aan voor stijl en toegankelijkheid. + +[[[contrast-checker]]] + +[[[add-colour-variables]]] + +Gebruik je kleurenpaletten om tekst- en achtergrondkleuren in te stellen. + +[[[web-primary-secondary]]] + +### Structuur + +[[[overall-page-structure]]] + +[[[full-width-section]]] + +[[[full-width-quote]]] + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +Webpagina's kunnen op veel verschillende apparaten worden bekeken en moeten <span style="color: #0faeb0">**responsive**</span> zijn voor elk apparaat. Dit betekent dat als een gebruiker jouw webpagina op een mobiele telefoon bekijkt, het moet reageren op een kleiner scherm en als ze het op een desktop PC bekijken, moet het op een groter scherm reageren. +</p> + +[[[using-rem]]] + +CSS kan ook worden gebruikt om de lay-out van de webpagina responsief te wijzigen. + +[[[side-by-side-section]]] + +[[[wrapped-regular-width]]] + +[[[wrapped-wide-narrow]]] + +[[[web-large-text-tiles]]] + +[[[three-text-tiles]]] + +[[[text-image-text]]] + +[[[web-wrap-gap]]] + +Lijn je inhoud uit en zorg voor voldoende ruimte om het uiterlijk van jouw webpagina te verbeteren. + +[[[web-x-y-centering]]] + +[[[padding-margins]]] + +### Lettertypen en tekstelementen + +Kies lettertypen om te gebruiken op je webpagina. + +[[[included-fonts]]] + +[[[web-fonts]]] + +[[[google-fonts]]] + +Je kunt tijdelijke tekst gebruiken terwijl je aan jouw lay-out werkt. + +[[[add-placeholder-text]]] + +Tekstelementen invoegen. + +[[[web-ordered-list]]] + +[[[web-unordered-list]]] + +[[[full-width-quote]]] + +Stijl je tekst. + +[[[web-headers-large-text]]] + +[[[web-center-text]]] + +[[[web-strong-em]]] + +### Afbeeldingen + +Voeg een afbeelding toe uit de startprojectbibliotheek. + +[[[trinket-image-library]]] + +[[[web-alt-text]]] + +Gebruik een emoji als afbeelding. + +[[[choose-an-emoji]]] + +[[[huge-emoji]]] + +Voeg een achtergrondafbeelding toe. + +[[[web-background-image]]] + +[[[add-transparency]]] + +**Tip:** Je kunt je afbeeldingen vormgeven met afgeronde hoeken of randen. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[web-box-shadow]]] + +### Animaties + +Maak web flip cards. + +[[[web-flip-cards]]] + +Gebruik animaties om het uiterlijk of de positie van elementen op jouw pagina in de loop van de tijd te wijzigen. + +[[[web-starter-animations]]] + +[[[web-customise-animations]]] + +### Meer stijl + +Voeg meer stijl toe aan elementen op je webpagina. + +[[[rounded-corners]]] + +[[[web-borders]]] + +[[[add-a-gradient]]] + +[[[web-animate-span]]] + +[[[web-box-shadow]]] + +Je kunt je eigen klasse maken om een nieuwe stijl te maken. + +[[[web-add-class]]] + +\--- /task --- + +\--- task --- + +**Test:** Laat iemand anders je project zien en vraag feedback. Wil je wijzigingen aanbrengen op jouw webpagina? + +**Tip:** Dit is een goed moment om opmerkingen aan jouw code toe te voegen, zodat je deze gemakkelijker kunt debuggen en upgraden. Opmerkingen zorgen er ook voor dat andere mensen jouw code kunnen lezen. + +[[[web-comment-code]]] + +\--- /task --- + +\--- task --- + +**Fouten oplossen**: Mogelijk vind je enkele fouten in jouw HTML of CSS die je moet oplossen. Hier zijn enkele veelvoorkomende fouten. + +**Mijn webpagina wordt niet correct weergegeven** + +[[[incorrect-tags]]] + +[[[mismatched-tags]]] + +**Verdere debug vragen** + +[[[image-not-displayed]]] + +[[[font-not-displayed]]] + +[[[web-debug-link]]] + +Je kunt een fout vinden die hier niet wordt vermeld. Kun je erachter komen hoe je het kunt oplossen? + +We horen graag over je fouten en hoe je ze hebt opgelost. Gebruik de **Stuur feedback** knop onderaan deze pagina als je een andere bug in jouw project hebt gevonden. + +\--- /task --- diff --git a/nl-NL/step_4.md b/nl-NL/step_4.md new file mode 100644 index 00000000..483d9342 --- /dev/null +++ b/nl-NL/step_4.md @@ -0,0 +1,9 @@ +## Deel + +Het is nu tijd om jouw webpagina te delen, zodat deze bezoekers kan ontvangen. + +**Opmerking:** Vergeet niet om te controleren of je geen persoonlijke informatie op jouw webpagina hebt vermeld. + +Waarom laat je je project niet zien aan een van je vrienden? + +Waarom nodig je je vrienden niet uit om een project te maken? Laat ze weten hoeveel plezier je hebt gehad. diff --git a/nl-NL/step_5.md b/nl-NL/step_5.md new file mode 100644 index 00000000..c0199b39 --- /dev/null +++ b/nl-NL/step_5.md @@ -0,0 +1,79 @@ +## Reflectie + +Voldoet je project aan de projectsamenvatting\*\*? Denk na over je project en doorloop de onderstaande checklist en vink af wat van toepassing is op je project. + +Heeft jouw webpagina: + +\--- task --- + +Meerdere secties met verschillende soorten inhoud, zoals tekst en afbeeldingen, emoji's, koppen, citaten, lijsten of links? + +\--- /task --- + +\--- task --- + +Een kleurenpalet, lettertypen en CSS-stijlen gebruikt die goed samengaan? Je kunt andere mensen om hun mening vragen, maar je hoeft niets te veranderen als je het niet met hen eens bent. + +\--- /task --- + +\--- task --- + +Toegankelijkheid door een goed kleurcontrast en goed leesbare lettergroottes? + +\--- /task --- + +Je webpagina zou: + +\--- task --- + +Aangepaste CSS klassen kunnen gebruiken die je zelft maakt en toepast. + +\--- /task --- + +\--- task --- + +Animaties of flipcards kunnen gebruiken om interesse te wekken. + +\--- /task --- + +\--- task --- + +Kunnen worden gedeeld met de Raspberry Pi Foundation galerij om anderen te inspireren. + +\--- /task --- + +Wanneer je nadenkt over hoe je je webpagina hebt gemaakt, helpt dit je in je toekomstige projecten. + +Beantwoord de onderstaande vragen. Je kunt tekenen, schrijven, typen in een document, met iemand praten, of de vragen beantwoorden op je eigen creatieve manier die het beste voor je werkt. + +\--- task --- + +Hoe heb je het onderwerp voor je webpagina gekozen? + +\--- /task --- + +\--- task --- + +Welke HTML- of CSS-techniek vind je het leukste? + +\--- /task --- + +\--- task --- + +<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;"> +"Een ontwerp is pas af als iemand het gebruikt." (Brenda Laurel). +</p> + +In het pad 'Inleiding tot web' heb je veel verschillende ontwerpvaardigheden gebruikt, waaronder visueel ontwerp, ontwerp voor toegankelijkheid en gebruikerservaring, en technisch ontwerp. Welk type ontwerp vind je het leukst? + +\--- /task --- + +### Nu ben je een web content onwikkelaar! + +Neem even de tijd om dit te vieren. + +\--- task --- + +Waar ga je met je nieuwe kennis doen? Aan wie ga je je webpagina's laten zien? Wat ga je hierna maken? + +\--- /task --- diff --git a/nl-NL/step_6.md b/nl-NL/step_6.md new file mode 100644 index 00000000..5603828f --- /dev/null +++ b/nl-NL/step_6.md @@ -0,0 +1,53 @@ +## Verbeter je project + +Als je tijd hebt, kun je jouw webpagina verbeteren. Je hebt misschien al ideeën over hoe je meer kunt toevoegen aan je webpagina of je wilt teruggaan naar de eerste stap en andere projecten opnieuw bekijken voor meer inspiratie. + +Elk voorbeeldproject in de [Inleiding](.) heeft een 'Bekijk van binnen'-link waarmee je het project kunt openen en de code kunt bekijken om ideeën op te doen en te zien hoe ze werken. + +\--- task --- + +Op jouw webpagina kun je het volgende verbeteren: + +**Visueel ontwerp** + +- De layout +- Kleuren +- Lettertypen +- Emoji's +- Afbeeldingen +- Randen en box schaduwen +- Kleurovergangen +- Achtergrondafbeeldingen + +**Toegankelijkheid** + +- Kleurcontrast +- Lettergroottes +- 'alt'-tekst op afbeeldingen + +**Inhoud** + +- De woorden die je hebt gebruikt. +- Kun je nog meer nuttige informatie toevoegen? +- Zou een lijst effectiever zijn? +- Zou je verschillende kopelementen kunnen gebruiken? +- Zijn er nog andere webpagina's waarnaar je kunt linken? + +**Gebruikerservaring** + +- Is je pagina overzichtelijk ingedeeld, zodat informatie gemakkelijk te vinden is? +- Als je de animatie hebt gebruikt, zorg er dan voor dat deze de bezoekers van je webpagina niet te veel afleidt. + +**Technisch ontwerp** + +- Overweeg of je jouw CSS-eigenschappen kunt indelen in klassen die je opnieuw wilt gebruiken. +- Zorg ervoor dat je logische namen hebt gebruikt voor CSS-klassen. +- Voeg nuttige opmerkingen toe aan je HTML en CSS. + +\--- /task --- + +**Voorbeeld van Dungeons and Dragons**: [Bekijk van binnen](https://editor.raspberrypi.org/en/projects/what-is-d-and-d){:target="_blank"} + +<div> +<iframe src="https://editor.raspberrypi.org/en/embed/viewer/what-is-d-and-d" width="600" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe> +</div> diff --git a/nl-NL/step_7.md b/nl-NL/step_7.md new file mode 100644 index 00000000..7cd6f780 --- /dev/null +++ b/nl-NL/step_7.md @@ -0,0 +1,11 @@ +## Wat kun je verder nog doen? + +Je hebt het einde bereikt van het [Inleiding tot web](https://projects.raspberrypi.org/nl/pathways/microbit-intro) pad! + +Nu kun je webpagina's maken in elk onderwerp waarin je geïnteresseerd bent en ze delen. Probeer HTML en CSS te gebruiken om meer webpagina's te ontwerpen en te bouwen. Als je verder wilt leren over webontwikkeling, kun je een kijkje nemen op het [Meer web](https://projects.raspberrypi.org/enl/pathways/more-web) pad. + +Je kunt een van jouw Ontwerp- of Bedenk-projecten toevoegen aan Coolest Projects, of een compleet nieuwe webpagina maken. + +[[[web-coolest-projects]]] + +Je kunt ook onze [andere webprojecten](https://projects.raspberrypi.org/nl/projects?software%5B%5D=html-css-javascript) verkennen en ze uitproberen. diff --git a/nl-NL/web-comments.txt b/nl-NL/web-comments.txt new file mode 100644 index 00000000..b191d0b9 --- /dev/null +++ b/nl-NL/web-comments.txt @@ -0,0 +1,21 @@ +Titel die in webbrowsers wordt weergegeven + +Importeer lettertypen van Google + +Voeg een CSS-stijlbestand toe + +De paginakoptekstcode komt hier terecht + +De hoofdinhoud van de webpagina bevindt zich tussen de main tags + +Een sectie met een afbeelding aan de linkerkant en tekst aan de rechterkant + +Een sectie met twee lijsten met opsommingstekens + +Een kop voor de invoer sectie + +Drie flipkaarten met afbeeldingen aan de ene kant en tekst aan de andere kant + +Een kop voor de uitvoer sectie + +Voettekst met tekst en hyperlink