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

Valina	1756772240 using! Report Comment
SPINEL ₓ	1756506269 using!! Report Comment
meli	1756097056 usingg Report Comment
₊˚⊹☆Liaa	1755824728 usando!! Report Comment
Hikaru	1755804107 Usando Report Comment
Lotus	1755773902 using! Report Comment
♯ℓᥱᥣᥱᥴo.	1755711323 Using!! Report Comment
tao !!! XD	1754848094 usinggg Report Comment
derena	1754565974 Using Report Comment
⋆˚࿔ 𝒂𝒓𝒓𝒐𝒛𝜗𝜚˚⋆	1754516282 usingggg Report Comment
Haru ᥫ᭡	1754417163 using! Report Comment
TatumnBella	1753385689 Usinggg :P Report Comment
maxine.tess	1753194980 usinggg!! its so cutieee Report Comment
Marcus	1752970199 Using :D Report Comment
ʚ Dori ɞ	1752783333 using <3 Report 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