Morgan Madewell 's profile picture

Published by

published
updated

Category: Art and Photography

HOT LAVA THEMED LAYOUT

Copy and paste into the "who id like to meet"

[ you can change urls to swap in different images/gif or change color codes ]

<div align="center" style="z-index:9;visibility:visible;"></div><style>HTML,BODY{cursor: url("https://downloads.totallyfreecursors.com/cursor_files/mariofireani.ani"), url("https://downloads.totallyfreecursors.com/thumbnails/mariofireani.gif"), auto;}</style>
<p><style>
@import url("https://fonts.google.com/specimen/Pirata+One#standard-styles");

/* base page */
body {
  font-family: -Tahoma, Tahoma, 'Pirata One',
  'Tahoma, 'Tahoma, 'Pirata One', 'Tahoma', 'Tahoma', 'Tahoma',
  'Pirata One', Pirata One;
  font-weight: 10;
  background: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.doubleportionsupply.com%2Fwp-content%2Fuploads%2F2018%2F01%2FLava-Pattern.jpg&f=1&nofb=1");
}

body > .container {
  width: 960px;
  max-width: 80%;
}

nav,
main,
footer {
  color: var(--dark-orange);
  background: #000000;
}


main {
  padding: 0;
}

nav {
  margin-bottom: 32px;
}
nav .top {
  background: none;
}
nav .links {
  background: none;
}

footer {
  display: none;
}

a {
  cursor: pointer;
  color: #ff2500;
  text-decoration: none;
}

main a:hover {
  color: inherit;
  text-decoration: none;
  background-image: url("https://media3.giphy.com/media/YgceFa5istesE/giphy.gif?cid=ecf05e47felk87nmfnfz8s7mcljtibo1f1y87grzhu7ba2ky&rid=giphy.gif");
  background-position: center center;
  text-shadow: 0 0 5px #ff6600, 0 0 15px #ff6600, 0 0 20px #ff6600, 0 0 40px #ff6600, 0 0 60px #ff6600, 0 0 10px #ff6600, 0 0 98px #ff6600;
}

b {
  font-weight: 600;
}

img {
  max-width: 100%;
}

video {
  width: 100%;
  border-radius: 4px;
}
audio {
  width: 100%;
}

.profile-info, .url-info, .blurbs .section h4 {
  display: none;
}
main button {
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 4px;
  font-family: inherit;
  font-size: 22px;
  text-decoration: none;
  text-shadow: 0 0 5px #ff6600 0 0 15px #ff6600, 0 0 20px #f2f217, 0 0 40px #f2f217, 0 0 60px #f2f217, 0 0 10px #f2f217, 0 0 98px #f2f217;
  color: #f2f217;
  border: 2px solid;
  border-radius: 4px;
  background-color: transparent;
  box-shadow: 
    0 1px 2px rgba(0,0,0, 0.6), 
    2px 1px 4px rgba(0,0,0, 0.3), 
    2px 4px 3px rgba(3,0,128, 0.3), 
    0 0 7px 2px rgba(255, 165, 0, 0.6), 
    inset 0 1px 2px rgba(0,0,0, 0.6), 
    inset 2px 1px 4px rgba(0,0,0, 0.3), 
    inset 2px 4px 3px rgba(3,0,128, 0.3), 
    inset 0 0 7px 2px rgba(255, 165, 0, 0.6);
}


/* content rewrites */
.contact .heading h4 {
  position: relative;
  visibility: hidden; 
}
.contact .heading h4:after {
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  content: "Contact"; 
}

.table-section .heading h4 {
  position: relative;
  visibility: hidden; 
}
.table-section .heading h4:after {
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  content: "Interests"; 
}

.table-section ~ .table-section .heading {
  display: none;
}

.blog-preview h4 {
  position: relative;
  visibility: hidden;
}
.blog-preview h4 a {
  display: none;
}
.blog-preview h4:after {
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  content: "Blog Posts"; 
}

.blurbs .heading h4 {
  position: relative;
  visibility: hidden; 
}
.blurbs .heading h4:after {
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  content: "About me"; 
}

.friends .heading h4 {
  position: relative;
  visibility: hidden; 
}
.friends .heading h4:after {
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  content: "Friends"; 
}

#comments .heading h4 {
  position: relative;
  visibility: hidden; 
}
#comments .heading h4:after {
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  content: "Comments"; 
}

/* profile */
.profile-pic img {
  border-radius: 3px;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.heading h4, .blog-preview h4, .profile h1 {
  font-size: 15px;
  line-height: 40px;
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  font-family: "Sacramento", cursive;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

/* profile info */
.online {
  font-size: 12px;
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
  border: 0;
}

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

.contact a {
  border-radius: 3px;
  display: flex;
  align-items: center;
  margin: auto;
  margin-right: 8px;
  padding: 8px;
  font-family: inherit;
  font-size: 13px;
  text-decoration: none;
  text-shadow: 0 0 5px #ff2500, 0 0 15px #ff2500, 0 0 20px #ff2500, 0 0 40px #ff2500, 0 0 60px #ff2500, 0 0 10px #ff2500, 0 0 98px #ff2500;
  color: #ff2500;
  border: 2px solid;
  border-radius: 4px;
  background-color: transparent;
  box-shadow: 
    0 1px 2px rgba(0,0,0, 0.6), 
    2px 1px 4px rgba(0,0,0, 0.3), 
    2px 4px 3px rgba(3,0,128, 0.3), 
    0 0 7px 2px rgba(255, 165, 0, 0.6), 
    inset 0 1px 2px rgba(0,0,0, 0.6), 
    inset 2px 1px 4px rgba(0,0,0, 0.3), 
    inset 2px 4px 3px rgba(3,0,128, 0.3), 
    inset 0 0 7px 2px rgba(255, 165, 0, 0.6);
}

.contact a[href^="/addfriend"] {
  animation: flickering 5s infinite;
}

.contact a .icon {
  margin-right: 16px;
  filter: grayscale(1);
}

/* blurbs */
.profile .blurbs .heading,
.profile .friends .heading {
  background: none;
  color: inherit;
}

/* interests */
.details-table td:first-child {
  color: inherit;
  background: none;
  border: 0;
}

.details-table td {
  background: none;
  border: 0;
}

/* friends */
.person p {
  color: #ff2500 !important;
}
.person img {
  border-radius: 3px;
}

/* comments */
.comments-table td:first-child,
.music-table td:first-child {
  background: none;
}

.comments-table td,
.music-table td {
  background: none;
}

.comments-table {
  border-radius: 3px;
  border: 2px solid #fff6a9;
  box-shadow: 
    0 1px 2px rgba(0,0,0, 0.6), 
    2px 1px 4px rgba(0,0,0, 0.3), 
    2px 4px 3px rgba(3,0,128, 0.3), 
    0 0 7px 2px rgba(255, 165, 0, 0.6), 
    inset 0 1px 2px rgba(0,0,0, 0.6), 
    inset 2px 1px 4px rgba(0,0,0, 0.3), 
    inset 2px 4px 3px rgba(3,0,128, 0.3), 
    inset 0 0 7px 2px rgba(255, 165, 0, 0.6);
  border-collapse: collapse;
  background: none;
}

.comments-table a img {
  border-radius: 3px;
}


/* animations */
@keyframes bounce-x {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100vw - 150px));
  }
}

@keyframes bounce-y {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(100vh - 150px));
  }
}

@keyframes flickering {
  0% {
    border-color: transparent;
    opacity: 0.2;
  }
  
  2% {
    border-color: #ae5bd7;
    opacity: 1;
  }
  
  4% {
    border-color: transparent;
    opacity: 0.2;
  }
  
  8% {
    border-color: #ff2500;
    opacity: 1;
  }
  
  28% {
    border-color: #ff2500;
    opacity: 1;
  }
  
  30% {
    border-color: transparent;
    opacity: 0.2;
  }
  
  36% {
    border-color: #ff2500;
    opacity: 1;
  }
  
  100% {
    border-color: #ff2500;
    opacity: 1;
  }
}



nav .links {
    background-image:url(https://media2.giphy.com/media/3o85xJY1FaLzqeoBGw/giphy.gif?cid=ecf05e472aemcalatx296rtzddczs545osa874ek18de54ld&rid=giphy.gif);
    padding: 3.5px 16px 5.5px 16px;
}

</style>
</p>


2 Kudos

Comments

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

Monica Courtney

Monica Courtney's profile picture

This is amazing! Thank you so much for sharing!


Report Comment

Morgan Madewell

Morgan Madewell 's profile picture

Thank you Katie :)


Report Comment

Katie

Katie's profile picture

This one is also really epic.


Report Comment