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 19 of 19 comments ( View all | Add 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 Christine ⚘	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
LoopRoad Records	1636791583 amazing! Report Comment
Vivi♥	1636733698 love it, might change the background. Report Comment
LA gretch	1636697214 this layout is so cute! if i can remember how to do this properly i'll be using this. thanks so much! xx Report Comment
Love Guinn	1636688162 Thanks Report Comment
Frenkli	1621637400 this is a cute layout I might just nab it thank you! Report Comment Go ahead! Thank you so much. by TRaGiiCTaYY; 1621639920; Report
Jinxx ;	1620700616 i love this one, thank you! Report Comment Of course! :) by TRaGiiCTaYY; 1620707013; Report