Summer aesthetic.

Tags: tragiictayy, cute, full, simple, basic, summer, beach, blue, gray, layout

Description:

If you use this, please comment below, or add me on here. Thank you! :)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by TRaGiiCTaYY (https://layouts.spacehey.com/layout?id=2977) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Roboto&family=Sawarabi+Mincho&display=swap');
</style>

<style>

:root{
    --headers: gray;
    --text: gray; 
    --names: gray;
    --links: #B6D0E2;
    --hover gray;
    --borders: 2px solid #A7C7E7;
    --background_image: url('https://cutewallpaper.org/21/aesthetic-wallpaper-mac/DRESS-YOUR-TECH-178-D-E-S-I-G-N-L-O-V-E-F-E-S-T-Cute-.jpg');
    --font-family: 'Sawarabi Mincho', sans-serif;
    --curve: 0px;
}

h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{font-size: 8px!important; color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--text) !important;} /* color of search */
.section h4 {color: var(--headers); !important;} /* aboutme & want2meet headings */

b {
  color: #A7C7E7;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0px;
}

i {
   color: #A7C7E7;
   font-family: 'Noto Serif JP', serif;
   letter-spacing: 2px;
}

body{
    background-image: var(--background_image)!important;
    background-color: White;
    background-size: cover;
    background-attachment: fixed;
}

.blog-preview {display:none! important;}
.details-table td:first-child{display:none! important;}
.right .section h4{display:none !important;}

.heading{
    background: white !important;
    text-align: center;
    border: var(--borders)!important;
    border-top: transparent!important;
    border-right: transparent!important;
    border-left: transparent!important;
}

h1{
    display: none!important;
}


nav{
    background-color: transparent;
    border: none;
    border-radius: var(--curve);
}
nav .top{
    background: transparent;
}
nav .top a, nav .links a{
    color: var(--text);
}
nav .links{
    color: var(--links);
    background-color: white;
    border: var(--borders);
    text-align: center;
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 12px;
    text-transform: lowercase;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "  ";
    color: var(--links);
}

nav img.logo{
    filter: invert(74%) sepia(18%) saturate(2%) hue-rotate(314deg) brightness(109%) contrast(87%);!important;
}

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 0px solid var(--text) !important;
    color:var(--text) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--text) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--text) !important;}



.general-about {
  background: White;
  color: white;
  border: var(--borders);
  border-bottom: transparent!important;
  text-align: left;
  height: 220px;
  padding: 15px;
}

.mood{color: black; border: var(--borders); border-top: transparent!important; background: white; margin-bottom: 10px;}

.online{
    display: none!important;
    color: var(--links) !important;
    text-transform: lowercase;
} 
.online img{
    display: none!important;
}

h2, h3, h4, h5, a, p, nav label, .section{ 
    font-family: 'Roboto', sans-serif;!important;
    font-color: black;	
    font-size: 8px;
    text-align: center;
    text-transform: lowercase;
}

hr{
    border: var(--borders);
}

.blurbs, .friends, .profile .table, .blog-preview, .profile .table-section, .contact{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: white!important;
}
.icon{border:none !important;}
.comment-replies{border:none;} 
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} 

td{
    background-color: transparent!important;
}

main{
    background: transparent;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}

.table-section{
    border:none !important;
    background-color:var(--box_color_and_seethru)!important;
    border-radius: var(--curve) !important;
}

.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
    font-size: 8px;
    text-transform: lowercase;
}

.profile {
    letter-spacing: 2px;
    font-size: 8px!important;
}

.profile-info {
    display: none!important;
    background-color: white;
    background: url('');
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 300px;
    font-family: 'Roboto', sans-serif; !important;
}

.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
    padding:10px;
    background-color: white;
    border: none;
    filter: grayscale(50%);
}

.friends-grid{
    text-transform: lowercase;
    text-align: center;
    height: 200px!important;
    overflow-y: scroll;
}
.friends-grid img{
    border-radius: var(--curve) !important;
    filter: grayscale(50%);
}

h2, h3, h4, h5, p{padding-left:5px !important;} 
.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;}
.friends{margin-bottom: 20px;}

.profile .contact a{font-size: 8px;}

.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 {
	/* add to friends */
	content: " "
	
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "  "
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "  "
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "  "
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "  "
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "  "
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "  "
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "  "
} 

.url-info{
    background: url('https://data.whicdn.com/images/344004122/original.jpg');
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 200px;
}
.url-info p{
    opacity: 0.0;
}

.comments-table {
    text-transform: lowercase;
    display: block;
    height: 200px!important;
    overflow-y: scroll;
    border: 0px solid black !important;
    outline: none !important;
    border-radius: 8px;
    padding:5px;
    border-spacing: 4px;
    text-align: center;
    font-size: 8px;
}

.comments-table td:first-child{

    background-image: url('');
    background-size: cover;
    background-position: center;
    filter: grayscale(50%);
}

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border: 0px solid black;
    padding:10px;
    border-radius: 8px;
}

.container {
  padding: 70px!important;
}

footer{
    background: transparent;
}
</style>

<style>


body {
    margin-bottom: fixed;
}

.myBox {
    width: 200px;
    height: 200px;
    overflow: scroll;
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: var(--borders);
}
::-webkit-scrollbar-thumb {
    background: Black; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
</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 26 comments ( View all | Add Comment )

zyx ! 🇧🇷	1723333263 usando!! Report Comment
MagicalGirlVibes	1720214824 !uSING Report Comment
pollyaa	1718527029 Using! Report Comment
qwertyidkk	1717513775 Using Report Comment
qwertyidkk	1717513774 Using Report Comment
qwertyidkk	1717513774 Using Report Comment
mari_marie	1706376520 Using itt!!! Report Comment
kel	1689832811 super cool!!!! using!!!!!! Report Comment
May	1688056965 thank you! I love it Report Comment
Ace	1681321294 just my vibe 🤘 thanks Report Comment
Shena ⚘	1675827634 obsessed, using <3 Report Comment
Nicky!! - Any pronouns!!	1668180529 very nice! Report Comment
erin !	1654195993 i love it omgggg Report Comment
Raid of Stars	1653359872 Thank you! I love it. Report Comment
raine ʚĭɞ	1647535755 Love this layout!! Report Comment
meliscorpio7	1639393360 using! Report Comment
Callie	1637637340 This is beautiful. Thank you Report Comment
Jason Elliott	1637168572 Thank you! Report Comment
Sandra2621	1636937632 Thank you! Report Comment
Carley	1636832240 Great job! Report Comment