Valentine's Day 💕

Tags: valentine's day, pink, cute, hearts, lobster font, valentines, heytony

Description:

Hey! Tony here, with another layout! I made this one in preparation for V'Day coming up! Its pink, full of hearts, and it's the first layout i've made with imported google fonts! Please feel free to use! mod if you must. But add me! I'd love to see it live on your page!

oh and as always, you can browse my past layout codes on my Pastebin! https://pastebin.com/u/heytony

Enjoy!

[Live Preview]

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Oswald&display=swap');
</style>
 
<style>
 
/* Valentine's Day Layout
            by TonyTheTiger (spacehey.com/heytony) */
 
/*  to start off, this part bellow will control the base of your profile.
P.S. background attachment is the one that makes your background either stay put
or scroll with you. use "fixed" or "scroll" for that part. */
 
 
    body {
        background-color: pink;
        background-image: url('https://www.onlygfx.com/wp-content/uploads/2019/06/6-pink-heart-pattern-5.png');
        background-size: ;
        background-position: center;
        background-repeat: repeat;
        background-attachment: scroll;
    }
    Main {
        Background-color: white;
        background-image: url('https://www.onlygfx.com/wp-content/uploads/2019/06/6-pink-heart-pattern-5.png');
        background-size: 100%;
        background-position: center;
        background-repeat: repeat;
        background-attachment: scroll;
        border: ;
        border-color: ;
     }
    main:before {
        width: 100%;
        height: 200px;
        display: block;
        content: "";
        background-image: url('https://bestanimations.com/media/hearts/1547468834pretty-pink-heart-with-life-line-heartbeat-animated-gif.gif');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
}
        @media only screen and (max-width: 600px) {
            main:before{
            height: 200px;
        }
    }
    nav a:hover{
        color: hotpink!important;
        text-decoration: underline;
    }
    nav .top {
        background-color: pink!important;
    }
        nav .links {
        background: white;
        padding: 3.5px 16px 5.5px 16px;
        }
        nav .links a { 
            color: skyblue;
            text-decoration: underline;
            font-size: 16px;
        }
        nav .links a:hover {
            color: skyblue;
            text-decoration: underline;
        }
    footer {
        background-color: transparent!important;
        background-image: url('https://78.media.tumblr.com/6e8c0a3d3a346c23092ea3ac67f4dd7a/tumblr_mnvsuvLKHa1rg2itno1_400.gif');
        background-position: center;
        background-attachment: scroll;
        background-repeat: repeat-x;
    }
    body, div {
        font-family: 'Oswald', sans-serif;
        font-size: 16px;
        color: skyblue;
        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 {
        font-family: 'Lobster', cursive!important;
        font-size: 40px;
        background: white;
        color: pink;
        border: double rgb(300,50,70);
        border-radius: 5px;
        
    }
    .online {
        color:red!important;
    }
    .online img,
    .offline img {
        display: none;
    }
    .online:before {
        content: "💕"!important;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1.0,0,0,1.0);
        animation-duration: 2s;
    }
    .blog-preview {
        background: white;
        border-radius: 5px;
        border: double rgb(300,50,70);
    }
    .profile-pic img {
            border-radius: 5px;
            border: double rgb(300,50,70);
        }
    .friends img {
        border-radius: 5px;
    }
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        background: white;
        width: 100%;
        border: double rgb(300,50,70);
        border-radius: 5px;
        margin: 10px 0;
    }
    .profile .contact {
        background: white;
        background-image: url('https://media1.giphy.com/media/LnFcd0wwmiyD1CPtUl/giphy.gif');
        background-size: cover;
        background-position: center;
        background-repeat: repeat;
        background-attachment: scroll;
        border: double rgb(300,50,70);
        border-radius: 5px;
    }
    .profile .contact .heading,
    .profile .table-section .heading,
    .home-actions .heading {
        background: rgb(300,50,70);
        background-position: center;
        color: white;
        padding: 2px 7px;
    }
    
    
/*  this is the part where you tweak the right side of your profile */  
    
    .profile .blurbs {
        background: white;
        background-image: url('https://media1.giphy.com/media/dt6mD97Vv3Vu9HLGeK/giphy.gif');
        background-position: right;
        background-size: contain;
        background-repeat: repeat-y;
        background-attachment: scroll;
        margin: 20px 0px;
        border: double rgb(300,50,70);
        border-radius: 5px;
    }
    .profile .friends {
        background: transparent;
        border-radius: 5px;
        border: double rgb(300,50,70);
    }
    .profile .blurbs .heading {
        background: rgb(300,50,70);
        background-position: center;
        color: white;
    }
    .profile .friends .heading {
        background: rgb(300,50,70);
        background-position: center;
        color: white;
    }
    .profile .blurbs .section h4 {
        margin: 14px;
        color:  grey;
        font-weight: bold;
    }
    .profile .friends .person p {
        color: hotpink;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }
    .count {
        color: rgb(300,50,70);
        text-decoration: underline;
    }
    
    
/*  this is the part you change your comments table,
and your interests table. 
P.S.: the ones with ":first-child" variables, will control the left side of the tables. */ 
    
    .comments-table {
        display: block;
        height: 350px;
        overflow-y: scroll;
    }
    .comments-table td,
    .music-table td {
        background: white;
        background-image: url('https://media4.giphy.com/media/2tPtTkhq6CHJSJuZWU/giphy.gif');
        background-size: 50px;
        background-repeat: repeat;
        background-position: center;
        vertical-align: top;
        position: relative;
        border-radius: 5px;
    }
    .comments-table td:first-child,
    .music-table td:first-child {
        background-image: url('https://i.pinimg.com/originals/30/b9/0e/30b90ea88e05ce395b170bba7aace9e1.gif');
        background-size: contain;
        text-align: center;
        font-weight: bold;
        width: 38%;
        border-radius: 5px;
    }
    .details-table td {
        background: rgb(300,50,70);
        vertical-align: top;
        border-radius: 5px;
    }
    .details-table td:first-child {
        background: rgb(300,50,70);
        color: white;
        font-weight: bold;
        width: 33%;
        border-radius: 5px;
    }
    
    
/*  this is the part you can change how the links look */ 
    
    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: hotpink;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
    }
    a.navbar:hover, a.man:hover, a:hover {
        color: skyblue;
        font-weight: bold;
        font-style: normal;
        text-decoration: underline;
    }
 
 
/*  Hope these comments helped you out!
and i suggest you YouTube Noah's SpaceHey CSS tutorials, if you're completely lost. 
Special thanks to Cory (spacehey.com/cory) and Katie (spacehey.com/fighttheducks) */
 
</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 )