Allergy's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Profile and background image wont load </3

Ive literally tried almost everything people have reccommended but for some reason both my pfp and background pick on my profile will not load for some reason??? Is this an internet issue? Can other people see it and I cant?? WUT IS HAPPENING??????????

heres the layout I put in, the bg image wouldnt load so i tried replacing it with other images but none of them loaded either :( [EDIT: ive given up and instead picked a layout with no background image]

<!-- (c) Layout created by ray ☆ 🍉 (https://layouts.spacehey.com/layout?id=81834) -->


<style>


@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

.profile h1 { font-family: 'UnifrakturMaguntia'; text-align: center; font-size: xx-large; color: white; text-shadow: 2px 2px black; }


body{

background: url("https://ibb.co/Pq2QTV2") no-repeat fixed;

background-size: cover;

text-transform: lowercase;

}


nav .top{

margin-top: 10px;

background: url(https://i.pinimg.com/564x/5a/2e/43/5a2e436be6d6f7a9d42de62202e31d7f.jpg);

background-size: cover;

    background-position-y: center;

border: 1px solid white;

border-radius: 5px;

box-shadow: 0 0 8px white;

}


nav .top .left .logo {

    width: 165px;

    height: 42px;

    filter: drop-shadow(2px 4px 6px black);

}


button, input {

    overflow: visible;

    background: white;

    color: black;

    border: none;

    box-shadow: 0 0 5px white;

    border-radius: 5px;

}


nav .links {

    background-color: transparent;

    padding: 3.5px 16px;

    text-align: center;

    margin-top: 10px!important;

    margin-bottom: 10px!important;

}


nav .links a {

    text-decoration: none;

    color: white;

    text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000;

    font-size: max(0.98em, 12px);

}


nav .links .special a {

    color: white;

}


nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {

    content: " | ";

    color: white;

}


main{

background: url(https://i.pinimg.com/564x/83/db/b6/83dbb678c05d144ad491517113ba8e8c.jpg);

    border: 1px solid white;

    box-shadow: 0 0 10px white;

    border-radius: 8px;

    color: white;

    text-shadow: 1px 1px black;

}




footer {

    text-align: center;

    font-size: 70%;

    margin: 10px 0 10px;

    padding: 10px 5px;

    background-color: transparent;

    color: white;

}


a {

    color: white;

    text-decoration: none;

}


a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {

    color: #6da5ac;

    text-decoration: none;

    font-style: italic;

}


.comments-table td:first-child, .music-table td:first-child {

    background: #29282b;

    text-align: center;

    font-weight: bold;

    width: 38%;

}


.comments-table td, .music-table td {

    background: #403f43;

    vertical-align: top;

}


.profile .blurbs .heading, .profile .friends .heading {

    background: white;

    color: black;

    border-radius: 8px;

    padding: 2px 7px;

    box-shadow: 0 0 10px white, 0 0 5px white;

}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

    width: 100%;

    border: none;

    margin: 10px 0;

}


.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {

    background: white;

    color: black;

    padding: 2px 7px;

    box-shadow: 0 0 5px white, 0 0 10px white;

    border-radius: 8px;

}


.icon, .award img {

    display: inline-block;

    height: 1.4em;

    width: 1.4em;

    aspect-ratio: 1/1;

    margin: 0 0.05em 0 0.1em;

    vertical-align: -0.3em;

    color: rgba(0,0,0,0);

    filter: brightness(10);

}


.details-table td:first-child {

    background: #29282b;

    border-radius: 8px;

    color: white;

    font-weight: bold;

    width: 33%;

    box-shadow: 0 0 10px #ffffff, inset 3px 5px #5d5b68, inset -7px -9px #151617;

    padding: 11px;

}


.details-table td {

    background: #403f43;

    vertical-align: top;

    border-radius: 8px;

    box-shadow: 0 0 10px #ffffff, inset 5px 6px #cecaea61, inset -5px -7px #2a2a2e;

    padding: 14px;

}


.profile-info{

background: url(https://i.pinimg.com/564x/59/49/85/59498522322ca36103b706ab9b904984.jpg);

    background-position: center;

    border: 1px solid white;

    border-radius: 8px;

    box-shadow: 0 0 10px white;

}


.profile .blurbs .section h4 {

    margin: 0;

    color: white;

    text-transform: uppercase;

}


.count {

    color: white;

}


.profile .friends .person p {

    color: inherit;

    font-weight: bold;

    width: 100%;

    overflow-wrap: break-word;

    word-break: break-word;

    font-size: 100%;

    text-align: center;

}


img.pfp-fallback {

    border: 1px solid white;

    box-shadow: 0 0 10px white;

    border-radius: 8px;

}


::-webkit-scrollbar {

    width: 12px;

    background-color: #fff;

}


::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

    background-color: black;

}


::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    border-radius: 10px;

    background-color: #fff;

}


.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {

    max-width: 95px;

    max-height: 95px;

    display: block;

    margin: 0 auto;

    filter: grayscale(1);

}


.online {

    color: #0C8C00;

    font-weight: bold;

    font-size: 95%;

    filter: saturate(0) brightness(10);

}


body::before {

    content: " ";

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background: linear-gradient(rgb(15 18 82 / 48%) 50%, rgb(0 0 0 / 0%) 50%);

    z-index: 2;

    background-size: 100% 2px, 3px 100%;

    pointer-events: none;

}


.col, main, footer, nav::before, .online, nav .links, nav .top {

    animation: float 3s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

}


.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}


</style>


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )