Devil May Cry 3 Layout

Tags: dmc, devil may cry, video games, red, black, dark, 2000s, animation, gif

Description:

Has animations and autoplaying music!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ✭ Fren-z ✭ (https://layouts.spacehey.com/layout?id=81569) -->

<style>

body{background:url("https://i.ibb.co/S55JCDX/ezgif-1-3f8d2a9137.jpg") no-repeat fixed; background-size:cover;
background-color: black;
}

nav .links .special a {
display: none;
}

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

small {
font-size:100%;
}
 
main {
background: transparent;
}

.general-about .profile-pic img {
box-shadow: 0px 0px 15px 0px red;
 }   

b {
font-size: 14px;
}

time.ago {
color: white;
}

.profile h1{
font-size: 30px;
}

h1{
font-family: courier;
animation: type 3s steps(27);
color: white;
white-space: nowrap;
overflow: hidden;
}

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.profile .friends .inner b, .profile .friends .inner a{
text-align: center;
color: white;
text-shadow: 3px 3px 3px black;
}

.profile .mood{ 
color: white;
border: 3px inset darkred;
box-shadow: 0px 0px 10px 0px darkred;
}

.profile .mood a{
color: darkred;
} 

.profile .mood a:hover{
color: red;
} 

p{
font-size: 16px;
font-family: courier !important;
color: white;
}

.details-table td a {
color: red;
}

.details-table td p {
color: white;
font-size: 14px;
}

  .table-section .heading{ 
font-size:14px; 
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}

.friends p, .friends a {
color: white;
text-shadow: 3px 3px 3px  black;
}

.profile .friends .inner{
text-align: center;
background: black;
border: 3px inset darkred;
box-shadow: 0px 0px 10px 0px darkred;
}

.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: white;
border: 3px black;
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4{
display: none;
}

.profile-info{
background:url("https://i.ibb.co/ZXvNrHS/ezgif-1-32d33544ae.gif") no-repeat fixed; background-size:cover;
border: 3px inset darkred;
font-family: courier;
box-shadow: 0px 0px 10px 0px darkred;
}

.profile-info a{
font-size: 14px;
color:white;
text-shadow:  3px 3px 2px black;
}

.profile-info h3{
color:white;
}

.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:transparent;
}

.profile .blurbs .inner{
background: url("https://i.ibb.co/100BCRP/ezgif-4-9d7b2e4e70.jpg");
box-shadow: 0px 0px 10px 0px darkred;
border: 3px inset darkred;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: white;
}

.contact .heading h4{
display:none !important;}


.contact .heading{ font-size:20px;}
.contact .heading:before{ content: url(https://i.ibb.co/Fb1tpC0/ezgif-1-7157131909.gif); 
overflow:hidden;
}

  .table-section .heading{ font-size:0; }
.table-section .heading:before{ content: url(https://i.ibb.co/zrcdwQ6/ezgif-1-48b1a66794.gif); 
padding-bottom: 10px;
}

h4 {
font-size: 14px !important;
color: white;
font-family: courier;
 }

   a {
font-size: 14px;
color: white; 
   }


a:hover {
     color: darkred; 
cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur117.cur), auto;
}

.count {
color: red;
}

.profile .friends .person p {
color: white;  
}
.profile .friends .person p:hover {
color: darkred;  
}

.blog-preview{
text-align: center;
background-image: url(https://i.ibb.co/hHjmTHv/ezgif-4-c3d2bd3e06.jpg);
color: white;
border: 3px inset darkred;
box-shadow: 0px 0px 10px 0px darkred;
}

.contact .heading h4{
font-size:14px;
}

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 15px 0px red;
}


.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/0qsMx7K/ezgif-1-a9a4a5da5b.webp);
}
  
.icon {
        content: url(https://i.ibb.co/LZ38mM2/ezgif-2-9db8b7e076.png);
        display: inline-block;
        height: 1.5em;
        width: 1.5em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
}

.profile .contact {
font-family: courier;
border: black;
background: black;
border: 1px solid black;
box-shadow: 0px 0px 10px 0px black;
}

.profile .contact a{
font-size: 12px;
}

.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 friend */
	content: url(https://pixelsafari.neocities.org/favicon/horror/skull7.gif);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favs */
	content: url(https://i.ibb.co/30qz3pw/ezgif-1-7b8225b90a.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* send message */
	content: url(https://i.ibb.co/tCBwsZX/ezgif-1-1a54c51247.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://i.ibb.co/S3LJG4L/ezgif-2-2340556114.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://pixel.crd.co/assets/images/gallery04/0399c19f.gif?v=6c952962)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://pixels.crd.co/assets/images/gallery06/902ddb74.gif?v=b22a957b)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: url(https://pixels.crd.co/assets/images/gallery33/8c4c0ece.gif?v=b22a957b)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://external-media.spacehey.net/media/sGBVzOdmUsoGedi6M5Kgr51k_1s5Ls4IKjIfrqNvmJUE=/https://caterpie.crd.co/assets/images/gallery27/d85f2cb8.gif?v=08522da7)
} 

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}

.profile .table-section .details-table td p{
color: white;
}

.profile .table-section .details-table td a{
color: red;
}

.profile .table-section .details-table td a:hover{
color: red;
}

.profile .table-section .details-table td a:hover{
color: darkred;
}

.profile .table-section .details-table td {
background: black;
border: 3px inset darkred;
box-shadow: 0px 0px 10px 0px darkred;
}


.profile .friends .comments-table td {
background-image: url("https://i.ibb.co/fNgF51b/ezgif-4-9a80a8d2b3.jpg");
border: 3px inset darkred;
}

.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3); 
background: black;
}

.comments-table td:first-child img{
box-shadow: 0px 0px 19px 0px black;
}

.comment-replies{
border: 3px inset darkred;
color: white;
}

.general-about .details{
background: black;
border: 3px inset darkred;
background-image: url("https://i.ibb.co/QDmWsH4/ezgif-4-bbf4b0e98b.jpg");
background-size:cover;
box-shadow: 0px 0px 10px 0px darkred;
}

.general-about .details p:not(.online){
color: white !important;
font-size: 14px;
}

.general-about .details a{
color: white !important;
font-size: 14px;
}

nav{ 
color:white;
font-size: 13px !important;
text-transform:none;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background: transparent;
}

nav .links a:hover {
color: darkred;
}

nav .top{
background-color: transparent;
font-family: courier;
}

nav .top a{
color: white !important;
}

nav .top label{
color: white;
}

input{
color: white;
border: 2px solid darkred;
border-radius: 5px;
background: black;
}

button{
background: linear-gradient(360deg, darkred 83%, red 94%);
color: black;
border: 2px solid black;
border-radius: 5px;
font-family: courier;
}

.profile .url-info {
border: 3px solid transparent;
color: transparent;
font-size: 0.1px;
height: 60px;
background-image: url(https://i.ibb.co/SPc7qch/urlinfo.png);
}

.url-info p{
    opacity: 0.0;
}

.profile .table-section {
border: none;
}

nav .links a{
color: white;
font-size: 13px;
text-shadow: 0 0 7px black;
font-family: courier;
}

table .comments-table {
border: 2px inset darkred;
}

footer p{
color: white;
font-size: 100%;
}

footer a{
color: white;
}

footer {
color: white !important;
box-shadow: 0px 0px 10px 0px darkred;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background-image: url(https://i.ibb.co/0jqxqHk/ezgif-1-fd53b18d30.webp);
border: 3px inset darkred;
  }    

</style>

<style>

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 5px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
table.comments-table{
background-color:black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-color:black;
border-width: 5px;
}
</style>

<style>
img:hover , .url-info: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); }
}
</style>



<style>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: darkred;}

    ::-webkit-scrollbar-track {
    background:black;}
</style>

<style>
.profile .friends .comments-table td:first-child{
background-image: url(https://i.ibb.co/DY3fFRz/ezgif-4-9a39015dc8.jpg);

}

.comments-table td{
border-width:0;
background-color: black;
border: 3px inset darkred;
</style>

<style>
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(0 0 0 / 48%) 50%, rgb(255 255 255 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
</style>

<style>
.online {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>

<style>
body { cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur117.cur), auto; }
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/7Lh_C_Q0BH8?si=AmoNVeHaBMPHS-51//?&;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>
nav img.logo {
filter: brightness(0) saturate(100%) invert(22%) sepia(36%) saturate(3844%) hue-rotate(341deg) brightness(99%) contrast(100%); !important;
}
</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 20 of 105 comments ( View all | Add Comment )

𝒦𝒶𝓉𝓉	1742374975 using Report Comment
Yuriyuri	1741471820 using Report Comment
S3r4ph11m!	1741455311 WOW, I LOVE THIS LAYOUT Report Comment
S3r4ph11m!	1741455310 WOW, I LOVE THIS LAYOUT Report Comment
eptyrl	1740970921 THIS IS SO FRICKIN COOL!! Report Comment
Soso	1739897436 using<3 Report Comment
ᖭི༏ᖫྀ☆Ali☆	1739847937 Maybe Usingg!! Report Comment
Nojenta	1739657834 Using Report Comment
Taev	1739350548 using Report Comment
reedbool33	1738996941 useeee Report Comment
wxnterphunk	1738956562 usandoo Report Comment
Robin	1738947441 done Report Comment
Dylan	1738589646 using Report Comment
𝐷𝑜𝑟𝑖 𝐷𝑎𝑠𝑖𝑙𝑣𝑎	1738429313 Using `_´ Report Comment
Asry	1738244676 using this all day Report Comment
profesiclown	1738106585 using Report Comment
Lucien ⚰️	1737747120 using! Report Comment
Mel_Mel	1737687979 using!! Report Comment
★creepycat	1737400068 Usingg!! Report Comment
AeonCvrse	1737327470 usingggggg Report Comment