From 9ff15dd9f78cc095573f2776510ff18f8ea7faaf Mon Sep 17 00:00:00 2001 From: htom Date: Fri, 14 Nov 2025 17:30:19 +0100 Subject: [PATCH] ora 8 9 --- ora7/roxfort.css | 63 +++++++++++ ora7/roxfort.html | 61 +++++++++++ ora7/roxfort.js | 26 +++++ ora8/hamlet/hamlet.html | 101 +++++++++++++++++ ora8/hamlet/play.css | 115 ++++++++++++++++++++ ora8/hamlet/script.js | 13 +++ ora8/hamlet/style.css | 7 ++ ora8/webtechnologies/Web Technologies.html | 120 +++++++++++++++++++++ ora8/webtechnologies/script.js | 17 +++ ora8/webtechnologies/style.css | 14 +++ ora8/webtechnologies/web-technologies.css | 50 +++++++++ ora9/colors/color.css | 37 +++++++ ora9/colors/color.css.map | 1 + ora9/colors/color.scss | 48 +++++++++ ora9/colors/index.html | 22 ++++ ora9/sudoku/diagonal-sudoku.css | 28 +++++ ora9/sudoku/diagonal-sudoku.css.map | 1 + ora9/sudoku/diagonal-sudoku.scss | 16 +++ ora9/sudoku/index.html | 117 ++++++++++++++++++++ ora9/sudoku/sudoku.css | 24 +++++ ora9/sudoku/sudoku.css.map | 1 + ora9/sudoku/sudoku.scss | 26 +++++ ora9/transition/color-transition.css | 74 +++++++++++++ ora9/transition/color-transition.css.map | 1 + ora9/transition/color-transition.scss | 36 +++++++ ora9/transition/index.html | 25 +++++ 26 files changed, 1044 insertions(+) create mode 100644 ora7/roxfort.css create mode 100644 ora7/roxfort.html create mode 100644 ora7/roxfort.js create mode 100644 ora8/hamlet/hamlet.html create mode 100644 ora8/hamlet/play.css create mode 100644 ora8/hamlet/script.js create mode 100644 ora8/hamlet/style.css create mode 100644 ora8/webtechnologies/Web Technologies.html create mode 100644 ora8/webtechnologies/script.js create mode 100644 ora8/webtechnologies/style.css create mode 100644 ora8/webtechnologies/web-technologies.css create mode 100644 ora9/colors/color.css create mode 100644 ora9/colors/color.css.map create mode 100644 ora9/colors/color.scss create mode 100644 ora9/colors/index.html create mode 100644 ora9/sudoku/diagonal-sudoku.css create mode 100644 ora9/sudoku/diagonal-sudoku.css.map create mode 100644 ora9/sudoku/diagonal-sudoku.scss create mode 100644 ora9/sudoku/index.html create mode 100644 ora9/sudoku/sudoku.css create mode 100644 ora9/sudoku/sudoku.css.map create mode 100644 ora9/sudoku/sudoku.scss create mode 100644 ora9/transition/color-transition.css create mode 100644 ora9/transition/color-transition.css.map create mode 100644 ora9/transition/color-transition.scss create mode 100644 ora9/transition/index.html diff --git a/ora7/roxfort.css b/ora7/roxfort.css new file mode 100644 index 0000000..6858151 --- /dev/null +++ b/ora7/roxfort.css @@ -0,0 +1,63 @@ +body { + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +h1 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + text-shadow: 2px 2px 4px silver; +} + +form.fancy-form { + background-color: #f8faff; + border: medium solid indigo; + max-width: 50ch; + width: 100%; +} + +form.fancy-form div { + margin: 1em; +} + +form.fancy-form label:has(+:is(input, select, textarea)[required])::after { + color: red; + content: "*"; + vertical-align: super; +} + +form.fancy-form input[type=checkbox]:not(:checked)+fieldset.conditional { + display: none; +} + +form.fancy-form label { + display: block; + margin-bottom: 0.25em; +} + +form.fancy-form > div:has(button[type=submit]){ + text-align: center; +} + +form.fancy-form button[type=submit]{ + background-color: slateblue; + border: none; + border-radius: 0.5em; + color: white; + cursor: pointer; + padding: 0.5em 1.5em; + transition: background-color 0.3s ease; +} + +form.fancy-form button[type=submit]:hover{ + background-color: forestgreen; +} + +form.fancy-form input[type=email]:invalid{ + background-color: tomato; + color: white; +} + +form.fancy-form :focus{ + border-color: gold; + border-width: thick; + outline: none; +} \ No newline at end of file diff --git a/ora7/roxfort.html b/ora7/roxfort.html new file mode 100644 index 0000000..fdc9e66 --- /dev/null +++ b/ora7/roxfort.html @@ -0,0 +1,61 @@ + + + + + + Roxfort + + + + +

Roxforti regisztracios urlap urlap

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ Kisállat + + +
+
+
+ + +
+
+ + +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/ora7/roxfort.js b/ora7/roxfort.js new file mode 100644 index 0000000..5726beb --- /dev/null +++ b/ora7/roxfort.js @@ -0,0 +1,26 @@ +function calculateYearsSince(dateString) { + const date = new Date(dateString); + const diff = Date.now() - date.getTime(); + return new Date(diff).getUTCFullYear() - 1970; +} + +console.log(calculate2("2001-09-01")); + +const form = document.getElementById('hogwarts-form'); +form.dateofbirth.addEventListener("input", function(event){ + console.log(form.dateofbirth.value); + const age = calculateYearsSince(form.dateofbirth.value); + console.log(age); + + if(age >= 11){ + form.dateofbirth.setCustomValidity(''); + }else{ + form.dateofbirth.setCustomValidity('young'); + } +}) + +form.house.addEventListener('change', function (event){ + const houseColor = form.house.options[form.house.selectedIndex].dataset.colorPrimary; + console.log(houseColor); + document.body.style.backgroundColor = houseColor; +}) \ No newline at end of file diff --git a/ora8/hamlet/hamlet.html b/ora8/hamlet/hamlet.html new file mode 100644 index 0000000..73df1df --- /dev/null +++ b/ora8/hamlet/hamlet.html @@ -0,0 +1,101 @@ + + + + + William Shakespeare: The Tragedy of Hamlet, Prince of Denmark + + + + + + + + +
+
+

William Shakespeare

+

The Tragedy of Hamlet, Prince of Denmark

+
+
+ +
+
+

Act 1

+
+

+ Scene 5. Another part of the platform. +

+
+
Hamlet
+
O all you host of heaven! O earth! What else?
+
And shall I couple hell? O, fie! Hold, hold, my heart;
+
And you, my sinews, grow not instant old,
+
But bear me stiffly up. Remember thee!
+
Ay, thou poor ghost, while memory holds a seat
+
In this distracted globe. Remember thee!
+
Yea, from the table of my memory
+
I'll wipe away all trivial fond records,
+
All saws of books, all forms, all pressures past,
+
That youth and observation copied there;
+
And thy commandment all alone shall live
+
Within the book and volume of my brain,
+
Unmix'd with baser matter: yes, by heaven!
+
O most pernicious woman!
+
O villain, villain, smiling, damned villain!
+
My tables,—meet it is I set it down,
+
That one may smile, and smile, and be a villain;
+
At least I'm sure it may be so in Denmark:
+
Writing
+
So, uncle, there you are. Now to my word;
+
It is 'Adieu, adieu! remember me.'
+
I have sworn 't.
+
+
Enter Horatio and Marcellus
+
+
Horatio
+
Within My lord, my + lord,—
+
+
+
Marcellus
+
Within Lord + Hamlet,—
+
+
+
Horatio
+
Within Heaven secure him!
+
+
+
Hamlet
+
So be it!
+
+
+
Horatio
+
Within Hillo, ho, ho, my + lord!
+
+
+
Hamlet
+
Hillo, ho, ho, boy! come, bird, come.
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/ora8/hamlet/play.css b/ora8/hamlet/play.css new file mode 100644 index 0000000..e9d36d9 --- /dev/null +++ b/ora8/hamlet/play.css @@ -0,0 +1,115 @@ +body { + border: thin solid black; + font-family: "Palatino Linotype", Palatino, "Times New Roman", serif; + line-height: 1.5; + margin: 1em auto; + padding: 1em; + max-width: 80ch; +} + +header, h2, h3, section.scene > div.stagedir, footer { + text-align: center; +} + +header > hgroup { + font-variant: small-caps; + letter-spacing: 0.25em; +} + +header > hgroup > p.author { + font-size: x-large; +} + +nav#toc, section.act { + border-top: medium solid black; +} + +nav#toc a { + color: slateblue; + text-decoration: none; +} + +section.scene > h3 { + border: thin solid red; + padding: 0.5em; +} + +div.speaker { + font-weight: bold; + text-transform: uppercase; +} + +.stagedir { + color: gray; + font-style: italic; +} + +.stagedir::before { + content: "("; +} + +.stagedir::after { + content: ")"; +} + +div.speech, section.scene > div.stagedir { + padding: 1em; +} + +div.speaker > span.stagedir { + font-weight: normal; + text-transform: none; +} + +section.scene > div.speech:nth-of-type(odd) { + background-color: aliceblue; + border-top: medium solid slateblue; +} + +section.scene > div.speech:nth-of-type(even) { + border-top: medium solid silver; +} + +section.scene { + counter-reset: line-number; +} + +div.speech > div.line::after { + content: counter(line-number); + counter-increment: line-number; + float: right; +} + +div.line:hover, div.stagedir:hover, div.line:hover > span.stagedir { + background-color: crimson; + color: white; +} + +section.scene > h3 > a { + color: black; + text-decoration: none; +} + +section.scene > h3 > a:hover { + text-decoration: underline; +} + +section.scene > h3 > a:hover::before { + color: silver; + content: "#"; + display: inline-block; + margin-left: -1em; + width: 1em; +} + +section.scene > div:last-of-type:nth-of-type(even) { + border-bottom: medium solid slateblue; +} + +section.scene > div:last-of-type:nth-of-type(odd) { + border-bottom: medium solid silver; +} + +footer { + padding-top: 1em; +} \ No newline at end of file diff --git a/ora8/hamlet/script.js b/ora8/hamlet/script.js new file mode 100644 index 0000000..3082d4f --- /dev/null +++ b/ora8/hamlet/script.js @@ -0,0 +1,13 @@ +function toggleStageDirections(){ + console.log('button is clicked'); + document.querySelectorAll('.stagedir').forEach(stagedir => { + const isShown = getComputedStyle(stagedir).display !== 'none'; + if(isShown){ + stagedir.style.display = 'none'; + }else{ + stagedir.style.display = stagedir.tagName === 'DIV' ? 'block' : 'inline'; + } + }) +} + +document.getElementById("toggle-stagedir-button").addEventListener('click', toggleStageDirections); \ No newline at end of file diff --git a/ora8/hamlet/style.css b/ora8/hamlet/style.css new file mode 100644 index 0000000..84e145c --- /dev/null +++ b/ora8/hamlet/style.css @@ -0,0 +1,7 @@ +#toggle-stagedir-button{ + margin: 1em; + padding: 1em; + position: fixed; + right: 0; + top: 0; +} \ No newline at end of file diff --git a/ora8/webtechnologies/Web Technologies.html b/ora8/webtechnologies/Web Technologies.html new file mode 100644 index 0000000..19587e0 --- /dev/null +++ b/ora8/webtechnologies/Web Technologies.html @@ -0,0 +1,120 @@ + + + + + + + Web Technologies + + + + + +
+

Web Technologies

+

Last modified:

+
+ +
+ +
+

+ CSS +

+

Cascading Style Sheets (CSS) is a language for describing + the rendering of structured documents (such as HTML and XML) on a + variety of media.

+

Specifications

+ +

Sample Code

+ 
h1, h2, h3, h4, h5, h6 {
+    text-align: center;
+}
+
+table.summary > tbody > tr:nth-child(odd) > td {
+    background-color: lightgray;
+}
+
+
+
+

+ HTML +

+

HTML is the World Wide Web's core markup language.

+

Specifications

+ +

Sample Code

+ 
<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Hello, World!</title>
+        <meta charset="UTF-8">
+    </head>
+    <body>
+        <p>Hello, World!</p>
+    </body>
+</html>
+
+
+
+ + + + + \ No newline at end of file diff --git a/ora8/webtechnologies/script.js b/ora8/webtechnologies/script.js new file mode 100644 index 0000000..df8e37d --- /dev/null +++ b/ora8/webtechnologies/script.js @@ -0,0 +1,17 @@ +function wrapTextLinesInSpan(element){ + const lines = element.textContent.split('\n').filter(Boolean); + element.textContent = ''; + + for (let index = 0; index < lines.length; index++) { + const span = document.createElement('span'); + span.className = 'line'; + span.textContent = lines[index]; + element.appendChild(span); + + if(index < lines.length - 1){ + element.appendChild(document.createTextNode('\n')); + } + } +} + +document.querySelectorAll('pre.number-lines').forEach(wrapTextLinesInSpan); \ No newline at end of file diff --git a/ora8/webtechnologies/style.css b/ora8/webtechnologies/style.css new file mode 100644 index 0000000..7cc35c2 --- /dev/null +++ b/ora8/webtechnologies/style.css @@ -0,0 +1,14 @@ +pre.number-lines{ + counter-reset: line-number; +} + +pre.number-lines > span.line::before{ + border-right: 0.5em solid indigo; + content: counter(line-number); + counter-increment: line-number; + display: inline-block; + margin-right: 0.5em; + padding-right: 0.5em; + text-align: right; + width: 2ch; +} \ No newline at end of file diff --git a/ora8/webtechnologies/web-technologies.css b/ora8/webtechnologies/web-technologies.css new file mode 100644 index 0000000..16ddeb8 --- /dev/null +++ b/ora8/webtechnologies/web-technologies.css @@ -0,0 +1,50 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); + +body { + background-color: whitesmoke; + font-family: "Noto Sans", sans-serif; + margin: 0; +} + +header, nav#toc, article, footer { + background-color: white; + border: thin solid gray; + border-radius: 0.25em; + box-shadow: 0 0 0.25em gray; + margin: 1em; + padding: 1em; +} + +ul:is(.toc, .specs) a:hover { + background-color: indigo; + color: white; +} + +pre { + background-color: aliceblue; + border-left: 0.5em solid indigo; + font-family: "Noto Sans Mono", monospace; + overflow-x: auto; + padding: 0.5em; +} + +footer { + text-align: center; +} + +p.legal img { + vertical-align: middle; +} + +a:is(:link, :visited) { + color: indigo; +} + +h2 > a:is(:link, :visited) { + color: black; + text-decoration: none; +} + +h2 > a:hover { + text-decoration: underline; +} diff --git a/ora9/colors/color.css b/ora9/colors/color.css new file mode 100644 index 0000000..cff66c1 --- /dev/null +++ b/ora9/colors/color.css @@ -0,0 +1,37 @@ +body { + margin: 0; +} + +div.columns { + display: flex; + height: 100 vh; +} +div.columns > div { + display: flex; + flex: 1; + align-items: center; + justify-content: center; +} +div.columns > div::before { + content: attr(id); +} + +#base { + background-color: plum; +} + +#lighter1 { + background-color: rgb(234.4418604651, 197.5581395349, 231.3682170543); +} + +#lighter2 { + background-color: rgb(247.8837209302, 235.1162790698, 245.7558139535); +} + +#darker1 { + background-color: rgb(200.4651162791, 122.4418604651, 207.5581395349); +} + +#darker2 { + background-color: rgb(175.9108527132, 84.8837209302, 194.1162790698); +}/*# sourceMappingURL=color.css.map */ \ No newline at end of file diff --git a/ora9/colors/color.css.map b/ora9/colors/color.css.map new file mode 100644 index 0000000..8c373c5 --- /dev/null +++ b/ora9/colors/color.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["color.scss","color.css"],"names":[],"mappings":"AAEA;EACI,SAAA;ACDJ;;ADIA;EACI,aAAA;EACA,cAAA;ACDJ;ADGI;EACI,aAAA;EACA,OAAA;EACA,mBAAA;EACA,uBAAA;ACDR;ADII;EACI,iBAAA;ACFR;;ADaA;EACI,sBARG;ACFP;;ADaA;EACI,qEAXO;ACCX;;ADaA;EACI,qEAdO;ACIX;;ADaA;EACI,qEAjBM;ACOV;;ADaA;EACI,oEApBM;ACUV","file":"color.css"} \ No newline at end of file diff --git a/ora9/colors/color.scss b/ora9/colors/color.scss new file mode 100644 index 0000000..853b742 --- /dev/null +++ b/ora9/colors/color.scss @@ -0,0 +1,48 @@ +@use 'sass:color'; + +body{ + margin: 0; +} + +div.columns{ + display: flex; + height: 100 vh; + + & > div{ + display:flex; + flex: 1; + align-items: center; + justify-content: center; + } + + & > div::before{ + content: attr(id); + } +} + +$base: plum; +$lighter1: color.adjust($base, $hue: 5, $lightness: 10%); +$lighter2: color.adjust($base, $hue: 10, $lightness: 20%); +$darker1: color.adjust($base, $hue: -5, $lightness: -10%); +$darker2: color.adjust($base, $hue: -10, $lightness: -20%); + + +#base { + background-color: $base; +} + +#lighter1 { + background-color: $lighter1; +} + +#lighter2{ + background-color: $lighter2; +} + +#darker1 { + background-color: $darker1; +} + +#darker2{ + background-color: $darker2; +} diff --git a/ora9/colors/index.html b/ora9/colors/index.html new file mode 100644 index 0000000..da906fd --- /dev/null +++ b/ora9/colors/index.html @@ -0,0 +1,22 @@ + + + + + + + Sass Color Manipulation Functions + + + + +
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/ora9/sudoku/diagonal-sudoku.css b/ora9/sudoku/diagonal-sudoku.css new file mode 100644 index 0000000..1fac0e3 --- /dev/null +++ b/ora9/sudoku/diagonal-sudoku.css @@ -0,0 +1,28 @@ +body { + display: flex; + height: 100vh; + margin: 0; +} + +table.sudoku { + border: medium solid black; + border-collapse: collapse; + margin: auto; +} +table.sudoku td { + border: thin solid lightgray; + height: 3rem; + width: 3rem; + vertical-align: middle; + text-align: center; +} +table.sudoku td:nth-child(3n) { + border-right: medium solid black; +} +table.sudoku tr:nth-child(3n) { + border-bottom: medium solid black; +} + +table.sudoku tr:nth-child(9) > td:nth-child(1), table.sudoku tr:nth-child(9) > td:nth-child(9), table.sudoku tr:nth-child(8) > td:nth-child(2), table.sudoku tr:nth-child(8) > td:nth-child(8), table.sudoku tr:nth-child(7) > td:nth-child(3), table.sudoku tr:nth-child(7) > td:nth-child(7), table.sudoku tr:nth-child(6) > td:nth-child(4), table.sudoku tr:nth-child(6) > td:nth-child(6), table.sudoku tr:nth-child(5) > td:nth-child(5), table.sudoku tr:nth-child(4) > td:nth-child(6), table.sudoku tr:nth-child(4) > td:nth-child(4), table.sudoku tr:nth-child(3) > td:nth-child(7), table.sudoku tr:nth-child(3) > td:nth-child(3), table.sudoku tr:nth-child(2) > td:nth-child(8), table.sudoku tr:nth-child(2) > td:nth-child(2), table.sudoku tr:nth-child(1) > td:nth-child(9), table.sudoku tr:nth-child(1) > td:nth-child(1) { + background-color: gold; +}/*# sourceMappingURL=diagonal-sudoku.css.map */ \ No newline at end of file diff --git a/ora9/sudoku/diagonal-sudoku.css.map b/ora9/sudoku/diagonal-sudoku.css.map new file mode 100644 index 0000000..8554883 --- /dev/null +++ b/ora9/sudoku/diagonal-sudoku.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["sudoku.scss","diagonal-sudoku.css","diagonal-sudoku.scss"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,aAAA;EACA,SAAA;ACCJ;;ADEA;EACI,0BAAA;EACA,yBAAA;EACA,YAAA;ACCJ;ADCI;EACI,4BAAA;EACA,YAAA;EACA,WAAA;EACA,sBAAA;EACA,kBAAA;ACCR;ADEI;EACI,gCAAA;ACAR;ADEI;EACI,iCAAA;ACAR;;ACrBA;EACI,sBAAA;ADwBJ","file":"diagonal-sudoku.css"} \ No newline at end of file diff --git a/ora9/sudoku/diagonal-sudoku.scss b/ora9/sudoku/diagonal-sudoku.scss new file mode 100644 index 0000000..888f24b --- /dev/null +++ b/ora9/sudoku/diagonal-sudoku.scss @@ -0,0 +1,16 @@ +@use "sudoku"; + +%diagonal{ + background-color: gold; +} + +table.sudoku{ + @for $i from 1 through 9{ + tr:nth-child(#{$i}) > td:nth-child(#{$i}){ + @extend %diagonal; + } + tr:nth-child(#{$i}) > td:nth-child(#{10 - $i}){ + @extend %diagonal; + } + } +} \ No newline at end of file diff --git a/ora9/sudoku/index.html b/ora9/sudoku/index.html new file mode 100644 index 0000000..bc5fe26 --- /dev/null +++ b/ora9/sudoku/index.html @@ -0,0 +1,117 @@ + + + + + + + Diagonal Sudoku + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
15
82913
74
278
485
39
16239
65
+ + + diff --git a/ora9/sudoku/sudoku.css b/ora9/sudoku/sudoku.css new file mode 100644 index 0000000..9e03fd5 --- /dev/null +++ b/ora9/sudoku/sudoku.css @@ -0,0 +1,24 @@ +body { + display: flex; + height: 100vh; + margin: 0; +} + +table.sudoku { + border: medium solid black; + border-collapse: collapse; + margin: auto; +} +table.sudoku td { + border: thin solid lightgray; + height: 3rem; + width: 3rem; + vertical-align: middle; + text-align: center; +} +table.sudoku td:nth-child(3n) { + border-right: medium solid black; +} +table.sudoku tr:nth-child(3n) { + border-bottom: medium solid black; +}/*# sourceMappingURL=sudoku.css.map */ \ No newline at end of file diff --git a/ora9/sudoku/sudoku.css.map b/ora9/sudoku/sudoku.css.map new file mode 100644 index 0000000..717ca5f --- /dev/null +++ b/ora9/sudoku/sudoku.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["sudoku.scss","sudoku.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,aAAA;EACA,SAAA;ACCJ;;ADEA;EACI,0BAAA;EACA,yBAAA;EACA,YAAA;ACCJ;ADCI;EACI,4BAAA;EACA,YAAA;EACA,WAAA;EACA,sBAAA;EACA,kBAAA;ACCR;ADEI;EACI,gCAAA;ACAR;ADEI;EACI,iCAAA;ACAR","file":"sudoku.css"} \ No newline at end of file diff --git a/ora9/sudoku/sudoku.scss b/ora9/sudoku/sudoku.scss new file mode 100644 index 0000000..eb8b728 --- /dev/null +++ b/ora9/sudoku/sudoku.scss @@ -0,0 +1,26 @@ +body { + display: flex; + height: 100vh; + margin: 0; +} + +table.sudoku{ + border: medium solid black; + border-collapse: collapse; + margin: auto; + + td{ + border: thin solid lightgray; + height: 3rem; + width: 3rem; + vertical-align: middle; + text-align: center; + } + + td:nth-child(3n){ + border-right: medium solid black; + } + tr:nth-child(3n){ + border-bottom: medium solid black; + } +} \ No newline at end of file diff --git a/ora9/transition/color-transition.css b/ora9/transition/color-transition.css new file mode 100644 index 0000000..268dbf3 --- /dev/null +++ b/ora9/transition/color-transition.css @@ -0,0 +1,74 @@ +body { + margin: 0; +} + +div.columns { + display: flex; + height: 100vh; +} +div.columns > div { + display: flex; + flex: 1; + align-items: center; + justify-content: center; +} +div.columns > div:nth-child(1) { + background-color: pink; +} +div.columns > div:nth-child(1)::before { + content: "pink"; +} +div.columns > div:nth-child(2) { + background-color: #ffdfc0; +} +div.columns > div:nth-child(2)::before { + content: "#ffdfc0"; +} +div.columns > div:nth-child(3) { + background-color: #f5ffc0; +} +div.columns > div:nth-child(3)::before { + content: "#f5ffc0"; +} +div.columns > div:nth-child(4) { + background-color: #cbffc0; +} +div.columns > div:nth-child(4)::before { + content: "#cbffc0"; +} +div.columns > div:nth-child(5) { + background-color: #c0ffdf; +} +div.columns > div:nth-child(5)::before { + content: "#c0ffdf"; +} +div.columns > div:nth-child(6) { + background-color: #c0f5ff; +} +div.columns > div:nth-child(6)::before { + content: "#c0f5ff"; +} +div.columns > div:nth-child(7) { + background-color: #c0cbff; +} +div.columns > div:nth-child(7)::before { + content: "#c0cbff"; +} +div.columns > div:nth-child(8) { + background-color: #dfc0ff; +} +div.columns > div:nth-child(8)::before { + content: "#dfc0ff"; +} +div.columns > div:nth-child(9) { + background-color: #ffc0f5; +} +div.columns > div:nth-child(9)::before { + content: "#ffc0f5"; +} +div.columns > div:nth-child(10) { + background-color: pink; +} +div.columns > div:nth-child(10)::before { + content: "pink"; +}/*# sourceMappingURL=color-transition.css.map */ \ No newline at end of file diff --git a/ora9/transition/color-transition.css.map b/ora9/transition/color-transition.css.map new file mode 100644 index 0000000..a10c606 --- /dev/null +++ b/ora9/transition/color-transition.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["color-transition.scss","color-transition.css"],"names":[],"mappings":"AAKA;EACI,SAAA;ACJJ;;ADOA;EACI,aAAA;EACA,aAAA;ACJJ;ADMI;EACI,aAAA;EACA,OAAA;EACA,mBAAA;EACA,uBAAA;ACJR;ADWY;EACI,sBAHI;ACNpB;ADYY;EACI,eAAA;ACVhB;ADKY;EACI,yBAHI;ACApB;ADMY;EACI,kBAAA;ACJhB;ADDY;EACI,yBAHI;ACMpB;ADAY;EACI,kBAAA;ACEhB;ADPY;EACI,yBAHI;ACYpB;ADNY;EACI,kBAAA;ACQhB;ADbY;EACI,yBAHI;ACkBpB;ADZY;EACI,kBAAA;ACchB;ADnBY;EACI,yBAHI;ACwBpB;ADlBY;EACI,kBAAA;ACoBhB;ADzBY;EACI,yBAHI;AC8BpB;ADxBY;EACI,kBAAA;AC0BhB;AD/BY;EACI,yBAHI;ACoCpB;AD9BY;EACI,kBAAA;ACgChB;ADrCY;EACI,yBAHI;AC0CpB;ADpCY;EACI,kBAAA;ACsChB;AD3CY;EACI,sBAHI;ACgDpB;AD1CY;EACI,eAAA;AC4ChB","file":"color-transition.css"} \ No newline at end of file diff --git a/ora9/transition/color-transition.scss b/ora9/transition/color-transition.scss new file mode 100644 index 0000000..94dd379 --- /dev/null +++ b/ora9/transition/color-transition.scss @@ -0,0 +1,36 @@ +@use 'sass:color'; +@use 'sass:math'; + +$base-color: pink; + +body{ + margin: 0 +} + +div.columns{ + display: flex; + height: 100vh; + + & > div{ + display: flex; + flex: 1; + align-items: center; + justify-content: center; + } + + @mixin color-columns($n){ + @for $i from 1 through $n{ + $color: color.adjust($base-color, $hue: ($i - 1) * math.div(360, $n - 1)); + + & > div:nth-child(#{$i}){ + background-color: $color; + } + + & > div:nth-child(#{$i})::before{ + content: "#{$color}"; + } + } + } + + @include color-columns(10); +} \ No newline at end of file diff --git a/ora9/transition/index.html b/ora9/transition/index.html new file mode 100644 index 0000000..1b11128 --- /dev/null +++ b/ora9/transition/index.html @@ -0,0 +1,25 @@ + + + + + + Color Transition + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +