Yellow Box Shadow

Tags: bela, yellow, box shadow, boxes

Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

    ⇘ Profile Background: https://i.imgur.com/PGbvVVI.png

    ⇘ .url-info Background: https://i.imgur.com/u4tK3nN.png

    ⇘ Layout Preview:

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela 🔊⬆ (https://layouts.spacehey.com/layout?id=22520) -->

<style>
/* MOBILE CODE */
@media (max-width: 600px) {
.container{
    padding:20px;
}
main .right{
    padding:0px!important;
}
body{
    margin-bottom:10%;
}
}
</style>

<style>
/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap');
</style>

<style>
a, .details-table td:first-child, nav label{
    color: black!important;
    font-family: 'Pragati Narrow', sans-serif;
    font-size: 12px!important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 2px 1px 2px #F1EDCE;
}
.count{
    color: #65645D;
}
h1, h2, h3, h4{
    color: #000!important;
    font-family: 'Pragati Narrow', sans-serif;
    font-size: 18px!important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px #FFF4A1, 2px 2px #fff, 3px 3px #8E9CB7;
    text-align: center;
}
p{
    color: #000!important;
    font-family: 'Pragati Narrow', sans-serif;
    font-size: 14px!important;
    font-weight: 1;
    letter-spacing: 1px;
}
b{
    color: #000!important;
    font-family: 'Pragati Narrow', sans-serif;
    font-size: 14px!important;
    font-weight: bold;
    letter-spacing: 1px;
}
button{
    background-color: transparent!important;
    border: none;
    font-family: 'Pragati Narrow', sans-serif;
    font-size: 12px!important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 2px 1px 2px #F1EDCE;
}
body{
    background-color: white;
    background-image: url('https://i.imgur.com/PGbvVVI.png');
    background-size: 20%;
}
.heading{
    background-color: transparent!important;
    text-align: center;
}
nav .top{
    color: black;
    background-color: transparent!important;
}
.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 2px solid black !important;
    color: black;
    border-radius: 5px;
}
nav .links{
    color: black;
    background-color: transparent;
}
nav .links a{
    text-shadow: none;
}
nav{
    background-color: white;
    border: 3px solid #000000!important;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    border-radius: 10px;
    margin-bottom:30px;
    padding: 5px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) drop-shadow(2px 2px 1px #FFF4A1)!important;
}
main{
    background-color: transparent;
}
main .left{
    padding:0px;
}
h1{
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    padding: 5px;
    margin-bottom:30px!important;
}
.general-about .details{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    padding: 5px;
    text-align: right;
}
.online{
    color: black!important;
    text-transform: lowercase;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(32%) saturate(4456%) hue-rotate(303deg) brightness(119%) contrast(103%)!important;
}
.icon{
    font-size: 10px!important;
}
.profile-pic{
    padding:5px;
}
.mood{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px;
    margin-top: 30px!important;
    padding: 5px;
}
.contact{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    padding: 5px;
}
.url-info{
    background-image: url('https://i.imgur.com/u4tK3nN.png');
    background-size: contain;
    height: 200px;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px!important;
    margin-top:30px!important;
}
.url-info p{
    opacity: 0.0;
}
.table-section{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px!important;
    padding: 5px;
}
.details-table td{background-color: transparent!important;}
main .right{
    padding-right:0px;
    padding-left:30px;
    padding-top:0px;
}
.profile-info{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px!important;
    padding: 5px;
}
.blog-preview h4{
    margin:0px;
}
.blog-preview{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px!important;
    padding: 5px;
}
.blog-preview :not(:first-child) {
    width: 110px;
    height: 110px;
    text-align: justify;
    display: inline-block;
    vertical-align: top;
    border: 3px solid black;
    border-radius: 10px;
    box-shadow: rgb(255, 255, 255) 7px 7px 0px -3px, rgb(255, 189, 40) 7px 7px;
}
.blog-preview p{
    background-color: transparent!important;
    padding: 5px;
    margin-left: 3px;
    margin-bottom:30px;
    margin-right:20px;
}
.blurbs .heading{
    display: none;
}
.blurbs .inner{
    padding:0px!important;
}
.blurbs .section:nth-child(1){
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px!important;
    padding: 5px;
}
.blurbs .section:nth-child(2){
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px!important;
    padding: 5px;
}
.friends:not(#comments){
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:30px!important;
    padding: 5px;
}
.friends-grid{
    text-align: center;
}
.friends .person img:not(.icon){
    border: 3px solid black;
    border-radius: 10px;
    box-shadow: rgb(255, 255, 255) 7px 7px 0px -3px, rgb(255, 189, 40) 7px 7px;
}
#comments{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:0px!important;
    padding: 5px;
    overflow-y: scroll;
    height: 400px;
}
.comments-table{
    border-spacing: 10px;
}
.comments-table td{
    background-color: transparent!important;
    border:3px solid black;
    border-radius: 10px;
}
.comments-table td:first-child img{
    border-radius: 10px;
}
.comment-reply:not(:first-child) {border-top: 3px double black;}
.comment-replies {border: 3px solid black; border-radius:10px;}

.profile .friends p{
    text-align: center;
}
hr{
    height:1px;
    border-top:2px dashed yellow;
    border-bottom:2px dashed black;
}
footer{
    color: black;
    background-color: white;
    border: 3px solid #000000!important;
    border-radius: 10px;
    box-shadow: 7px 7px 4px 0px rgba(243, 217, 26, 1); 
    margin-bottom:100px!important;
    padding: 5px;
}
::-webkit-scrollbar {
    width: 2px;
    height: 3px;
}
::-webkit-scrollbar-track {
    border: 1px solid black;
}
::-webkit-scrollbar-thumb {
    background: black; 
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

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

JennyZ TIKXAN	1699364172 Usin Report Comment
Bren	1696990378 Using!!! Report Comment
TheWildkid	1689934030 Using! Report Comment
luna ✶	1689481199 usingg! Report Comment
𓈒☆ ₒ ʚ ⭐️ ❪ Jasonn!! ❫	1680722450 usinggg Report Comment
Leena	1676623368 Using <3 Report Comment
tommy !!!	1672596293 using!!! >v< Report Comment
gothIHOPemployee	1667522511 despite being simple this is cool! definitely using, Report Comment