undertale yellow martlet inspired layout

Tags:

Description:

HELL YEAH!

contains: animated pagedoll on the corner (ONLY VISIBLE TO PC USERS), banner, custom logo, comic sans font, falling snowflakes, other stuff

no credit needed, take it and go :-]

notice: layout was coded from scratch (with the resolution/zoom being on 100), may be some bugs here and there - also the martlet pagedoll has a black background, so it might overlap some other images

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by RECURSER (https://layouts.spacehey.com/layout?id=94264) -->

<style>
body {
    font-family: "Comic Sans MS", "Comic Sans", none;}

main {
    width: 100%;
    display: table;
    table-layout: fixed;
    background:black;
    font-weight:bold;
    color:White;
    border-radius: 0px; border: 5px solid white;} 

nav .links{
    width: 100%;
    display: table;
    table-layout: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-style: italic;
    background:black;
    font-weight:bold;
    color:White;
    text-decoration: underline;
    border-radius: 0px; border: 5px solid white;
    padding: .5em}

footer {
    width: 100%;
    display: table;
    table-layout: fixed;
    background:black;
    font-weight:bold;
    color:White;
    border-radius: 0px; border: 5px solid white;}

nav .top {
    width: 100%;
    display: table;
    table-layout: fixed;
    background:black;
    border-radius: 0px; border: 5px solid white;}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
        content: " ➴ ";
        color: lightblue;}

main:before {
    width: auto;
    height: 200px;
    display: block;
    content: "";
    background-image: url(https://file.garden/ZSHrFmTvf253N3H3/martletbanner.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0px;
    padding: 0px;}

body {
    background-image: linear-gradient(to left, black,black,black,black,black,rgba(7, 31, 33, 1));}

:root {
--logo-blue: White;
--darker-blue:white;
--lighter-blue:white;
--even-lighter-blue:black;
--lightest-blue:black;
--dark-orange:White;
--light-orange:black;
--even-lighter-orange:black;
--green:black;blue}

 .profile .contact .heading,
 .profile .table-section .heading,
 .profile .blurbs .heading,
 .profile .friends .heading  {
     background-color:black;}

 .profile .blurbs .heading,
 .profile .friends .heading {
    border-radius: 0px; border: 2px solid white;} 

 .blog-preview {
    border-radius: 0px; border: 2px solid white;
    text-align: center;}

 .logo {
  
    content:url("https://file.garden/ZSHrFmTvf253N3H3/martleticonTAKE2.png")}

 .count {
    color: lightblue;}

    .online {
        color: lightblue;
        font-weight: bold;
        font-size: 85%;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 2s;}

    .online img {
        display: none;}


.profile h1 {
    text-transform: uppercase;}

.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: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: url('https://external-media.spacehey.net/media/sUY1hTCND9RcLfRIWFhUztxs9ky9-o-ViVYULtDWbMFg=/https://xyz.crd.co/assets/images/gallery01/9d3de299.gif?v=4ca63763')

}

nav .links .icon {
    display: none;
}
</style>

<style>
.image {
    background: url('https://file.garden/ZSHrFmTvf253N3H3/martletidle') no-repeat;
    background-size: 100%!important;
    position: fixed;
    left: 1140px;
    bottom: -180px;
    height: 560px;
    width: 200px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.image{display:none;}

}
</style>
<div class="image"></div>

<style>
.snowflake {
  color: lightblue;
  font-size: 1em;
  font-family: Arial, sans-serif;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes"><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div></div>

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 1 of 1 comments ( View all | Add Comment )

Kaz	1730815142 Using i love martlet Report Comment