Naruto Layout!

Tags: naruto, anime, cursor, animation, scroll box, naruto shippuden

Description:

Contains: custom cursor, sakura blossom overlay, profile scrollbox, autoplaying music, gif profile picture, banner, custom icons, naruto online icon and lots of art :}

Preview:

click on the image for a larger preview

Code:

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

<style>
   @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@500&display=swap');
   @import url('https://cory.anota.do/spacehey/pdg_neon.css');

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Roboto Condensed', sans-serif;
   font-size: 150%;
   color: white !important;
   text-shadow: 2px 2px 3px white, 0 0 25px white, 0 0 5px black}

/*BODY FONT*/
   body{font-family: 'Roboto', sans-serif;
   color: black !important;
   font-size: 100%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*TEXT SETTINGS*/
main p, html{
   font-weight: 700; 
   line-height: 1.5;
   color: #506d51 !important;
   text-align: centre !important}

/*TILTED NAMEPLATE*/
:root{ --neon-text-color: #00ff80; }
.profile .left h1{font-family: 'Alegreya Sans SC', sans-serif;
   font-size: 150%;
   transform: rotate(-10deg)}

/*BANNER*/
main:before {
   width: auto;
   height: 45px;
   display: block;
   text-align: center;
   content: "";
   overflow: hidden;
   background-image: url(https://i.ibb.co/nz6hKks/536793d3234dpbyy.gif);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 70%;
   margin-top: 0;
   border-left: 2px solid black;
   border-right: 2px solid black;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}

/*VERY BACKGROUND*/
body{
   background-image: url(https://i.ibb.co/ykrQyGh/NARUTO-full-1390292-1.jpg);
   background-size: 100%;
   background-repeat:no-repeat;
   background-position: centre centre}

/*PROFILE BACKGROUND*/
.profile{
   border: 2px solid black;
   border-top: none !important;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 15px;
}

main{background: linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.4))}

/*HEADER*/
.top{
   margin-top: 10px;
   background: linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4)) !important;
   border-top-right-radius: 15px !important;
   border-top-left-radius: 15px !important;
   border: 2px solid black;
   border-bottom: none !important}

/*PROFILE SCROLLBOX*/
main{
    height: 740px;
    overflow-y: scroll}

/*NAV BAR*/
.links{
   background: linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4)) !important;
   border: 2px solid black !important;
   border-top: none !important;
   border-bottom: none !important;
   text-align: centre !important}

footer .links{ background: none !important;
   border: none !important}

/*FOOTER*/
footer{
   height: 160px;
   border: 2px solid black;
   border-radius: 5px;
   background-image: url(https://i.ibb.co/10xVxTK/image-asset.jpg);
   background-size: cover;
   background-position: 25% 50%}

/*SPACES BETWEEN LINKS*/
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
   content: "✩";
   color: white}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: linear-gradient(#fff185, #fcf6b6);
   border: 2px solid black !important;
   border-radius: 4px}

/*BORDERS*/
.table-section{
   border: 2px solid black !important;
   border-radius: 2px;
   margin-bottom: 20px !important;
   background-image: url(https://i.ibb.co/MNd0wWv/m1.jpg);
   background-size: cover;
   padding: 1px}

.details-table td{
   border: 1px solid #fff185;
   border-radius: 1px}

.profile .friends .inner{
   background-image: url(https://i.ibb.co/ZG685jd/dajupid-ac4f1df4-acda-46de-86af-fa9ed06121f1.jpg);
   background-size: 100%}

.friends{
   border: 2px solid black;
   border-radius: 5px;
   padding: 1px;
   margin-bottom: 20px}

.comments-table{ 
   border: solid #fff185 2px;
   border-radius: 2px !important;
   margin-bottom: 20px !important
   padding: 1px}

/*ONLINE*/
.online{ 
   content: url(https://i.ibb.co/TbCZgLf/ezgif-2-615dc63d00.png)}

/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-extern.php?id=96090), auto !important}

/*SHAKE ON HOVER*/
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*INTERESTS GRID*/
:root{
   --even-lighter-blue: rgba(251, 251, 167, 0.8);
   --lightest-blue: rgba(251, 251, 167, 0.8);

/*FRIENDS-GRID*/
   --light-orange: url(https://i.ibb.co/xLPR3M7/ezgif-2-8ef72e8c29.jpg);
   --even-lighter-orange: linear-gradient(#fff185, #fcf6b6)}

/*SEARCH BAR*/
.search-wrapper input[type=text] {
   background-color: #fcf6b6 !important;
   border: 1px solid black !important;
   border-radius: 10px}

/*BUTTONS*/
button{
   color: white;
   background: url(https://i.ibb.co/tPN8YpH/sky-anime.gif); 
   border: 1px solid black;
   border-radius: 10px;
   padding: 2px}
button:hover {
   color: yellow;
   background: url(https://i.ibb.co/PQDnh2q/138543.gif);
   border-radius: 10px;
   padding: 4px}

/*URL SECTION*/
.profile .url-info{
   font-size: 0;
   height: 300px;
   background-image:url(https://i.ibb.co/RNrkB3w/e9f78ee356a4690028d936f6f61475c0-sai-naruto-naruto-funny.jpg);
   background-size: cover !important;
   border: 2px solid black !important;
   border-radius: 2px;
   margin-bottom: 20px !important}

/*GIF PFP*/
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.ibb.co/L6gxzJh/4Kj3.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; border-radius: 5px; border: 2px solid black}

/*LOGO*/
.logo {
   filter: invert(38%) sepia(43%) saturate(4907%) hue-rotate(198deg) brightness(101%) 
   contrast(101%);
   !important;
   box-shadow: 0px 0px 7px 5px white}

/*LINK COLOURS*/
.logout-btn{
   color: yellow !important;
   text-shadow: 0px 0px 5px 3px white !important;
   border: none !important}

a{color: #166e40 !important;
   text-shadow: 0px 0px 5px 3px black !important}
   a:hover{color: red !important;
    text-decoration: underline}
   a:visited: color: #166e40 !important}

footer .links a{color: white !important}
   footer .links a{color: yellow !important
    text-decoration: underline}
   footer .links a{color: yellow !important}

/*ICONS*/
.icon, .award img {
   content: url(https://i.ibb.co/7pfD997/ezgif-2-d574a7ab71.gif);
   display: inline-block;
   height: 2.0em;
   width: 2.0em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.3em;
   color: rgba(0,0,0,0)}

/*CONTACT SECTION*/
.contact{
   height: 210px;
   background-image: url(https://i.ibb.co/C9CG1XG/team-7.jpg);
   background-size: cover;
   letter-spacing: 1.5px !important;
   line-height: 2 !important;
   border: 2px solid black !important;
   padding: 1px;
   border-radius: 2px
}

/*PROFILE INFO*/
.profile-info{ 
   height: 150px;
   border-radius: 3px;
   background-image: url(https://i.ibb.co/vX6Wn8W/9599de8f743f2adf15e3d80a9d79f4af.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 25% 70%;;
}

/*OVERLAY*/
html:before{ 
   animation: grain 8s steps(10) infinite;
   background-image: url(https://i.ibb.co/xzB79qJ/sakura-leaves.gif);
   background-size: 20%; 
   content: "";
   height: 220%;
   left: -50%;
   opacity: .9;
   position: fixed;
   top: -100%;
   width: 200%;
   pointer-events:none}

</style>

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

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

sawako-chan>>	1742063696 so sigma Usingg! Report Comment
Rinxbw	1740776931 USINGG Report Comment
flanfan4	1724548772 HELL YEAH Report Comment
YAMAZAKURA	1724457380 using Report Comment
Laken Uchiha UwU	1722288430 i must say, this is adorbb! so so using this Report Comment
angeLfluff⋆⋆⋆⋆	1710881554 haio:) Report Comment
Monkey D Luffy🍖🏴‍️👒	1696257009 so cool Using Report Comment