summer-inspired layout :3

Tags: summer, blue

Description:

UPDATE: fixed error with the notif icon

Okay!! This thing has a loading screen, by the way. I stayed up until 12:30am making this thing, and when I posted it I made a few more tweaks to the code. I nabbed the main SpaceHey site CSS as a kinda template, so there may or may not be any unnecessary code? Don't worry, it doesn't really affect the page from what I've seen. This is also my first layout, please tell me what you think could be improved <3

Pretty please tell me if you're gonna use it lol, like a simple comment would be nice,,, ^^

If the preview isn't attached, the page looks like this:

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by meteorologic (Soap MacTavish fan…thing) (https://layouts.spacehey.com/layout?id=107388) -->

<!--This stuff isn't required, but these are the images on both sides of the screen.-->

<div class="yotsuba"></div>
<div class="yotsuba-fuuka"></div>

<style>

@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&family=Yusei+Magic&display=swap');

<!--The rest of the code is down here. Mostly left the colors untouched...-->


:root {
  --light-gray: #f2f0f0;
  --gray: #e3e3e3;
  --dark-gray: #919191;
  --darker-gray: #545454;
  --logo-blue: #1D4ED8;
  --darker-blue: #1E40AF;
  --lighter-blue: #6CA9AE;
  --even-lighter-blue: #BFDBFE;
  --lightest-blue: #47989e;
  --strange-yellow: #dbae2e;
  --green: #34D399;
  --light-green: #E6F8DD;
  --medium-green: #A0C99C;
  --dark-green: #059669;

  accent-color: #1D4ED8;
  accent-color: var(--logo-blue);
}

    .yotsuba{
        background: url(https://files.catbox.moe/t094u0.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 20px;
        bottom: 10px;
        height: 370px;
        width: 260px;
    }

    .yotsuba-fuuka{
        background: url(https://files.catbox.moe/x286bh.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        right: 20px;
        bottom: -10px;
        height: 300px;
        width: 280px;
    }



p {
font-size: 25px;
font-family: 'Yusei Magic';

}

* {
  box-sizing: border-box;
}
html {
  line-height: 1.225;
}
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: url(https://i.pinimg.com/originals/f5/ac/8c/f5ac8ca5e8068d6b2471f52f8eef0f9d.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
  background-color: var(--gray);
  font-family: verdana, arial, sans-serif, helvetica;
  margin-top: 15px;
}
.container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto 10px;
}
.container.full-width {
  width: auto;
}

h1{
    color: white;
    font-size:30px !important;
    font-weight: 3;
    background-image: 
url('https://i.pinimg.com/564x/7f/7e/37/7f7e37e9e14a244a7610cee913fd7582.jpg');
    padding: 10px;
border: 5px solid #47989e;
    font-family: 'Darumadrop One';
background-position: top;
}

time.ago {
  opacity: 0;
}
.soon {
  opacity: 0.7;
}
details summary {
  cursor: pointer;
  user-select: none;
}
a {
  color: #4DA9C0;
  text-decoration: none;
}
a:hover,
a:active {
  color: #0DC2BF;
  text-decoration: underline;
}
p,
ol li,
ul:not(nav .links):not(footer .links) li {
  font-size: 0.875em;
  font-size: max(0.875em, 12px);
}
ol li ol li {
  font-size: 100%;
}
ul {
  padding-left: 20px;
}
nav {
  color: white;
  font-size: 72%;
  font-size: max(72%, 12px);
}

nav .top {
background-image: url('https://i.pinimg.com/originals/e9/35/5c/e9355c531a60ced304702a29dc2e5923.jpg');
    height: 300px;
    width:100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px 20px 0px 0px;
}

nav .top a {
  text-decoration: none;
  color: inherit;
}
nav .top a:hover {
  text-decoration: underline;
}
nav .top div {
  display: inline-block;
  vertical-align: top;
}
nav .top .left a {
  text-decoration: none;
  color: inherit;
}
nav .top .left img {
  margin: 0 0 0 6px;
}
nav .top .left .logo {
  width: 165px;
  height: 42px;
}
nav .top .left .logo.april-fools:hover {
  animation: rotate 6s infinite linear;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

nav .top .center {
  text-align: center;
  flex: 1;
}
nav .top .center form {
  margin-top: -2px;
  width: 100%;
}
nav .top .right {
  text-align: right;
}
nav .top .right .support-right {
  margin-top: 5px;
}
nav .links {
  background-color: #6CA9AE;
  padding: 3.5px 16px;
  text-align: center;
height: 40px;
padding-top: 10px;

}

nav .links .icon {
        content: url(https://64.media.tumblr.com/abd82e7728343aef88f811948a7cf5b5/92045d69bc7cdf8b-2d/s75x75_c1/201870849d124bdde5e5d0631dd25733fdbc8088.gifv);
        display: inline-block;
        height: 1.5em;
        width: 1.5em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
    }

nav .links,
footer .links {
  margin: 0;
  list-style: none;

}
footer .links {
  font-size: 0.875em;
  margin: 16px 0 5px 0;
  padding: 0;
  text-align: center;
}
nav .links li,
footer .links li {
  display: inline-block;
}
nav .links li.active a {
  font-weight: bold;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after {
  content: " ✿ ";
  color: black;
}

.online {
  color: #F091B4;
  font-weight: bold;
  font-size: 95%;
}
.online img {
  height: 1.5em;
  margin-right: 5px;
  content: url(https://64.media.tumblr.com/054046196a6f6e8bba37d2b9d13ac88a/108a50e3029a474b-14/s75x75_c1/8a5d2d26ae0034634dd4be15edbe554f2a6c9e9b.gifv);
animation: none;

}


general-about .profile-pic {
  display: block;
  float: left;
  margin: 0 15px 8px 0;
  height: 160px;

}

.general-about {
  display: block;
  float: left;
padding: 10px;
  margin: 0 15px 8px 0;
  height: 100%;
width: 100%;
background: url(https://i.pinimg.com/564x/14/64/a9/1464a96477be5e192275c46ae52519ef.jpg);
background-position: bottom;
border: 5px solid #47989e;
}

.general-about .profile-pic img {
  max-width: 160px;
  max-height: 160px;
}
.general-about .details {
  display: block;
color: white;

}

.general-about .details.below {
  width: 100%;
  display: inline-block;
}
.profile .mood {
  width: 100%;
  display: inline-block;
}
.profile .mood p {
  margin: 0 0 8px 0;

}
.profile .contact,
.profile .url-info,
.profile .table-section,
.setting-section,
.home-actions {
  width: 100%;
  border: 3px solid #47989e;
  margin: 10px 0;
}
.setting-section {
  margin: 15px 0;
}
.profile .contact .heading,
.profile .table-section .heading,
.setting-section .heading,
.home-actions .heading {
  background: #6CA9AE;
  color: white;
  padding: 2px 7px;
}
.profile .contact .heading h4,
.profile .blurbs .heading h4,
.profile .friends .heading h4,
.blog-entry .comments .heading h4,
.bulletin .comments .heading h4,
.home-actions .heading h1,
.setting-section .heading h4,
.statistics .heading h4 {
  margin: 0;
  display: inline-block;



.contact{
background-image: url(https://i.pinimg.com/564x/93/00/fb/9300fb4ca2bfd40d4e2190943385a5a1.jpg);
background-size: cover;

}

}
.profile .contact .f-row {
  margin: 7px;
  font-weight: bold;
  font-size: 0.875em;
}
.profile .url-info {
  padding: 4px 7px;
background: url(https://i.pinimg.com/originals/8c/43/35/8c43356ca0bef41cb41cc349362a5755.jpg);
height: 200px;
background-size: cover;
}
.profile .url-info p {
  font-size: 100%;
  margin: 0;
  word-break: break-all;
color: #2E70A2;

}
.profile .url-info.view-full-profile {
  text-align: center;
}
table.details-table {
  width: 100%;
background: #6CA9AE;
}
.details-table td:first-child {
  background: #47989e;
  color: black;
  font-weight: bold;
  width: 33%;
}
.details-table td {
  background: #47989e;
  vertical-align: top;
}
.details-table.left-big td:first-child {
  width: unset;
}
.details-table.left-big td {
  width: 33%;
}
.details-table td p {
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.details-table td * {
  max-width: 100%;
}
.profile .blurbs {
  margin: 20px 0;
background: url(https://i.pinimg.com/564x/7f/e0/78/7fe078e10f4ca072bad2f5390f99d323.jpg);
background-position: center;
background-size: 110%;
border: 5px solid #6CA9AE;

}
.profile .blurbs .heading,
.profile .friends .heading {
  background: #6CA9AE;
  color: white;
  padding: 2px 7px;
}

nav .links a {
  text-decoration: none;
  color: white;
  text-shadow: 0 0 7px #095DC3;
  /*to improve the color contrast*/
  font-size: 0.98em;
  font-size: max(0.98em, 12px);
}
nav .links a:hover {
  text-decoration: underline;
  color: #040c5c;
}
nav .links .special a {
  color: #ffff33;
}
main {
  background: white;
  color: black;
  padding: 6px 0px;
  font-size: 15px;
border: 10px solid #6CA9AE;
border-top: 0;

}
main .left,
main .right {
  padding: 10px;
}
footer {
color: white;
  text-align: center;
  font-size: 100%;
  margin-top: -10px;
  padding: 10px 5px;
  background: url(https://i.pinimg.com/564x/2b/1a/73/2b1a73ed1273ff0466b48bf4a493b766.jpg);
background-size: cover;
background-position: center;
height: 160px;
border-radius: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 10px solid #6CA9AE;

}
footer img {
  display: inline-block;
  vertical-align: middle;
}
footer p {
  vertical-align: middle;
  margin: 10px 0 5px 0;
  font-size: 90%;
}
footer .copyright {
  font-size: 80%;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
}

.contact{
background: url(https://i.pinimg.com/originals/41/f3/c2/41f3c2e9ff35d2d4c61d2f47dff98e98.gif);
background-size: cover;
background-position: top;

}

.profile-info {
    background:
url('https://i.pinimg.com/564x/4b/0a/a3/4b0aa3d61914a0f39cd56b195fde81f2.jpg');
background-size: 110%;
background-position: center;
border: 5px solid #47989E;

}

.friends-grid{
    text-align: center;
}


td{
    background: url(https://i.pinimg.com/564x/7f/e0/78/7fe078e10f4ca072bad2f5390f99d323.jpg)!important;

}

.comments-table {
display: block;
height: 500px!important;
overflow-y: scroll;
background: #6CA9AE;
background-size: cover;
border: 5px solid #6CA9AE;
}

.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/111a38d8957e46d46aebd20dae3da696/89665c58cb65b024-7f/s75x75_c1/7ff26df63675b1ed0b9d9d2906e22bcb16ff7724.gifv")
    }

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

	    content: url("https://64.media.tumblr.com/19e6c5044dc73b2ca9cde1fb76f7c214/89665c58cb65b024-c3/s75x75_c1/50276f7ded6469f251f4093de29cbb902fad3a32.gifv")
    }

    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    content: url("https://64.media.tumblr.com/5471f91fe6b39db3eabd69569b24582b/c36d5974271977e6-99/s75x75_c1/784e1e3d52f3504f9262c350ab41209338b81b19.webp")
    }

    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    content: url("https://64.media.tumblr.com/7979620bd6e07a84569e3077be595710/92045d69bc7cdf8b-3d/s75x75_c1/0ebd67a55031d04fa343d0a3858031bacc17388b.gifv")
    }

    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    content: url("https://64.media.tumblr.com/edc2d62b050b4107aadd6cf641826834/46aa0f91c599f5b5-68/s75x75_c1/07f786a161a1a182bc44a3775bf642c1aef0f207.gifv")
    }

    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    content: url("https://64.media.tumblr.com/df82f30e10478df936ed55450962c7df/f38298aec1ff4705-60/s75x75_c1/69f180b1bbd803bfea435746c9785f55509cba31.gifv")
    }

    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    content: url("https://64.media.tumblr.com/82d8041946bd759573ea0623224032b6/c36d5974271977e6-cd/s75x75_c1/4ac7b4a08515901314db9769f62d45c6a9c9e421.webp")
    }

    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    content: url("https://64.media.tumblr.com/296ae1a673429e2b0e0a7a6be9acee04/89665c58cb65b024-4b/s75x75_c1/84cf3316a284631ca40c5279d078f9352f9ef24a.gifv")

    } 

.contact a {
 color: aqua;

}

.blurbs h4{
 color: white;

}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 1000;
	background-image: url('https://media1.tenor.com/m/IR5gxYilrnMAAAAC/suzume-makoto-shinkai.gif');
	background-size: 100% 99.95%;
	background-repeat: no-repeat;
	animation: yourAnimation 1.8s ease 0s 1 normal forwards;
	pointer-events: none;
}


</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 43 comments ( View all | Add Comment )

alliw ! 👾🇧🇷	1731878292 usando!! Report Comment
Rico ♡	1731800563 using :3 Report Comment
ANGEL!!	1731712896 Using Report Comment
ANGEL!!	1731712896 Using Report Comment
ANGEL!!	1731712896 Using Report Comment
ANGEL!!	1731712894 Using Report Comment
stinky	1731615389 using!! 🫶 Report Comment
Hope	1731222599 using !! (˶ᵔ ᵕ ᵔ˶) Report Comment
CowboyLover69	1730884864 Using!! Report Comment
SN4CKBUGZ	1730767619 adding !! ^_^ Report Comment
Iam_veryverycoolalien	1729388260 Usinggg!!! :D Report Comment
V1X3N !! ^_^	1729216703 using! :~) Report Comment
nylan !	1728122921 using !! <3 Report Comment
печешка	1727816444 использую Report Comment
kheki	1727294911 using :D Report Comment
Lacee ( ˶°ㅁ°) !!	1726693009 this is so cute im so using >^< Report Comment
「 ✦ LarryFace ✦ 」	1725656308 using! :D Report Comment
mio : rin 𓏲🐋 ๋࣭	1725274066 aa using!! (^人^) Report Comment
mio : rin 𓏲🐋 ๋࣭	1725274065 aa using!! (^人^) Report Comment
plumeria761	1725247343 Using! Report Comment