x☆*Heather*☆x's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Deadly Premonition Layout :D

So, SpaceHey isn't letting me put the Deadly Premonition Layout on the layouts page, but I checked the rules so I'm gonna post it on here :3




Soooooo uh... here's the layout!! Don't worry about credit or anything idm :3

~~~~~The loading screen has been updated to be the FK in the coffee~~~~~

/////////////////////////////////////Deadly Premonition Layout\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


<style>

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

body{font-family: "Special Elite" ; font-size: 19px !important;}

</style>


<style>

img.logo{

content: url("https://cdn2.steamgriddb.com/logo_thumb/cf8aee46a3f1cc6e982f1cf1a8acb3c9.png");

width: 346px !important;

height: 125px !important;

</style>


<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://64.media.tumblr.com/77ba5f67c2efbb77a38c63c19890a09b/c0c056d396f862d4-40/s250x400/1dbf9cec782a6628e1014b62aaa322df0259b503.gifv');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>


<style>

main:before {

width: 100%;

height: 170px;

display: block;

content: "";

background-image: url('https://i.pinimg.com/564x/ad/c0/59/adc059ad4fb13fe55f3b0581cdb0f7cd.jpg');

background-position: center center;

background-size: fill;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/MQ0brQf1ROM?si=uO_tzBX3Lyic42d_&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>

body{ background:url("https://wallpaperaccess.com/full/5862422.jpg") no-repeat fixed; background-size:cover;

background-color: black;

}

background-color: DimGray;

}


.general-about .profile-pic img {

border: 10px solid transparent;

border-image: url("https://i.pinimg.com/564x/00/dd/20/00dd202ce4bcd21dd66acac1dd56599b.jpg") 60 fill stretch;

box-shadow: 0px 0px 10px 0px black;


.profile {

background-image:url(https://wallpaperaccess.com/full/3854860.jpg);

  background-repeat: repeat;

}


h1{

    font-family: 'Special Elite';

font-size: 50px !important;

text-shadow: 5px 5px 0px black;

color: white;

}


.friends p, .friends a {

color: white;

text-shadow: 3px 3px 3px  black;

}


.row.profile{

box-shadow: 0px 0px 8px 6px black;

}


.profile .friends .inner{

text-align: center;

background-image: url("https://i.pinimg.com/564x/00/dd/20/00dd202ce4bcd21dd66acac1dd56599b.jpg");

border: 3px inset black;

box-shadow: 0px 0px 10px 0px black;

}


.profile .blurbs .section h4 {

text-align: center;

font-size: 14px;

color: white;

border: 3px black;

}


:root 

{

--logo-blue: ;

  --darker-blue: ;

--lighter-blue: purple 55;

--even-lighter-blue: ;

--lightest-blue: ;

--dark-orange: ;

--light-orange: ;

--even-lighter-orange: ;

--turquoise: ;

        

        --table-header:#191970;

--table-color: #87CEFA;

--link-text: #87CEFA;

--main-text: #87CEFA;


}   



.profile-info{


background:url("https://i.pinimg.com/564x/85/38/2e/85382ee4e3af9e18281f4694647937c5.jpg"); 

  background-size:cover;

border: 3px inset black;

box-shadow: 0px 0px 15px 0px black;

}


.profile-info a{

font-size: 14px;

color:Silver;

text-shadow:  3px 3px 2px black;

}


.profile .blurbs .heading, .profile .friends .heading {

color: white;

background-color:transparent;

}


.profile .blurbs .inner{

background: url("https://i.pinimg.com/564x/85/38/2e/85382ee4e3af9e18281f4694647937c5.jpg");

box-shadow: 0px 0px 10px 0px black;

border: 3px inset black;

}


.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

background-color: transparent;

color: black;

}


.contact .heading h4{

display:none !important;

}


.contact .heading{ font-size:20px;}

.contact .heading:before{ content: url(https://64.media.tumblr.com/256d3c4aab74defa69d43cb4c8c3d326/2d86d3c6d2d5b3bd-0f/s400x600/eb77360025ef127318de0367a17aa1e6b2f070e3.gifv);

overflow:hidden;

}


.table-section .heading{ font-size:0; }

.table-section .heading:before{ content: url(); 

padding-bottom: 10px;

}


h4 {

font-size: 14px !important;

color: Silver;

  font-family: 'Special Elite';

 }


p {

  font-family: 'Special Elite';

color: Silver;

   }


a {

font-size: 14px;

     color: Silver; 

   }


a:hover {

     color: darkred; 


}


.count {

        color: red;

    }


.profile .friends .person p {

color: Silver;  

}

.profile .friends .person p:hover {

color: darkred;  

}


.blog-preview{

text-align: center;

background-image: url(https://i.pinimg.com/564x/00/dd/20/00dd202ce4bcd21dd66acac1dd56599b.jpg);

color: Silver;

box-shadow: 0px 0px 10px 0px black;

}


.contact .heading h4{

font-size:14px;

}


.online {

   margin:auto;

   padding-bottom: 5px;

   content: url(https://blinkies.cafe/b/blinkiesCafe-Lx.gif);

}


.profile .contact {

border: black;

  font-family: 'Special Elite';

background: url(https://i.pinimg.com/564x/85/38/2e/85382ee4e3af9e18281f4694647937c5.jpg);

border: 3px inset black;

box-shadow: 0px 0px 10px 0px black;

}


.profile .contact a{

font-size: 12px;

}


.profile .table-section .details-table td p, .profile .table-section .details-table td a{

color: Silver;

}


.profile .table-section .details-table td a:hover{

color: darkred;

}


.profile .table-section .details-table td {

background:url("https://i.pinimg.com/564x/00/dd/20/00dd202ce4bcd21dd66acac1dd56599b.jpg");

border: 3px inset black;

box-shadow: 0px 0px 10px 0px black;

}


.general-about .details{

padding: 2px;

background: black;

border: 3px inset black;

background-image: url("https://i.pinimg.com/564x/00/dd/20/00dd202ce4bcd21dd66acac1dd56599b.jpg");

background-size:cover;

box-shadow: 0px 0px 10px 0px black;

  font-family: 'Special Elite';

}


.profile .url-info {

border: 3px solid transparent;

color: transparent;

font-size: 0.1px;

height: 130px;

background-image: url(https://cdn2.steamgriddb.com/logo_thumb/5c04925674920eb58467fb52ce4ef728.png);

}


.links{

width=810px;

}


nav .links {

background: transparent;

}


nav .links a:hover {

color: darkred;

}


nav .top{

background: url();

}


nav .links a{

color: Silver;

font-family: Arial, sans-serif;

font-size: 13px;

text-shadow: 0 0 7px black;

}

table .comments-table {

border: 2px inset black;

}


footer {

color: white !important;

box-shadow: 0px 0px 15px 6px black;

text-decoration: underline !important;

text-decoration-style: dotted !important;

background-image: url(https://i.pinimg.com/564x/ff/f9/de/fff9de8e2ac0aa595e0391cf310c8bb9.jpg);

  } 

</style>


<style>


h1{

    font-family: 'Special Elite';

animation: type 3s steps(27);

  color: Silver;

  font-size: 10px;

  white-space: nowrap;

  overflow: hidden;

  }


@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}


@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

</style>


<style>

nav::before {

   content: "";

   background:  url(https://cdn2.steamgriddb.com/logo_thumb/941bea2bd357be22a88c3d7942d1740a.png);

background-size: 200px;

    position: fixed;

    float: right;

    display: inline;

    bottom: 0;

    right: 10px;

    height: 18px;

    width: 200px;

    margin-bottom: 10px;

    margin-right: 5px;

}



nav::before{

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}


}

</style>


<style>



:root{


  --topic1: "topic 1";

  --topic2: "topic 2";

  --topic3: "topic 3";

  --topic4: "topic 4";

  --topic5: "topic 5";

  --topic6: "topic 6";


 }


.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}


.details-table tr td:first-child p::after{

  color:var(--links) !important;

  letter-spacing:normal !important;

   text-shadow: 2px 2px white !important;

   filter: brightness(95%) !important;

}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{

  content: var(--topic1);

}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{

  content: var(--topic2);

}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{

  content: var(--topic3);

}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{

  content: var(--topic4);

}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{

  content: var(--topic5);

}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{

  content: var(--topic6);

}



</style>


<style>

    ::-webkit-scrollbar {

    width: 8px;

    height: 10px;}


    ::-webkit-scrollbar-thumb {

    background: darkred;}


    ::-webkit-scrollbar-track {

    background:black;}

</style>


<style>

table.comments-table{

background: url(https://i.pinimg.com/564x/ff/f9/de/fff9de8e2ac0aa595e0391cf310c8bb9.jpg);

display: block;

height: 300px!important;

overflow-y: scroll;

border-color:black;

border-width: 5px;

}

</style>


<style>

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

background-image: url(https://i.ibb.co/jyxrpc1/ezgif-4-54758147c2.jpg);


}


.comments-table td{

border-width:0;

background-color: black;

border: 2px solid black;

</style>


//////////////////////Enjoy Fellas and fell-theys!\\\\\\\\\\\\\\\\\\\\\\\\


3 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

fartenstein

fartenstein's profile picture

THIS IS SO GOOD WTF??


Report Comment



unironically you're the one who inspired me to make a deadly premonition layout-

by x☆*Heather*☆x; ; Report

Liliana

Liliana's profile picture

this looks so good ngl 👍


Report Comment



EEEEEE TYSM :3

by x☆*Heather*☆x; ; Report