From 6de116ccb543b7599785ef07ea5854c13580e1b8 Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sun, 30 Oct 2022 13:09:41 +0000 Subject: [PATCH] =?UTF-8?q?first=20commit!=20=F0=9F=8C=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 20 ++++++++++++++++++++ index.html | 5 +++++ pride-triangle.css | 27 +++++++++++++++++++++++++++ pridetriangle.svg | 13 +++++++++++++ 4 files changed, 65 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 pride-triangle.css create mode 100644 pridetriangle.svg diff --git a/README.md b/README.md new file mode 100644 index 0000000..72496ae --- /dev/null +++ b/README.md @@ -0,0 +1,20 @@ +# progressive pride flag! 🌈 +## made with ❤ by mellodoot! + +a lovely little pride flag made in vector, and optimised to be nice and lightweight! + +it tucks into the top-left or top-right corner of any website you drop it on, and you're free to link it to whichever lgbt-supporting site you like :) + +![progressive pride flag](pridetriangle.svg) + +this flag is currently in use over at my own website, [mellodoot.com](https://mellodoot.com)! feel free to check it out if you'd like to see it in action! + +### how do I put this in the top-right of my website? +simple! just add `right` as an attribute to the surrounding `` tag! the css stylesheet will handle the rest :) + +**example:** +```html + +``` + +have fun spreading the gay! 🌈 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c11ef5f --- /dev/null +++ b/index.html @@ -0,0 +1,5 @@ + + + + Progressive Pride Flag + \ No newline at end of file diff --git a/pride-triangle.css b/pride-triangle.css new file mode 100644 index 0000000..94a1164 --- /dev/null +++ b/pride-triangle.css @@ -0,0 +1,27 @@ +#pride-triangle img { + position: fixed; + top: 0; + left: 0; + width: 120px; + transform-origin: 0% 0%; + transition: transform .5s cubic-bezier(.32,1.63,.41,1.01); + z-index: 100; +} +#pride-triangle[right] img { + left: initial; + right: -120px; + rotate: 90deg; +} +#pride-triangle img:hover { + transform: scale(110%); +} +#pride-triangle img:active { + transform: scale(90%); +} + +@media only screen and (max-width: 720px) { + #pride-triangle img { + width: 6rem; + right: -6rem; + } +} \ No newline at end of file diff --git a/pridetriangle.svg b/pridetriangle.svg new file mode 100644 index 0000000..94cb217 --- /dev/null +++ b/pridetriangle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file