Garfield layout I whipped up in like. Idk. 5 minutes or something lol

Tags: garfield, layouts, layout

Description:

This doesn't even look that great why am I so proud of myself. Not the first time I've made a layout but the first time I'm actually sharing one. I initially wanted a loading screen but it didn't look too great. I wanted a music player too but it wouldn't work smh. Comes with a custom scrollbar, logo, Online Now icon, and cursor. Comments are also in a crappy half hearted excuse of a scrollbox 🤯 The snipping tool screwed up the screenshot but I promise it looks amazeballs once you put it into your profile. Any comments, questions, or concerns? Comment below or IM me. Credit is not needed as idgaf ab credit, but ffs don't claim it as yours. You can screw around and edit things if you want. Comment or friend me if you're using while you're at it, pls and ty!! Ummmmmm. Idk what else to say so here's the code. Sorry for rambling teehee :3 (Paste into your "About Me" section for it to appear on your profile)

Preview:

Code:

<!-- (c) Layout created by Shit (https://layouts.spacehey.com/layout?id=26577) --> <style> @import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap'); </style> <style>* {cursor: url('https://cur.cursors-4u.net/toons/too-4/too380.cur'), url('https://cur.cursors-4u.net/toons/too-4/too380.cur'), auto;}</style> <style> ::-webkit-scrollbar { width: 16px } ::-webkit-scrollbar:horizontal { height: 17px } ::-webkit-scrollbar-corner { background: #eee } ::-webkit-scrollbar-track:vertical { background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%) } ::-webkit-scrollbar-track:horizontal { background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%) } ::-webkit-scrollbar-thumb { border: 1.5px solid #888; border-radius: 3px; box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff; background-color: #eee; } ::-webkit-scrollbar-thumb:vertical { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb) } ::-webkit-scrollbar-thumb:horizontal { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb) } ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement { display: block } ::-webkit-scrollbar-button:vertical { height: 17px } ::-webkit-scrollbar-button:vertical:start:decrement { background: white; background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png"); background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } ::-webkit-scrollbar-button:vertical:start:increment { display: none; } ::-webkit-scrollbar-button:vertical:end:decrement { display: none; } ::-webkit-scrollbar-button:vertical:end:increment { background: white; background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png"); background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <style> body { background-color: white; } main { background-color: white; } nav .top { background-color: #ff8b3d; font-family: Kosugi Maru; } nav .links { background-color: #fd9d5c; font-family: Kosugi Maru; text-align: center; } .icon { content: url("https://media.discordapp.net/attachments/1075261972507004959/1076892662101196971/garfield_head.png") } FORM &gt; BUTTON { background-color: white; font-family: Kosugi Maru; } [id='q'] { font-family: Kosugi Maru; background-color: white; } nav .top .left .logo { content: url("https://media.discordapp.net/attachments/1075261972507004959/1076931957583265943/Picsart_23-02-19_12-22-43-520.png") } nav .links li:not(:last-child)::after { content: " ☆ "; color: white; } footer .links li:not(:last-child)::after { content: " ☆ "; color: #ffaf7a; } .logout-btn { font-family: Kosugi Maru; } main .right, .profile .friends .inner, .details-table td, .details-table td * { background-color: #ffffff; padding: 3; font-size: 100%; } .online { content: url("http://img1.coolspacetricks.com/images/myspaceicons/023.gif") } .profile-info { border: 2px solid; border-color: #ff8b3d; color: #ffaf7a; } footer { background-color: white; } .blog-preview h4, H4 &gt; A { font-family: Kosugi Maru; background-color: #ff8b3d; color: white; text-align: center; } DIV.blog-preview > P > I { font-family: Kosugi Maru; color: #ffaf7a; } .profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, h1, DIV.blog-preview > H4{ background-color: #ff8b3d; font-size: 100%; color: #FFFFFF; font-family: Kosugi Maru; text-align: center; } .profile .blurbs .section h4 { font-family: Kosugi Maru; } :root{--logo-blue: #ff8b3d; --darker-blue: #ff8b3d; --lighter-blue: #ff8b3d; --even-lighter-blue: #ffffff; --lightest-blue: #ff8b3d; --dark-orange: #ffaf7a; --light-orange: #ffffff; --even-lighter-orange: #ffffff; } DIV[id='comments'] &gt; DIV &gt; H4, DIV[id='comments'].friends &gt; DIV.heading { text-align: center; color: #ffffff; font-family: Kosugi Maru; background-color: #ff8b3d; } DIV.section:nth-child(1) &gt; H4, DIV.section:nth-child(2) &gt; H4 { font-family: Kosugi Maru; color: #ffaf7a; } p, a { font-family: Kosugi Maru; color: #ffaf7a } DIV.friends:nth-child(3) &gt; DIV.heading { font-family: Kosugi Maru; background-color: #ff8b3d; color: white; text-align: center; } .profile .friends .heading { font-family: Kosugi Maru; text-align: center; background-color: #ff8b3d; color: white; } BUTTON { font-family: Kosugi Maru; background-color: white; } .count { color: #ffaf7a; } table.comments-table { display: block; height: 250px!important; overflow-y: scroll; } A.more { color: #FFFFFF; } .profile .friends .person p { color: #ffaf7a; } .blog-preview h4 a { color: white; } </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.