commit f33a561839f22627036250856589ed08b6988456 Author: juju2143 Date: Mon Oct 16 15:08:01 2023 -0400 First commit diff --git a/bg.avif b/bg.avif new file mode 100644 index 0000000..23a5f85 Binary files /dev/null and b/bg.avif differ diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..ffba4f8 Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b7444f6 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Yuki's website + + +
+ +

Hi, I'm Yuki

+
Programmer, writer, artist, casual hacker, average nerd, probably not in this order but sometimes at the same time
+ + +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..50ff58d --- /dev/null +++ b/styles.css @@ -0,0 +1,138 @@ +body +{ + font-family: 'Shantell Sans', cursive; + background: url("bg.jpg") #306; + background-size: cover; + background-position: center; + background-attachment: fixed; + text-align: center; + @supports (background-image: url("bg.avif")) + { + background-image: url("bg.avif"); + } +} + +main +{ + background-color: rgba(255, 255, 255, 0.5); + color: black; + width: 960px; + margin: 16px auto; + border-radius: 1em; + padding: 0.5em; +} + +#logo +{ + background-color: transparent; + width: 256px; + height: 256px; + margin: auto; + margin-top: 6em; + margin-bottom: 4em; + perspective: 1000px; +} + +#logo-inner +{ + position: relative; + width: 100%; + height: 100%; + text-align: center; + vertical-align: middle; + transition: transform 0.8s; + transform-style: preserve-3d; +} + +#logo:hover #logo-inner +{ + transform: rotateY(-180deg); +} + +#logo-front, #logo-back +{ + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + font-family: "Rampart One", sans-serif; + background-color: white; + color: black; + border-radius: 50%; + box-shadow: 8px 8px 0px 2px black; + font-size: 160px; +} + +#logo-back +{ + background: url("yuki.png") white; + background-size: cover; + transform: rotateY(180deg); + @supports (background-image: url("yuki.avif")) + { + background-image: url("yuki.avif"); + } +} + +#logo-back video +{ + width: 100%; + height: 100%; + border-radius: 50%; +} + +h1 +{ + font-size: 3em; + font-weight: 600; + margin-bottom: 0; +} + +ul +{ + padding-left: 0; + margin-top: 3em; + margin-bottom: 3em; +} + +li +{ + width: 50%; + margin: 1em auto; + background-color: blueviolet; + list-style-type: none; + border-radius: 16px; + box-shadow: 6px 6px black; + transition: 0.2s; +} + +li:hover +{ + transform: translate(4px, 4px); + box-shadow: 2px 2px black; +} + +li a, li a:visited +{ + display: block; + text-decoration: none; + color: white; + width: 100%; + height: 100%; + padding: 0.5em 0; +} + +@media screen and (max-width: 992px) { + main + { + width: calc(100% - 32px); + } +} + +@media screen and (max-width: 600px) { + li + { + width: 100%; + } +} \ No newline at end of file diff --git a/yuki.avif b/yuki.avif new file mode 100644 index 0000000..dcbc02f Binary files /dev/null and b/yuki.avif differ diff --git a/yuki.png b/yuki.png new file mode 100644 index 0000000..166fe9a Binary files /dev/null and b/yuki.png differ