starwars project

projects/index.html

@@ -45,6 +45,8 @@
                 <p>Az első saját nagyobb weblap, amit csináltam.</p>
                 <h4><a href="aranyjanos">Arany János</a></h4>
                 <p>Egy irodalom projektre csináltam, nem sikerült teljesen befejezni.</p>
+                <h4><a href="starwars">Star Wars</a></h4>
+                <p>ELTE-n Webfejlesztés tárgyhoz projekt.</p>
                 <h4><a href="huszar">Huszárvándorlás</a></h4>
                 <p>Bitfaragó 2019 versenyre készítettük. A csapat: Balázs, Nyikus és Én</p>
                 <h4><a href="erzekelo">Mozgásérzékelők</a></h4>

projects/starwars/bootstrap/css/bootstrap-reboot.css

@@ -0,0 +1,485 @@
+/*!
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+  direction: ltr /* rtl:ignore */;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/*# sourceMappingURL=bootstrap-reboot.css.map */

projects/starwars/bootstrap/css/bootstrap-reboot.rtl.css

@@ -0,0 +1,482 @@
+/*!
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-right: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+  direction: ltr ;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: right;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: right;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: right;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */

projects/starwars/css/high-contrast.css

@@ -0,0 +1,139 @@
+:root {
+    --darkblue: #00182a;
+    --yellow: #F0A500;
+    --blue: #233746;
+}
+
+@font-face {
+    font-family: 'Star Jedi';
+    src: url('../media/Starjedi.ttf') format('truetype');
+}
+
+@media screen {
+    body {
+        background-color: black;
+        color: yellow;
+    }
+
+    nav,
+    #nav {
+        background-color: var(--darkblue);
+    }
+
+    main,
+    #main {
+        background-color: var(--blue);
+    }
+
+    footer,
+    #footer {
+        background-color: var(--darkblue);
+    }
+
+    h1 {
+        font-family: "Star Jedi", 'Franklin Gothic Medium', fantasy;
+        text-align: center;
+        color: white;
+    }
+
+    h2 {
+        text-align: center;
+        margin-bottom: 1.5rem;
+        font-size: 4em;
+        color: white;
+    }
+
+    h3 {
+        color: white;
+        font-size: 3em;
+    }
+
+    h4 {
+        color: white;
+        font-size: 2.4em;
+    }
+
+    p {
+        font-size: 1.8em;
+        text-align: justify;
+    }
+
+    li {
+        color: yellow;
+        font-size: 2em;
+    }
+
+    a:visited {
+        color: rgb(224, 224, 0);
+    }
+
+    a:hover {
+        background-color: yellow;
+        color: black !important;
+    }
+
+    .active {
+        background-color: var(--blue);
+    }
+
+    .poster {
+        width: 100%;
+    }
+
+    .jedi {
+        height: 400px;
+    }
+
+    #switch-high-contrast {
+        height: 64px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 4px;
+        border: 0;
+        background-color: transparent;
+    }
+
+    #switch-high-contrast img {
+        height: 100%;
+    }
+
+    .table {
+        color: yellow;
+        border-color: yellow;
+        font-size: 1.8em;
+    }
+
+    caption {
+        color: yellow;
+    }
+
+    form label,
+    legend {
+        font-size: 1.8em;
+    }
+
+    form span.fs-5 {
+        font-size: 2em !important;
+    }
+
+    form legend {
+        font-size: 2.4em;
+        font-weight: bold;
+    }
+
+    input[type="reset"],
+    input[type="submit"] {
+        width: 40%;
+        color: white;
+        font-weight: bold;
+        font-size: 1.8rem;
+        border: 0;
+    }
+
+    input[type="reset"]:hover,
+    input[type="submit"]:hover {
+        background-color: yellow !important;
+        color: black;
+    }
+}

projects/starwars/css/main.css

@@ -0,0 +1,121 @@
+:root {
+    --darkblue: #082032;
+    --yellow: #F0A500;
+    --blue: #334756;
+}
+
+@font-face {
+    font-family: 'Star Jedi';
+    src: url('../media/Starjedi.ttf') format('truetype');
+}
+
+@media screen {
+    body {
+        background-color: black;
+        background-image: url("../media/images/bg-space.jpg");
+        color: var(--yellow);
+        background-repeat: repeat-y;
+        background-size: 100%;
+    }
+
+    nav,
+    #nav {
+        background-color: var(--darkblue);
+    }
+
+    main,
+    #main {
+        background-color: var(--blue);
+    }
+
+    footer,
+    #footer {
+        background-color: var(--darkblue);
+    }
+
+    h1 {
+        font-family: "Star Jedi", 'Franklin Gothic Medium', fantasy;
+        text-align: center;
+        color: black;
+        text-shadow:
+            1px 1px yellow,
+            -1px -1px yellow,
+            1px -1px yellow,
+            -1px 1px yellow;
+    }
+
+    h2 {
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
+
+    p {
+        text-align: justify;
+    }
+
+    a {
+        color: yellow;
+    }
+
+    a:visited {
+        color: rgb(224, 224, 0);
+    }
+
+    a:hover {
+        color: rgb(192, 192, 0);
+    }
+
+    .nav-link {
+        color: yellow !important;
+    }
+
+    .nav-link:hover {
+        background-color: rgba(0, 0, 0, 0.64);
+    }
+
+    .active {
+        background-color: var(--blue);
+    }
+
+    .poster {
+        width: 100%;
+    }
+
+    .jedi {
+        height: 400px;
+    }
+
+    #switch-high-contrast {
+        height: 40px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 4px;
+        border: 0;
+        background-color: transparent;
+    }
+
+    #switch-high-contrast img {
+        height: 100%;
+    }
+
+    .table,
+    caption {
+        color: var(--yellow);
+        border-color: var(--yellow);
+    }
+
+    form label,
+    form span,
+    legend {
+        font-weight: bold;
+    }
+
+    input[type="reset"],
+    input[type="submit"] {
+        width: 40%;
+        color: white;
+        font-weight: bold;
+        border: 0;
+    }
+}

projects/starwars/css/print.css

@@ -0,0 +1,41 @@
+@media print {
+
+    header,
+    #header {
+        display: none;
+    }
+
+    footer,
+    #footer {
+        display: none;
+    }
+
+    h2 {
+        text-align: center;
+        margin-bottom: 1.5rem;
+    }
+
+    p {
+        text-align: justify;
+    }
+
+    img {
+        display: block;
+        margin: auto;
+        max-width: 25vw;
+        width: 100%;
+    }
+
+    .container {
+        max-width: 100%;
+    }
+
+    video {
+        display: none;
+    }
+
+    input[type="reset"],
+    input[type="submit"] {
+        display: none;
+    }
+}

projects/starwars/films.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="hu">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/print.css">
+  <link rel="icon" type="image/x-icon" href="media/images/jedi-symbol.png">
+  <title>Star Wars - Filmek</title>
+</head>
+
+<body>
+  <header>
+    <a class="visually-hidden-focusable" href="#main">Ugrás a tartalomra</a>
+    <h1 class="display-1">STAR WARS</h1>
+    <nav>
+      <div class="container position-relative p-0">
+        <ul class="nav justify-content-center flex-column flex-sm-row">
+          <li class="nav-item">
+            <a class="nav-link" href="index.html">Főoldal</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="films.html">Filmek</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="series.html">Sorozatok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="games.xhtml">Játékok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="jedi.html">Jedi Generátor</a>
+          </li>
+          <button id="switch-high-contrast" onclick="switchMode()">
+            <img src="media/images/high-contrast.svg" alt="Nagy kontraszt">
+          </button>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main id="main" class="container p-4">
+    <h2>Filmek</h2>
+    <article>
+      <h3>Áttekintés</h3>
+      <p>A filmek a Star Wars alapja. A három trilógia főként a <b>Skywalker</b> családról szól, de vannak spin-off filmek is. A posztereken vannak a kedvenceim, a legjobban a Sith-ek bosszúját szeretem.</p>
+    </article>
+    <hr>
+    <div class="row">
+      <section class="col-sm-8 col-lg-9">
+        <h3>Előzmény trilógia</h3>
+        <p>Az Előzmény trilógia a Galaktikus Köztársaság utolsó éveiben játszódik a Skywalker korszakban. A trilógián végig követhetjük, ahogy a Kereskedelmi Szövetség blokád alá veszi a Naboo bolygót, és azt is, hogy Qui-gon Jinn megismerkedik Anakin Skywalkerrel, aki a prófécia szerint egyensúlyt hozna a Galaxisban. Később kitört a Klónok Háborúja, utána Palpatine felfedi a Jedi Rend előtt az igazi kilétét, hogy pontosan ő a sith nagyúr Darth Sidious. És ezáltal Anakin átáll a sötét oldalra és átalakul Darth Vaderré.</p>
+        <ul>
+          <li>Star Wars I. rész – Baljós árnyak (1999)</li>
+          <li>Star Wars II. rész – A klónok támadása (2002)</li>
+          <li>Star Wars III. rész – A Sith-ek bosszúja (2005)</li>
+        </ul>
+      </section>
+      <aside class="col-sm-4 col-lg-3">
+        <a href="media/images/posters/swep3-rots.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/swep3-rots-450p.jpg" alt="Star Wars III. rész: A Sith-ek bosszúja, poszter">
+        </a>
+      </aside>
+    </div>
+    <hr>
+    <div class="row">
+      <aside class="col-sm-4 col-lg-3">
+        <a href="media/images/posters/swep5-esb.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/swep5-esb-450p.jpg" alt="Star Wars V. rész: A Birodalom visszavág, poszter">
+        </a>
+      </aside>
+      <section class="col-sm-8 col-lg-9">
+        <h3>Eredeti trilógia</h3>
+        <p>A Star Wars első trilógiája a Galaktikus Birodalom második éveiben játszódik, amikor a Birodalom kifejlesztette a Halálcsillagot, ami egy egész bolygó elpusztítására képes, és a lázadók megpróbálják megsemmisíteni a szuperfegyvert. Itt szerepel az első filmben Luke Skywalker, ami a karakter az egész világon az egyik jelképé vált a Csillagok háborúja filmjeiben. Emellett kultikus alak lett Leia Organa és Han Solo karaktere is. Na persze a vuki is Csubakka.</p>
+        <ul>
+          <li>
+
+            Star Wars IV. rész – Egy új remény (1977)</li>
+          <li>Star Wars V. rész – A Birodalom visszavág (1980)</li>
+          <li>Star Wars VI. rész – A Jedi visszatér (1983)</li>
+        </ul>
+      </section>
+    </div>
+    <hr>
+    <div class="row">
+      <section class="col-sm-8 col-lg-9">
+        <h3>Előzmény trilógia</h3>
+        <p>A trilógia egy 19 éves nőt, Reyt és az Ellenállás küzdelmét követi a bukott Galaktikus Birodalomból felemelkedett Első Rend ellen. Rey Luke Skywalker és Leia Organa vezetésével tanulja meg az Erő útjait, miközben szüleit keresi (akik rejtélyes módon elhagyták őt gyerekkorában), és szembekerül Kylo Ren-nel, Leia és Han Solo fiával, aki a sötét oldalra esett át.</p>
+        <ul>
+          <li>Star Wars VII. rész – Az ébredő erő (2015)</li>
+          <li>Star Wars VIII. rész – Az utolsó Jedik (2017)</li>
+          <li>Star Wars IX. rész – Skywalker kora (2019)</li>
+        </ul>
+      </section>
+      <aside class="col-sm-4 col-lg-3">
+        <a href="media/images/posters/swep7-tfa.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/swep7-tfa-450p.jpg" alt="Star Wars VII. rész: Az ébredő erő, poszter">
+        </a>
+      </aside>
+    </div>
+    <hr>
+    <div class="row">
+      <aside class="col-sm-4 col-lg-3">
+        <a href="media/images/posters/ro-asws.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/ro-asws-450p.jpg" alt="Zsivány Egyes – Egy Star Wars-történet, poszter">
+        </a>
+      </aside>
+      <section class="col-sm-8 col-lg-9">
+        <h3>Antológia filmek</h3>
+        <p>A Zsivány Egyes a Sith-ek bosszúja és az Egy új remény között jászódik a Birodalom idején. Egy kis csapat megakarja szerezni a Halálcsillag tervrajzait, hogy elpusztítsák a Galaktikus Birodalom rettegett fegyverét.</p>
+        <p>Han Solo, a galaxis legkedveltebb gazfickója, a sötét és mély alvilágban lavírozva belefut jövőbeli másodpilótájába, Chewbaccába és a hírhedt szerencsejátékosba, Lando Calrissianba. A társaság kalandja útnak indítja a Star Wars saga egyik legvalószínűtlenebb hősének történetét.</p>
+        <ul>
+          <li>Zsivány Egyes – Egy Star Wars-történet (2016)</li>
+          <li>Solo – Egy Star Wars-történet (2018)</li>
+        </ul>
+      </section>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container d-flex px-4 py-2">
+      <p class="d-inline-block w-50 m-0"><a href="https://starwars.com" target="_blank">StarWars.com</a></p>
+      <p class="text-end w-50 m-0">Készítette: Baldauf Márton</p>
+    </div>
+  </footer>
+
+  <script src="switch-css.js"></script>
+</body>
+
+</html>

projects/starwars/games.xhtml

@@ -0,0 +1,117 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="hu">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="css/main.css" />
+  <link rel="stylesheet" href="css/print.css" />
+  <link rel="icon" type="image/x-icon" href="media/images/jedi-symbol.png" />
+  <title>Star Wars - Játékok</title>
+</head>
+
+<body>
+  <div id="header">
+    <a class="visually-hidden-focusable" href="#main">Ugrás a tartalomra</a>
+    <h1 class="display-1">STAR WARS</h1>
+    <div id="nav">
+      <div class="container position-relative p-0">
+        <ul class="nav justify-content-center flex-column flex-sm-row">
+          <li class="nav-item">
+            <a class="nav-link" href="index.html">Főoldal</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="films.html">Filmek</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="series.html">Sorozatok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" href="games.xhtml">Játékok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="jedi.html">Jedi Generátor</a>
+          </li>
+        </ul>
+        <button id="switch-high-contrast" onclick="switchMode()">
+          <img src="media/images/high-contrast.svg" alt="Nagy kontraszt" />
+        </button>
+      </div>
+    </div>
+  </div>
+
+
+  <div id="main" class="container p-4">
+    <h2>Videójátékok</h2>
+    <div class="table-responsive">
+      <table summary="Star Wars videójátékok" class="table caption-top text-nowrap">
+        <caption class="pt-0 text-center text-wrap">A Star Wars tartalommal gazdag videójátékok terén is, rengeteg játék készült a galaxisról. Ebben a táblázatban felsorok néhány videójátékot, amivel játszottam és ajánlom.</caption>
+        <thead>
+          <tr>
+            <th scope="col">Játék neve</th>
+            <th scope="col">Fejlesztő</th>
+            <th scope="col">Kiadási Év</th>
+            <th scope="col">Műfaj</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">Star Wars: Jedi Fallen Order</th>
+            <td>Respawn Entertainment</td>
+            <td>2019</td>
+            <td>Kaland</td>
+          </tr>
+          <tr>
+            <th scope="row">Star Wars: Battlefront II</th>
+            <td>EA DICE</td>
+            <td>2017</td>
+            <td>Lövöldözős</td>
+          </tr>
+          <tr>
+            <th scope="row">LEGO Star Wars: The Skywalker Saga</th>
+            <td>TT Games</td>
+            <td>2022</td>
+            <td>Platformer/Kaland</td>
+          </tr>
+          <tr>
+            <th scope="row">LEGO Star Wars: The Complete Saga</th>
+            <td>TT Games</td>
+            <td>2009</td>
+            <td>Platformer/Kaland</td>
+          </tr>
+          <tr>
+            <th scope="row">Star Wars: Empire At War</th>
+            <td>Petroglyph</td>
+            <td>2006</td>
+            <td>Valósi idejű stratégia</td>
+          </tr>
+          <tr>
+            <th scope="row">Star Wars: The Force Unleashed</th>
+            <td>LucasArts</td>
+            <td>2008</td>
+            <td>Akció-kalandjáték</td>
+          </tr>
+          <tr>
+            <th scope="row">Star Wars: Battlefront II</th>
+            <td>Pandemic Studios</td>
+            <td>2007</td>
+            <td>Lövöldözős</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div id="footer">
+    <div class="container d-flex px-4 py-2">
+      <p class="d-inline-block w-50 m-0"><a href="https://starwars.com">StarWars.com</a></p>
+      <p class="text-end w-50 m-0">Készítette: Baldauf Márton</p>
+    </div>
+  </div>
+
+  <script src="switch-css.js" type="text/javascript"></script>
+</body>
+
+</html>

projects/starwars/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="hu">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/print.css">
+  <link rel="icon" type="image/x-icon" href="media/images/jedi-symbol.png">
+  <title>Star Wars - Főoldal</title>
+</head>
+
+<body>
+  <header>
+    <a class="visually-hidden-focusable" href="#main">Ugrás a tartalomra</a>
+    <h1 class="display-1">STAR WARS</h1>
+    <nav>
+      <div class="container position-relative p-0">
+        <ul class="nav justify-content-center flex-column flex-sm-row">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="index.html">Főoldal</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="films.html">Filmek</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="series.html">Sorozatok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="games.xhtml">Játékok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="jedi.html">Jedi Generátor</a>
+          </li>
+        </ul>
+        <button id="switch-high-contrast" onclick="switchMode()">
+          <img src="media/images/high-contrast.svg" alt="Nagy kontraszt">
+        </button>
+      </div>
+    </nav>
+  </header>
+
+  <main id="main" class="container p-4">
+    <h2>Főoldal</h2>
+    <div class="row">
+      <div class="col-lg-6">
+        <h3>Üdvözöllek a weboldalon</h3>
+        <p>Ezen a weboldalon bemutatom a <cite>Star Wars (Csillagok háborúja)</cite> univerzumát, aminek én is egy rajongója vagyok. A Star Wars egy amerikai franchise, amit <b>George Lucas</b> talált ki és a <b>Lucasfilm</b> a tulajdonosa. A történet <i>„Réges régen egy messzi, messzi galaxisban”</i> játszódik egy fantasy univerzumban. Ezen a weboldalon lehet olvasni Star Wars filmekről, sorozatokról, játékokról. Persze ezeken kívül még rengeteg más tartalom van: könyvek, képregények, fanfilmek, nem is beszélve a legendákról.</p>
+        <p>Ez a <b>videó</b> egy montázs a <i>Skywalker Saga</i> 9 filmjéről, egy promóciós reklám <i>Disney+</i>-ra, ahol megnézhetjük ezeket a filmeket. A videó alatt a Star Wars ikonikus zenéje hallható. Először láthatjuk Luke-ot, az eredeti trilógia főhősét és Darth Vader-t, az apját. Egyes karakterektől filmbeli idézeteket hallunk angolul (a videó feliratán elolvashatjuk ezeket). Aztán a Galaktikus Köztársaság korára ugrunk, Anakin Skywalker-t láthatjuk, a kiválasztottat. Végül a folytatás trilógia hősét, Rey-t. Ezután a zene intenzitása fokozódik és rövid jelenetenként láthatjuk a saga többi ikonikus karakterét: Leia, R2-D2, Dart Maul, Han Solo, Obi-Wan Kenobi, Qui-Gon Jinn, Yoda, BB-8, Chewbacca, Finn, Poe, Padmé, Kylo Ren, Lando.</p>
+      </div>
+      <div class="col-lg-6">
+        <div id="video" class="m-0">
+          <video poster="media/images/skywalker-saga-thumbnail.png" controls class="w-100">
+            <source src="media/TheCompleteSkywalkerSaga.mp4" type="video/mp4">
+            <track default kind="captions" src="media/TheCompleteSkywalkerSaga.vtt" label="angol">
+          </video>
+          <p class="text-center">Forrás: <a href="https://youtu.be/hsq9i6dsyII" target="_blank">YouTube</a></p>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container d-flex px-4 py-2">
+      <p class="d-inline-block w-50 m-0"><a href="https://starwars.com" target="_blank">StarWars.com</a></p>
+      <p class="text-end w-50 m-0">Készítette: Baldauf Márton</p>
+    </div>
+  </footer>
+
+  <script src="switch-css.js"></script>
+</body>
+
+</html>

projects/starwars/jedi.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="hu">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/print.css">
+  <link rel="icon" type="image/x-icon" href="media/images/jedi-symbol.png">
+  <title>Star Wars - Jedi Generátor</title>
+</head>
+
+<body>
+  <header>
+    <a class="visually-hidden-focusable" href="#main">Ugrás a tartalomra</a>
+    <h1 class="display-1">STAR WARS</h1>
+    <nav>
+      <div class="container position-relative p-0">
+        <ul class="nav justify-content-center flex-column flex-sm-row">
+          <li class="nav-item">
+            <a class="nav-link" href="index.html">Főoldal</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="films.html">Filmek</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="series.html">Sorozatok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="games.xhtml">Játékok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="jedi.html">Jedi Generátor</a>
+          </li>
+        </ul>
+        <button id="switch-high-contrast" onclick="switchMode()">
+          <img src="media/images/high-contrast.svg" alt="Nagy kontraszt">
+        </button>
+      </div>
+    </nav>
+  </header>
+
+  <main id="main" class="container p-4">
+    <article>
+      <h2>Jedi Generátor</h2>
+      <p>A Star Wars univerzuma olyan sok színű, rengeteg történetet el lehet mesélni benne. Ezen az űrlapon el tudod készíteni a saját <b>Jedi lovag</b>odat és el tudod küldeni.</p>
+    </article>
+    <form action="mailto:buduf@student.elte.hu" target="_blank">
+      <div class="row">
+        <div class="col-md-6 mb-4">
+          <fieldset>
+            <legend>A karakter</legend>
+            <div class="row mb-2">
+              <div class="col-6">
+                <label for="nev" class="form-label">Név</label><br>
+                <input type="text" maxlength="28" id="nev" class="form-control" required>
+              </div>
+              <div class="col-6">
+                <label for="faj" class="form-label">Faj</label><br>
+                <select id="faj" class="form-select">
+                  <option value="ember">Ember</option>
+                  <option value="twilek">Twi'lek</option>
+                  <option value="wookie">Wookiee</option>
+                  <option value="togruta">Togruta</option>
+                  <option value="nautolan">Nautolan</option>
+                  <option value="zabrak">Zabrak</option>
+                </select>
+              </div>
+            </div>
+            <div class="mb-2">
+              <label for="story" class="form-label">Háttértörténet</label><br>
+              <textarea rows="5" maxlength="800" id="story" class="form-control"></textarea>
+            </div>
+            <div class="mb-2 form-check">
+              <input type="checkbox" id="darkside" class="form-check-input">
+              <label for="darkside" class="form-check-label">Átáll a sötét oldalra?</label>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend>A fénykard</legend>
+            <div class="w-50 float-start">
+              <span class="fs-5">Típus</span>
+              <div class="form-check">
+                <input type="radio" name="type" id="normal" class="form-check-input" required>
+                <label for="normal" class="form-check-label">Normál</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="type" id="doublebladed" class="form-check-input" required>
+                <label for="doublebladed" class="form-check-label">Kétpengéjű</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="type" id="dualwielding" class="form-check-input" required>
+                <label for="dualwielding" class="form-check-label">Dupla kard</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="type" id="hybrid" class="form-check-input" required>
+                <label for="hybrid" class="form-check-label">Szétszedhető</label>
+              </div>
+            </div>
+            <div class="w-50 float-start">
+              <span class="fs-5">Szín</span>
+              <div class="form-check">
+                <input type="radio" name="color" id="blue" class="form-check-input" required>
+                <label for="blue" class="form-check-label">Kék</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="color" id="green" class="form-check-input" required>
+                <label for="green" class="form-check-label">Zöld</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="color" id="cyan" class="form-check-input" required>
+                <label for="cyan" class="form-check-label">Cián</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="color" id="purple" class="form-check-input" required>
+                <label for="purple" class="form-check-label">Lila</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="color" id="yellow" class="form-check-input" required>
+                <label for="yellow" class="form-check-label">Sárga</label>
+              </div>
+              <div class="form-check">
+                <input type="radio" name="color" id="orange" class="form-check-input" required>
+                <label for="orange" class="form-check-label">Narancs</label>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+        <div class="col-md-6 mb-4">
+          <div class="h-100 d-flex align-items-center">
+            <div class="w-100">
+              <h3 class="text-center">Különböző fajú karakterek</h3>
+              <div id="carouselJedi" class="carousel slide" data-bs-ride="carousel">
+                <div class="carousel-inner">
+                  <div class="carousel-item active">
+                    <figure class="text-center">
+                      <img src="media/images/jedi/ObiWanKenobi.webp" class="jedi" alt="Obi-Wan Kenobi">
+                      <figcaption>
+                        <h4>Obi-Wan Kenobi</h4>
+                        <p class="text-center">Az egyik legismertebb jedi.</p>
+                      </figcaption>
+                    </figure>
+                  </div>
+                  <div class="carousel-item">
+                    <figure class="text-center">
+                      <img src="media/images/jedi/AaylaSecura.webp" class="jedi" alt="Aayla Secura">
+                      <figcaption>
+                        <h4>Aayla Secura</h4>
+                        <p class="text-center">Twi'lek jedi mester.</p>
+                      </figcaption>
+                    </figure>
+                  </div>
+                  <div class="carousel-item">
+                    <figure class="text-center">
+                      <img src="media/images/jedi/Chewbacca.png" class="jedi" alt="Chewbacca">
+                      <figcaption>
+                        <h4>Chewbacca</h4>
+                        <p class="text-center">Wookiee, egyik legismertebb karakter, ő nem jedi.</p>
+                      </figcaption>
+                    </figure>
+                  </div>
+                  <div class="carousel-item">
+                    <figure class="text-center">
+                      <img src="media/images/jedi/AhsokaTano.webp" class="jedi" alt="Ahsoka Tano">
+                      <figcaption>
+                        <h4>Ahsoka Tano</h4>
+                        <p class="text-center">Togruta faj, Anakin padawan-ja. Fan favorite.</p>
+                      </figcaption>
+                    </figure>
+                  </div>
+                  <div class="carousel-item">
+                    <figure class="text-center">
+                      <img src="media/images/jedi/KitFisto.webp" class="jedi" alt="Kit Fisto">
+                      <figcaption>
+                        <h4>Kit Fisto</h4>
+                        <p class="text-center">Naoutolan jedi mester.</p>
+                      </figcaption>
+                    </figure>
+                  </div>
+                  <div class="carousel-item">
+                    <figure class="text-center">
+                      <img src="media/images/jedi/EethKoth.webp" class="jedi" alt="Eeth Koth">
+                      <figcaption>
+                        <h4>Eeth Koth</h4>
+                        <p class="text-center">Zabrak jedi mester.</p>
+                      </figcaption>
+                    </figure>
+                  </div>
+                </div>
+                <button class="carousel-control-prev" type="button" data-bs-target="#carouselJedi" data-bs-slide="prev">
+                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                  <span class="visually-hidden">Previous</span>
+                </button>
+                <button class="carousel-control-next" type="button" data-bs-target="#carouselJedi" data-bs-slide="next">
+                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                  <span class="visually-hidden">Next</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <fieldset>
+        <input type="reset" value="Alaphelyzet" class="form-control bg-danger float-start">
+        <input type="submit" value="Elküld" class="form-control bg-success float-end">
+      </fieldset>
+    </form>
+  </main>
+
+  <footer>
+    <div class="container d-flex px-4 py-2">
+      <p class="d-inline-block w-50 m-0"><a href="https://starwars.com" target="_blank">StarWars.com</a></p>
+      <p class="text-end w-50 m-0">Készítette: Baldauf Márton</p>
+    </div>
+  </footer>
+
+  <script src="bootstrap/js/bootstrap.min.js"></script>
+  <script src="switch-css.js"></script>
+</body>
+
+</html>

projects/starwars/media/TheCompleteSkywalkerSaga.vtt

@@ -0,0 +1,98 @@
+WEBVTT
+Kind: captions
+Language: en-US
+
+00:00:01.042 --> 00:00:03.044
+♪♪
+
+00:00:04.004 --> 00:00:06.006
+[Mechanical breathing]
+
+00:00:07.298 --> 00:00:08.425
+LUKE SKYWALKER:
+I want to learn the ways of the Force
+
+00:00:08.425 --> 00:00:10.010
+and become a Jedi
+like my father.
+
+00:00:15.390 --> 00:00:17.392
+MACE WINDU:
+You refer to the prophecy of the one
+
+00:00:18.601 --> 00:00:20.478
+who will bring balance to the Force.
+
+00:00:28.528 --> 00:00:29.529
+REY:
+I need someone...
+
+00:00:30.030 --> 00:00:31.990
+to show me my
+place in all this.
+
+00:00:34.325 --> 00:00:35.910
+MAZ KANATA:
+The belonging you seek
+
+00:00:35.910 --> 00:00:37.328
+is not behind you...
+
+00:00:38.955 --> 00:00:40.123
+[R2-D2 beeps]
+
+00:00:40.123 --> 00:00:41.124
+MAZ KANATA:
+...it is ahead.
+
+00:00:44.335 --> 00:00:45.336
+[R2-D2 beeps]
+
+00:00:45.979 --> 00:00:46.979
+♪♪
+
+00:00:51.217 --> 00:00:53.011
+YODA:
+You must feel the Force
+
+00:00:53.011 --> 00:00:54.095
+around you.
+
+00:00:56.723 --> 00:00:58.141
+[BB-8 whirs]
+[Chewbacca growls]
+
+00:01:02.103 --> 00:01:03.646
+FINN:
+Wooo!
+
+00:01:04.064 --> 00:01:06.357
+LUKE SKYWALKER:
+The Force is strong in my family.
+
+00:01:08.068 --> 00:01:09.069
+My father has it.
+
+00:01:11.071 --> 00:01:12.072
+I have it.
+
+00:01:13.281 --> 00:01:14.532
+You have that power too.
+
+00:01:15.825 --> 00:01:17.243
+LANDO CALRISSIAN:
+Yee-haw!
+
+00:01:17.952 --> 00:01:18.953
+HAN SOLO:
+The Force.
+
+00:01:19.412 --> 00:01:20.413
+The Jedi.
+
+00:01:23.500 --> 00:01:24.542
+It's all true.
+
+00:01:27.837 --> 00:01:30.256
+♪♪
+

projects/starwars/media/images/high-contrast.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="91px" height="91px" viewBox="0 0 91 91" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
+    <title>hight-contrast</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="hight-contrast" transform="translate(1.000000, 1.000000)">
+            <circle id="Oval-1" stroke="#000000" stroke-width="2" fill="#FFFF01" cx="44.5" cy="44.5" r="44.5"></circle>
+            <circle id="Oval-2" fill="#000000" cx="27.5" cy="34.5" r="12.5"></circle>
+            <circle id="Oval-2-Copy-2" fill="#000000" cx="44.5" cy="62.5" r="12.5"></circle>
+            <circle id="Oval-2-Copy" fill="#000000" cx="62.5" cy="35.5" r="12.5"></circle>
+        </g>
+    </g>
+</svg>

projects/starwars/series.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="hu">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/print.css">
+  <link rel="icon" type="image/x-icon" href="media/images/jedi-symbol.png">
+  <title>Star Wars - Sorozatok</title>
+</head>
+
+<body>
+  <header>
+    <a class="visually-hidden-focusable" href="#main">Ugrás a tartalomra</a>
+    <h1 class="display-1">STAR WARS</h1>
+    <nav>
+      <div class="container position-relative p-0">
+        <ul class="nav justify-content-center flex-column flex-sm-row">
+          <li class="nav-item">
+            <a class="nav-link" href="index.html">Főoldal</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="films.html">Filmek</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="series.html">Sorozatok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="games.xhtml">Játékok</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="jedi.html">Jedi Generátor</a>
+          </li>
+        </ul>
+        <button id="switch-high-contrast" onclick="switchMode()">
+          <img src="media/images/high-contrast.svg" alt="Nagy kontraszt">
+        </button>
+      </div>
+    </nav>
+  </header>
+
+  <main id="main" class="container p-4">
+    <h2>Sorozatok</h2>
+    <article>
+      <h3>Áttekintés</h3>
+      <p>Igazából a sorozatok, főleg A klónok háborúja miatt szerettem meg annyira a Star Wars-t és lettem rajongó, mert ezek kibővítik és mélyebbé teszik a galaxist. Sok szerethető karaktert mutatnak be, akiket a filmekben nem is láthatunk.</p>
+    </article>
+    <hr>
+    <div class="row">
+      <section class="col-md-9">
+        <h3>Star Wars – The Clone Wars</h3>
+        <p>Az animációs sorozat a Galaktikus Köztársaság és a Független Rendszerek Konföderációja közti számtalan konfliktussal foglalkozik. Mindkét felet titokban Palpatine főkancellár és titkos alteregója, Darth Sidious irányítja, akinek fő célja, hogy megszerezze Anakin Skywalker Jedi lovagot következő Sith tanítványának. Időközben Dooku vérszomjas tanítványa, Asajj Ventrees is feltűnik, aki néha megküzd a Jedikkel, de úgy se tudják legyőzni.</p>
+      </section>
+      <aside class="col-md-3">
+        <a href="media/images/posters/sw-tcw.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/sw-tcw-450p.jpg" alt="Star Wars: A klónok háborúja, poszter">
+        </a>
+      </aside>
+    </div>
+    <hr>
+    <div class="row">
+      <aside class="col-md-3">
+        <a href="media/images/posters/sw-mando.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/sw-mando-450p.jpg" alt="The Mandalorian, poszter">
+        </a>
+      </aside>
+      <section class="col-md-9">
+        <h3>The Mandalorian</h3>
+        <p>Öt évvel A Jedi visszatér eseményei és a Galaktikus Birodalom bukása után kezdődik. Din Djarin, egy magányos mandalóri fejvadász a galaxis külsőbb részein tevékenykedik. A megmaradt birodalmi erők felbérelik, hogy visszaszerezze a gyermek Grogu-t, de ehelyett menekülni kezd, hogy megvédje a csecsemőt. Miközben Grogu és a fajtája újraegyesítését keresi, üldözőbe veszi őket Moff Gideon, aki ki akarja használni Grogu kapcsolatát az Erővel.</p>
+        <h4>The Book of Boba Fett</h4>
+        <p>A legendás fejvadásznak, Boba Fett-nek és a zsoldos Fennec Shand-nek a galaxis alvilágában kell eligazodnia, amikor visszatérnek a Tatooine homokjára, hogy igényt formáljanak az egykor Jabba the Hutt és bűnszövetkezete által uralt területre.</p>
+      </section>
+    </div>
+    <hr>
+    <div class="row">
+      <section class="col-md-9">
+        <h3>További animációs sorozatok</h3>
+        <h4>Star Wars The Bad Batch</h4>
+        <p>A történet egy különleges klónokból álló elit alakulatot követ a galaxison keresztül, ahogy különféle harcokba és kalandokba keverednek. A sorozat ott folytatódik, ahol a Klónok háborúja befejeződött.</p>
+        <h4>Star Wars: Rebels</h4>
+        <p>Amikor a galaxisban a félelem az úr, egy lázadás lobban lángra. Pont ekkor érkezik egy ifjú, Ezra. Amint megérkezik csodálni kezdi a harcot, és a lázadóknak drukkol, majd később belép a harcba. Amint Kanan, egy Jedi felfigyel rá, gyámsága alá veszi, ám ezzel a sith Inkvizítor is felfigyel rá.</p>
+        <h4>Star Wars: Resistance</h4>
+        <p>Kazuda Xiono egy fiatal és tehetséges pilóta. Poe Dameron egy titkos küldetéssel bízza meg, hogy kémkedjen az Első Rend ellen és annak fenyegető erejéről.</p>
+        <h4>Star Wars: Visions</h4>
+        <p>Egy animációs rövidfilmekből álló antológiasorozat, amely a Star Wars-t ünnepli a világ legjobb anime-alkotóinak szemszögéből. Ez a sorozat nem kánon.</p>
+      </section>
+      <aside class="col-md-3">
+        <a href="media/images/posters/sw-rebels.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/sw-rebels-450p.jpg" alt="Star Wars: Lázadók, poszter">
+        </a>
+      </aside>
+    </div>
+    <hr>
+    <div class="row">
+      <aside class="col-md-3">
+        <a href="media/images/posters/sw-kenobi.jpg" target="_blank">
+          <img class="poster" src="media/images/posters/small/sw-kenobi-450p.jpg" alt="Star Wars: Obi-Wan Kenobi, poszter">
+        </a>
+      </aside>
+      <section class="col-md-9">
+        <h3>Jövő sorozatok</h3>
+        <h4>Obi-Wan Kenobi</h4>
+        <p>A középpontban Obi-Wan Kenobi áll, 10 évvel a Klónháborúk vége után, ahol a legnagyobb vereségével szembesült: legjobb barátja és Jedi tanítványa, Anakin Skywalker bukásával, aki a gonosz Sith Darth Vader lett.</p>
+        <h4>Bejelentett sorozatok</h4>
+        <ul>
+          <li>Ahsoka</li>
+          <li>Andor</li>
+          <li>Rogue Squadron</li>
+          <li>The Acolyte</li>
+          <li>Lando</li>
+        </ul>
+        <p><a href="https://collider.com/upcoming-star-wars-disney-plus-shows/" target="_blank">További infó (cikk)</a></p>
+      </section>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container d-flex px-4 py-2">
+      <p class="d-inline-block w-50 m-0"><a href="https://starwars.com" target="_blank">StarWars.com</a></p>
+      <p class="text-end w-50 m-0">Készítette: Baldauf Márton</p>
+    </div>
+  </footer>
+
+  <script src="switch-css.js"></script>
+</body>
+
+</html>

projects/starwars/switch-css.js

@@ -0,0 +1,26 @@
+var link, mode;
+
+(function () {
+  'use strict';
+
+  document.addEventListener('DOMContentLoaded', function () {
+    link = document.querySelector('link[rel=stylesheet][href*="main.css"]');
+    mode = localStorage.getItem('css-mode');
+    if (mode == null) {
+      mode = 'main'
+      localStorage.setItem('css-mode', 'main');
+    }
+
+    if (mode == 'high-contrast') setMode();
+  });
+})();
+
+function switchMode() {
+  mode = mode == 'main' ? 'high-contrast' : 'main';
+  localStorage.setItem('css-mode', mode);
+  setMode();
+}
+
+function setMode() {
+  link.href = 'css/' + mode + '.css';
+}