Beach Blues Layout

Tags: morgan, morgan madewell, blue, beach, ocean, sea, hippy, moon, girly

Description:

The vibe of this layout is really calm and quite. Includes a cloudy blue mouse curser. I love the blue color scheme and the animated moon contact box. I hope you love this layout as much as I loved making it.

𝙸 𝚖𝚊𝚔𝚎 𝚕𝚊𝚢𝚘𝚞𝚝𝚜 𝚊𝚗𝚍 𝚌𝚘𝚍𝚎𝚜 𝚍𝚊𝚒𝚕𝚢 𝚜𝚘 𝚋𝚎 𝚜𝚞𝚛𝚎 𝚝𝚘 𝙰𝙳𝙳 𝚖𝚎 𝚜𝚘 𝚢𝚘𝚞𝚛 𝚞𝚙𝚍𝚊𝚝𝚎𝚍 𝚠𝚑𝚎𝚗 𝚒 𝚌𝚛𝚎𝚊𝚝𝚎 𝚜𝚘𝚖𝚎𝚝𝚑𝚒𝚗𝚐 𝚗𝚎𝚠. 𝚃𝚑𝚎 𝚙𝚒𝚌𝚝𝚞𝚛𝚎 𝚙𝚛𝚎𝚟𝚒𝚎𝚠 𝚍𝚘𝚎𝚜 𝚗𝚘𝚝 𝚍𝚘 𝚝𝚑𝚒𝚜 𝚕𝚊𝚢𝚘𝚞𝚝 𝚓𝚞𝚜𝚝𝚒𝚌𝚎 𝚊𝚝 𝚊𝚕𝚕. 𝙰 𝚕𝚘𝚝 𝚘𝚏 𝚝𝚑𝚎 𝚐𝚛𝚊𝚙𝚑𝚒𝚌𝚜 𝚊𝚛𝚎 𝚊𝚗𝚒𝚖𝚊𝚝𝚎𝚍. 𝙿𝚕𝚎𝚊𝚜𝚎 𝚌𝚘𝚖𝚖𝚎𝚗𝚝 𝚊𝚗𝚍 𝚔𝚞𝚍𝚘 𝚒𝚏 𝚢𝚘𝚞 𝚞𝚜𝚎!

Also if you would like to buy a custom layout made by me please contact me :)

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
</style>

<style>body { cursor: url('https://64.media.tumblr.com/tumblr_lkl773QmKa1qfamg6.gif'), auto; }</style>

 <style>


.search-wrapper input[type=text] {background-color: rgba(255,255,255) !important;border: 1px dotted var(--headers) !important;color:pink; !important;border-radius: 10px !important;}
                                button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(255,255,255) !important;color:var(--headers) !important;}



.profile-info {
border: 0px solid rgb(255, 0, 0);
display: flex;
align-items: center;
justify-content: center;
padding: 15px 5px;
margin-bottom: 10px;
background-image:url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2F346e7d242bd6f40ec7f28bd2516a9a8c%2Ftenor.gif%3Fitemid%3D15515026&f=1&nofb=1);
}	



.contact {
  border-radius: 25px;
  background: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.letsgetfreestuff.com%2Fimages%2Fmoon_phases.gif&f=1&nofb=1);
  background-position: right bottom;
  background-repeat: repeat-y;
  padding: 20px;
  width: 200px;
  height: 150px;
}



h1 {
font-size: 90px!important;
line-height: 80px;
font-family: 'Amatic SC', cursive;
font-weight:normal;
text-transform: uppercase;
letter-spacing: -1.5px;
color: #D8BFD8;
text-align:center;
padding-bottom:0px;
padding-top:0px;
text-shadow: 0 0 7px #00A4FF;
background: #000;
background-image:url("https://thumbs.gfycat.com/BriefIgnorantBlackbuck-size_restricted.gif");
background-position: center;
background-size: 100%;

}
  table, tr, td { 
  background-color:transparent; 
 } 

  table, tr, td { 
  background-color:transparent; 
 border:none; 
 border-width:50px; 
 } 

  table table table { 
  width:80%; max-width:600px; } table table table table { width:100%;; 
 } 

  body, .bodyContent  { 
  background-image:url(https://i.pinimg.com/564x/34/3e/d3/343ed399d0d4f418a72d4271e44443cb.jpg); 
 background-position:fulltile; 
 background-attachment:fixed; 
 border-color:#00000000; 
 border-width:30px; 
 border-style:dotted; 
 scrollbar-face-color:#00000000; 
 scrollbar-highlight-color:#aaaaaa; 
 scrollbar-3dlight-color:000000; 
 scrollbar-shadow-color:#aaaaaa; 
 scrollbar-darkshadow-color:000000; 
 scrollbar-arrow-color:#aaaaaa; 
 scrollbar-track-color:000000; 

 } 

  table table { 
  border:0px; 
 } 

  table table table table { 
  border:#D8BFD8;
 background-image: none; 
 background-color:transparent; 
 } 

  table table table { 
  border-style:#D8BFD8; 
 border-width:none; 
 border-color: transparent; 
 background-attachment:fixed; 
 } 

  table table table td { 
  background-color:#D8BFD8; 
 } 

  table, tr, td, li, p, div,.text,.redtext, .blacktext12  { 
  color:#89CFF0; 
 } 

   .whitetext12, .orangetext15 { 
  color:#00A4FF; 
 } 

   .lightbluetext8, .blacktext10, .redbtext,.btext  { 
  color:#3FD9FF; 
 } 

   .nametext { 
  color: #fc6c85; 
 } 

  a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link  { 
  color: #1F97E7;
 } 

  a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover  { 
  color: #68359B;
 } 



 </style>

 







<style>

nav {
  overflow-x: hidden;
  position: relative;

}

nav .top {
  background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblog.hdwallsource.com%2Fwp-content%2Fuploads%2F2014%2F11%2Fblack-wallpaper-27635-28354-hd-wallpapers.jpg&f=1&nofb=1); }

nav .links {
  background: ;
}

nav { background-image: #f7022a; }

body {
  /* sets background */
    background-image: transparent;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 60% ;
   
    

  }


:root {
        --logo-blue: #68359B;
        --darker-blue: #90EE80;
        --lighter-blue: #202020;
        --even-lighter-blue: #232323;
        --lightest-blue: ;
        --dark-orange: #D8BFD8;
        --light-orange: ;
        --even-lighter-orange: url(https://data.whicdn.com/images/220295924/original.gif);
        --green: #EEECF1;
    }

main {
  /* changes made to stuff outside of columns */
    background: #000000;
    padding: 0;
    font-size: 100%;
    color: var(--light-orange);
  }

img {
  opacity: 0.7;
}



main {
  background-image:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1d9059de-ffc4-4479-9fcf-03972a53ab72/dc2ldyw-75a27033-d2fe-4c3f-ac41-9d71e9ff032c.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMWQ5MDU5ZGUtZmZjNC00NDc5LTlmY2YtMDM5NzJhNTNhYjcyXC9kYzJsZHl3LTc1YTI3MDMzLWQyZmUtNGMzZi1hYzQxLTlkNzFlOWZmMDMyYy5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.NEO24Ena3WBMLrs_NhoIGIR3QebJKuOnry2u16wl2T8);

  color: #000000;
}



body { 

font-family: monospace;
</style>
<style>
html:before {
  animation: grain 5s steps(9) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
</style>
                          
            <div class="section">
             
              <p><style>
 
@keyframes nineties1 {
	0.0% {
		transform: rotate(0deg);
	}
	19.4% {
		transform: rotate(-3deg);
	}
	20.1% {
		transform: rotate(3deg);
	}
	29.3% {
		transform: rotate(3deg);
	}
	30.3% {
		transform: rotate(-6deg);
	}
	39.3% {
		transform: rotate(-6deg);
	}
	40.0% {
		transform: rotate(-2deg);
	}
	48.7% {
		transform: rotate(-2deg);
	}
	49.7% {
		transform: rotate(5deg);
	}
	59.2% {
		transform: rotate(5deg);
	}
	60.2% {
		transform: rotate(9deg);
	}
	69.2% {
		transform: rotate(9deg);
	}
	70.2% {
		transform: rotate(-8deg);
	}
	79.4% {
		transform: rotate(-8deg);
	}
	8.7% {
		transform: rotate(0deg);
	}
	80.4% {
		transform: rotate(-2deg);
	}
	88.5% {
		transform: rotate(-2deg);
	}
	89.6% {
		transform: rotate(5deg);
	}
	9.5% {
		transform: rotate(-3deg);
	}
	98.7% {
		transform: rotate(5deg);
	}
	99.5% {
		transform: rotate(0deg);
	}
}
@keyframes nineties2 {
	0.0% {
		transform: rotate(0deg);
	}
	19.4% {
		transform: rotate(3deg);
	}
	20.1% {
		transform: rotate(-3deg);
	}
	29.3% {
		transform: rotate(-3deg);
	}
	30.3% {
		transform: rotate(6deg);
	}
	39.3% {
		transform: rotate(6deg);
	}
	40.0% {
		transform: rotate(2deg);
	}
	48.7% {
		transform: rotate(2deg);
	}
	49.7% {
		transform: rotate(-5deg);
	}
	59.2% {
		transform: rotate(-5deg);
	}
	60.2% {
		transform: rotate(-9deg);
	}
	69.2% {
		transform: rotate(-9deg);
	}
	70.2% {
		transform: rotate(8deg);
	}

	79.4% {
		transform: rotate(8deg);
	}
	8.7% {
		transform: rotate(0deg);
	}
	80.4% {
		transform: rotate(2deg);
	}
	88.5% {
		transform: rotate(2deg);
	}
	89.6% {
		transform: rotate(-5deg);
	}
	9.5% {
		transform: rotate(3deg);
	}
	98.7% {
		transform: rotate(-5deg);
	}
	99.5% {
		transform: rotate(0deg);
	}
}


.friends-grid img{
 transform: rotate(0deg) !important;  
outline:none !important;
animation: nineties2 1.5s infinite;
border-radius: px; !important;
filter:hue-rotate() drop-shadow(5px 5px black) !important;
}

</style></p></div>

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

ℜ𝔦𝔨𝔲𝔲𝔲💤	1745356037 Using!!! :] Report Comment
𝔻𝕒𝕪𝕢𝕦𝕚𝕝	1740424889 using ! Report Comment
spawn	1738278892 using !! Report Comment
spawn	1738278890 using !! Report Comment
spawn	1738278890 using !! Report Comment
spawn	1738278890 using !! Report Comment
Chaos-Collective	1735497992 Using! Report Comment
madi	1731210710 using :D! Report Comment
robotsleep	1725413444 using Report Comment
polarᡣ𐭩	1723664131 using!! Report Comment
✞Opal_lottie✩	1723049526 Usingggg!!!!!`0` Report Comment
p1vk0	1716538184 using!! Report Comment
Anon_Kitty	1716532878 will use thx so much!!! Report Comment
Namidah ✦	1716166005 used Report Comment
Hecate	1709131636 using! Report Comment
Churro	1708857252 love itt, using!!! Report Comment
Shena Jezewski ⚘	1707207189 Loooooove, using! <3 Report Comment
ash	1706038101 using!!! Report Comment
Moira	1700316995 use! Report Comment
Moony	1697568060 Using! Report Comment