hey! feel free to use my layouts (they're also Frankensteind together) but plz leave a message if you end up using it, bc i wanna see how it'll look is all code


<style>
.logo {
content:url("https://files.catbox.moe/fed6pe.png");
</style>
<style>
.online{
font-family: 'Kalam', cursive;
color: #786555;
font-size: 20px;
text-shadow: 1px 1px 1px #ffebb5;
animation-name:;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}
.online img{
display: none;
}
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');
body
{background: url("https://i.pinimg.com/1200x/fb/d7/ba/fbd7ba8a0f69758ebc0d96ddf126a9e6.jpg")
no-repeat fixed; background-size:cover;
}
nav .top{
background-color: #f5f1e6;
border-radius: 20px;
border: 2px solid #e3decf;
box-shadow: inset 2px 3px 5px #e3decf;
margin: 1em 0;
}
nav .links{
background-color: #f5f1e6;
border-radius: 20px;
border: 2px solid #e3decf;
box-shadow: inset 2px 3px 5px #e3decf;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}
nav .links li::after{
display: none;
}
main{
background-color: #f5f1e6;
border-radius: 20px;
border: 2px solid #e3decf;
box-shadow: inset 2px 3px 5px #f5f1e6;
margin: 1em 0;
padding: .5em;
opacity: .9;
}
.profile h1{
font-family: 'Kalam', cursive;
color: white;
text-shadow: 1px 1px 2px #d1cbb8;
font-size: 25px;
<style>
}
<style>
}
.profile .profile-info{
border-radius: 20px;
border: 2px solid #f5f1e6;
box-shadow: inset 2px 3px 5px #e3decf;
text-shadow: 1px 1px 2px #e3decf;
color: black;
background-repeat: no-repeat;
background-size: cover;
}
.profile .general-about{
color: #786555;
font-style: italic;
text-shadow: 1px 1px 2px #e3decf;
}
.profile .blog-preview,
.profile .mood{
color: #786555;
font-style: italic;
}
.profile .profile-pic img{
border-radius: 20px;
box-shadow: 1px 1px 2px #e3deef;
opacity: 1;
}
.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Kalam', cursive;
color: #786555;
background-color: #e3decf;
border-radius: 20px 20px 0 0;
border: 2px solid #e3decf;
box-shadow: inset 2px 3px 5px #e3decf;
text-align: center;
padding: .5em;
font-size: 15px;
}
.profile .table-section,
.profile .contact,
.profile .url-info{
border-radius: 20px;
border: 2px solid #e3decf;
box-shadow: inset 2px 3px 5px #e3decf;
text-shadow: 1px 1px 5px lightblue;
font-style: italic;
color: #786555;
}
table.details-table td {
background-color: transparent !important;
color: #786555 !important;
font-style: italic !important;
}
.profile .blurbs .heading,
.profile .friends .heading{
color: #b59f8d;
font-family: 'Kalam', cursive;
background-color: #e3decf;
border-radius: 20px 20px 0 0;
border: 2px solid #e3decf;
text-align: center;
padding: .5em;
font-size: 15px;
}
.profile .blurbs,
.profile .friends{
border-radius: 20px;
border: 2px solid #e3decf;
box-shadow: inset 2px 3px 5px #e3decf;
text-shadow: 1px 1px 2px white;
font-style: italic;
color: #387cac;
}
.profile .friends{
text-align: center;
}
.profile .friends-grid .person p{
color: #649dc4;
}
.profile .blurbs .section h4{
color: white;
padding: .5em;
}
<style>
.profile .comments-table{
background-color: #e3decf;
border-radius: 20px;
border: 2px solid #e3decf;
box-shadow: inset 2px 3px 5px white;
font-style: italic;
color: white;
}
.profile .comments-table td{
background-color: transparent;
}
.profile .comments-table .comment-replies{
background-color: #e3decf;
border-radius: 20px;
border: 2px solid ##e3decf;
box-shadow: inset 2px 3px 5px pink;
font-style: italic;
color: pink;
}
.comments-table img,
.person img{
border-radius: 20px;
}
footer{
background-color: #e3decf;
border-radius: 20px;
border: 2px solid #e3decf;
font-style: italic;
color: white;
}
.count{
color: #dae4ff;
}
a{
color: #786555;
text-shadow: 1px 1px 2px #d1cbb8;
}
a:visited {
color: #bfb39f;
text-shadow: 1px 1px 2px #bfb39f
}
a:hover {
color: #8cb5d1;
}
a:active {
color: #dae4ff;
text-shadow: 1px 1px 2px pink;
}
nav .links a:hover{
text-decoration: underline;
color: #dae4ff;
}
}
.col.left h1:before{
content: "";
white-space: pre-wrap;
display: block;
height: 115px;
background-image: url("");
background-repeat: no-repeat;
background-size: 120px;
}
.col.right:before {
content: "";
white-space: pre-wrap;
display: block;
height: 70px;
background-image: url("https://pixelsafari.neocities.org/dividers/more/hearts6.png");
background-repeat: no-repeat;
background-position-x: center;
background-size: 350px;
}
}
.profile-pic img:hover{
animation: rotation 0.3s infinite linear;
</style>
<style>
}
.mood:after {
content: "";
white-space: pre-wrap;
display: block;
height: 70px;
background-image: url(https://i.ibb.co/59fHKVF/image.png);
background-position-x: center;
background-repeat: no-repeat;
background-size: 300px;
}
<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>
</style>
<style>
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/1200x/cc/a3/dc/cca3dcf981162cff6192a10eb1f09f90.jpg');
background-size: cover;
background-repeat: repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
<div style="float: ; max-height: 300px; position: fixed; left: 1px; top: 9px; z-index: 400;">
<div style="float: ; max-height: 100px; position: fixed; left: 20px; bottom: 150px; z-index: 100;">
<img src="https://i.pinimg.com/736x/32/73/7d/32737d9bdddfbd1b9ab83d02ce8994ee.jpg" height="230"/></div>
</div>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )