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 91 comments ( View all | Add 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
ㅁㄴ	1737318845 using Report Comment
⋆·✦𝕬𝖓𝖉𝖎𝖎✦·⋆	1737108692 using :> Report Comment
Marie	1737041432 USING!!! Report Comment
Hachikoloverby	1736935863 Usando Report Comment
𝐗𝐱_𝐬𝐊𝟒𝐭𝟏𝐍_𝐋𝟎𝐫𝟑𝟑𝟑☣	1736199526 USING THIS RN SHI IS PEAKKK! Report Comment
𝐗𝐱_𝐬𝐊𝟒𝐭𝟏𝐍_𝐋𝟎𝐫𝟑𝟑𝟑☣	1736199526 USING THIS RN SHI IS PEAKKK! Report Comment
Em	1735584669 hell yeah I'm using this Report Comment
Xtals husband	1735481682 using Report Comment
ria	1735394766 using! Report Comment
Sara	1734076167 Usinggg!! Report Comment
♡yisdead :3	1733667100 using Report Comment
Quinn	1733316168 Using!!! Report Comment
vxl~tine	1732855705 using Report Comment
♡𝗥♥𝗶♥𝗻♡	1730588333 using! Report Comment
1di0tcl0wn	1730240304 using Report Comment