raspberrypilearning · sashamishcheriakova · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/el-GR/code/gswd-example-1/index.html b/el-GR/code/gswd-example-1/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="el">
+  <head>
+    <title>The title</title> 
+  </head>
+  <body>
+    <h1>The heading</h1>
+  </body>
+</html>
diff --git a/el-GR/code/gswd-example-1/project_config.yml b/el-GR/code/gswd-example-1/project_config.yml
@@ -0,0 +1,3 @@
+name: 'Getting Started with Web Dev Example 1'
+identifier: 'gswd-example-1'
+type: 'html'
diff --git a/el-GR/code/gswd-example-2/animation.css b/el-GR/code/gswd-example-2/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/gswd-example-2/beetle.jpg b/el-GR/code/gswd-example-2/beetle.jpg
diff --git a/el-GR/code/gswd-example-2/butterfly.JPG b/el-GR/code/gswd-example-2/butterfly.JPG
diff --git a/el-GR/code/gswd-example-2/cacti.JPG b/el-GR/code/gswd-example-2/cacti.JPG
diff --git a/el-GR/code/gswd-example-2/cafe.css b/el-GR/code/gswd-example-2/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;
+
+}
diff --git a/el-GR/code/gswd-example-2/cafe.jpg b/el-GR/code/gswd-example-2/cafe.jpg
diff --git a/el-GR/code/gswd-example-2/candles.JPG b/el-GR/code/gswd-example-2/candles.JPG
diff --git a/el-GR/code/gswd-example-2/carnival.jpg b/el-GR/code/gswd-example-2/carnival.jpg
diff --git a/el-GR/code/gswd-example-2/colour-festival.jpg b/el-GR/code/gswd-example-2/colour-festival.jpg
diff --git a/el-GR/code/gswd-example-2/comic-books.jpg b/el-GR/code/gswd-example-2/comic-books.jpg
diff --git a/el-GR/code/gswd-example-2/comic.css b/el-GR/code/gswd-example-2/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/gswd-example-2/companion.css b/el-GR/code/gswd-example-2/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/gswd-example-2/crayons.jpg b/el-GR/code/gswd-example-2/crayons.jpg
diff --git a/el-GR/code/gswd-example-2/default.css b/el-GR/code/gswd-example-2/default.css
@@ -0,0 +1,20 @@
+
+/* Set up colour palette and fonts using variables */
+
+:root {
+  --primary: #bccad0;
+  --onprimary:#4f4e4e;
+  --secondary: #111111;
+  --onsecondary:#ffffff;
+  --tertiary:#ffffff;
+  --ontertiary: #000000;
+  --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;
+}
diff --git a/el-GR/code/gswd-example-2/disco-ball.jpg b/el-GR/code/gswd-example-2/disco-ball.jpg
diff --git a/el-GR/code/gswd-example-2/disco-flowers.JPG b/el-GR/code/gswd-example-2/disco-flowers.JPG
diff --git a/el-GR/code/gswd-example-2/disco.css b/el-GR/code/gswd-example-2/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/gswd-example-2/drone.JPG b/el-GR/code/gswd-example-2/drone.JPG
diff --git a/el-GR/code/gswd-example-2/exotic-plants.jpg b/el-GR/code/gswd-example-2/exotic-plants.jpg
diff --git a/el-GR/code/gswd-example-2/ferns.jpg b/el-GR/code/gswd-example-2/ferns.jpg
diff --git a/el-GR/code/gswd-example-2/festival.css b/el-GR/code/gswd-example-2/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;
+}
diff --git a/el-GR/code/gswd-example-2/fiesta.css b/el-GR/code/gswd-example-2/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/gswd-example-2/fire.jpg b/el-GR/code/gswd-example-2/fire.jpg
diff --git a/el-GR/code/gswd-example-2/fish.jpg b/el-GR/code/gswd-example-2/fish.jpg
diff --git a/el-GR/code/gswd-example-2/forest.JPG b/el-GR/code/gswd-example-2/forest.JPG
diff --git a/el-GR/code/gswd-example-2/game-boy.jpg b/el-GR/code/gswd-example-2/game-boy.jpg
diff --git a/el-GR/code/gswd-example-2/globe-in-water.JPG b/el-GR/code/gswd-example-2/globe-in-water.JPG
diff --git a/el-GR/code/gswd-example-2/greenhouse.JPG b/el-GR/code/gswd-example-2/greenhouse.JPG
diff --git a/el-GR/code/gswd-example-2/helpful-plumber.css b/el-GR/code/gswd-example-2/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/gswd-example-2/illustrations.png b/el-GR/code/gswd-example-2/illustrations.png
diff --git a/el-GR/code/gswd-example-2/index.html b/el-GR/code/gswd-example-2/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="el">
+  <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>My website title</title>
+
+    <!-- Import fonts from Google -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Codystar:wght@300&family=Creepster&family=Eater&family=Faster+One&family=Finger+Paint&family=Flavors&family=Freckle+Face&family=Fredericka+the+Great&family=Gorditas&family=Hanalei+Fill&family=Lobster&family=Luckiest+Guy&family=Miltonian&family=Monoton&family=Ranchers&family=Rubik+Moonrocks&family=Shrikhand&family=Spirax&family=Titan+One&Bebas+Neue&Cairo&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Include CSS style file -->
+
+     <link href="style.css" rel="stylesheet" type="text/css" /> 
+     <link href="animation.css" rel="stylesheet" type="text/css" /> 
+     <link href="fiesta.css" rel="stylesheet" type="text/css" /> 
+  </head>
+
+  <body>
+    <!-- The page header code goes here -->
+    <header class="border-bottom secondary">
+      <h1>Lorem Ipsum</h1>
+    </header>
+
+    <!-- The main content for the web page goes between the main tags -->
+    <main class="solid-border">
+      <section class="secondary">
+        <p>Lorem ipsum</p>
+      </section>
+      <section class="tertiary">
+        <p>Lorem ipsum</p>
+      </section>
+    </main>
+
+    <!-- Footer code goes here -->
+    <footer class="border-top secondary">
+      <p>Lorem ipsum</p>
+    </footer>
+
+  </body>
+</html>
diff --git a/el-GR/code/gswd-example-2/lake-mountains.JPG b/el-GR/code/gswd-example-2/lake-mountains.JPG
diff --git a/el-GR/code/gswd-example-2/land-animals.css b/el-GR/code/gswd-example-2/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;
+}
diff --git a/el-GR/code/gswd-example-2/medal.jpg b/el-GR/code/gswd-example-2/medal.jpg
diff --git a/el-GR/code/gswd-example-2/medals.css b/el-GR/code/gswd-example-2/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; 
+}