Star Wars inspired Layout.

Tags: star wars, r2d2, black, yellow, movies, galaxy, stars

Description:

Hello! here's Dai. i made this layout within two days and i wanted to share it, is kinda inspired in Star wars, i hope you like it, if something is wrong with it, dont doubt to put it in the comments! also, feel free to comment if youre using it just if you want, is not necessary to comment, but any boost or interaction is welcomed!!11!!!1

Preview:

click on the image for a larger preview

Code:

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

<style>
body{
background-image: url('https://i.pinimg.com/564x/d7/a6/11/d7a61190a836bdcfc62bf97af4f4c74b.jpg')
}
</style>

<style>
main{
background-color: transparent !important;
}
</style>

<style>
.general-about{
border: double yellow 4px !important;
</style>

<style>
.top{
background-color: transparent !important;
</style>
<style>
  
  .logo{
  
  content:url("https://i.imgur.com/VOZ5TTb.png")
  
  }
  
  </style>

<style>/Buttons (Background Color/Background Image)/
    button{
    border-radius: 25px 25px 25px 25px !important;
	color: black;
	font-weight: bold;
    background-color: yellow !important;
	}
</style>

<style>
.links{ 
background-color: yellow !important;
border-radius: 25px 25px 25px 25px
</style>

<style>
.profile .contact{
border: transparent!important;
</style>

<style>
.contact .inner{
border: double yellow 4px !important;
}
</style>
<style>
    :root {
        --logo-blue: url("");
        --darker-blue: #000000;
        --lighter-blue: transparent;
        --even-lighter-blue: transparent;
        --lightest-blue: transparent;
        --dark-orange: transparent!important;
        --light-orange: transparent;
        --even-lighter-orange: transparent;
        --green: #000000;
        
    }
</style>

<style>
.heading, .url-info {
color: yellow !important;
background: none;
background-color: black !important;
border: double 4px yellow !important;
}
</style>

<style>
main {
color: yellow;
border-left: double 4px yellow;
border-right: double 4px yellow;
}
</style>

<style>
}
.heading, .url-info {
color: yellow !important;
background: none;
background-color: transparent !important;
border: double 4px syellow !important;
}
</style>

<style>
nav .top a{color: yellow;}
nav .top a:hover{color: yellow; !important;}

    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    
    nav .links a{
        color:black!important;
        text-shadow: none !important;
font-weight: bolder;
    }
    
    nav .links a:hover {color: black; !important;}
    
    nav .links {
        text-align: center;
        padding: 3.5px 3.5px 5.5px 3.5px;
        font-size: 70%;
    }
</style>

<style>/* Flip Profile */
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: right;}
    .blurbs{direction: ltr;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.contact .heading {display: none !important;}
.url-info{direction: ltr; text-align: right;}
</style>

<style>/* Profile Name Header */
	@import url('https://fonts.cdnfonts.com/css/arupala-grotesk');
	.profile .left h1{ font-family: 'Arupala Grotesk', sans-serif; font-size: 38px; color: yellow; text-align: center; overflow-wrap: break-word; text-shadow: 1px 1px 1px #d1bc19;}
</style>

<style>
:root{

  --gray: transparent;
  --dark-gray: yellow;
  --darker-gray: yellow;
  --darker-blue: #a69b00;
  --lighter-blue: yellow;
  --even-lighter-blue: transparent;
  accent-color: #a69b00;
  accent-color: #a69b00;
}
</style>

<style>
.links {
    background-color: black !important;
    border-radius: 25px 25px 25px 25px;
}
</style>

<style>

footer p {
    vertical-align: middle;
    margin: 10px 0 5px 0;
    font-size: 90%;
    color: yellow !important;
}

</style>


<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://i.pinimg.com/originals/5b/09/89/5b098992db195ee1dd3cf80e6b782262.gif" width="300" height="367"/></div>

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

<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/a1/98/1d/a1981df28aa192f62c92602342b860da.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


<style>
nav .top a{color: yellow;}
nav .top a:hover{color: yellow; !important;}

    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    
    nav .links a{
        color:yellow !important;
        text-shadow: none !important;
font-weight: bolder;
    }
    
    nav .links a:hover {color: black; !important;}
    
    nav .links {
        text-align: center;
        padding: 3.5px 3.5px 5.5px 3.5px;
        font-size: 70%;
    }

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