frutiger aero~
Mood: Excited
// second container
about me
name
and i go by pronouns!
age years of age :3 welcome to my frutiger aero themed site
// third container
1 2 3
4 5 6
7 8 9
* 0 #
// tabs
Guest User (02:38)
text goes here
Name (02:42)
text goes here (add pixels if u would like, if not delete the following line)
Guest User (02:45)
text goes here
Name (02:59)
text goes here (add pixels if u would like, if not delete the following line)
Guest User (03:01)
text goes here
// blinkie marquee
// copy and paste this after the music player (before /div, /body, and /html) // this is javascript for the tabs and marquee elements // important for mobile viewing // import 7 css styling // scrollbar ::-webkit-scrollbar { width: 16px } ::-webkit-scrollbar-corner { background: #eee } ::-webkit-scrollbar-track:vertical { background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%); } ::-webkit-scrollbar-thumb { border: 1.5px solid #888; border-radius: 3px; box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff; background-color: #eee; } ::-webkit-scrollbar-thumb:vertical { background: url("https://dl.dropbox.com/s/9a29qbkza3gmgl7/scroll1.png"), linear-gradient(90deg, #eee 45%, #ddd 0, #bbb); background-repeat: no-repeat; background-size: 65% auto, cover; background-position: center; } ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement { display: block } ::-webkit-scrollbar-button:vertical { height: 15px } ::-webkit-scrollbar-button:vertical:start:decrement { background: white; background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%); background-repeat: no-repeat; background-position: center; -moz-background-size: 100% auto, cover; -webkit-background-size: 100% auto, cover; -o-background-size: 100% auto, cover; background-size: 100% auto, cover; background-position: center; border-radius: 0 3px 0 0; } ::-webkit-scrollbar-button:vertical:start:increment { display: none; } ::-webkit-scrollbar-button:vertical:end:decrement { display: none; } ::-webkit-scrollbar-button:vertical:end:increment { background: white; background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%); background-repeat: no-repeat; background-position: center; -moz-background-size: 100% auto, cover; -webkit-background-size: 100% auto, cover; -o-background-size: 100% auto, cover; background-size: 100% auto, cover; background-position: center; border-radius: 0 0 3px 0; } // fonts @font-face { font-family: MS San Serif; src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/MS%20Sans%20Serif.ttf); } @font-face { font-family: DigiBop; src: url(https://dl.dropbox.com/s/8maabpvuycdrlai/DigiBop-Regular.ttf); } @font-face { font-family:'kiwi'; src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf); } // body (bg can be color or image) /* background: #249d9f; */ overflow: hidden; font-family: MS San Serif; background-image: url('IMG LINK HERE'); background-size: cover; // container margin: auto; width: 650px; height: 600px; position: relative; top: 45px; // one (container with pixel, frutiger aero text, and icon) background: #CCFF7C; background: linear-gradient(180deg, rgba(204, 255, 124, 1) 0%, rgba(255, 255, 255, 1) 50%); border: 1px solid black; border-radius: 5px; width: 190px; height: 95px; padding: 5px; font-size: 1.125em; // oneone (positioning for "mood" text + the pixels next to and below the text) position: absolute; top: 2.5em; left: 60px; // two margin-top: 10px; background: white; border: 1px solid black; border-radius: 5px; padding: 5px; width: 190px; height: 290px; // twotwo (container inside "two" - with the blue drop shadow) background: #01f1f1; width: 160px; height: 235px; border-radius: 5px; padding: 15px; margin-top: 1px; margin-left: 1px; margin-bottom: 2.75px; box-shadow: 0 0 8px 8px white inset; // hello (container inside "twotwo" with the "info text") background: white; width: 145px; height: 195px; padding: 5px; margin-top: 5px; margin-left: 1px; margin-bottom: 5px; border: 2px inset #01f1f1; box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 30%), inset -13px 0 6px -10px rgb(66 66 66 / 30%), inset 0 13px 6px -10px #f0f0f0, inset 0 0 0 -10px rgb(66 66 66 / 30%); overflow-y: scroll; font-size: 1.125em; line-height: 1.375em; // age (text that makes the "20" (my age) have a different style) font-family:'kiwi'; font-size: 1.375em; color: white; font-weight:bold; filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black) drop-shadow(0px 1px #9fe11d) drop-shadow(0 -1px #9fe11d) drop-shadow(1px 0 #9fe11d) drop-shadow(-1px 0 #9fe11d); // three margin-top: 10px; background: #FFF; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(0, 60, 140, 1) 100%); border: 1px solid black; border-radius: 5px; padding: 5px; width: 190px; height: 142px; // phone (container inside "three") box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 30%), inset -13px 0 6px -10px rgb(66 66 66 / 30%), inset 0 13px 6px -10px #f0f0f0, inset 0 0 0 -10px rgb(66 66 66 / 30%); background: white; border: 1px solid black; width: 175px; height: 127px; padding: 5px; margin-top: 2px; margin-left: 2px; // light (buttons with numbers) background: linear-gradient(to bottom, #f2f2f2, #dcdcdc); border: 1px solid #a9a9a9; border-radius: 2px; box-shadow: inset 0 1px #ffffff, inset 0 -1px #cccccc; font-family: MS San Serif; font-size: 1.125em; color: black; display: inline-block; width: 22px; height: 22px; padding-top: 5px; padding-left: 12px; margin-top: 2px; // dark (buttons with * and #) background: black; border: 1px solid #808080; border-radius: 2px; font-family: MS San Serif; font-size: 1.125em; color: white; display: inline-block; width: 22px; height: 22px; padding-top: 5px; padding-left: 12px; margin-top: 2px; box-shadow: 0 0 8px 8px white inset; // icon (positioning for the images on the side of buttons) width: 45px; height: 120px; position: absolute; left: 131px; top: 27.75em; // main (container with tabs on the right) width: 435px; height: 400px; position: absolute; left: 38em; top: 3.375em; background: white; border: 1px solid black; border-radius: 5px; // just copy and paste this (css to make the 7.css behave how we want) .window { box-shadow: none !important; border: none !important; border-radius: 5px !important; } .tabs { width: 425px; margin-left: 5px; margin-top: 5px; } .tabs [role="tabpanel"] { height: 250px; padding: 0px !important; overflow-y: scroll; } [role="tab"]:nth-of-type(2)[aria-selected="false"], [role="tab"]:nth-of-type(3)[aria-selected="false"] { border-left: none; } [role="tab"]:first-of-type { margin-left: -3px !important; padding-left: -3px !important; } // gray (gray bg of "guest" text) width: max; background: #e1e1e1; padding: 5px; line-height: 1.25em; // guest (blue text) color: #0078c8; // white (white bg of "Lindley" text) width: 397px; background: white; padding: 5px; line-height: 1.25em; // name (orange text) color: #ed7014; // just copy and paste this (makes the blinkies marquee correctly) .buttons-n-blinkers { margin-top: 10px; margin-left: 10px; overflow: hidden; position: relative; width: 415px; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .buttons-n-blinkers > div { animation: marquee 10s linear infinite; animation-play-state: paused; animation-delay: -5s; /* This MUST be -duration/2 */ width: 100%; min-width: fit-content; text-wrap: nowrap; } .buttons-n-blinkers > div.follower { position: absolute; top: 0; animation-delay: 0s; } .buttons-n-blinkers > div.play { animation-play-state: running; } .buttons-n-blinkers:hover > div.play { animation-play-state: paused; }