ellie williams tlou layout

Tags: tlou, the last of us, ellie, ellie williams, game, layouts, green, dark, music, cursor

Description:

hi guys !! i am using this layout currently just super customised if you want to see another example :3 this layout has music from tlou s1 ep3 "Long Long Time" by Linda Ronstadt. (which can be changed). there is a vampire lips cursor that i have used from https://layouts.spacehey.com/josephineluvsmusic ! i hope someone enjoys this, it is super customisable, if something doesn't work move it around the code <3

Preview:

Code:

<!-- (c) Layout created by kade (｡•́︿•̀｡) (https://layouts.spacehey.com/layout?id=98225) --> <style> @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Rubik+Bubbles&display=swap'); p{ font-family: 'Josefin Sans', cursive; font-size: 100%; } h1,h2,h3,h4,h5{ font-family: 'Rubik Bubbles', cursive; font-size: 150%; } </style> <style> body { background-image: url('https://i.postimg.cc/k4MxD35x/wallpaperflare-com-wallpaper.jpg'); background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: top left !important; background-size: cover !important; } main { background: rgba(98,101,84,0.7); color: white; border: solid 3px white; border-top: none; text-align: left; } nav .top{ background: #626554; color: white; border: solid 3px white; border-bottom: none; } nav .links{ background: #626554; color: white; border: solid 3px white; font-size: smaller; text-align: left; } footer{ background: #626554; color: white; border: solid 3px white; font-size: smaller; text-align: centre; } nav .links a{ text-shadow: none; } a{ color: white; } a:hover, nav .links a:hover, nav .top a:hover, button:hover{ color: white !important; text-decoration-style: wavy !important; } button{ color: white !important; background: none; border: none; } .count{ color: white; } :root { --logo-blue: white; --darker-blue: white; --lighter-blue: none; --even-lighter-blue: none; --lightest-blue: none; --dark-orange: white; --light-orange: none; --even-lighter-orange: none; --green: white; } .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* Add to Friends */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?width=16&height=16') } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* Add to Favorites */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?width=16&height=16') } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?v=d79a70b0?width=16&height=16') } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* Forward to Friend */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?width=16&height=16') } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* Instant Message */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?width=16&height=16') } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* Block User */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?width=16&height=16') } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* Add to Group */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?width=16&height=16') } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* Report Profile */ content: url('https://pix.crd.co/assets/images/gallery21/5b90216d.gif?v=d79a70b0?width=16&height=16') } </style> <style> .profile-pic img{ border: 3px solid white !important; } </style> <style> .general-about{ position: relative; margin-top: 30px; } </style> <style>* {cursor: url(https://cursors4.totallyfreecursors.com/thumbnails/vampire-lips.gif), auto !important;}</style> <a href="" target="_blank" style="position:absolute; top: 0px; right: 0px;"></a> <iframe width="0" height="0" src="https://www.youtube.com/embed/U0d4LAObARs//?&;amp;;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> html:after { animation: grain 8s steps(10) infinite; background-image: url(https://s.studiobinder.com/wp-content/uploads/2020/08/What-is-Film-Grain-Film-Grain-Example.jpg); content: ""; height: 300%; left: -50%; opacity:.1; position: fixed; top: -110%; width: 300%; pointer-events:none; } @keyframes grain { 0%, 100% { transform:translate(0, 0) } 10% { transform:translate(-5%, -10%) } 20% { transform:translate(-15%, 5%) } 30% { transform:translate(7%, -25%) } 40% { transform:translate(-5%, 25%) } 50% { transform:translate(-15%, 10%) } 60% { transform:translate(15%, 0%) } 70% { transform:translate(0%, 15%) } 80% { transform:translate(3%, 35%) } 90% { transform:translate(-10%, 10%) } } </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.