Legend of Zelda: Ocarina of Time

Tags: zelda, ocarina of time, legend, nintendo, 64, video, games

Description:

just a zelda themed layout I made for someone.

EDIT: added an image below the navigation menu and intro animation

EDIT: added border colors in the blurbs, colored in the comments and interest section.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*----------------------------intro animation-----------------------------------------*/
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.ibb.co/dJYf9vL/tumblr-ntj2h552ja1s3uawvo1-400.gif');
	background-size: 100% 99.95%;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
:root{
   --headers: #002fb00;
  
  --bordercolor: #0B4222;
  --borderstyle: solid;

  --background_image: url(https://i.ibb.co/4N3Pf62/bg1.jpg);

  --font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
   
  --mynamesize: 35px;

  --transparency: 0.33;

  --curve: 15px;

  --hue: 0deg;
  
  --text: #007400;
}
/*------------------------------------image above main----------------------------------------*/
main:before { 
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.ibb.co/YDV5j3r/tumblr-mm1fgvj-TAl1rnmjr5o1-500.gif');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/*--online image--*/
.online{
	content:url(https://i.ibb.co/41JwDqC/2b99e9e1f459a950a1ded72369fb0d7efe930895-hq.gif);
}
/*---main prof bg and footer transparent---*/
main, footer { 
	background-color: rgba(0, 0, 0, 0.0);
} 
.section{color: var(--text) !important;}
/*------------------change the attributes of the nav logo--------------------*/
nav img.logo { 
	filter: brightness(0) saturate(0%) invert(10%) sepia(90%) saturate(5652%) hue-rotate(100deg) brightness(100%) contrast(100%) drop-shadow(0px 1px 0px green) !important;
}
nav .top {
    background-color: rgb(0, 0, 0);
}
nav .links {
    background-image: url("https://i.ibb.co/2nKkH74/1.png");
}
/*--text of your username---*/
h1{ 
 background-image: url("https://i.ibb.co/gDX1Wb6/External-content-duckduckgo-com.gif");
 font-size: var(--mynamesize) !important;
 text-transform:none !important;
 padding-left:10px !important;
 text-shadow: 0px 0px 5px black;
}
/*----------------background image--------------*/
body, .bodyContent  { /*background and scroll bar*/
	background-color:green; /*scroll bar color*/
 	background-image:var(--background_image); 
    background-attachment: fixed;
    background-size: 1920px 1080px;
}
/*-------left column---------*/
.profile .table-section {
  text-align: center;
  font-size: 15px;
  background-image:url(https://wallpapercave.com/wp/wc1716498.jpg);
  color:var(--bordercolor);
  border-color: var(--bordercolor);
  border-style:var(--borderstyle);
}
/*----------contact and interests table--------------*/
.contact {
    background: url(https://wallpapercave.com/wp/wc1716498.jpg);
    background-size: cover;
}
.profile .contact {
  text-align: center;
  font-size: 15px;
  background-image:url(https://wallpapercave.com/wp/wc1716498.jpg);
  color:var(--bordercolor);
  border-color: var(--bordercolor);
  border-style:var(--borderstyle);
}
.heading, .url-info, .blurbs, .details, .mood, .friends, .contact, .table, .table-section, footer {
  background-color:var(--box_color_and_seethru) !important; remove comments for transparency
  border-radius: var(--curve) !important; /*box*/
  padding: 8px !important;
  text-align: center;
}
table.details-table td {
  background-color:#c79a05 !important;
  border-color:var(--bordercolor)
  border-style:var(--borderstyle);
}
/*-----right column---------------*/
main .right {
    align-content: center;
}
.profile .blurbs .inner .section h4 { /*heading text right column*/
  text-align: center;
  font-size:15px;
  padding: 8px !important;
  padding: 30px;
  height: 40px;
  background: rgba(0, 0, 0,0.8);
  border-style:var(--borderstyle);
  color:var(--bordercolor);
}
.profile .blurbs .section h4{
    background-color:#c79a05;
}
.profile .blurbs .heading {
    visibility: hidden;
}
.blurbs .inner{
	background-color: rgb(0,0,0);
	border-style: solid;
	border-style:var(--borderstyle);
    border-color:var(--bordercolor);
}
.blog-preview {
    text-align:center;
    background-color: rgba(0,0,0,0.1);
    filter: brightness(10) saturate(0%) invert(10%) sepia(90%) saturate(5652%) hue-rotate(100deg) brightness(100%) contrast(100%) drop-shadow(0px 0px 10px black) !important;
    border-style: solid;
}
.inner .section {
  padding: 8px !important;
}
.profile .url-info {
    visibility: hidden;
} 
.profile .friends .heading h4 {
    font-size: 20px;
    filter: brightness(10) saturate(0%) invert(10%) sepia(90%) saturate(10%) hue-rotate(100deg) brightness(100%) contrast(100%) drop-shadow(0px 0px 10px black) !important;
    color:var(--bordercolor);
}
.profile .friends .inner {
  opacity: .99;
  background-color:black;
  border-style:var(--borderstyle);
  border-color:var(--bordercolor);
}
DIV.friends-grid {
    background: rgba(0, 0, 0,0.8);
}
div.friends:nth-of-type(3) > div.inner:nth-child(2) > p:first-child > b:first-child {
    visibility: hidden;
}
#comments > div.inner:nth-child(2) > p:first-child > b:first-child {
    color:var(--bordercolor);
}
table.comments-table {
    background-color: ;
}
.comments-table td {
    background-color:#c79a05 !important;
    border-style:var(--borderstyle);
    border-color:var(--bordercolor);
}
</style>

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

L1NK	1694965688 Using!!! Report Comment
navi!! x3	1691182060 SOO AWESOME IM USING!! Report Comment
He stole a baconator	1679514345 USING!!!! Report Comment Thanks for the comment, I appreciate it (i suck at css lmao) by Macky; 1679802749; Report
TheMenace	1631666470 This is so good!!!! Report Comment Thanks! I appreciate it. :3 by Macky; 1631689325; Report