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

jannah <3	1701240242 USING!!! <3 Report Comment
bramhuergers	1701045847 u Report Comment
Ecxalibor	1700252478 May use! Report Comment
ipod_luvzz	1699836242 using!!!!!!!!!!!! Report Comment
GHOULIA	1687468996 may use! <3 Report Comment
Agusty	1686437590 USING THIS!!1!!1 Report Comment
Kyle Goop	1681754540 using!! Report Comment
Kyle Goop	1681754539 using!! Report Comment
Dill	1674256140 USING THIS Report Comment
Apple	1671267267 using this Report Comment
Daisy Eleanor Hensley	1668892534 Love this! Report Comment
Donovaly95	1664633686 I love skeuomorphism! Report Comment Me, too! by Daisy Eleanor Hensley; 1668892550; Report
Richard Gates	1659410165 ironically enough, im using osx tiger right now and when I tried to use this layout it broke due to an error loading the fonts LOL Report Comment
panik	1651568305 thank you!! Report Comment
TR1X13	1651440019 may use :) Report Comment
alab	1643728002 using this hehe thank u this is LOVELY Report Comment
O-ton	1640597457 Mac user here! Love this!!! Report Comment
Izzy	1636685968 This layout is fulfilling all my nostalgia needs! Report Comment
anoncarrot	1617486003 damn getting lots of nostalgia after using this theme on my profile Report Comment
Amy	1612931756 It' so clean! I'm using it, thx for the design! Report Comment