space/ alien layout

Tags:

Description:

my first layout so kinda sucky but im posting it here anyways just to have some record of it

Preview:

Code:

<!-- (c) Layout created by ali3n 1nvad3r :0 (en/de) (https://layouts.spacehey.com/layout?id=103065) --> <!-- outer space layout by ali3n 1nvad3r :0, i dont own any images used --> <style> /* toolbar */ :root { --logo-blue:black; --darker-blue: white; --lighter-blue: rgb(41, 26, 64); } /* banner */ main:before { width: 100%; height: 320px; display: block; color: white; content: " WRITE SOMETHING HERE "; background-image: url('https://i.pinimg.com/236x/6a/44/a9/6a44a9c4af8d04f7bc640794f3b9a242.jpg'); background-size: cover; background-position: center center } /* backgrounds */ body { background-image: url("https://i.pinimg.com/236x/bd/f2/7c/bdf27c3afb9acb3f1d5aca0bd1f192ff.jpg"); background-size: cover } .profile { background-color:rgb(41, 26, 64) ; } /* heading size*/ h1,h2,h3,h4,h5{ font-size: 130%; } /*heading colours */ .profile .blurbs .heading, .profile .friends .heading{ background-color:rgb(41, 26, 64) ; color: rgb(172, 229, 157); } .profile .contact .heading, .profile .table-section .heading{ background-color: rgb(172, 229, 157); color: black } /* footer */ footer { border-radius: 15px; background-image: url(https://i.pinimg.com/236x/0e/b3/f2/0eb3f2cf7ee85547ab222068fdbd7edf.jpg); color: white; height: 150px; background-size: cover; } .profile .friends .person img:not(.icon){ border: 4px dashed yellowgreen; } /* contact icons */ .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 favorite */ content: "🛸" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send a message */ content: "🛸" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* foward 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 2 group */ content: "🛸" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report */ content: "👽" } </style> <!-- falling objects --> <marquee behavior="scroll" direction="down" style="position:absolute; left:30%; top:5px; width:100; height:529px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:85%; top:117px; width:100; height:677px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:5%; top:66px; width:100; height:514px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:60%; top:13px; width:100; height:524px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:95%; top:128px; width:100; height:535px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:29%; top:121px; width:100; height:630px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:42%; top:170px; width:100; height:534px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:17%; top:77px; width:100; height:696px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:67%; top:89px; width:100; height:659px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:39%; top:72px; width:100; height:580px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:67%; top:199px; width:100; height:526px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:90%; top:182px; width:100; height:689px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:43%; top:23px; width:100; height:614px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:56%; top:112px; width:100; height:507px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:26%; top:7px; width:100; height:591px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:34%; top:39px; width:100; height:654px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:54%; top:106px; width:100; height:576px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:70%; top:184px; width:100; height:610px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:34%; top:113px; width:100; height:617px;"><font color="#66ff66" size="+2">&lt;3</font></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:5%; top:109px; width:100; height:621px;"><font color="#66ff66" size="+2">&lt;3</font></marquee>

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.