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 61 comments ( View all | Add 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
𖦹𓋹⋆fred⋆𓋹𖦹	1738375838 using this! Report Comment
𖦹𓋹⋆fred⋆𓋹𖦹	1738375831 using this! Report Comment
⁥	1737230494 using it!!!! :]] Report Comment
conqAtlas	1733187897 Gonna use this! ^^ 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
beetlebum 📺	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
ego death birthday girl	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