Forum:
Sooooo this is my first time working with code and creating such an in depth and complicated profile and somewhere along the way I fudged up the external links section (spotify link will not show up and I can't figure out how to make the text box transparent like my comments box) and the background image behind my contact box has disappeared. Again, my frankenstein mess of a layout is super complicated I'm sure, but if someone is willing to help me I would really, really appreciate it! If you find other errors along the way, please let me know!
<style> /*Loading Screen*/
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://i.pinimg.com/originals/2a/1a/8f/2a1a8f6f45515dfc4c5d0a06d8e21fe3.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 1s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
<style> /*Floating Main*/
main .left{
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 7px); }
100% { transform: translate(0, -0px); }
}
}
</style>
<style>
main .right{
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 7px); }
100% { transform: translate(0, -0px); }
}
}
</style>
<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol400.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/12/22/christmas-blue-star.html" target="_blank" title="Christmas Blue Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Christmas Blue Star" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>
.logo {
content:url("https://i.ibb.co/MPGgMcz/winlive.png"); width: auto;
}
/*Layout Settings*/
html:before {
animation: grain 8s steps(10) infinite;
background-image: url('https://i.pinimg.com/originals/13/9d/3b/139d3b5a1eb9a8aaa493f5ae7effefea.gif');
content: "";
height: 300%;
left: -50%;
opacity: 1;
position: fixed;
top: -110%;
width: 300%;
pointer-events:none;
} /*OVERLAY*/
body
{background-image: url(https://i.pinimg.com/736x/46/a9/b9/46a9b9441630910a0b1db5223bb591ce.jpg); no-repeat fixed; background-size:cover;
}
main {
background: url(https://i.pinimg.com/736x/d6/03/e8/d603e8a1fe8ff98028bda083d38a96b3.jpg);
background-size: 100%;
}
footer {
height: 130px;
background-image: url(https://64.media.tumblr.com/14719c4a4e093d817eeea9bc193465a3/01f1eef7fd1be4dd-20/s1280x1920/c8067693d6f4c3b9534244942c9aa6d1b086eb59.jpg);
background-position: centre !important;
background-size: cover;
}
.profile-pic img {
border: solid white 1px;
border-radius: 180px;
}
.profile-pic img:hover{
animation: rotation 0.3s infinite linear;
/*makes your pfp spin when you hover*/
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.online{
content: url(https://64.media.tumblr.com/a17777c7d3769a9c66af3348e19e59f6/ef451eebd7108185-1e/s100x200/13f66ae3271d3db0a59f821d55f4470eecd13421.gifv);
}
.mood p, .profile .url-info {
font-size: 16px;
font-family: 'Ficus', sans-serif;
color: white;
}
.mood b, .profile .url-info b{
font-weight: normal;
font-family: 'Ficus', sans-serif;
font-size: 0.875em;
}
.general-about .profile-pic img {
height: 100px;
width: 100px;
}
.general-about .details p {
color: white;
}
h1 {
margin: 0;
color: white;
}
h4 {
margin: 0;
color: white;
}
/*Profile Settings/
.details-table td {
background-color: transparent;
}
.details-table td p {
font-size: 14px;
font-family: 'Ficus', sans-serif;
color: #d2f0fa;
}
.details-table td:first-child {
background: linear-gradient(lightblue, darkblue 20px);
text-align: center;
text-shadow: white 0px 1px 2px;
width: 30%;
box-shadow: #ffffffab 0px 1px 2px 2px inset;
color: #fcfcfc;
font-family: 'Ficus', sans-serif;
font-size: 15px;
font-weight: bold;
}
.profile .contact .heading h4, .profile .table-section h4 {
font-weight: normal;
}
.profile .contact, .profile .table-section, .profile .url-info {
border: 0;
}
.profile .contact .inner, .profile .table-section .inner {
background: url(https://i.pinimg.com/736x/22/1a/1a/221a1aa5b9a548bb3e5b03b16dd400ff.jpg);
background-size: 100%;
border: lightblue 1px solid;
}
/* Link Settings */
.mood a, .inner a, .friends a {
color: #d2f0fa;
font-weight: normal;
font-size: 14px;
font-family: 'Ficus', sans-serif;
}
.mood:after {
content: "";
white-space: pre-wrap;
display: block;
height: 50px;
background-image: url(https://64.media.tumblr.com/d8c473074377755817dc99dbbbbe5fe9/aa6ad8b984475c27-57/s250x400/687a59b21f815f0c39a5fa3dace5836c11a44306.gifv);
background-repeat: no-repeat;
background-position-x: center;
background-size: 300px;
} /*Web-aholic blinkie*/
.blog-preview a {
color: #d2f0fa;
font-weight: normal;
font-size: 13px;
font-family: 'Ficus', sans-serif;
}
.blog-preview {
color: white;
}
/*Contact Settings*/
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content: "🌐"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: "🌐"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: "🌐"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: "🌐"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: "🌐"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: "🌐"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: "🌐"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: "🌐"
}
/* Nav Bar */
nav .links {
background: linear-gradient(#eefbee 15%, #91cfe3, #d0eff9);
box-shadow: white 0 1px 1px 1px inset;
padding: 0;
text-align: center;
}
nav .links a {
color: #2f748a;
text-shadow: white 0px 2px 4px;
padding: 1px
}
nav .links a:hover {
color: #2f748a;
background: linear-gradient(white, lightgreen);
text-decoration: none;
padding-top: 0;
}
nav .links li.active a {
color: #1a586c;
font-weight: normal;
}
nav .links li:not(:last-child)::after {
color: white;
text-shadow: lightblue 1px 0px 1px;
}
/* Nav Top */
nav .top {
background: linear-gradient(#bddde8 , #1d94ba 40%, lightblue);
box-shadow: #fff6 0px 0px 2px 3px inset;
}
/*Blurbs and Headings Settings*/
.profile .blurbs .inner, .profile .friends .inner, .profile .contact .heading {
background: url(https://i.pinimg.com/736x/22/1a/1a/221a1aa5b9a548bb3e5b03b16dd400ff.jpg);
background-size: 100%;
border: 1px solid lightblue;
border-bottom: 0;
}
.profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
background: linear-gradient(#eefbee 15%, #91cfe3, #d0eff9);
box-shadow: white 0 1px 1px 1px inset;
color: #2f748a;
font-size: 11px;
font-weight: normal;
text-shadow: white 0px 2px 5px;
border: 1px solid #91cfe3;
border-bottom: 0;
border-radius: 2px;
}
.profile .friends .heading h4, .blurbs .heading h4{
font-weight: normal;
}
.profile .blurbs .section h4 {
color: #d2f0fa;
font-weight: normal;
font-size: 14px;
font-family: 'Ficus', sans-serif;
}
.profile .blurbs .section {
font-size: 11px;
font-family: 'Ficus', sans-serif;
color: #fcfcfc;
}
.friends:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
.count {
color: var(--links);
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* Friends */
.profile .friends .person img:not(.icon){
width: 50px;
height: 50px;
}
.profile .inner b {
font-size: 14px;
font-family: 'ms ui gothic';
color: #d2f0fa;
}
.profile .inner span.count {
color: white;
}
.profile .friends .person p {
font-size: 13px;
font-family: 'Ficus', sans-serif;
color: #fcfcfc;
}
.profile .url-info{
padding: 2px;
background-image:url(https://i.pinimg.com/736x/22/1a/1a/221a1aa5b9a548bb3e5b03b16dd400ff.jpg);
background size: 100% !important;
}
.comments-table td:first-child {
background: linear-gradient(#bddde8, #1d94ba 40%, lightblue);
text-align: center;
text-shadow: white 0px 1px 2px;
width: 30%;
box-shadow: #ffffffab 0px 1px 2px 2px inset;
}
.comments-table img:not(.icon){
border: 1px solid white;
box-shadow: 0px 1px 2px #fff;
}
.comments-table td {
background--image: url(https://i.pinimg.com/736x/ac/41/33/ac413317fc7d07a134862ad47a2ee487.jpg);no-repeat fixed; background-size:cover;
}
button:not(.logout-btn) {
background: linear-gradient(#eefbee 15%, #91cfe3, #d0eff9);
box-shadow: white 0 1px 1px 1px inset;
color: #2f748a;
font-size: 11px;
font-weight: normal;
text-shadow: white 0px 2px 5px;
border: 1px solid #91cfe3;
border-radius: 2px;
padding: 2px;
}
button:not(.logout-btn):hover {
background: linear-gradient(white, lightgreen);
box-shadow: white 0 1px 1px 1px inset;
color: #2f748a;
font-size: 11px;
font-weight: normal;
text-shadow: white 0px 2px 5px;
border: 1px solid #91cfe3;
border-radius: 2px;
padding: 2px;
}
</style>
<style> /*Rounded corners*/
.top{border-radius: 25px 25px 0 0 !important;}main{border-radius: 0 0 25px 25px !important;}
</style>
<style> /*scroll comments*/
table.comments-table{display: block;height: 250px!important;overflow-y: scroll;}
</style>
<marquee direction="left">☆:CURRENT VIBE:☆</marquee>
<h2></h2>
<img src="https://64.media.tumblr.com/204bc22bca1d5d5bb2497baa7b83985a/6835b3deedaac7a5-60/s540x810/b0e53a1d24185590695cd068892f999ddad48172.jpg" alt="Trulli" width="100%" height="100%"/>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1VDjtVNL3q0Xb250LhjLzF?utm_source=generator" width="100%" height="152" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<h2></h2>
<img src="https://64.media.tumblr.com/723e2709a962e6c53d00cc66221fd30f/478a5d9fed8bc5bc-09/s1280x1920/86a167b08f94b889c140ecaf234eb9ba8006b365.gifv" alt="Trulli" width="100%" height="100%"/>
<iframe width="0" height="0" src="https://www.youtube.com/embed/KY1GEtoCGO4?si=Nys3n5J3YAXGHepD&t=20//?&;amp;;autoplay=1&;controls=1" title="Youtube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
Report Topic
