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

𝟕𝟕𝟕	1743551066 usingg Report Comment
✬ snoops ✬	1743446591 using!!! Report Comment
hanoihanni	1743435249 using!! Report Comment
Sara :)	1743209000 Using :3 Report Comment
9lumzz	1743201915 Using! Report Comment
Marta_Yapper ⋆｡°✩°｡	1742934602 using! it look sooo beautiful! Report Comment
Hamysandwich	1742922180 using:D!! Report Comment
Miktø （≧∇≦）	1742771513 Using ('ω') Report Comment
tuunkai!	1742695484 using :33 Report Comment
craveruin	1742676576 using :3 Report Comment
dee	1742667072 using!! Report Comment
dee	1742667072 using!! Report Comment
Certified Sewer Rat	1741965729 using!!^_^ Report Comment
myeiverse	1741951103 using! its so cute Report Comment
أروى	1741691852 usinggg Report Comment
killay	1741538272 its soo cute!!! Report Comment
ccpi	1741468245 using Report Comment
Blankets	1741309651 Using Report Comment
:･ﾟ✧ TeaCup :･ﾟ✧	1741181605 using ! Report Comment
rinangel	1740624209 i really like the background image! Which specific part of the code would be for just that? Report Comment