HALO 2 layout with custom xbox intro and EPIC MAIN MENU THEME

Tags: halo, early2000s, halo2, gaming, original xbox, xbox

Description:

custom layout that has the feel of the main menu for halo 2 PC with a custom original xbox opening to the page this layout also features the main menu music for halo 2 this is a little something different from what i am typically posting but i wanted to try new things anyway with much love -carrie!!-

Preview:

Code:

<!-- (c) Layout created by cherry (https://layouts.spacehey.com/layout?id=83237) --> <!-- (Xbox intro by xXPixieDaNekoXx thanks for the help bruv) --> <style> body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://media.tenor.com/FzJSMa0EnQ0AAAAC/xbox-microsoft.gif'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 8s ease 0s 1 normal forwards; pointer-events: none; } @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } <style></style> <style> nav img.logo { height: 100%; content:url("https://static.wikia.nocookie.net/logopedia/images/5/5f/Halo_2_Logo_%28Blue%29.png/revision/latest?cb=20161229021655"); }</style> <style> /*==========⚠️========== * for colors go to https://htmlcolorcodes.com/color-names * for fonts go to https://fonts.google.com * for cursors go to https://icons8.com or https://www.cursors-4u.com ============⚠️==========*/ * { cursor: url(''), auto; } a:hover { cursor: url(), auto; } /* this is where the colors are rooted */ :root{ --headers: LightSteelBlue; --text: LightSteelBlue; --names: LightSteelBlue; --links: Lightsteelblue; --background_image: url('https://steamuserimages-a.akamaihd.net/ugc/1011564617600517162/93DB6AB71B453ADD17F1C3090B8AD891827F1F3F/?imw=512&&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false'); --font-family:'Halo Outline', sans-serif; --curve: 0px; --borders: 2px LightSteelBlue; } /* this is where the colors for specific things are located */ h3, h4, h5{color: var(--headers)!important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ p, h2, .count {color: var(--text);} /* color of text */ .friends a p{color: var(--names);} /* color of names, and friends counter */ nav label{color: var(--links);} /* color of search */ .section h4 {color: var(--headers);} /* aboutme & want2meet headings */ .blurbs .heading {display:none;} /* hides the blurbs title */ .details p:last-child{color: var(--text);} /* where the last login and status appears */ /* this is where your background image ends up being styled */ body{ background-image: var(--background_image); background-size: contain; background-position: center; background-color: Transparent; } /* this is where your name appears */ h1{ color: white; font-family:'Halo Outline', sans-serif; font-size:30px !important; font-weight: 1; border: var(--borders); background-color: Transparent; padding:5px; text-align: center; } /* the navigation is adjusted here */ nav{ background-color: transparent; border: var(--borders); border-radius: var(--curve); text-align: center; } nav .top, nav .links { background-color: Transparent; border-radius: var(--curve); } nav .links a{ text-shadow:none; } /* this is the line that appears between links in the header and footer. you can add an emoji or symbol instead of the default line it has */ nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: "|"; color: transparent; } /* the search wrapper and button */ .search-wrapper input[type=text] { background-color: transparent !important; border: 2px solid var(--links) !important; color:var(--links) !important; border-radius: var(--curve) !important; } button{ border-radius: var(--curve) !important; border: 0px solid var(--links) !important; font-family: var(--font-family) !important; background-color: transparent !important; color:var(--links) !important; } /* the online symbol and text */ .online{ color: var(--links) !important; text-transform: lowercase; text-align: right; } .online img{ filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%); !important; } /* font family for the headers, navigtion links, links, body text */ a, p, b, nav label, .section{ font-family: var(--font-family); font-size: 12px; font-weight: 1; text-shadow: 0px 0px 0px Transparent; } h2, h3, h4, h5{ font-family: var(--font-family); font-size: 16px; text-align: center; font-weight: 1; text-shadow: 0px 0px 0px LightSteelBlue; } /* the hr code. the hr is the horizontal line when you want to separate important info or add a break in your paragraphs*/ hr{ height:2px; background: transparent; border: none; } /* this is where you adjust the borders and background */ .blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{ border-radius: var(--curve); border: var(--borders)!important; background-color: #1c2837!important; } .comment-replies{border:4px groove gray;} /* this is the border around the replies */ .comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in between comment replies*/ /* your interest and comments table row background color */ td{ background-color: transparent!important; } /* the middle section of your profile background color*/ main{ background: transparent; border-radius: var(--curve); border: transparent; outline: none; } /* the interest table */ .table-section{ border:none !important; border-radius: var(--curve) !important; } /* the header section of the boxes */ .heading{ background: none !important; } /* this is the box that says "Edit Info" when you're logged in, and to your friends it says "Profile Name is your friend". */ .profile-info { background-color: Transparent !important; border: var(--borders) !important; border-radius: var(--curve) !important; } /* adjusting images borders and adding styling if you want to */ .profile-pic{ padding: 10px; } /* you can add text-align:center; if you want your friends to be centered */ .friends-grid{ text-align: center; } /* margin and padding */ h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */ .contact .heading, .profile .table-section .heading, .blog-preview .heading, .profile .friends .heading, .mood{padding: 5px!important;text-align: center;} .mood, .friends{margin-bottom: 10px;} .url-info{display: none;} .general-about .details{ background: Transparent; border: var(--borders); padding-bottom: 70px; margin-bottom: 10px; } .contact{ padding: 5px } .contact .f-col{ padding: 0px 0px 7px; } .f-row{ margin:0px!important; } /* this is the comments table scroll code. you can delete this if you don't want a scroll box */ .comments-table { display:Transparent; height: 500px!important; overflow-y: scroll; outline: none !important; border-radius: 3px; border-spacing: 6px; border: steelblue; } .comments-table td{ border: 2px transparent; } footer{ background: transparent; border: var(--borders); padding:10px; margin-top: 10px; } /* .details-table td:first-child{display:none;} this hides the movies,books,heroes titles*/ </style> <style> /* Scrollbar styles */ ::-webkit-scrollbar { width: 5px; height: 12px; } ::-webkit-scrollbar-track { border-radius: var(--curve); border: 1px solid black; } ::-webkit-scrollbar-thumb { background: gray; border-radius: var(--curve); } ::-webkit-scrollbar-thumb:hover { background: black; } </style> <iframe width="0" height="0" src="https://www.youtube.com/embed/gU2NSCHig10//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"> </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.