Fluffy dog layout

Hey I tried. It's not that great but I just wanted to get started with something so I just tried to make something cute themed. Wanted to add more to it but this is fine for now.



v CODE v

<style>

body { 

background-attachment: fixed;

background: url(https://png.pngtree.com/thumb_back/fh260/background/20230818/pngtree-white-fury-fur-in-this-picture-image_13040052.jpg);

        background-size: cover;

        background-repeat: no-repeat;

        background-position: center;

}

main {

    background: transparent;

    color: black;

}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

    background: transparent;

}

.details-table td {

     background: transparent;

}

nav .top, nav .links {

    background: transparent;

}

.comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {

    background: transparent;

    border: 0;

}

footer {

    background: transparent;

}

</style>

<style>

:root {

    --light-gray: #f2f0f0;

    --gray: #e3e3e3;

    --dark-gray: #919191;

    --darker-gray: #545454;

    --logo-blue: #000000;

    --darker-blue: #000000;

    --lighter-blue: #d7d7d7;

    --even-lighter-blue: #d4d4d4;

    --lightest-blue: #7c7c7c;

    --red: #000000;

    --dark-orange: #000000;

    --light-orange: #d9d9d9;

    --even-lighter-orange: #fcdbb8;

    --strange-yellow: #8e8e8e;

    --green: #34D399;

    --light-green: #E6F8DD;

    --medium-green: #A0C99C;

    --dark-green: #059669;

    accent-color: #1D4ED8;

    accent-color: #000000;

}

</style>

<style>

@import url('https://fonts.googleapis.com/css2?family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');

body{font-family: 'Winky Rough', sans-serif;}

body {font-size: 22px;}

</style>

<style>

h1, h2, h3, h4 {font-family: 'Winky Rough', sans-serif;}

</style>

<style>

.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 {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

content: url('https://64.media.tumblr.com/846fd7233b811e47392c1aa4947945ae/d259df908ccf2a31-63/s75x75_c1/4d9a21daedf05661a3a5b9d6d143f0755bd0ae5a.gifv')

}   

</style>

<div id="pawprints">

<style>

#pawprints {

background: url("https://64.media.tumblr.com/97639786ffe574d3b8cc6ffdcccb7082/27eba24238d39f37-af/s2048x3072/2896b355477198be0a78b0a980e6ce5e8cedd826.pnj");

background-position: center;

background-repeat: repeat;

width: 100%;

height:230px;

min-width: 10px;

overflow: hidden;

position: fixed;

top: -150.2px;

left: 0px;

z-index: 10;

pointer-events: none;

opacity: 0.6;

}

</style></div>

<style>

li.active .icon { content:url('https://64.media.tumblr.com/bb0e35f8642f4ac68411ac79b929f110/6465bd634acc5928-7a/s75x75_c1/c1930136e7388bc601fefabde20edcd80bff1dac.gifv'); width: 20PX;height: 20px;}

</style>