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

Angelꉂ(˵˃ ᗜ ˂˵)	1760417813 Usinggg Report Comment
Rilia	1760270530 usingg Report Comment
helios	1759737569 using ! Report Comment
Two time	1759469614 using!!:3 Report Comment
Addy🌸	1759177135 using! Report Comment
Wilg!🌱	1758957182 Using Report Comment
Mika	1758932449 using!! Report Comment
emma !!	1758499172 USING! Report Comment
sam	1758064022 using ^^ Report Comment
3lily	1757560682 usingggg :P Report Comment
🎸⭒⋆Stardxst!	1757451702 USSSINGGGG Report Comment
𝓒𝓱𝓮𝓻𝓻𝔂.ᐟ	1757036772 uussingg Report Comment
Valina	1756772240 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