Мобильная версияЯ пытался сделать минимальный Пример, хотя, когда я беру код, чтобы минимизировать его, он работает, но я понятия не имею, что я удаляю, чтобы заставить его работать, и как сохранить необходимые мне элементы, позволяя анимации работать правильно, это анимация ссылок I 'M Использование, для справки < /p>
body {
background: url(
);background-size: cover;
color: gray;
font-family: "Freckle Face", serif;
letter-spacing: 1.5px;
}
figcaption {
color: gray;
font-size: 40px;
font: italic bold large Times New Roman;
margin-right: 350px;
margin-bottom: -30px;
font-size: 20px;
-webkit-text-stroke: 1px black;
}
#main {
width: 700px;
padding: 50px;
margin-top: 10px;
border-radius: 25px;
background: url(
);}
h1 {
margin-top: 75px;
margin-bottom: -20px;
font-size: 50px;
font-family: "Art Dystopia";
color: white;
text-align: center;
display:block;
width:200px;
}
h2 {
font-size: 40px;
font-family: "Art Dystopia";
color: white
}
p {
font-size: 20px;
}
.paragraph1 {
-webkit-text-stroke: 1px black;
text-align: right;
margin-bottom:20px;
}
.paragraph2 {
text-align:center;
-webkit-text-stroke: 1px black;
margin-bottom: -10px;
}
.momiji {
margin-left: -700px;
margin-right: auto;
margin-bottom: -20px;
margin-top: -120px;
}
.divider {
margin-left: auto;
margin-right: auto;
margin-bottom: -15px;
margin-top: 30px;
width: 400px;
}
.updates {
color: black;
}
#directorybox
{
height:600px;
width: 300px;
border: 1px solid white;
background: url(
);color: white;
padding: 20px;
margin-left: 35px;
text-align: center;
float: left;
position: absolute;
margin-top: 70px;
margin-right: 30px;
top: 0;
bottom: 0;
z-index: -1;
}
.wolf
{
margin-left:230px;
margin-top:-280px;
}
.yakumo {
margin-top:-20px;
}
#directorytitle
{
font-size: 40px;
font-family: "Art Dystopia";
color: white;
float: left;
position: absolute;
top: 0;
bottom: 0;
margin-top: 40px;
font-weight: bold;
}
marquee {
margin-top: 60px;
}
.chainz {
background: url('https://files.catbox.moe/knn8jj.webp') no-repeat;
background-size: 100%!important;
position: fixed;
right: -50px;
top: -30px;
height: 280px;
width: 250px;
z-index: 1000;
opacity: 1;
}
@media (max-width: 600px) {
.chainz{display:none;}
}
a {
border-bottom: 1px solid #453886;
color: #453886;
padding-bottom: .25em;
text-decoration: none;
}
a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: bottom;
background-repeat: repeat-x;
background-size: 20%;
border-bottom: 0;
padding-bottom: .3em;
text-decoration: none;
}
#ongaku {
position:fixed;
bottom:15px;
left:15px;
width:35px;
height:35px;
z-index:9999;
border:4px double #000; /*Border Colour*/
background-color:#fff; /*Music Tab Background Colour*/
border-radius:30px;
opacity:.6;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#gaku {
width:24px;
height:24px;
margin-top:3px;
margin-left:3px;
overflow:hidden;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#kero {
height:26px;
}
#kero img {
margin-right:10px;
margin-left:3px;
margin-top:3px;
}
#kero embed {
margin-top:-5px;
}
#kero embed, #kero {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#ongaku:hover {
width:80px;
}
#ongaku:hover #gaku {
width:74px;
}
#ongaku:hover #kero {
margin-left:-50px;
}
.playy, .pausee {
margin-left:7px;
margin-top:4px;
position:relative;
left:20px;
font-size:15px;
color:#FEE6ED; /* play & pause buttons color */
cursor:pointer;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}
.pausee {display:none;}
►
♪
TOMBROT
welcome to the website of...
hi there, welcome to the internet mausoleum.
it may be cold and dark, but i hope you are able to enjoy your stay nonetheless.
here on this website you will find the insane ramblings of an unsocialized wolfboy with too much free time. just kidding ... i think.
i consider myself to be a pretty secluded person, but i need my thoughts to go somewhere, and i'd like to find some cool people while i'm at it. so feel free to take a look around, i don't bite.
P.S., the music that plays on this website is thorns by algae bloom.
also, this website is for people aged 18 and above only.
UPDATES
12/17/24: finished homepage
this is a scrollbox, by the way. but i have no extra text to put here, for now... what a shame.
DIRECTORY
webmaster
blog
media
characters + worldbuilding
to-do
guestbook
Подробнее здесь: https://stackoverflow.com/questions/794 ... ot-working
