PepsiFanta / DirkJohn (HOMESTUCK) layout

Tags: orange, blue, autoplayer, homestuck, layout

Description:

Layout inspired by PepsiFanta / DirkJohn / Dirk Strider x John Egbert, etc..

THIS LAYOUT HAS :
★ An autoplayer (Super Stars by Yves Tumor).
★ Floating icons (Pepsi bottle and Fanta bottle).
★ (Very shitty) Custom online image.
★ DirkJohn image in your "about me" section.
★ Custom notification icon.

OTHER NOTES :
☆ Mobile friendly!!
☆ Please comment if you're using this layout, I'd love to see :)
☆ Feel free to edit as much as you'd like.
☆ Very messy code, this is my first layout ever.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by [AUTOPLAY] PUPPET_MASTER (https://layouts.spacehey.com/layout?id=89205) -->

<img src="https://pngimg.com/uploads/fanta/fanta_PNG14.png" style="max-height: 200px; position: fixed; right: 1px; bottom: 10px; z-index: 100;" title="fanta" class="tooltipster hidden-sm-down"/>



<img src="https://www.freeiconspng.com/uploads/pepsi-png-image-22.png" style="max-height: 200px; position: fixed; left: 10px; bottom: 1px; z-index: 100;" title="pepsi" class="tooltipster hidden-sm-down"/>



<style>

li.active .icon { content:url('https://i.ibb.co/BnyggMf/Untitled516-20231201192041.png'); width: 20PX;height: 20px;}

</style>



<style>

/* Rounded profile pictures */

.profile .profile-pic img,

.profile .friends .person img,

.profile .comments-table td:first-child img {

 border-radius: 15px;

}

</style>



<style>



.profile-info{display: none !important;}



</style>



<style>

.profile .friends .person img {

clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);

}

.comments-table img,

.person img{

clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);

}

</style>



<style>

/* Profile Design Info */

    :root {

        --logo-blue: linear-gradient(90deg, rgba(255,128,0,0.5) 0%, rgba(255,128,0,0.5) 35%, rgba(0,0,255,0.5) 100%) !important;

        --darker-blue: #ff9900;

        --lighter-blue: #000000;

        --even-lighter-blue: #000000;

        --lightest-blue: #000000;

        --dark-orange: #fff;

        --light-orange: #ff9900;

        --even-lighter-orange: #000000;

        --green: #000000;

 }





    body

        {background: url("https://i.pinimg.com/originals/aa/80/b9/aa80b9775392277d25be86b902993900.gif");

}

     

    .profile {background-color: #000; color: #fff;}

    

 main {

        border-radius: 0 0 10px 10px;

        background: rgba(0,0,0) !important;

padding: 0px 0px;

    }

	

 * {font-family: Monospace;}

	

 .container {

        border-radius: 15px 15px 0 0;

        overflow: hidden;

        margin-top: 30px;

        padding: 10px;

    }



    footer {

        border-radius: 15px;

        background: linear-gradient(90deg, rgba(255,128,0,0.5) 0%, rgba(255,128,0,0.5) 35%, rgba(0,0,255,0.5) 100%) !important;

        color: #fff !important;

        display: block !important;

    }

	

 footer .links a{color: #fff !important;}

	

    footer .links a:hover{color: #fff !important;}



footer .copyright a{color: #ffffff !important;}

	

 .profile .contact,

    .profile .url-info,

    .profile .table-section,

    .home-actions {

        border: none;

    }

	

 a.addme {

        font-size: 2rem;

        font-weight: bold;

        margin-bottom: 15px;

        display: block;

    }

</style>



<style>/*Search Users Box (Background Color/Background Image)*/

    .top input{border-radius: 15px 15px 15px 15px;}

</style>



<style>/*Buttons (Background Color/Background Image)*/

    button{

    border-radius: 25px 25px 25px 25px !important;

 color: #ff9900;

 font-weight: bold;

    background-color: #fff !important;

 }

</style>



<style>/* Navigation */

nav .top a{color: #fff;}

nav .top a:hover{color: #fff; !important;}



    nav {

        border-radius: 15px 15px 0 0;

        overflow: hidden;

    }

    

    nav .links a{

        color: #0000ff !important;

        text-shadow: none !important;

font-weight: bolder;

    }

    

    nav .links a:hover {color: #ff9900; !important;}

    

    nav .links {

        text-align: center;

        padding: 3.5px 3.5px 5.5px 3.5px;

        font-size: 70%;

    }

</style>

    

<style>/* Links */

    a:hover {color: #0000ff;}

</style>





<style>/* Profile Name Header */

 @import url('https://fonts.cdnfonts.com/css/pf-easta-seven'); .profile .left h1{ font-family: 'PF Easta Seven', sans-serif; font-size: 35px; text-align: center; letter-spacing: 1px; overflow-wrap: break-word;}

h1 {background: -webkit-linear-gradient(#ff9900, #8C4573, #0000ff);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;}

</style>



<style>/* Profile Picture & Online Icon */

 .details p {text-align: center; font-family: monospace; font-size: 15px; color: #fff;}

.profile .mood {color: #0000ff;}

 .mood {text-align: right;}

    .online {visibility: hidden;} 

    .online img { 

        content: url("https://i.ibb.co/Lh2nqR6/blinkies-Cafe-WW.gif"); 

        animation-name: none; 

        visibility: visible; 

        height: 15px; 

        width: 60px;

  display: block;

  margin-left: auto;

  margin-right: auto;

}

.profile .contact {

 background-image: url(https://media.tenor.com/WnCkFJJFNmcAAAAC/hearts-love.gif);

    }

.profile .url-info {color: #fff;}

</style>   



<style>/* Headers Colors */

    .heading {

        padding: 5px 0 !important;

        margin-top: 15px;

        margin-bottom: 10px;

        background: linear-gradient(90deg, rgba(255,128,0,0.5) 0%, rgba(255,128,0,0.5) 35%, rgba(0,0,255,0.5) 100%) !important;

        color: #fff !important;

        text-align: center;

        border-bottom: 2px solid white;

border-radius: 10px 10px 10px 10px;

    }

	

 .profile .blurbs .section h4{color: #ff9900; font-weight: bolder;}

</style>



<style>/* Interests Table Info */

    table.details-table {border-collapse: collapse;}

    table.details-table td {background-color: #000 !important;}

.details-table td:first-child {color: #0000ff !important;}

</style>



<style>/* Blog Info */

.blog-preview h4 {color: #fff;}



    .blog-preview p {

        background-color: none;

        padding: 5px 10px;

        border-radius: 10px;

        color: #fff;

font-weight: bolder;

    }

	

    .blog-preview p a{color: #0000ff !important;}

	

    .blog-preview p a:hover,

    .blog-preview p a:active,

    .blog-preview p a:focus{

        color: #0000ff !important;

    }

</style>

    

<style>/* Friends Info */

    .profile .friends .heading{color: #ffffff;}

.profile .friends{text-align: center;}

    .count {color: #0000ff;}

    .profile .friends .person p{color: #ff9900 !important;}

 .profile .friends .person img {border-radius: 500px;}



    .profile .friends .person img:not(.icon) {

        border-radius:15px;

        box-shadow: 1px 0px 7px 2px rgba(227, 62, 253, 0.71);

        border: 2px solid rgba(255, 255, 255, 1);

    }

    

    .profile .friends .person img:not(.icon):hover {

        transform: scale(1.1);

        transition: 0.5s ease;

    }

    

    .profile .friends .person img:not(.icon) {transition: 0.5s ease}

</style>



<style>/* Comments Info */

    table.comments-table td {

        background-color: #000 !important;

        border: none;

    }



    .comments-table td:first-child img {

        width: 80px;

        border-radius: 500px;

    }

	

 .comments-table{

        display: block;

        height: 350px;

        overflow-y: scroll;

        border: none;

    }

</style>



<style>/* Custom Profile Headers */

.contact .heading{ font-size:0; }

.contact .heading:before{ content: "🫐 CONTACT 🍊"; font-size:.9rem; font-weight: bolder; }



.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}

.w-40 .table-section:nth-last-child(2) .heading:before{content: "🍊 LIKES 🫐"; font-size:.9rem; font-weight: bolder; }



.w-40 .table-section:last-child .heading h4{ font-size:0; }

.w-40 .table-section:last-child .heading:before{ content: "🫐 MY LINKS 🍊"; font-size:.9rem; font-weight: bolder; }



.blog-preview h4{ font-size:0; }

.blog-preview h4 a{font-size:.8rem;margin-left:5px; }

.blog-preview h4:before{ content: "MY BLOGS "; font-size:.9rem; font-weight: bolder; }



.blurbs .heading{ font-size:0; }

.blurbs .heading:before{ content: "🍊 ABOUT ME 🫐"; font-size:.9rem; font-weight: bolder; }



.blurbs .inner .section:nth-child(1) h4{ font-size:0; }

.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.9rem; }



.blurbs .inner .section:nth-child(2) h4{ font-size:0; }

.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.9rem; }



.friends .heading{ font-size:0; }

.friends .heading:before{ content: "🫐 FRIENDS LIST 🍊"; font-size:.9rem; font-weight: bolder;}



.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "🍊 COMMENTS 🫐"; font-size:.9rem; font-weight: bolder;}



<style>



.profile-info{display: none !important;}



</style>



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









<iframe width="0" height="0" src="https://www.youtube.com/embed/VMM5In5YT68//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

<iframe style="border-radius:12px" width="100%" height="152" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></iframe>



 <img src="https://i.ibb.co/S7rHw11/Untitled515-20231201190620.png"/> 



<br/>



ABOUT ME GOES HERE !!!!!

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

SOD☆!!! the Homestuck fan	1713738127 using elements of it!!! Report Comment
email :3	1705972131 g(0)nn@ use :333 Report Comment
jay	1702684899 using Report Comment
wealthyCarnivore	1702064224 using elements of it ^_^ Report Comment
777healing	1701616993 using !! didn't read all the way and wondered why there was music playing T____T Report Comment
vampire's coat (alehhh) 🍉	1701512164 is the ship legal Report Comment yeah dirkjohn is legal, BROJOHN (which i dont ship) isnt by [AUTOPLAY] PUPPET_MASTER; 1701527185; Report (Screenshots from the mspfa website) (i didn't have any better way to link them mb) https://media.discordapp.net/attachments/1044070102196306009/1180518625715703828/Screenshot_20231202-093435-407.png?ex=657db6a5&is=656b41a5&hm=561c58387e4b32e7a595c798df51ec25a4a03da32571c78218086445ceb44301& https://media.discordapp.net/attachments/1044070102196306009/1180518625468223548/Screenshot_20231202-093317-806.png?ex=657db6a5&is=656b41a5&hm=195ba94d8fd52a25938baa99197880773679eadc865a834a22b1fa7539a83816& by [AUTOPLAY] PUPPET_MASTER; 1701528152; Report oooh ok ty by vampire's coat (alehhh) 🍉; 1701534510; Report