Nature

Tags: nature, grass, sunshine, pretty, green, cory, pacdude

Description:

Get a breath of fresh air with this layout. If you use this layout, feel free to give me a comment or even follow me!

Preview:

click on the image for a larger preview

Code:

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

<style>@import url('https://fonts.googleapis.com/css2?family=Imbue:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
	--yourBackground: url(https://media.giphy.com/media/TnDoEoXfT7YoE/source.gif);
	--pageTexture: none;
	--nameSticker: url(https://media.giphy.com/media/3ohhwNqyraVimPM4Ba/source.gif);
	--blurbSticker: url(https://media.giphy.com/media/l1J9MChCCK2scszYc/source.gif);
	--commentsSticker: url(https://media.giphy.com/media/l1J9MChCCK2scszYc/source.gif);
	--interestSticker: url(https://media.giphy.com/media/3ohhwGUroCf7Ka7bc4/source.gif);
	--urlInfoBox: url(https://media.giphy.com/media/gw3EDfvwY01WnQe4/giphy.gif);
	--titleTexture: url(https://media.giphy.com/media/Jo7OSb8Ap3dHPfIiHB/giphy-downsized-large.gif);
	--linkTexture: url(https://media.giphy.com/media/3o85xGFFW31jqtDgFW/giphy-downsized.gif);
	--profileInfo: url(https://media.giphy.com/media/FgJ6FbfJGwztK/source.gif);
}
.profile {
	font-family: 'Space Mono', monospace;
}
.profile .left h1 {
	font-family: 'Imbue', serif;
}
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
	font-family: 'Imbue', serif;
}
body {
	background-image: var(--yourBackground);
	background-size: cover;
	background-attachment: fixed;
}
main {
	background-color: #F1B9E377;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	margin-top: 2rem;
	margin-bottom: 2rem;
}
body:before {
	display: block;
	position: fixed;
	pointer-events: none;
	content: " ";
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	right: 0;
	background-image: var(--pageTexture);
	background-size: cover;
	background-attachment: fixed;
	opacity: .35;
	z-index: 25;
}
.profile a {
	transition: all .1s!important;
}
.profile a:hover, .profile a:hover p {
	background: var(--linkTexture)!important;
	;
	color: #FFF!important;
	text-shadow: 1px 1px 0 #000!important;
	;
}
.profile .left h1 {
	text-transform: uppercase;
	font-size: 3rem;
	color: #FFF;
	text-shadow: 3px 3px 0 #67337C;
}
.profile .left h1:before {
	background-image: var(--nameSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7);
	position: absolute;
	z-index: -1;
}
.profile .right .blurbs {
	position: relative;
}
.profile .right .blurbs:after {
	background-image: var(--blurbSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(2) translateY(-2rem);
	position: absolute;
	right: 0;
	z-index: -1;
}
.profile .left .table-section:nth-last-child(2):before {
	background-image: var(--interestSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(1.7) translateX(-3em) translateY(2.5em);
	position: absolute;
	z-index: -1;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
	border: 0!important;
	width: 100%;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading {
	background-image: var(--titleTexture)!important;
	background-size: cover;
	background-position: center;
	color: #FFF;
}
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
	text-transform: uppercase;
	font-size: 1.8rem;
}
.profile .url-info {
	border: 0;
	color: #FFF;
	background: var(--urlInfoBox);
	background-position: center;
	text-align: center;
}
.details-table td:first-child {
	background: none;
	width: fit-content!important;
	color: #FFF;
	text-shadow: 0px 2px 0 #000;
}
.details-table td:last-child {
	background: none;
	max-height: 150px;
	overflow-y: scroll;
	float: right;
}
.details-table tr {
	border-bottom: 1px solid #000;
}
.profile .blurbs .section h4 {
	color: #4D1469;
	font-size: 1.3rem;
}
.profile-info {
	background: var(--profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -7px 8px 0 #0006;
	color: #FFF;
}
.profile-info h3 a {
	color: #FFF;
}
.comments-table, .details-table {
	border: 1px solid #0000;
	border-collapse: separate;
	border-spacing: 0 .5em;
}
.comments-table tr td:last-child {
	height: 250px;
	display: block;
	overflow-y: scroll;
}
.comments-table td, .music-table td {
	background: none;
	color: #000;
}
.comments-table tr {
	border-bottom: 1px solid #000;
}
.comments-table td:first-child, .music-table td:first-child {
	background: none;
	text-align: left;
}
.profile .comments-table:after {
	background-image: var(--commentsSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(2) translateY(-3.5rem);
	position: absolute;
	right: 0;
	z-index: -1;
}
</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 20 of 26 comments ( View all | Add Comment )

▄︻デD̶A̶R̶K̶O̶══━一	1757256755 Use I will Report Comment
▄︻デD̶A̶R̶K̶O̶══━一	1757256755 Use I will Report Comment
Lance!	1757081288 using!! but the background keeps dissappearing and its just gray ૮(˶ㅠ︿ㅠ)ა any fixes? （´∇｀''） Report Comment
Arty *✧･ﾟ	1753921028 using!!! Report Comment
Rozzum 7134	1749936131 Using! Report Comment
snowblindrr	1749696724 usin' Report Comment
Grandfield	1747771227 usin' Report Comment
Gio	1746959287 using Report Comment
PK	1740716534 Using! Report Comment
Zane	1740280720 using! :3 Report Comment
avery	1737687748 usingg Report Comment
Jaya ೃ⁀➷	1737606682 usingg Report Comment
Stargirl	1737295986 So pretty! Report Comment
Stargirl	1737295977 So pretty! Report Comment
sara ☆	1729950868 gonna use this!! <3 it's so pretty! Report Comment
SolarpunkFairy	1720843471 so pretty! gonna maybe use! thank you :) Report Comment
lemonsodapopz!!	1718782948 using!!! Report Comment
groissantwich	1717403899 OH MY YUM Report Comment
Althea ^^	1705313028 doing this >v< Report Comment
DeerInUrBackyard	1693457869 Omg this is so perfect! Amazing job!! Report Comment