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

miyuki	1752287104 using! Report Comment
lous3r_	1752044658 AWWW i lobve yotsuba this is the cutest!! i am going to use tyyyy!!!!! Report Comment
rosamaria	1751593093 going 2 use Report Comment
Manufacturing	1751217152 im gonna sooo use this!! so prettyyyy Report Comment do u know how do i use it?? pls tell me i'm new by nyamii ☆; 1751429065; Report
writingdahlia	1751154237 Usingg Report Comment
writingdahlia	1751154232 Usinggg Report Comment
writingdahlia	1751154229 Usinggg Report Comment
rana۶ৎ	1751110707 i thinkz im gonna use dis lookz kool !!(＠＾◡＾) Report Comment
sumi	1751072421 using base only !! <3 Report Comment
Tin ᶻ 𝗓 𐰁	1750745814 using it rn! Report Comment
Layyys	1750729742 Using! Report Comment
Snowee	1750616405 this looks so prettyy, using thiss Report Comment
st4rz	1750475803 im going to use this! it looks so good Report Comment
Chetnaaa𖹭✮⋆˙	1750154270 using Report Comment
yaya	1749749221 going to use!! love yotsuba Report Comment
fishcake	1749718121 using Report Comment
❀𝑵𝒊𝒌𝒐❀	1749709123 usinnn! Report Comment
もん	1749016021 using!! Report Comment
georgia ♡	1748878242 using!! Report Comment
Brooklynn	1748646311 hi! im new to spacehey and im using this as my first layout! Report Comment