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

Moira	1700316995 use! Report Comment
Moony	1697568060 Using! Report Comment
audrey	1691442657 using! Report Comment
beck	1680015052 i wanna use this but idk how to code:( very beautiful Report Comment you just need to copy it and paste it in your 'about me' section ^u^ everything's already coded and should work fine by cattt ᓚᘏᗢ; 1687336096; Report
Amortentya	1677449715 using :D Report Comment
Sinister	1675884944 using this one omg Report Comment
Collin	1660459141 this is so cool!!!! Report Comment
Catherine Zickgraf	1644374087 love it. Report Comment
Catie	1644097944 Love this one. Going to use it. :) Thanks Report Comment
Lolo Aya	1636779421 I am going to use this layout! It's awesome! Report Comment
Javier	1632056571 i hope it is alright we use this layout just until we learn how to create a layout for ourself! your layouts are really cool! Report Comment
Amoni Warren	1614310774 using this one Report Comment
Bree	1613684591 I love your layouts so much! Report Comment awww thank you so much!! by Morgan Madewell; 1614339730; Report
ceebee	1613375504 I absolutely love this layout! Thank you! 💕 Report Comment
Darlene	1613318218 love it! thank you! Report Comment
Midnight Riot	1613078273 This! Love it. Thank you 💘✊ Report Comment