Scarlet Witch WandaVision Layout

Tags: red, gradients, marvel, mcu, scarlet witch, wandavision, nerd, geek, matching set, heytony

Description:

This is the first part of a set! I made this in honor of WandaVision. If you're a fan of the show, DEFINITELY add me, so we can talk about it! Oh and yeah enjoy this layout! you and your bestie or significant other can have matching layouts!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by TonyTheTiger🐯 (https://layouts.spacehey.com/layout?id=1519) -->

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-1/cur76.cur), auto !important;}</style>
<a href="https://www.cursors-4u.com/cursor/2008/11/23/red-pointer-4.html" target="_blank" title="Red Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Red Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>
 
/*  Scarlet Witch WandaVision layout by TonyTheTiger (spacehey.com/heytony)  */
/*  to start off, this part bellow will control the base of your profile.*/
 
 
    body {
        background-color: ;
        background-image: url('https://i.imgur.com/OQ6aorT.png');
        background-size: cover;
        background-position: left;
        background-repeat: repeat;
        background-attachment: ;
    }
    Main {
        background: rgb(208,17,17);
        background: linear-gradient(180deg, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        background-attachment: scroll;
        border: ;
        border-radius: ;
        border-color: ;
     }
    nav {
        color: ;
    }
    nav .top {
        background-color: #ae1a28;
        background-image: url('https://i.imgur.com/9LLkJyA.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-attachment: scroll;
    }
        nav .links {
        background-color: #15070e;
        color: ;
        padding: 3.5px 16px 5.5px 16px;
        }
        nav .links a{
        text-decoration: none;
        color: #F0DECB;
        font-size: 12px;
    }
    nav .links a:hover{
        text-decoration: underline;
        color: #c1816c;
    }
    footer {
        background-color: #15070e;
        background-image: url('https://i.imgur.com/GcrfEHW.png');
        background-size: ;
        background-repeat: no-repeat;
    }
    body, div {
        font-family: verdana;
        font-size: 14px;
        color: #ffffff;
        font-weight: bold;
        font-style: ;
        text-decoration: none;
    }
    
 
/*  bellow this you can change the left side of your profile,
including the interests details' table, but only the heading! */   
    
    .profile h1 {
        background-color: ;
        color: ;
    }
    .profile-pic img {
            border-radius: ;
            border-width: ;
            border:  ;
            border-color: ;
        }
    .profile .contact,
    .profile .url-info {
        background: rgb(208,17,17);
background: radial-gradient(circle, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        width: 100%;
        border: solid transparent;
        margin: 10px 0;
    }
    .profile .table-section,
    .home-actions {
        background: rgb(208,17,17);
        background: radial-gradient(circle, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        width: 100%;
        border: transparent;
        margin: 10px 0;
    }
    .profile .contact .heading,
    .profile .table-section .heading,
    .home-actions .heading {
        background: transparent;
        color: ;
        padding: 2px 7px;
    }
    
    
/*  this is the part where you tweak the right side of your profile */  
    
    .profile .blurbs {
        background: rgb(208,17,17);
        background: radial-gradient(circle, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        margin: 20px 0;
        border: ;
        border-color: ;
    }
    .profile .friends {
        border: ;
        border-color: ;
    }
    .profile .blurbs .heading {
        background: rgb(208,17,17);
        background: linear-gradient(267deg, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);;
        color: #d01111;
    }
    .profile .friends .heading {
        background: rgb(208,17,17);
        background: linear-gradient(267deg, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        color: ;
    }
    .profile .blurbs .section h4 {
        background-color: ;
        margin: 14px;
        color: #d01111;
        font-weight: ;
    }
    .profile .friends {
        background: rgb(208,17,17);
        background: radial-gradient(circle, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
    }
    .profile .friends .person p {
        background: rgb(208,17,17);
        background: linear-gradient(4deg, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        color: #F0DECB;
        font-weight: ;
        width: 100%;
        word-break: break-word;
        font-size: 95%;
        text-align: center;
    }
    .count {
        color:  #d01111;
    }
    
    
/*  this is the part you change your comments background colors,
and your interests table background colors. 
P.S.: the ones with ":first-child" variables, will control the left side of the tables. */ 
    .comments-table {
        border: transparent;
    }
    .comments-table td,
    .music-table td {
        background: rgb(208,17,17);
        background: linear-gradient(90deg, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        vertical-align: top;
        position: relative;
    }
    .comments-table td:first-child,
    .music-table td:first-child {
        background:     #d01111;
        text-align: center;
        font-weight: bold;
        width: 38%;
    }
    .details-table td {
        background: rgb(208,17,17);
background: linear-gradient(270deg, rgba(208,17,17,1) 0%, rgba(174,26,40,1) 35%, rgba(0,0,0,1) 100%);
        vertical-align: top;
    }
    .details-table td:first-child {
        background: #15070e;
        color: #f0decb;
        font-weight: bold;
        width: 33%;
    }
    
    
/*  this is the part you can change how the colors of the links look
 DON'T mess with anything but the color! (or do... im not your mom.) */ 
    
    a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover,
    a.man:link, a.man:active, a.man:visited, a.man:hover,
    a, a:link, a:active, a:visited, a:hover,
    a.navbar:link, a.navbar:active, a.navbar:visited, a.visited:hover,
    a.text:link, a.text:active, a.text:visited, a.text:hover,
    a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited,
    a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited,
    a.redlink:hover {
        color: #f0DECB;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
    }
    a.navbar:hover, a.man:hover, a:hover {
        color: #c1816c;
        font-weight: bold;
        font-style: normal;
        text-decoration: underline;
    }
 
 
/*  Hope this helped you out!
and i suggest you YouTube Noah's SpaceHey CSS tutorials, if you're completely lost. */
 
</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 0 of 0 comments ( View all | Add Comment )