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

Emma :3	2 months ago using Report Comment
࣪ (🇧🇷)	9 months ago usando!! Report Comment
MagicalGirlVibes	10 months ago !uSING Report Comment
pollyaa	11 months ago Using! Report Comment
qwertyidkk	11 months ago Using Report Comment
qwertyidkk	11 months ago Using Report Comment
qwertyidkk	11 months ago Using Report Comment
mari_marie	1 year ago Using itt!!! Report Comment
kel	1 year ago super cool!!!! using!!!!!! Report Comment
May	1 year ago thank you! I love it Report Comment
Ace	2 years ago just my vibe 🤘 thanks Report Comment
Shena Jezewski ⚘	2 years ago obsessed, using <3 Report Comment
Nicky!! - Any pronouns!!	2 years ago very nice! Report Comment
erin !	2 years ago i love it omgggg Report Comment
Raid of Stars	3 years ago Thank you! I love it. Report Comment
raine ʚĭɞ	3 years ago Love this layout!! Report Comment
meliscorpio7	3 years ago using! Report Comment
Callie	3 years ago This is beautiful. Thank you Report Comment
Jason Elliott	3 years ago Thank you! Report Comment
Sandra2621	3 years ago Thank you! Report Comment