Aqua

Tags: mac, apple, retro, old-school, intro, cory, pacdude

Description:

Bring back the heyday of Mac OS X with this 10.4-inspired layout, complete with startup screen and sound effect. Contact links are moved to the bottom of the screen as a dock. Works great in Chrome, Firefox and of course Safari, and looks great in mobile too.

If you use my code, I'd love it if you friended me or at least left a comment, thanks!

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700;900&display=swap');
body {
	background-image: url('https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/5ew8Nig.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	font-family: 'Noto Sans JP', sans-serif;
}
.links{
	border-radius: 0 0 10px 10px;
}
main {
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 20px;
	background-image: url('https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/FmRwDaZ.jpg');
	box-shadow:0px 0px 10px #000;
}
main::before {
	content: "SpaceHey Profile";
	text-align: center;
	display: block;
	padding-bottom: 5px;
	background-image:url(https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/jXt6871.png);
	background-repeat:no-repeat;
	background-position: 10px 0;
}
main::after {
	content: " ";
	text-align: center;
	display: block;
	padding-bottom: 15px;
	background-image:url(https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/RKu9Tnn.png);
	background-repeat:no-repeat;
	background-position: 99% 0;	
}
.profile {
	background-color: #FFF;
	width: 95%;
	margin: auto;
	border: 2px solid #CACACA;
}
.profile .contact{
	width: 70%!important;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin:auto auto!important;
	border: 0!important;
	background-image: url(https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/KiYTQw8.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;
}
.profile .contact .heading{
	display:none;
}
.profile .contact .inner, .profile .contact .inner .f-row{
	display:flex;
	justify-content: space-around;
}
.profile .contact .f-row{
	margin:0;
	margin-bottom:15px;
	-webkit-box-reflect: below -15px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5)));
}
/* Aqua - created by Cory Anotado - PacdudeGames.com */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a {
	font-size: 0
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {
	font-size: 6vw;
	line-height: 1.2em;
	opacity: 1;
	transition: all .3s;
	display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:hover:after {
	transform: scale(2);
	opacity: 1;
	transform-origin: bottom center;
}
.f-col a:hover{
	text-decoration:none;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after {
	content: "💞"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after {
	content: "⭐"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after {
	content: "💬"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after {
	content: "↗️"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after {
	content: "📩"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after {
	content: "🛑"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after {
	content: "💎"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {
	content: "🚩"
}
footer{
	margin-bottom:10vw;
	background:none;
}
/* you can get rid of this if you don't want the intro */
.hideobj{ visibility: hidden; height: 20px; width: 0%; }
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/SiOh77T.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	animation: yourAnimation 5s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
/* stop getting rid of stuff here, but also get rid of that iframe line */
</style>
<iframe src="https://www.youtube.com/embed/Z9w08Pov-yA?&;autoplay=1" frameborder="0" class="hideobj"></iframe>

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

Dreamer Howard	1731355171 Thank you for making this. I'm using it for my page. Report Comment
ceefax	1731195281 i shall use this Report Comment
petewentz6900	1729729734 usingg! Report Comment
sn1psandskyguyX	1729407359 i will use this! Report Comment
MePhone Four	1729228108 Using! Report Comment
caspian	1727831819 Using Report Comment
Rand	1727392054 Using! Report Comment
Dog Wife	1726533667 gonna give this one a try, thanks! Report Comment
Discopanda( ^ω^)	1722290051 gonna use this Report Comment
computerangel	1721594824 gonna u se this Report Comment
melrxse	1718331642 using Report Comment
DE123	1717321141 Using! Report Comment
Elisabeth!	1714154194 Using! Report Comment
xoiux	1713743920 using!! Report Comment
iamademon	1712410519 using Report Comment
SN4IL	1712090090 using!!! Report Comment
gamma🇮🇹	1710098142 usingg! Report Comment
mari	1710042320 using!! Report Comment
omgitsmarilulz	1709520097 using!! Report Comment
Agnar	1707882016 Using this at the moment! Great layout mate! :D Report Comment