diff --git a/el-GR/code/gswd-example-1/index.html b/el-GR/code/gswd-example-1/index.html new file mode 100644 index 00000000..1a0af9bc --- /dev/null +++ b/el-GR/code/gswd-example-1/index.html @@ -0,0 +1,9 @@ + + + + The title + + +

The heading

+ + diff --git a/el-GR/code/gswd-example-1/project_config.yml b/el-GR/code/gswd-example-1/project_config.yml new file mode 100644 index 00000000..5ac25fdd --- /dev/null +++ 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 new file mode 100644 index 00000000..d1082357 --- /dev/null +++ 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 new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/gswd-example-2/beetle.jpg differ diff --git a/el-GR/code/gswd-example-2/butterfly.JPG b/el-GR/code/gswd-example-2/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/gswd-example-2/butterfly.JPG differ diff --git a/el-GR/code/gswd-example-2/cacti.JPG b/el-GR/code/gswd-example-2/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/gswd-example-2/cacti.JPG differ diff --git a/el-GR/code/gswd-example-2/cafe.css b/el-GR/code/gswd-example-2/cafe.css new file mode 100644 index 00000000..f6a24aff --- /dev/null +++ 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; + +} \ No newline at end of file diff --git a/el-GR/code/gswd-example-2/cafe.jpg b/el-GR/code/gswd-example-2/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/gswd-example-2/cafe.jpg differ diff --git a/el-GR/code/gswd-example-2/candles.JPG b/el-GR/code/gswd-example-2/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/gswd-example-2/candles.JPG differ diff --git a/el-GR/code/gswd-example-2/carnival.jpg b/el-GR/code/gswd-example-2/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/gswd-example-2/carnival.jpg differ diff --git a/el-GR/code/gswd-example-2/colour-festival.jpg b/el-GR/code/gswd-example-2/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/gswd-example-2/colour-festival.jpg differ diff --git a/el-GR/code/gswd-example-2/comic-books.jpg b/el-GR/code/gswd-example-2/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/gswd-example-2/comic-books.jpg differ diff --git a/el-GR/code/gswd-example-2/comic.css b/el-GR/code/gswd-example-2/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ 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 new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ 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 new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/gswd-example-2/crayons.jpg differ diff --git a/el-GR/code/gswd-example-2/default.css b/el-GR/code/gswd-example-2/default.css new file mode 100644 index 00000000..c0df643a --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/el-GR/code/gswd-example-2/disco-ball.jpg b/el-GR/code/gswd-example-2/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/gswd-example-2/disco-ball.jpg differ diff --git a/el-GR/code/gswd-example-2/disco-flowers.JPG b/el-GR/code/gswd-example-2/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/gswd-example-2/disco-flowers.JPG differ diff --git a/el-GR/code/gswd-example-2/disco.css b/el-GR/code/gswd-example-2/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ 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 new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/gswd-example-2/drone.JPG differ diff --git a/el-GR/code/gswd-example-2/exotic-plants.jpg b/el-GR/code/gswd-example-2/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/gswd-example-2/exotic-plants.jpg differ diff --git a/el-GR/code/gswd-example-2/ferns.jpg b/el-GR/code/gswd-example-2/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/gswd-example-2/ferns.jpg differ diff --git a/el-GR/code/gswd-example-2/festival.css b/el-GR/code/gswd-example-2/festival.css new file mode 100644 index 00000000..df39f486 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/el-GR/code/gswd-example-2/fiesta.css b/el-GR/code/gswd-example-2/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ 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 new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/gswd-example-2/fire.jpg differ diff --git a/el-GR/code/gswd-example-2/fish.jpg b/el-GR/code/gswd-example-2/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/gswd-example-2/fish.jpg differ diff --git a/el-GR/code/gswd-example-2/forest.JPG b/el-GR/code/gswd-example-2/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/gswd-example-2/forest.JPG differ diff --git a/el-GR/code/gswd-example-2/game-boy.jpg b/el-GR/code/gswd-example-2/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/gswd-example-2/game-boy.jpg differ diff --git a/el-GR/code/gswd-example-2/globe-in-water.JPG b/el-GR/code/gswd-example-2/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/gswd-example-2/globe-in-water.JPG differ diff --git a/el-GR/code/gswd-example-2/greenhouse.JPG b/el-GR/code/gswd-example-2/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/gswd-example-2/greenhouse.JPG differ diff --git a/el-GR/code/gswd-example-2/helpful-plumber.css b/el-GR/code/gswd-example-2/helpful-plumber.css new file mode 100644 index 00000000..4acd3d5b --- /dev/null +++ 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 new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/gswd-example-2/illustrations.png differ diff --git a/el-GR/code/gswd-example-2/index.html b/el-GR/code/gswd-example-2/index.html new file mode 100644 index 00000000..857ab3e1 --- /dev/null +++ b/el-GR/code/gswd-example-2/index.html @@ -0,0 +1,48 @@ + + + + + + + + + My website title + + + + + + + + + + + + + + + +
+

Lorem Ipsum

+
+ + +
+
+

Lorem ipsum

+
+
+

Lorem ipsum

+
+
+ + + + + + diff --git a/el-GR/code/gswd-example-2/lake-mountains.JPG b/el-GR/code/gswd-example-2/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/gswd-example-2/lake-mountains.JPG differ diff --git a/el-GR/code/gswd-example-2/land-animals.css b/el-GR/code/gswd-example-2/land-animals.css new file mode 100644 index 00000000..c3645ead --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/el-GR/code/gswd-example-2/medal.jpg b/el-GR/code/gswd-example-2/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/gswd-example-2/medal.jpg differ diff --git a/el-GR/code/gswd-example-2/medals.css b/el-GR/code/gswd-example-2/medals.css new file mode 100644 index 00000000..edc89cad --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/el-GR/code/gswd-example-2/money.css b/el-GR/code/gswd-example-2/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/monkey.JPG b/el-GR/code/gswd-example-2/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/gswd-example-2/monkey.JPG differ diff --git a/el-GR/code/gswd-example-2/moon-art.png b/el-GR/code/gswd-example-2/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/gswd-example-2/moon-art.png differ diff --git a/el-GR/code/gswd-example-2/mushroom.JPG b/el-GR/code/gswd-example-2/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/gswd-example-2/mushroom.JPG differ diff --git a/el-GR/code/gswd-example-2/nature.css b/el-GR/code/gswd-example-2/nature.css new file mode 100644 index 00000000..2fd9306f --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/pansies.JPG b/el-GR/code/gswd-example-2/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/gswd-example-2/pansies.JPG differ diff --git a/el-GR/code/gswd-example-2/pastel-hearts.jpg b/el-GR/code/gswd-example-2/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/gswd-example-2/pastel-hearts.jpg differ diff --git a/el-GR/code/gswd-example-2/pastel.css b/el-GR/code/gswd-example-2/pastel.css new file mode 100644 index 00000000..54155396 --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/piggy-bank.jpg b/el-GR/code/gswd-example-2/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/gswd-example-2/piggy-bank.jpg differ diff --git a/el-GR/code/gswd-example-2/placeholder.png b/el-GR/code/gswd-example-2/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/gswd-example-2/placeholder.png differ diff --git a/el-GR/code/gswd-example-2/primary.css b/el-GR/code/gswd-example-2/primary.css new file mode 100644 index 00000000..9ad2ff93 --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/project_config.yml b/el-GR/code/gswd-example-2/project_config.yml new file mode 100644 index 00000000..6498ee88 --- /dev/null +++ b/el-GR/code/gswd-example-2/project_config.yml @@ -0,0 +1,3 @@ +name: 'Getting Started with Web Dev Example 2' +identifier: 'gswd-example-2' +type: 'html' diff --git a/el-GR/code/gswd-example-2/pumpkins.JPG b/el-GR/code/gswd-example-2/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/gswd-example-2/pumpkins.JPG differ diff --git a/el-GR/code/gswd-example-2/rainbow-forest.JPG b/el-GR/code/gswd-example-2/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/gswd-example-2/rainbow-forest.JPG differ diff --git a/el-GR/code/gswd-example-2/rhino.JPG b/el-GR/code/gswd-example-2/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/gswd-example-2/rhino.JPG differ diff --git a/el-GR/code/gswd-example-2/smokey.css b/el-GR/code/gswd-example-2/smokey.css new file mode 100644 index 00000000..3751db11 --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/space.css b/el-GR/code/gswd-example-2/space.css new file mode 100644 index 00000000..2baa5f53 --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/spider-web.jpg b/el-GR/code/gswd-example-2/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/gswd-example-2/spider-web.jpg differ diff --git a/el-GR/code/gswd-example-2/style.css b/el-GR/code/gswd-example-2/style.css new file mode 100644 index 00000000..95c67356 --- /dev/null +++ b/el-GR/code/gswd-example-2/style.css @@ -0,0 +1,295 @@ +/* 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(--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('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; +} + +/* 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); +} + +.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; +} + diff --git a/el-GR/code/gswd-example-2/sunflowers.JPG b/el-GR/code/gswd-example-2/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/gswd-example-2/sunflowers.JPG differ diff --git a/el-GR/code/gswd-example-2/sunset-beach.JPG b/el-GR/code/gswd-example-2/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/gswd-example-2/sunset-beach.JPG differ diff --git a/el-GR/code/gswd-example-2/sunset-person.jpg b/el-GR/code/gswd-example-2/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/gswd-example-2/sunset-person.jpg differ diff --git a/el-GR/code/gswd-example-2/sunset.JPG b/el-GR/code/gswd-example-2/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/gswd-example-2/sunset.JPG differ diff --git a/el-GR/code/gswd-example-2/sunset.css b/el-GR/code/gswd-example-2/sunset.css new file mode 100644 index 00000000..6e53385c --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/sunshine.css b/el-GR/code/gswd-example-2/sunshine.css new file mode 100644 index 00000000..7651854a --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/thriller.css b/el-GR/code/gswd-example-2/thriller.css new file mode 100644 index 00000000..2768e2ee --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/water-animals.css b/el-GR/code/gswd-example-2/water-animals.css new file mode 100644 index 00000000..f07a2cd2 --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-2/woodland.css b/el-GR/code/gswd-example-2/woodland.css new file mode 100644 index 00000000..96663068 --- /dev/null +++ b/el-GR/code/gswd-example-2/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/gswd-example-3/animation.css b/el-GR/code/gswd-example-3/animation.css new file mode 100644 index 00000000..d1082357 --- /dev/null +++ b/el-GR/code/gswd-example-3/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-3/beetle.jpg b/el-GR/code/gswd-example-3/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/gswd-example-3/beetle.jpg differ diff --git a/el-GR/code/gswd-example-3/butterfly.JPG b/el-GR/code/gswd-example-3/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/gswd-example-3/butterfly.JPG differ diff --git a/el-GR/code/gswd-example-3/cacti.JPG b/el-GR/code/gswd-example-3/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/gswd-example-3/cacti.JPG differ diff --git a/el-GR/code/gswd-example-3/cafe.css b/el-GR/code/gswd-example-3/cafe.css new file mode 100644 index 00000000..f6a24aff --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/cafe.jpg b/el-GR/code/gswd-example-3/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/gswd-example-3/cafe.jpg differ diff --git a/el-GR/code/gswd-example-3/candles.JPG b/el-GR/code/gswd-example-3/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/gswd-example-3/candles.JPG differ diff --git a/el-GR/code/gswd-example-3/carnival.jpg b/el-GR/code/gswd-example-3/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/gswd-example-3/carnival.jpg differ diff --git a/el-GR/code/gswd-example-3/colour-festival.jpg b/el-GR/code/gswd-example-3/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/gswd-example-3/colour-festival.jpg differ diff --git a/el-GR/code/gswd-example-3/comic-books.jpg b/el-GR/code/gswd-example-3/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/gswd-example-3/comic-books.jpg differ diff --git a/el-GR/code/gswd-example-3/comic.css b/el-GR/code/gswd-example-3/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/gswd-example-3/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-3/companion.css b/el-GR/code/gswd-example-3/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/gswd-example-3/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-3/crayons.jpg b/el-GR/code/gswd-example-3/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/gswd-example-3/crayons.jpg differ diff --git a/el-GR/code/gswd-example-3/default.css b/el-GR/code/gswd-example-3/default.css new file mode 100644 index 00000000..c0df643a --- /dev/null +++ b/el-GR/code/gswd-example-3/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; +} \ No newline at end of file diff --git a/el-GR/code/gswd-example-3/disco-ball.jpg b/el-GR/code/gswd-example-3/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/gswd-example-3/disco-ball.jpg differ diff --git a/el-GR/code/gswd-example-3/disco-flowers.JPG b/el-GR/code/gswd-example-3/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/gswd-example-3/disco-flowers.JPG differ diff --git a/el-GR/code/gswd-example-3/disco.css b/el-GR/code/gswd-example-3/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/gswd-example-3/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-3/drone.JPG b/el-GR/code/gswd-example-3/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/gswd-example-3/drone.JPG differ diff --git a/el-GR/code/gswd-example-3/exotic-plants.jpg b/el-GR/code/gswd-example-3/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/gswd-example-3/exotic-plants.jpg differ diff --git a/el-GR/code/gswd-example-3/ferns.jpg b/el-GR/code/gswd-example-3/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/gswd-example-3/ferns.jpg differ diff --git a/el-GR/code/gswd-example-3/festival.css b/el-GR/code/gswd-example-3/festival.css new file mode 100644 index 00000000..df39f486 --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/fiesta.css b/el-GR/code/gswd-example-3/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/gswd-example-3/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-3/fire.jpg b/el-GR/code/gswd-example-3/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/gswd-example-3/fire.jpg differ diff --git a/el-GR/code/gswd-example-3/fish.jpg b/el-GR/code/gswd-example-3/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/gswd-example-3/fish.jpg differ diff --git a/el-GR/code/gswd-example-3/forest.JPG b/el-GR/code/gswd-example-3/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/gswd-example-3/forest.JPG differ diff --git a/el-GR/code/gswd-example-3/game-boy.jpg b/el-GR/code/gswd-example-3/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/gswd-example-3/game-boy.jpg differ diff --git a/el-GR/code/gswd-example-3/globe-in-water.JPG b/el-GR/code/gswd-example-3/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/gswd-example-3/globe-in-water.JPG differ diff --git a/el-GR/code/gswd-example-3/greenhouse.JPG b/el-GR/code/gswd-example-3/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/gswd-example-3/greenhouse.JPG differ diff --git a/el-GR/code/gswd-example-3/helpful-plumber.css b/el-GR/code/gswd-example-3/helpful-plumber.css new file mode 100644 index 00000000..4acd3d5b --- /dev/null +++ b/el-GR/code/gswd-example-3/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-3/illustrations.png b/el-GR/code/gswd-example-3/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/gswd-example-3/illustrations.png differ diff --git a/el-GR/code/gswd-example-3/index.html b/el-GR/code/gswd-example-3/index.html new file mode 100644 index 00000000..857ab3e1 --- /dev/null +++ b/el-GR/code/gswd-example-3/index.html @@ -0,0 +1,48 @@ + + + + + + + + + My website title + + + + + + + + + + + + + + + +
+

Lorem Ipsum

+
+ + +
+
+

Lorem ipsum

+
+
+

Lorem ipsum

+
+
+ + + + + + diff --git a/el-GR/code/gswd-example-3/lake-mountains.JPG b/el-GR/code/gswd-example-3/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/gswd-example-3/lake-mountains.JPG differ diff --git a/el-GR/code/gswd-example-3/land-animals.css b/el-GR/code/gswd-example-3/land-animals.css new file mode 100644 index 00000000..c3645ead --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/medal.jpg b/el-GR/code/gswd-example-3/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/gswd-example-3/medal.jpg differ diff --git a/el-GR/code/gswd-example-3/medals.css b/el-GR/code/gswd-example-3/medals.css new file mode 100644 index 00000000..edc89cad --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/money.css b/el-GR/code/gswd-example-3/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/monkey.JPG b/el-GR/code/gswd-example-3/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/gswd-example-3/monkey.JPG differ diff --git a/el-GR/code/gswd-example-3/moon-art.png b/el-GR/code/gswd-example-3/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/gswd-example-3/moon-art.png differ diff --git a/el-GR/code/gswd-example-3/mushroom.JPG b/el-GR/code/gswd-example-3/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/gswd-example-3/mushroom.JPG differ diff --git a/el-GR/code/gswd-example-3/nature.css b/el-GR/code/gswd-example-3/nature.css new file mode 100644 index 00000000..2fd9306f --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/pansies.JPG b/el-GR/code/gswd-example-3/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/gswd-example-3/pansies.JPG differ diff --git a/el-GR/code/gswd-example-3/pastel-hearts.jpg b/el-GR/code/gswd-example-3/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/gswd-example-3/pastel-hearts.jpg differ diff --git a/el-GR/code/gswd-example-3/pastel.css b/el-GR/code/gswd-example-3/pastel.css new file mode 100644 index 00000000..54155396 --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/piggy-bank.jpg b/el-GR/code/gswd-example-3/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/gswd-example-3/piggy-bank.jpg differ diff --git a/el-GR/code/gswd-example-3/placeholder.png b/el-GR/code/gswd-example-3/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/gswd-example-3/placeholder.png differ diff --git a/el-GR/code/gswd-example-3/primary.css b/el-GR/code/gswd-example-3/primary.css new file mode 100644 index 00000000..9ad2ff93 --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/project_config.yml b/el-GR/code/gswd-example-3/project_config.yml new file mode 100644 index 00000000..ff37865f --- /dev/null +++ b/el-GR/code/gswd-example-3/project_config.yml @@ -0,0 +1,3 @@ +name: 'Getting Started with Web Dev Example 3' +identifier: 'gswd-example-3' +type: 'html' diff --git a/el-GR/code/gswd-example-3/pumpkins.JPG b/el-GR/code/gswd-example-3/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/gswd-example-3/pumpkins.JPG differ diff --git a/el-GR/code/gswd-example-3/rainbow-forest.JPG b/el-GR/code/gswd-example-3/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/gswd-example-3/rainbow-forest.JPG differ diff --git a/el-GR/code/gswd-example-3/rhino.JPG b/el-GR/code/gswd-example-3/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/gswd-example-3/rhino.JPG differ diff --git a/el-GR/code/gswd-example-3/smokey.css b/el-GR/code/gswd-example-3/smokey.css new file mode 100644 index 00000000..3751db11 --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/space.css b/el-GR/code/gswd-example-3/space.css new file mode 100644 index 00000000..2baa5f53 --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/spider-web.jpg b/el-GR/code/gswd-example-3/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/gswd-example-3/spider-web.jpg differ diff --git a/el-GR/code/gswd-example-3/style.css b/el-GR/code/gswd-example-3/style.css new file mode 100644 index 00000000..95c67356 --- /dev/null +++ b/el-GR/code/gswd-example-3/style.css @@ -0,0 +1,295 @@ +/* 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(--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('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; +} + +/* 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); +} + +.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; +} + diff --git a/el-GR/code/gswd-example-3/sunflowers.JPG b/el-GR/code/gswd-example-3/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/gswd-example-3/sunflowers.JPG differ diff --git a/el-GR/code/gswd-example-3/sunset-beach.JPG b/el-GR/code/gswd-example-3/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/gswd-example-3/sunset-beach.JPG differ diff --git a/el-GR/code/gswd-example-3/sunset-person.jpg b/el-GR/code/gswd-example-3/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/gswd-example-3/sunset-person.jpg differ diff --git a/el-GR/code/gswd-example-3/sunset.JPG b/el-GR/code/gswd-example-3/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/gswd-example-3/sunset.JPG differ diff --git a/el-GR/code/gswd-example-3/sunset.css b/el-GR/code/gswd-example-3/sunset.css new file mode 100644 index 00000000..6e53385c --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/sunshine.css b/el-GR/code/gswd-example-3/sunshine.css new file mode 100644 index 00000000..7651854a --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/thriller.css b/el-GR/code/gswd-example-3/thriller.css new file mode 100644 index 00000000..2768e2ee --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/water-animals.css b/el-GR/code/gswd-example-3/water-animals.css new file mode 100644 index 00000000..f07a2cd2 --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-3/woodland.css b/el-GR/code/gswd-example-3/woodland.css new file mode 100644 index 00000000..96663068 --- /dev/null +++ b/el-GR/code/gswd-example-3/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/gswd-example-4/animation.css b/el-GR/code/gswd-example-4/animation.css new file mode 100644 index 00000000..76fb9371 --- /dev/null +++ b/el-GR/code/gswd-example-4/animation.css @@ -0,0 +1,137 @@ + .spinme { + animation: rotate-center linear 8s infinite; /* 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 infinite; /* 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 infinite; + 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 infinite; + 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); +} + +.movemeleft { + animation: moveleft ease 8s infinite; + display: inline-block; +} + +@keyframes moveleft { + /* The roll animation code */ + from { + transform: translate(-60vw); + transform-origin: center; + } + + to { + transform: translate(0vw); + transform-origin: center; + } +} + +.movemeright { + animation: moveright ease 8s infinite; + display: inline-block; +} + +@keyframes moveright { + /* The roll animation code */ + from { + transform: translate(60vw); + transform-origin: center; + } + + to { + transform: translate(0vw); + transform-origin: center; + } +} + diff --git a/el-GR/code/gswd-example-4/beetle.jpg b/el-GR/code/gswd-example-4/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/gswd-example-4/beetle.jpg differ diff --git a/el-GR/code/gswd-example-4/butterfly.JPG b/el-GR/code/gswd-example-4/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/gswd-example-4/butterfly.JPG differ diff --git a/el-GR/code/gswd-example-4/cacti.JPG b/el-GR/code/gswd-example-4/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/gswd-example-4/cacti.JPG differ diff --git a/el-GR/code/gswd-example-4/cafe.css b/el-GR/code/gswd-example-4/cafe.css new file mode 100644 index 00000000..f6a24aff --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/cafe.jpg b/el-GR/code/gswd-example-4/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/gswd-example-4/cafe.jpg differ diff --git a/el-GR/code/gswd-example-4/candles.JPG b/el-GR/code/gswd-example-4/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/gswd-example-4/candles.JPG differ diff --git a/el-GR/code/gswd-example-4/carnival.jpg b/el-GR/code/gswd-example-4/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/gswd-example-4/carnival.jpg differ diff --git a/el-GR/code/gswd-example-4/colour-festival.jpg b/el-GR/code/gswd-example-4/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/gswd-example-4/colour-festival.jpg differ diff --git a/el-GR/code/gswd-example-4/comic-books.jpg b/el-GR/code/gswd-example-4/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/gswd-example-4/comic-books.jpg differ diff --git a/el-GR/code/gswd-example-4/comic.css b/el-GR/code/gswd-example-4/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/gswd-example-4/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-4/companion.css b/el-GR/code/gswd-example-4/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/gswd-example-4/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-4/crayons.jpg b/el-GR/code/gswd-example-4/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/gswd-example-4/crayons.jpg differ diff --git a/el-GR/code/gswd-example-4/default.css b/el-GR/code/gswd-example-4/default.css new file mode 100644 index 00000000..c1efa8d0 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/disco-ball.jpg b/el-GR/code/gswd-example-4/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/gswd-example-4/disco-ball.jpg differ diff --git a/el-GR/code/gswd-example-4/disco-flowers.JPG b/el-GR/code/gswd-example-4/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/gswd-example-4/disco-flowers.JPG differ diff --git a/el-GR/code/gswd-example-4/disco.css b/el-GR/code/gswd-example-4/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/gswd-example-4/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-4/drone.JPG b/el-GR/code/gswd-example-4/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/gswd-example-4/drone.JPG differ diff --git a/el-GR/code/gswd-example-4/exotic-plants.jpg b/el-GR/code/gswd-example-4/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/gswd-example-4/exotic-plants.jpg differ diff --git a/el-GR/code/gswd-example-4/ferns.jpg b/el-GR/code/gswd-example-4/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/gswd-example-4/ferns.jpg differ diff --git a/el-GR/code/gswd-example-4/festival.css b/el-GR/code/gswd-example-4/festival.css new file mode 100644 index 00000000..df39f486 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/fiesta.css b/el-GR/code/gswd-example-4/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/gswd-example-4/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-4/fire.jpg b/el-GR/code/gswd-example-4/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/gswd-example-4/fire.jpg differ diff --git a/el-GR/code/gswd-example-4/fish.jpg b/el-GR/code/gswd-example-4/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/gswd-example-4/fish.jpg differ diff --git a/el-GR/code/gswd-example-4/forest.JPG b/el-GR/code/gswd-example-4/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/gswd-example-4/forest.JPG differ diff --git a/el-GR/code/gswd-example-4/game-boy.jpg b/el-GR/code/gswd-example-4/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/gswd-example-4/game-boy.jpg differ diff --git a/el-GR/code/gswd-example-4/globe-in-water.JPG b/el-GR/code/gswd-example-4/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/gswd-example-4/globe-in-water.JPG differ diff --git a/el-GR/code/gswd-example-4/greenhouse.JPG b/el-GR/code/gswd-example-4/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/gswd-example-4/greenhouse.JPG differ diff --git a/el-GR/code/gswd-example-4/helpful-plumber.css b/el-GR/code/gswd-example-4/helpful-plumber.css new file mode 100644 index 00000000..4acd3d5b --- /dev/null +++ b/el-GR/code/gswd-example-4/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-4/illustrations.png b/el-GR/code/gswd-example-4/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/gswd-example-4/illustrations.png differ diff --git a/el-GR/code/gswd-example-4/index.html b/el-GR/code/gswd-example-4/index.html new file mode 100644 index 00000000..adf6d3a2 --- /dev/null +++ b/el-GR/code/gswd-example-4/index.html @@ -0,0 +1,48 @@ + + + + + + + + + My website title + + + + + + + + + + + + + + + + +
+
+

Animations

+
+ +
+

🐶

+

🐶

+

🐶

+
+ +
+

🐶

+

🐶

+

🐶

+
+
+ + + diff --git a/el-GR/code/gswd-example-4/lake-mountains.JPG b/el-GR/code/gswd-example-4/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/gswd-example-4/lake-mountains.JPG differ diff --git a/el-GR/code/gswd-example-4/land-animals.css b/el-GR/code/gswd-example-4/land-animals.css new file mode 100644 index 00000000..c3645ead --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/medal.jpg b/el-GR/code/gswd-example-4/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/gswd-example-4/medal.jpg differ diff --git a/el-GR/code/gswd-example-4/medals.css b/el-GR/code/gswd-example-4/medals.css new file mode 100644 index 00000000..edc89cad --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/money.css b/el-GR/code/gswd-example-4/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/monkey.JPG b/el-GR/code/gswd-example-4/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/gswd-example-4/monkey.JPG differ diff --git a/el-GR/code/gswd-example-4/moon-art.png b/el-GR/code/gswd-example-4/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/gswd-example-4/moon-art.png differ diff --git a/el-GR/code/gswd-example-4/mushroom.JPG b/el-GR/code/gswd-example-4/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/gswd-example-4/mushroom.JPG differ diff --git a/el-GR/code/gswd-example-4/nature.css b/el-GR/code/gswd-example-4/nature.css new file mode 100644 index 00000000..2fd9306f --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/pansies.JPG b/el-GR/code/gswd-example-4/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/gswd-example-4/pansies.JPG differ diff --git a/el-GR/code/gswd-example-4/pastel-hearts.jpg b/el-GR/code/gswd-example-4/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/gswd-example-4/pastel-hearts.jpg differ diff --git a/el-GR/code/gswd-example-4/pastel.css b/el-GR/code/gswd-example-4/pastel.css new file mode 100644 index 00000000..54155396 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/piggy-bank.jpg b/el-GR/code/gswd-example-4/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/gswd-example-4/piggy-bank.jpg differ diff --git a/el-GR/code/gswd-example-4/placeholder.png b/el-GR/code/gswd-example-4/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/gswd-example-4/placeholder.png differ diff --git a/el-GR/code/gswd-example-4/primary.css b/el-GR/code/gswd-example-4/primary.css new file mode 100644 index 00000000..9ad2ff93 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/project_config.yml b/el-GR/code/gswd-example-4/project_config.yml new file mode 100644 index 00000000..cb52050e --- /dev/null +++ b/el-GR/code/gswd-example-4/project_config.yml @@ -0,0 +1,3 @@ +name: 'Getting Started with Web Dev Example 4' +identifier: 'gswd-example-4' +type: 'html' diff --git a/el-GR/code/gswd-example-4/pumpkins.JPG b/el-GR/code/gswd-example-4/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/gswd-example-4/pumpkins.JPG differ diff --git a/el-GR/code/gswd-example-4/rainbow-forest.JPG b/el-GR/code/gswd-example-4/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/gswd-example-4/rainbow-forest.JPG differ diff --git a/el-GR/code/gswd-example-4/rhino.JPG b/el-GR/code/gswd-example-4/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/gswd-example-4/rhino.JPG differ diff --git a/el-GR/code/gswd-example-4/smokey.css b/el-GR/code/gswd-example-4/smokey.css new file mode 100644 index 00000000..3751db11 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/space.css b/el-GR/code/gswd-example-4/space.css new file mode 100644 index 00000000..2baa5f53 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/spider-web.jpg b/el-GR/code/gswd-example-4/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/gswd-example-4/spider-web.jpg differ diff --git a/el-GR/code/gswd-example-4/style.css b/el-GR/code/gswd-example-4/style.css new file mode 100644 index 00000000..c76f03ba --- /dev/null +++ b/el-GR/code/gswd-example-4/style.css @@ -0,0 +1,286 @@ +/* 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('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; +} + +/* 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: 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/gswd-example-4/sunflowers.JPG b/el-GR/code/gswd-example-4/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/gswd-example-4/sunflowers.JPG differ diff --git a/el-GR/code/gswd-example-4/sunset-beach.JPG b/el-GR/code/gswd-example-4/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/gswd-example-4/sunset-beach.JPG differ diff --git a/el-GR/code/gswd-example-4/sunset-person.jpg b/el-GR/code/gswd-example-4/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/gswd-example-4/sunset-person.jpg differ diff --git a/el-GR/code/gswd-example-4/sunset.JPG b/el-GR/code/gswd-example-4/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/gswd-example-4/sunset.JPG differ diff --git a/el-GR/code/gswd-example-4/sunset.css b/el-GR/code/gswd-example-4/sunset.css new file mode 100644 index 00000000..6e53385c --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/sunshine.css b/el-GR/code/gswd-example-4/sunshine.css new file mode 100644 index 00000000..7651854a --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/thriller.css b/el-GR/code/gswd-example-4/thriller.css new file mode 100644 index 00000000..2768e2ee --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/water-animals.css b/el-GR/code/gswd-example-4/water-animals.css new file mode 100644 index 00000000..f07a2cd2 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-example-4/woodland.css b/el-GR/code/gswd-example-4/woodland.css new file mode 100644 index 00000000..96663068 --- /dev/null +++ b/el-GR/code/gswd-example-4/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/gswd-starter/animation.css b/el-GR/code/gswd-starter/animation.css new file mode 100644 index 00000000..d1082357 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/beetle.jpg b/el-GR/code/gswd-starter/beetle.jpg new file mode 100644 index 00000000..9a5d0be9 Binary files /dev/null and b/el-GR/code/gswd-starter/beetle.jpg differ diff --git a/el-GR/code/gswd-starter/butterfly.JPG b/el-GR/code/gswd-starter/butterfly.JPG new file mode 100644 index 00000000..3a636f43 Binary files /dev/null and b/el-GR/code/gswd-starter/butterfly.JPG differ diff --git a/el-GR/code/gswd-starter/cacti.JPG b/el-GR/code/gswd-starter/cacti.JPG new file mode 100644 index 00000000..aedce4ff Binary files /dev/null and b/el-GR/code/gswd-starter/cacti.JPG differ diff --git a/el-GR/code/gswd-starter/cafe.css b/el-GR/code/gswd-starter/cafe.css new file mode 100644 index 00000000..f6a24aff --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/cafe.jpg b/el-GR/code/gswd-starter/cafe.jpg new file mode 100644 index 00000000..63ec9b03 Binary files /dev/null and b/el-GR/code/gswd-starter/cafe.jpg differ diff --git a/el-GR/code/gswd-starter/candles.JPG b/el-GR/code/gswd-starter/candles.JPG new file mode 100644 index 00000000..508f428f Binary files /dev/null and b/el-GR/code/gswd-starter/candles.JPG differ diff --git a/el-GR/code/gswd-starter/carnival.jpg b/el-GR/code/gswd-starter/carnival.jpg new file mode 100644 index 00000000..dae1d080 Binary files /dev/null and b/el-GR/code/gswd-starter/carnival.jpg differ diff --git a/el-GR/code/gswd-starter/colour-festival.jpg b/el-GR/code/gswd-starter/colour-festival.jpg new file mode 100644 index 00000000..0421ffee Binary files /dev/null and b/el-GR/code/gswd-starter/colour-festival.jpg differ diff --git a/el-GR/code/gswd-starter/comic-books.jpg b/el-GR/code/gswd-starter/comic-books.jpg new file mode 100644 index 00000000..50e961ff Binary files /dev/null and b/el-GR/code/gswd-starter/comic-books.jpg differ diff --git a/el-GR/code/gswd-starter/comic.css b/el-GR/code/gswd-starter/comic.css new file mode 100644 index 00000000..14f72fa1 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/companion.css b/el-GR/code/gswd-starter/companion.css new file mode 100644 index 00000000..0fd47933 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/crayons.jpg b/el-GR/code/gswd-starter/crayons.jpg new file mode 100644 index 00000000..dde9d7a4 Binary files /dev/null and b/el-GR/code/gswd-starter/crayons.jpg differ diff --git a/el-GR/code/gswd-starter/default.css b/el-GR/code/gswd-starter/default.css new file mode 100644 index 00000000..c0df643a --- /dev/null +++ b/el-GR/code/gswd-starter/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; +} \ No newline at end of file diff --git a/el-GR/code/gswd-starter/disco-ball.jpg b/el-GR/code/gswd-starter/disco-ball.jpg new file mode 100644 index 00000000..a56b8ff5 Binary files /dev/null and b/el-GR/code/gswd-starter/disco-ball.jpg differ diff --git a/el-GR/code/gswd-starter/disco-flowers.JPG b/el-GR/code/gswd-starter/disco-flowers.JPG new file mode 100644 index 00000000..c0c9931e Binary files /dev/null and b/el-GR/code/gswd-starter/disco-flowers.JPG differ diff --git a/el-GR/code/gswd-starter/disco.css b/el-GR/code/gswd-starter/disco.css new file mode 100644 index 00000000..37017b4c --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/drone.JPG b/el-GR/code/gswd-starter/drone.JPG new file mode 100644 index 00000000..0e36ec71 Binary files /dev/null and b/el-GR/code/gswd-starter/drone.JPG differ diff --git a/el-GR/code/gswd-starter/exotic-plants.jpg b/el-GR/code/gswd-starter/exotic-plants.jpg new file mode 100644 index 00000000..98254e88 Binary files /dev/null and b/el-GR/code/gswd-starter/exotic-plants.jpg differ diff --git a/el-GR/code/gswd-starter/ferns.jpg b/el-GR/code/gswd-starter/ferns.jpg new file mode 100644 index 00000000..90608891 Binary files /dev/null and b/el-GR/code/gswd-starter/ferns.jpg differ diff --git a/el-GR/code/gswd-starter/festival.css b/el-GR/code/gswd-starter/festival.css new file mode 100644 index 00000000..df39f486 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/fiesta.css b/el-GR/code/gswd-starter/fiesta.css new file mode 100644 index 00000000..1bf08dd2 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/fire.jpg b/el-GR/code/gswd-starter/fire.jpg new file mode 100644 index 00000000..31488fc1 Binary files /dev/null and b/el-GR/code/gswd-starter/fire.jpg differ diff --git a/el-GR/code/gswd-starter/fish.jpg b/el-GR/code/gswd-starter/fish.jpg new file mode 100644 index 00000000..de790a7b Binary files /dev/null and b/el-GR/code/gswd-starter/fish.jpg differ diff --git a/el-GR/code/gswd-starter/forest.JPG b/el-GR/code/gswd-starter/forest.JPG new file mode 100644 index 00000000..d6ab8444 Binary files /dev/null and b/el-GR/code/gswd-starter/forest.JPG differ diff --git a/el-GR/code/gswd-starter/game-boy.jpg b/el-GR/code/gswd-starter/game-boy.jpg new file mode 100644 index 00000000..2caeed59 Binary files /dev/null and b/el-GR/code/gswd-starter/game-boy.jpg differ diff --git a/el-GR/code/gswd-starter/globe-in-water.JPG b/el-GR/code/gswd-starter/globe-in-water.JPG new file mode 100644 index 00000000..d0f04253 Binary files /dev/null and b/el-GR/code/gswd-starter/globe-in-water.JPG differ diff --git a/el-GR/code/gswd-starter/greenhouse.JPG b/el-GR/code/gswd-starter/greenhouse.JPG new file mode 100644 index 00000000..22b85766 Binary files /dev/null and b/el-GR/code/gswd-starter/greenhouse.JPG differ diff --git a/el-GR/code/gswd-starter/helpful-plumber.css b/el-GR/code/gswd-starter/helpful-plumber.css new file mode 100644 index 00000000..4acd3d5b --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/illustrations.png b/el-GR/code/gswd-starter/illustrations.png new file mode 100644 index 00000000..b1f728e0 Binary files /dev/null and b/el-GR/code/gswd-starter/illustrations.png differ diff --git a/el-GR/code/gswd-starter/index.html b/el-GR/code/gswd-starter/index.html new file mode 100644 index 00000000..52c185fb --- /dev/null +++ b/el-GR/code/gswd-starter/index.html @@ -0,0 +1,18 @@ + + + + + + + + + My website title + + + + + + + + + diff --git a/el-GR/code/gswd-starter/lake-mountains.JPG b/el-GR/code/gswd-starter/lake-mountains.JPG new file mode 100644 index 00000000..1d021fa6 Binary files /dev/null and b/el-GR/code/gswd-starter/lake-mountains.JPG differ diff --git a/el-GR/code/gswd-starter/land-animals.css b/el-GR/code/gswd-starter/land-animals.css new file mode 100644 index 00000000..c3645ead --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/medal.jpg b/el-GR/code/gswd-starter/medal.jpg new file mode 100644 index 00000000..e396db5f Binary files /dev/null and b/el-GR/code/gswd-starter/medal.jpg differ diff --git a/el-GR/code/gswd-starter/medals.css b/el-GR/code/gswd-starter/medals.css new file mode 100644 index 00000000..edc89cad --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/money.css b/el-GR/code/gswd-starter/money.css new file mode 100644 index 00000000..cec9a1ce --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/monkey.JPG b/el-GR/code/gswd-starter/monkey.JPG new file mode 100644 index 00000000..031b82f7 Binary files /dev/null and b/el-GR/code/gswd-starter/monkey.JPG differ diff --git a/el-GR/code/gswd-starter/moon-art.png b/el-GR/code/gswd-starter/moon-art.png new file mode 100644 index 00000000..5cb6bb68 Binary files /dev/null and b/el-GR/code/gswd-starter/moon-art.png differ diff --git a/el-GR/code/gswd-starter/mushroom.JPG b/el-GR/code/gswd-starter/mushroom.JPG new file mode 100644 index 00000000..b27f7586 Binary files /dev/null and b/el-GR/code/gswd-starter/mushroom.JPG differ diff --git a/el-GR/code/gswd-starter/nature.css b/el-GR/code/gswd-starter/nature.css new file mode 100644 index 00000000..2fd9306f --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/pansies.JPG b/el-GR/code/gswd-starter/pansies.JPG new file mode 100644 index 00000000..fd204b2a Binary files /dev/null and b/el-GR/code/gswd-starter/pansies.JPG differ diff --git a/el-GR/code/gswd-starter/pastel-hearts.jpg b/el-GR/code/gswd-starter/pastel-hearts.jpg new file mode 100644 index 00000000..ad1bb116 Binary files /dev/null and b/el-GR/code/gswd-starter/pastel-hearts.jpg differ diff --git a/el-GR/code/gswd-starter/pastel.css b/el-GR/code/gswd-starter/pastel.css new file mode 100644 index 00000000..54155396 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/piggy-bank.jpg b/el-GR/code/gswd-starter/piggy-bank.jpg new file mode 100644 index 00000000..b857ce06 Binary files /dev/null and b/el-GR/code/gswd-starter/piggy-bank.jpg differ diff --git a/el-GR/code/gswd-starter/placeholder.png b/el-GR/code/gswd-starter/placeholder.png new file mode 100644 index 00000000..85cee494 Binary files /dev/null and b/el-GR/code/gswd-starter/placeholder.png differ diff --git a/el-GR/code/gswd-starter/primary.css b/el-GR/code/gswd-starter/primary.css new file mode 100644 index 00000000..9ad2ff93 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/project_config copy.yml b/el-GR/code/gswd-starter/project_config copy.yml new file mode 100644 index 00000000..6498ee88 --- /dev/null +++ b/el-GR/code/gswd-starter/project_config copy.yml @@ -0,0 +1,3 @@ +name: 'Getting Started with Web Dev Example 2' +identifier: 'gswd-example-2' +type: 'html' diff --git a/el-GR/code/gswd-starter/project_config.yml b/el-GR/code/gswd-starter/project_config.yml new file mode 100644 index 00000000..a9ddaecb --- /dev/null +++ b/el-GR/code/gswd-starter/project_config.yml @@ -0,0 +1,3 @@ +name: 'Getting Started with Web Dev Starter' +identifier: 'gswd-starter' +type: 'html' diff --git a/el-GR/code/gswd-starter/pumpkins.JPG b/el-GR/code/gswd-starter/pumpkins.JPG new file mode 100644 index 00000000..76b57be3 Binary files /dev/null and b/el-GR/code/gswd-starter/pumpkins.JPG differ diff --git a/el-GR/code/gswd-starter/rainbow-forest.JPG b/el-GR/code/gswd-starter/rainbow-forest.JPG new file mode 100644 index 00000000..5728b0aa Binary files /dev/null and b/el-GR/code/gswd-starter/rainbow-forest.JPG differ diff --git a/el-GR/code/gswd-starter/rhino.JPG b/el-GR/code/gswd-starter/rhino.JPG new file mode 100644 index 00000000..e5d7da83 Binary files /dev/null and b/el-GR/code/gswd-starter/rhino.JPG differ diff --git a/el-GR/code/gswd-starter/smokey.css b/el-GR/code/gswd-starter/smokey.css new file mode 100644 index 00000000..3751db11 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/space.css b/el-GR/code/gswd-starter/space.css new file mode 100644 index 00000000..2baa5f53 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/spider-web.jpg b/el-GR/code/gswd-starter/spider-web.jpg new file mode 100644 index 00000000..d685fb66 Binary files /dev/null and b/el-GR/code/gswd-starter/spider-web.jpg differ diff --git a/el-GR/code/gswd-starter/style copy.css b/el-GR/code/gswd-starter/style copy.css new file mode 100644 index 00000000..95c67356 --- /dev/null +++ b/el-GR/code/gswd-starter/style copy.css @@ -0,0 +1,295 @@ +/* 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(--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('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; +} + +/* 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); +} + +.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; +} + diff --git a/el-GR/code/gswd-starter/sunflowers.JPG b/el-GR/code/gswd-starter/sunflowers.JPG new file mode 100644 index 00000000..622f3458 Binary files /dev/null and b/el-GR/code/gswd-starter/sunflowers.JPG differ diff --git a/el-GR/code/gswd-starter/sunset-beach.JPG b/el-GR/code/gswd-starter/sunset-beach.JPG new file mode 100644 index 00000000..13016547 Binary files /dev/null and b/el-GR/code/gswd-starter/sunset-beach.JPG differ diff --git a/el-GR/code/gswd-starter/sunset-person.jpg b/el-GR/code/gswd-starter/sunset-person.jpg new file mode 100644 index 00000000..b0dad17d Binary files /dev/null and b/el-GR/code/gswd-starter/sunset-person.jpg differ diff --git a/el-GR/code/gswd-starter/sunset.JPG b/el-GR/code/gswd-starter/sunset.JPG new file mode 100644 index 00000000..5fabc815 Binary files /dev/null and b/el-GR/code/gswd-starter/sunset.JPG differ diff --git a/el-GR/code/gswd-starter/sunset.css b/el-GR/code/gswd-starter/sunset.css new file mode 100644 index 00000000..6e53385c --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/sunshine.css b/el-GR/code/gswd-starter/sunshine.css new file mode 100644 index 00000000..7651854a --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/thriller.css b/el-GR/code/gswd-starter/thriller.css new file mode 100644 index 00000000..2768e2ee --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/water-animals.css b/el-GR/code/gswd-starter/water-animals.css new file mode 100644 index 00000000..f07a2cd2 --- /dev/null +++ b/el-GR/code/gswd-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/gswd-starter/woodland.css b/el-GR/code/gswd-starter/woodland.css new file mode 100644 index 00000000..96663068 --- /dev/null +++ b/el-GR/code/gswd-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/images/background-image.png b/el-GR/images/background-image.png new file mode 100644 index 00000000..72e7b424 Binary files /dev/null and b/el-GR/images/background-image.png differ diff --git a/el-GR/images/borders-corners.png b/el-GR/images/borders-corners.png new file mode 100644 index 00000000..cb03500a Binary files /dev/null and b/el-GR/images/borders-corners.png differ diff --git a/el-GR/images/contrast-examples.png b/el-GR/images/contrast-examples.png new file mode 100644 index 00000000..8f472c75 Binary files /dev/null and b/el-GR/images/contrast-examples.png differ diff --git a/el-GR/images/example-layouts.png b/el-GR/images/example-layouts.png new file mode 100644 index 00000000..fd33428a Binary files /dev/null and b/el-GR/images/example-layouts.png differ diff --git a/el-GR/images/font-examples.png b/el-GR/images/font-examples.png new file mode 100644 index 00000000..e79bd7bb Binary files /dev/null and b/el-GR/images/font-examples.png differ diff --git a/el-GR/images/gradients.png b/el-GR/images/gradients.png new file mode 100644 index 00000000..81eb4249 Binary files /dev/null and b/el-GR/images/gradients.png differ diff --git a/el-GR/images/image-borders.png b/el-GR/images/image-borders.png new file mode 100644 index 00000000..7e84ca3f Binary files /dev/null and b/el-GR/images/image-borders.png differ diff --git a/el-GR/images/image-emoji-strip.png b/el-GR/images/image-emoji-strip.png new file mode 100644 index 00000000..4de3c00c Binary files /dev/null and b/el-GR/images/image-emoji-strip.png differ diff --git a/el-GR/images/image-palette.png b/el-GR/images/image-palette.png new file mode 100644 index 00000000..31f447cf Binary files /dev/null and b/el-GR/images/image-palette.png differ diff --git a/el-GR/images/list-quote-example.png b/el-GR/images/list-quote-example.png new file mode 100644 index 00000000..88cd9a6a Binary files /dev/null and b/el-GR/images/list-quote-example.png differ diff --git a/el-GR/images/palette-examples.png b/el-GR/images/palette-examples.png new file mode 100644 index 00000000..d8a8e7cd Binary files /dev/null and b/el-GR/images/palette-examples.png differ diff --git a/el-GR/images/strong-example.png b/el-GR/images/strong-example.png new file mode 100644 index 00000000..94903668 Binary files /dev/null and b/el-GR/images/strong-example.png differ diff --git a/el-GR/images/structure-diagram.png b/el-GR/images/structure-diagram.png new file mode 100644 index 00000000..7135a334 Binary files /dev/null and b/el-GR/images/structure-diagram.png differ diff --git a/el-GR/meta.yml b/el-GR/meta.yml new file mode 100644 index 00000000..f2ad304b --- /dev/null +++ b/el-GR/meta.yml @@ -0,0 +1,35 @@ +--- +title: "Getting started with web development: HTML and CSS" +hero_image: images/banner.png +description: Getting started with web development using HTML and CSS. +version: 4 +listed: false +copyedit: false +last_tested: "2021-03-26" +steps: + - + title: Introduction + - + title: What is HTML? + - + title: What is CSS? + - + title: Create your first webpage + - + title: Use colour palettes + - + title: Structure your page + - + title: Add fonts and text elements + - + title: Insert images + - + title: Create animations + - + title: Debug your webpage + - + title: Useful tips + - + title: Our web projects + - + title: Vocabulary for web development diff --git a/el-GR/quiz1/question_1.md b/el-GR/quiz1/question_1.md new file mode 100644 index 00000000..65118477 --- /dev/null +++ b/el-GR/quiz1/question_1.md @@ -0,0 +1,45 @@ +## Reflection + +Well done, you have learned a lot! Now it's time to reflect - reflecting is an important part of learning because it helps make new connections in your brain. + +Answer the three questions below to reflect on what you've learned. + +After each question, press submit. You will be guided towards the correct answer. You can do this activity as many times as you want to. + +Have fun! + +\--- question --- + +--- + +## legend: Question 1 of 3 + +\--- choices --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +- (x) + + \--- feedback --- + + \--- /feedback --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +\--- /choices --- + +\--- /question --- diff --git a/el-GR/quiz1/question_2.md b/el-GR/quiz1/question_2.md new file mode 100644 index 00000000..a0b557db --- /dev/null +++ b/el-GR/quiz1/question_2.md @@ -0,0 +1,43 @@ +\--- question --- + +--- + +## legend: Question 2 of 3 + +You made Pico say hello in a speech bubble. + +```blocks3 +say [Hello!] for [2] secs +``` + +Where would you go to find this block? + +\--- choices --- + +- (x) + + \--- feedback --- + + \--- /feedback --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +\--- /choices --- + +\--- /question --- diff --git a/el-GR/quiz1/question_3.md b/el-GR/quiz1/question_3.md new file mode 100644 index 00000000..37841387 --- /dev/null +++ b/el-GR/quiz1/question_3.md @@ -0,0 +1,35 @@ +\--- question --- + +--- + +## legend: Question 3 of 3 + +\--- choices --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +- (x) + + \--- feedback --- + + \--- /feedback --- + +- ( ) + + \--- feedback --- + + \--- /feedback --- + +\--- /choices --- + +\--- /question --- diff --git a/el-GR/step_1.md b/el-GR/step_1.md new file mode 100644 index 00000000..2df5f627 --- /dev/null +++ b/el-GR/step_1.md @@ -0,0 +1,24 @@ +## Introduction + +This guide covers using HTML and CSS to develop webpages and is designed to be used with our [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path of projects. + +

+**Web development** is the use of HTML, CSS, and JavaScript to create webpages and websites. It includes visual design, website layout, design for accessibility and usability, the creation of animation, and use of code to create interactive webpages. +

+ +### Why learn about web development? + +Creating webpages and websites is a brilliant way for young people to be creative and share their passions. + +Learning about web technologies is useful for a range of jobs, including web designers and front-end developers. It's also used by entrepreneurs who want to make their own unique website to communicate their business or brand. + +### Introduction to web development path + +The [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path covers the development of single webpages using HTML and CSS. Future paths will cover more topics, including using JavaScript to create dynamic webpages. + +What young people should do before starting the 'Intro to web' path: + +- We recommend our [Scratch](https://projects.raspberrypi.org/en/projects/getting-started-scratch) [paths](https://projects.raspberrypi.org/en/paths) for young creators without previous coding experience. Older beginners (from around age 12) could start with the web development path. +- We recommend that all creators have basic typing skills before starting the web development path. + +The [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path can be completed before starting Python coding with [Intro to Raspberry Pi Pico](https://projects.raspberrypi.org/en/pathways/pico-intro) or [Intro to Python](https://projects.raspberrypi.org/en/pathways/python-intro) path. diff --git a/el-GR/step_10.md b/el-GR/step_10.md new file mode 100644 index 00000000..09b38921 --- /dev/null +++ b/el-GR/step_10.md @@ -0,0 +1,31 @@ +## Debug your webpage + +Debugging is a process to find and fix mistakes in the code that are called bugs. + +It’s easier to identify issues if you make one change at a time. It might take a few experiments for your project to look the way that you planned. + +**Tip:** Add comments to your code. Use everyday language to explain what the code does. Sometimes, this will make you realise that your code does not actually do what you want it to do! Comments are useful for when you want to understand your code later, and they help other people to understand your projects. + +### Common bugs + +You might find some common bugs in your HTML or CSS that you need to fix. Here are some examples: + +**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 it? + +**Tip:** If you cannot find the problem after you have tried these techniques, then take a break or work on a different part of your project. When you come back, you might find the bug straight away! + +We love hearing about your bugs and how you fixed them. Use the feedback button at the bottom of this page to tell us about your project and let us know if you found a different bug. diff --git a/el-GR/step_11.md b/el-GR/step_11.md new file mode 100644 index 00000000..86e0ae21 --- /dev/null +++ b/el-GR/step_11.md @@ -0,0 +1,25 @@ +## Useful tips + +### Collapse the code + +Your HTML file can get quite long which makes it hard to find the parts you need to work on. To make your code easier to read, you can collapse parts of it that you don’t need to focus on right now and then expand them later. + +Click on the small triangle next to any section of code you want to collapse. + +### Use placeholder text + +You can add placeholder text to your webpage to see what your layout looks like: + +[[[add-placeholder-text]]] + +### Comment your code + +You can add helpful comments to both your HTML and CSS files: + +[[[web-comment-code]]] + +### Think about your audience + +Where possible, view your published webpage on a number of different devices such as a laptop, phone, or tablet to view your webpage from the lens of many different visitors. + +**Tip:** If you do not have access to other devices, you can drag the bar between the text editor and your webpage output to make the webpage wider or narrower. diff --git a/el-GR/step_12.md b/el-GR/step_12.md new file mode 100644 index 00000000..b9921229 --- /dev/null +++ b/el-GR/step_12.md @@ -0,0 +1,9 @@ +## Our web projects + +Our 'Intro to web' path has six projects to help you learn different web skills to create your own projects independently. + +You can return to this reference guide, 'Getting started with web development', whenever you need to remind yourself of the skills you have learnt. + +### Beginner web projects + +The [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path covers the development of single webpages using HTML and CSS. Future paths will cover more topics including using JavaScript to create dynamic webpages. diff --git a/el-GR/step_13.md b/el-GR/step_13.md new file mode 100644 index 00000000..90e40f40 --- /dev/null +++ b/el-GR/step_13.md @@ -0,0 +1,43 @@ +## Vocabulary for web development + +## Web development + +- The **World Wide Web** or **web** is a vast collection of connected webpages. + +- A **webpage** is a single page of content with a web address or Universal Resource Locator (URL). + +- A **website** is a group of webpages with the same domain name. + +- A **domain name** is the part of a web address after `http://` or `https://`, for example `projects.raspberrypi.org`. + +- A **web developer** or **front-end developer** is someone who creates websites using HTML, CSS, and JavaScript. + +### HTML + +- The **Hypertext Markup Language (HTML)** language is used to structure a webpage so that a web browser (or screen reader) knows what to do with the content. + +- HTML uses **tags** to 'mark up' content so that a web browser or screen reader knows how to present it. Tags start and end with angle brackets and most have a matching end tag. For example, `

` and `

` tags are used to start and end a level one heading. + +- The different parts of an HTML page are called **elements** and include tags. `

The Heading

` is a level one heading element. + +- HTML elements can have **attributes** which provide additional information. This example, `A happy face` has a `src` attribute with a value for the image name and an `alt` attribute with a value for the alternative text to be used if an image cannot be viewed. + +- Elements can be **inline** or **block** level elements. An **inline** element is an element that is within a phrase. For example `` creates a bold piece of text. A **block** element is a whole block of HTML, like a `
` or a `
`. + +### CSS + +- The **Cascading Style Sheets (CSS)** language describes exactly how a webpage should look. + +- A CSS file contains a list of **rules**. + +- Each rule has a list of **properties** with values. For example `color: teal` sets the colour property to the teal colour. + +- Each rule has a **selector** which says which HTML elements to apply the rule to. This could be the name of an HTML element or `.classname` where 'classname' is the name of a class that can be applied to HTML elements to use the style. + +- A CSS **class** is used to apply rules to HTML elements that have that class applied. For example `
` applies the primary class to a section element which means that the properties defined in rules with the `.primary` selector will be used. + +- A CSS file is often called a **style sheet**. + +- CSS can use **variables** to hold data about things that can change, like the font and font colours. Using variables makes it much quicker to change the styling of a whole page because you just change what is being held by the variable. + +- CSS allows you to create **animations**. This is where the style of an element changes from one style to another over a time period. Cool effects, like pulsing, can be made using CSS animations. diff --git a/el-GR/step_2.md b/el-GR/step_2.md new file mode 100644 index 00000000..a785bd8f --- /dev/null +++ b/el-GR/step_2.md @@ -0,0 +1,23 @@ +## What is HTML? + +HTML is the language that is used to write webpages. + +

+**Hypertext Markup Language (HTML)** is used to structure a webpage so that a web browser (or screen reader) knows what to do with the content. +

+ +HTML defines a set of **tags** that start and end with angle brackets and are used to 'mark up' webpage content. + +This is a small example of a webpage: + + + +Try to change the text between the `

` and `

` start and end tags ('h1' is the most important heading). + +### Use of semantic HTML tags + +The [Intro to web](https://projects.raspberrypi.org/en/pathways/web-intro) path uses modern best practices for HTML including the use of the 'semantic' tags `
`, `
`, `
`, and `