Waterfall Wonderment

Tags: waterfall, nature, blue, simple, icytea

Description:

Waterfall-themed Layout for those looking for a relaxing atmosphere for your profile!

If you like this layout then please comment below if you used it.

I want to read feedback from you all!

Closer Preview

Disclaimer: I have taken my time to create a simple, yet effective layout for you to modify to your heart's content. You do not need to credit me on your profile publicly. However, do not repost it as your own layout design.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*Fonts used: Ubuntu*/

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
p{
  font-family: 'Ubuntu', cursive;
  font-size: 90%;
}
h1{
  font-family: 'Ubuntu', cursive;
  font-weight: 700;
  font-size: 300%;  
}
h2,h3,h4,h5{
  font-family: 'Ubuntu', cursive;
  font-weight: 200;
  font-size: 150%;  
}

/*Base colors and banner sources*/
/* Table of each section of the site in colors */
:root {
  --logo-blue: #16537e;
  --darker-blue: #7fcaff;
  --lighter-blue: #16537e;
  --even-lighter-blue: #16537e;
  --lightest-blue: #16537e;
  --light-orange: #e4f0fc;
  --dark-orange: #7fcaff;
  --even-lighter-orange: #e4f0fc;
  --green: #16537e;
  --red: #7fcaff;

  --pdg_profileInfo: url(https://64.media.tumblr.com/42c4c6b36b7fa2227487c5ab6d42a056/fb64ae6a8f66f432-16/s540x810/7b805bb09679a9c1fd79985e03628e2d58d1e255.gif);

}

/* Gif Background */
body{
   background-image: url(https://64.media.tumblr.com/42c4c6b36b7fa2227487c5ab6d42a056/fb64ae6a8f66f432-16/s540x810/7b805bb09679a9c1fd79985e03628e2d58d1e255.gif) !important;

        background-repeat: no-repeat !important;
	background-size: cover;
	background-position:center;
	background-attachment: fixed;
}

/* LINK COLORS */
a:link {
  color: #e4f0fc;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #e4f0fc;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #398fd1;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: #398fd1;
  background-color: transparent;
  text-decoration: underline;
}

body{
  font-family: Ubuntu;
  background-color: #F0F9FF;
}

.mood a{
 font-family: Ubuntu, cursive;
}

span.count, .details-table td:first-child {
  color: #e4f0fc;
  font-size: 16px;
}

.blog-preview p {
  padding: 5px 10px;
  color: white;
    font-family: Ubuntu, cursive;
    font-size: 1rem;
    font-weight: bold;
}

.blog-preview p a:hover,
.blog-preview p a:active,
.blog-preview p a:focus, {
  color: #8debff!important;
}


table.details-table {
  border-collapse: collapse;
  border: 1px transparent;
}

table.details-table td {
  background-color: transparent !important;
  border: 1px #29bad9;
}

/* Adjust Navigation Section Here */
nav {
  border-radius: 15px 15px 0 0;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
  border: none;
}


.profile h1 {
  font-family: Ubuntu, cursive;
  font-size: 2rem;
}

.heading h4{
font-family: Ubuntu, cursive;
}

.profile-pic {
  border-radius: 500px;
  overflow: hidden;
}

.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -10px 8px 0 #0006;
	color: blue;
	padding:4em 0;
}
.profile-info h3 a {
	color: #bcdaf0;
        font-size: 1.4rem;
}


.heading {
  padding: 5px 0 !important;
  margin-top: 15px;
  margin-bottom: 10px;
  background-color: transparent !important;
  text-align: center;
  color: #7fcaff !important;
  border-bottom: 2px solid;
}

/* Main Text */
main {
	background:#00000066;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	padding:2px;
	color: #bcdaf0;
}

/* ADJUST WIDTH OF PAGE HERE */

.container {
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  margin-top: 30px;
  padding: 10px;
  width: 90%;
  max-width: 900px;

}

footer {
  font-size: 12px;
  border-radius: 5px;
  background: #16537e !important;
  display: block !important;
}


table.comments-table td {
        background-color:#00000066 !important;
	padding:2px;
	color:#FFFFFF;
        border-color: black;
        border-width: 1px;
}

.comments-table td:first-child img {
  width: 80px;
  border-radius: 500px;
}

.comments-table tr td:last-child {
	height: 150px;
	display: block;
	overflow-y: scroll;
}
.profile .friends .person img {
  border-radius: 500px;
  overflow: hidden;
  color: #2986cc!important;
}

.blog-preview p {
  font-size: 1.2rem;
  font-weight: 500;
}

a.addme {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}

table,
td,
tr {
  border-color: transparent;
  border-collapse: collapse;
}

.comment-replies {
  border-color: black;
  border-width: 1px;
  margin: 5px;
  background-color: #16537e;
}

button {
  margin: 5px;
}

/*"Online" Status Color Text*/
.online {
  color: #79b8e7;
  font-weight: bold;
  font-size: 95%;
}
/* "Online" Status Image Edit */
.online img{
    filter: brightness(0) saturate(100%) invert(31%) sepia(70%) saturate(423%) hue-rotate(175deg) brightness(90%) contrast(102%) !important;
    height:2em;
}


/* CUSTOMIZE SCROLLBAR HERE */

             ::-webkit-scrollbar {
    width: 7px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(0, 146, 174, 1);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    }


/* Contact IcyTea (https://spacehey.com/icytea) on SpaceHey if issues arise! */

table{background:none !important; line-height:15px !important;}
table ul li a {color: #000000 !important;}
}
</style>

<a class="two" href="https://layouts.spacehey.com/icytea" target="_blank"><div style="position:fixed; top:0; left: 2; z-index: 9; width: 120px; height: 120px;">IcyTea's Layouts</div></a>

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 20 of 72 comments ( View all | Add Comment )

mᥲ𝗍ᥱ᥆ ︴꒰🎧꒱	1713240245 ¡Usando! Soy nuevo en esta app, y este diseño es genial. Report Comment
Joesph	1711445962 Using! btw I also kinda played with the code to remove the cursive font Report Comment
Joesph	1711445961 Using! btw I also kinda played with the code to remove the cursive font Report Comment
𝐼𝓃𝒾𝓂𝒶'𝓈 𝓈𝑜𝒻𝓉 𝒶𝒹𝓋𝑒𝓃𝓉𝓊𝓇𝑒𝓈	1711421636 Usando! Report Comment
Rayne	1711016506 Using!!! Report Comment
Maggie	1710895936 Using!! Report Comment
FellowHimbo	1707236729 Using! Report Comment
Twilight Kirby	1706834614 usingg Report Comment
˗ˏˋ ꒰ 🍒 𝑳𝒂𝒖 🍄 ꒱ ˎˊ˗	1706543666 usando otra vz :3 Report Comment
Raven Nox	1706397628 Usando <3 Report Comment
𝐵𝑜𝓉𝒶𝓃!💙	1706384849 Usando! Report Comment
𝐵𝑜𝓉𝒶𝓃!💙	1706384847 Usando! Report Comment
˗ˏˋ ꒰ 🍒 𝑳𝒂𝒖 🍄 ꒱ ˎˊ˗	1706238741 usando, muy lindo <3 Report Comment
xXFunk1_B3atXx	1706171419 Using!! Report Comment
Usuario_IdkLOL	1706120581 usando ijo Report Comment
Abi_writter	1705803302 Usando ☺ Report Comment
🪲🐞Bugz🐞🪲	1705713349 Using<33 Report Comment
ninat	1701559397 using!! Report Comment
Ringo The Man	1701238115 Using!! :D Report Comment
Geulimchief	1698570833 using looks cool Report Comment