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

caetanobfdi2763	1773332446 using! but i improved it Report Comment
Anna	1773049759 Using Report Comment
Gam	1770165361 using Report Comment
saintklaude	1769564181 using! Report Comment
elrizusXD	1766783578 Thank you Report Comment
ace	1765032928 using! Report Comment
NotEvan	1762546363 Thanks the layout! Report Comment
Safi Starie	1761979815 using Report Comment
☆Jell0_Mell0_21☆	1759936030 Looks cool! :D Report Comment
cwd	1758585053 usng Report Comment
kalea	1752495308 using! :D Report Comment
george kirtsov	1747077214 thanks a lot Report Comment
zandertee	1745160009 Hi Cory, thank you so much for creating this! I appreciate it. Report Comment
PowerBook180c	1744833087 Exactly what I was looking for, Thank You! Report Comment
fizz >u<	1744321190 hii, i just wanna say i LUV YER LAYOUTZ :D!!!!!!!!!! they all look so kewl :p Report Comment
⋆☥swag~freddie☥⋆	1738375838 using this! Report Comment
⋆☥swag~freddie☥⋆	1738375831 using this! Report Comment
⁥	1737230494 using it!!!! :]] Report 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