The Vampire Diaries Layout ♥

Tags: layout, layouts, the vampire diaries, elena gilbert, stefan salvatore, damon salvatore, dark, black, red, tvd

Description:

Hello Everyone!
I hope you like this layout I created!
Please let me know in the comments if you decide to use this layout!
If you'd like to be super nice & credit me somewhere on your page, that would be much appreciated as well!
Additionally, feel free to add me! I always love gaining new friends! 😊

Preview:

Code:

<!-- (c) Layout created by Jody Marie ♡ (https://layouts.spacehey.com/layout?id=30179) --> <style>/* Cursor & Scrollbar */ * {cursor: url('https://cur.cursors-4u.net/cursors/cur-6/cur531.cur'), auto !important;} /* Chrome, Edge, and Safari */ *::-webkit-scrollbar {width: 18px;} *::-webkit-scrollbar-track {background: #000;} *::-webkit-scrollbar-thumb { background-color: #13193d; border-radius: 10px; border: 3px solid #13193d; } </style> <style>/* Profile Design Info */ :root { --logo-blue: #13193d; --darker-blue: #ffffff; --lighter-blue: #000000; --even-lighter-blue: #000000; --lightest-blue: #000000; --dark-orange: #ffffff; --light-orange: #807371; --even-lighter-orange: #000000; --green: #000000; } body {background: url("https://thumbs2.imgbox.com/5d/89/YlWvRyeW_t.jpg");} .profile {background-color: #000; color: #fff;} main { border-radius: 0 0 10px 10px; background: rgba(0,0,0) !important; padding: 0px 0px; } * {font-family: Monospace;} .container { border-radius: 15px 15px 0 0; overflow: hidden; margin-top: 30px; padding: 10px; } footer { border-radius: 15px; background: rgba(19,25,61) !important; color: #fff !important; display: block !important; } footer .links a{color: #ffffff !important;} footer .links a:hover{color: #ffffff !important;} footer .copyright a{color: #ffffff !important;} .profile .contact, .profile .url-info, .profile .table-section, .home-actions { border: none; } a.addme { font-size: 2rem; font-weight: bold; margin-bottom: 15px; display: block; } </style> <style>/*Search Users Box (Background Color/Background Image)*/ .top input{border-radius: 15px 15px 15px 15px;} </style> <style>/*Buttons (Background Color/Background Image)*/ button{ border-radius: 25px 25px 25px 25px !important; color: #807371; font-weight: bold; background-color: white !important; } </style> <style>/* Navigation */ nav { border-radius: 15px 15px 0 0; overflow: hidden; } nav .links a{ color: #ffffff; !important; text-shadow: none !important; font-weight: bolder; } nav .links a:hover {color: #fff; !important;} nav .links { text-align: center; padding: 0.1px 3.5px 5.5px 3.5px; font-size: 70%; } </style> <style>/* Links */ a:hover {color: #fff;} </style> <style> main:before { width: 100%; height: 425px; display: block; content: ""; background-image: url('https://images2.imgbox.com/2a/f2/9kvkG90o_o.jpg'); background-position: center center; background-size: cover; </style> <style>/* Profile Name Header */ @import url('https://fonts.cdnfonts.com/css/vampire'); .profile .left h1{ font-family: 'Vampire', sans-serif; font-size: 35px; text-align: center; overflow-wrap: break-word; } h1{ background: -webkit-linear-gradient(#ffffff, #ffffff, #ca0822, #ca0822); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> <style>/* Profile Picture & Online Icon */ .profile-pic {border-radius: 500px; overflow: hidden;} .online {visibility: hidden;} .online img { content: url("https://ct.pimp-my-profile.com/online/26.gif"); animation-name: none; visibility: visible; height: 15px; width: 60px; } </style> <style>/* Headers Colors */ .heading { padding: 5px 0 !important; margin-top: 15px; margin-bottom: 10px; background-color: #13193d !important; color: #fff !important; text-align: center; border-bottom: 2px solid; } .profile .blurbs .section h4{color: #ca0822; font-weight: bolder;} </style> <style>/* Interests Table Info */ table.details-table {border-collapse: collapse;} table.details-table td {background-color: #000 !important;} .details-table td:first-child {color: #ca0822 !important;} </style> <style>/* Blog Info */ .blog-preview p { background-color: none; padding: 5px 10px; border-radius: 10px; color: #ca0822; } .blog-preview p a{color: #ffffff !important;} .blog-preview p a:hover, .blog-preview p a:active, .blog-preview p a:focus{ color: #ffffff !important; } </style> <style>/* Friends Info */ .profile .friends .heading{color: #ffffff;} .count {color: #ca0822;} .profile .friends .person p{color: #ffffff !important;} .profile .friends .person img {border-radius: 500px;} .profile .friends .person img:not(.icon) { border-radius:15px; box-shadow: 1px 0px 7px 2px rgba(202, 8, 34, 0.71); border: 2px solid rgba(255, 255, 255, 1); } .profile .friends .person img:not(.icon):hover { transform: scale(1.1); transition: 0.5s ease; } .profile .friends .person img:not(.icon) {transition: 0.5s ease} </style> <style>/* Comments Info */ table.comments-table td { background-color: #000 !important; border: none; } .comments-table td:first-child img { width: 80px; border-radius: 500px; } .comments-table{ display: block; height: 200px; overflow-y: scroll; border: none; } </style> <style>/* Custom Profile Headers */ .contact .heading{ font-size:0; } .contact .heading:before{ content: "You Can't Just Sit There And Wait For Life To Come To You, You Have To Go Get It 🤍"; font-size:.8rem; font-weight:bold; } .w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;} .w-40 .table-section:nth-last-child(2) .heading:before{content: "I Live In The Real World Where Vampires Don't Burn In The Sun 🤍"; font-size:.8rem; font-weight: bold; } .w-40 .table-section:last-child .heading h4{ font-size:0; } .w-40 .table-section:last-child .heading:before{ content: "All You Can Do Is Be Ready For The Good So That When It Comes, You Invite It In 🤍"; font-size:.8rem; font-weight: bold; } .blog-preview h4{ font-size:0; } .blog-preview h4 a{font-size:.8rem;margin-left:5px; } .blog-preview h4:before{ content: "Life Isn’t About Your Final Moments. It’s About The Moments That Led Up To Them 🤍"; font-size:.8rem; } .blurbs .heading{ font-size:0; } .blurbs .heading:before{ content: "Hello, Brother. 🤍"; font-size:.8rem; font-weight:bold; } .blurbs .inner .section:nth-child(1) h4{ font-size:0; } .blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.8rem; } .blurbs .inner .section:nth-child(2) h4{ font-size:0; } .blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.8rem; } .friends .heading{ font-size:0; } .friends .heading:before{ content: "I Would Rather Spend Every Moment In Agony Than Erase The Memory Of You 🤍"; font-size:.8rem; font-weight:bold;} .friends#comments .heading{ font-size:0; } .friends#comments .heading:before{ content: "Our Actions Are What Set Things In Motion, But We Have To Live With That..."; font-size:.8rem; font-weight:bold;} </style> About me text goes here.

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.