Halo Layout

Tags: game, halo, master chief, xbox
Description:

The base layout was by Bela! I only customized it!!! 𝙒𝙝𝙖𝙩'𝙨 𝙖𝙙𝙙𝙚𝙙: ♥𝙄'𝙢 𝙊𝙣𝙡𝙞𝙣𝙚 𝙂𝙄𝙛 ♥𝙃𝙖𝙡𝙤 𝙂𝙧𝙖𝙥𝙝𝙞𝙘𝙨/𝙂𝙄𝙁𝙎 ♥𝙎𝙤𝙣𝙜 𝙛𝙧𝙤𝙢 𝙃𝙖𝙡𝙤 2 ♥𝙓𝘽𝙊𝙓 𝙄𝙣𝙩𝙧𝙤
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by 𓆩♡𓆪Rhys (https://layouts.spacehey.com/layout?id=102977) -->

<style>

.container{
    width:100%;
    height:auto;
}
body {
  background-image: url('https://m.media-amazon.com/images/M/MV5BMzM1YTEwMTktMmQ1OC00MGExLTg3N2QtZTM4ZDQ3MGI4MzQ0XkEyXkFqcGdeQXVyNzg3NjQyOQ@@._V1_.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-color: black;
}
main {
  background: rgba(0,0,0,0.0);
  border-radius: var(--curve);
  overflow-y: scroll;
  height:400px;
  width:70%;
  margin:auto;
}
.online {
  content: url(https://i.gifer.com/origin/f8/f86d7efa404c117f5d224ea37fe29d95_w200.gif);
}
.profile{
    display:flex;
    flex-direction: column;
}
.profile .left{
    width: 100%;
}
nav {
  background-color: transparent;
  border: var(--borders);
  border-radius: var(--curve);
  margin-bottom:80px;
}
nav .top {
  background: transparent;
}
nav .top a, nav .links a {
  color: var(--text);
}
nav .links {
  color: var(--text);
  background-color: transparent;
  border-radius: var(--curve);
  text-align: left;
  font-size: 12px;
  text-shadow: 2px 1px 5px black;
}
</style>
<style>
a:hover {
  cursor: url('https://img.icons8.com/wired/48/fa314a/define-location.png'), auto;
}
.profile {
  cursor: url('https://img.icons8.com/color/48/000000/define-location.png'), auto;
}
@font-face {font-family:"TextMeOne-Regular"; src: url('//dl.dropbox.com/s/ob6fg25uw67e72i/TextMeOne-Regular.ttf');}
</style>
<style>
@font-face {font-family:"Clip"; src: url('//dl.dropbox.com/s/qpn1qi0thbtpatb/Clip.ttf');}
</style>
<style>

:root {
  --headers: cyan;
  --text: cyan;
  --links: cyan;
  --borders: 0px solid black;
  --font-family: "TextMeOne-Regular";
  --curve: 0px;
}
/* this is where the colors for specific things are located */

h2, h3, h4, h5, nav label {color: var(--headers)!important;}/* headings*/
a {color: var(--links)!important;}/* color of links */
p, .count, .friends a, .friends p{color: var(--text) !important;}/* color of text */
.section h4 {color: var(--headers);!important;}/* aboutme & want2meet headings */
.blurbs .heading {display: none;}/* hides the blurbs title */

/* 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: var(--links);
}
/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo {
  filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(2642%) hue-rotate(106deg) brightness(107%) contrast(106%);
}
/* the search wrapper and button */

.search-wrapper input[type=text] {
  background-color: transparent;
  border: 5px double var(--text);
  color: var(--text);
  border-radius: 50px;
}
button {
  border-radius: var(--curve);
  border: 0px solid var(--text);
  font-family: var(--font-family);
  background-color: transparent;
  color: var(--text);
}
.details{
    text-align: right;
}
/* the online symbol and text */

.online {
  color: var(--links) !important;
  text-transform: lowercase;
}
.online img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(2642%) hue-rotate(106deg) brightness(107%) contrast(106%);
}
/* this is where your name appears */

h1 {
  color: #afd7f2;
  font-family:  "Clip";
  font-size: 50px!important;
  font-weight: 1;
  text-align: right;
}
/* font family for the headers, navigtion links, links, body text */

a, p, .section, #comments{
    font-family: var(--font-family) !important;	
    font-size: 24px;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: "Clip";
    letter-spacing: .3px;
    font-size: 26px;
}
/* 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: 3px;
  background: var(--links);
  border: none;
}
/* this is where you adjust the borders and background */

.blurbs, .friends, .profile .table, .blog-preview, .profile .table-section, .contact {
  border-radius: var(--curve) !important;
  border: var(--borders) !important;
  background-color: transparent!important;
}
.icon {
  border: none !important;
}
.comment-replies {
  border: 1px solid cyan;
}
/* this is the border around the replies */

.comment-reply:not(:first-child) {
  border-top: 2px solid cyan;
}
/* line in bewtween comment replies*/

/* your interest and comments table row background color */

td {
  background-color: transparent!important;
}
/* the interest table */

.table-section {
  border: none !important;
  background-color: var(--box_color_and_seethru)!important;
  border-radius: var(--curve) !important;
}
/* the header section of the boxes */

.heading, .blog-preview h4, .section h4 {
  background: none !important;
  text-align: center;
}
/* 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;
  border: var(--borders) !important;
  border-radius: var(--curve) !important;
  padding: 0px;
}
/* adjusting images borders and adding styling if you want to */
.profile-pic{
    padding-left:15px;
}
.profile-pic img {
  outline: none !important;
  border-radius: 500px;
  border: 5px double cyan;
}
/* you can add text-align:center; if you want your friends to be centered */

.friends-grid {
  text-align: center;
}
.friends-grid img {
  border-radius: var(--curve) !important;
  filter: brightness(70%);
}
/* margin and padding */

h2, h3, h4, h5, p {
  padding-left: 5px !important;
}
/* this is important when you have rounded corners */

.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading, .profile .contact .heading {
  padding: 9px!important;
}
.friends {
  margin-bottom: 10px;
}
.mood{
    margin-top:15px;
    margin-bottom:40px;
    text-align: center;
}

/* custom contact */
.contact{text-align: center;}
.contact .inner a img {
  font-size: 0;
}
.contact .inner a img:before {
  font-size: 1em;
  display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
  /* add to friends */
  content: "⎔"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
  /* add to favorites */
  content: "⎔"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
  /* Send Message */
  content: "⎔"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
  /* forward to friend */
  content: "⎔"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
  /* instant message */
  content: "⎔"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
  /* block user */
  content: "⎔"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
  /* add to group */
  content: "⎔"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  /* report user */
  content: "⎔"
}
.url-info {
  display: none;
}
/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
  border: 0px dotted cyan !important;
  outline: none !important;
  border-radius: 8px;
  padding: 5px;
  border-spacing: 4px;
}
/* this styles the first column */

.comments-table td:first-child {
  background-image: url('');
  background-size: cover;
  background-position: center;
}
.comments-table td {
  background-image: url('');
  background-size: cover;
  background-position: center;
  border: 0px dashed cyan;
  padding: 10px;
  border-radius: 8px;
}
footer {
  background: transparent;
}
footer a, footer p, footer .links{
    font-size: 12px;
    text-shadow:2px 1px 2px black;
    text-align: left!important;
}
</style>
<style>
/* Force scrollbars onto browser windowa. 
Doesn't work in Firefox */

body {
  margin-bottom: fixed;
}
/* Box styles */

.myBox {
  width: 200px;
  height: 200px;
  overflow: scroll;
}
/* Scrollbar styles */

::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
::-webkit-scrollbar-track {
  border-radius: var(--curve);
  border: 0px solid cyan;
}
::-webkit-scrollbar-thumb {
  background: cyan;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: cyan;
}
</style>
<style>

@media(max-width: 600px){ /* MOBILE */
body{
  background-image: url('https://www.pikpng.com/pngl/b/31-313214_spaceship-cockpit-png-pc-game-clipart.png'), url('https://i.imgur.com/ZsBfUYU.gif');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-color: black;
}
main{
    background: transparent;
}
.profile{
  display:block;
  flex-direction: column;
}
.profile{
  overflow-y: scroll;
  width:350px;
  height:500px;
  margin:auto;
  background-color: transparent;
}
}
</style>

<style>
.noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 400;
opacity: 0.8;
pointer-events: none;
opacity: 1;
z-index: 450;
}

.noise:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ice-creme.de/images/background-noise.png');
pointer-events: none;
will-change: background-position;
animation: noise 1s infinite alternate;
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.6;
will-change: opacity;
animation: opacity 3s linear infinite;
}

.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size;
animation: scanlines 0.2s linear infinite;
}

.main {
}

.main .noise:before {
background-size: 170%;
}

.main .vhs {
position: absolute;
left: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
will-change: opacity;
animation: type 1.2s infinite alternate;
animation-delay: calc(60ms * var(--char-index));
}

.main .time {
position: absolute;
right: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .glitchtext {
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}

@keyframes opacity {
0% {
opacity: 0.6;
}
20% {
opacity: 0.3;
}
35% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
60% {
opacity: 0.4;
}
80% {
opacity: 0.7;
}
100% {
opacity: 0.6;
}
}

@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
}
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

@keyframes type {
0%,
19% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
</style>
<div class="lines"></div>
<div class="main">
<div class="noise"></div>

<style>
.rgbtxt {
animation: rgbText 1s steps(9) 0s infinite alternate;
animation-name: rgbText;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

</style></div>

<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>

<img src="https://64.media.tumblr.com/d186b032cb465cac499b7bd8ec2e185e/059ab05fb149a351-7f/s75x75_c1/a38b2b9e6ba5d27cdf07de91450d14e2512066f5.gifv" width="100px"/>
<img src="https://64.media.tumblr.com/467267a832fd08df1a9bec66223c27d6/8451487adfb500cb-18/s100x200/9b3eeca95cdb2483d0336f53e3020f2a1e5ee6e5.gifv" width="100px"/>
<img src="https://64.media.tumblr.com/25b96e1d87b062fa8f74888c59348dc7/8451487adfb500cb-dc/s100x200/692917726ba928aae277be94a474c33dcc12a8d8.gifv" width="100px"/>
<img src="https://64.media.tumblr.com/746c42456c7f14304933274da977b1ff/5caf953585adc57b-14/s100x200/60986e0264467e653b7713979c1feac0b7bb3e61.jpg" width="100px"/>
<img src="https://64.media.tumblr.com/63e4c558f154fa11ed0dbf37fb1180f0/10eb5a57ace2303c-aa/s100x200/4d9246efec5023f6ff76aa0cfe6093b344a2e158.gifv" width="100px"/>
<img src="https://media.tenor.com/ilCBXZZ3CCMAAAAi/halo-master-chief.gif" width="100px"/>
<img src="https://media.tenor.com/tgbO9BQ54-YAAAAi/master-chief-halo-infinite.gif" width="100px"/>
<img src="https://media.tenor.com/ewW_Xj-W45cAAAAi/gun.gif"/>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6b34d904-4eb3-4e7b-aafe-9fcf52515fd3/d3jksoa-3d541988-815e-42e0-b0df-372d44152ed6.png/v1/fill/w_900,h_371/haloreach_energy_sword_profile_by_toraiinxamikaze_d3jksoa-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MzcxIiwicGF0aCI6IlwvZlwvNmIzNGQ5MDQtNGViMy00ZTdiLWFhZmUtOWZjZjUyNTE1ZmQzXC9kM2prc29hLTNkNTQxOTg4LTgxNWUtNDJlMC1iMGRmLTM3MmQ0NDE1MmVkNi5wbmciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.DZ4_W7nlSNJX_GcTBBioDP4IEONgSQC_nkKOqM2GefU" width="100px"/>

<iframe width="0" height="0" src="https://www.youtube.com/embed/ePLDO68lcA4//?&;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.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
Blu	1721649850 i just played halo ce and reach and im using this if it works Report Comment