LCARS Star Trek Layout

Tags: star trek, scifi, lcars

Description:

Going where no layout has gone before.... (lol get it? get it??)

Fair warning: this will look like crap on mobile. I specifically designed this for desktops.

The layout comes with a Janeway online icon, but you can change it to whatever you want! Just look for .online in the code and change out the url

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ꜱʜᴇʟʙᴢ (https://layouts.spacehey.com/layout?id=214) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500&display=swap');

body{
background-color: black;
background-image: url("https://www.rxwallpaper.site/wp-content/uploads/the-paper-wall-star-trek-desktop-wallpaper-brilliant.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 150px;
cursor: url(https://cur.cursors-4u.net/symbols/sym-7/sym610.ani), url(https://cur.cursors-4u.net/symbols/sym-7/sym610.png), auto !important;
}
nav .top {
background-color: black;
}

.online { visibility: hidden; } .online img { content: url("https://media1.tenor.com/images/f6d7ee24793f3ab74a7416fc75fd0ccb/tenor.gif?itemid=14421749"); animation-name: none; visibility: visible; height: 90px; width: 90px; }

.blog-preview {
background-color: #f8991d;
border-radius: 5px;
padding-left: 10px;
}

a {
color: white;
}

main {
font-family: 'Barlow Semi Condensed', sans-serif;
color: #ab75ff;
background-color: black;
position: relative;
overflow: scroll;
width: 870px;
height: 450px;
top: 327px;
left: 80px;
border-style: solid none solid solid;
border-color: #c65a5a;
border-radius: 25px;
padding: 10px;
scrollbar-width: none; 
}
main::-webkit-scrollbar {
  display: none;
}


.general-about .profile-pic img{
border-radius: 25px;
}

nav .links {
background-color: black;
text-align: center;
}

.profile-info {
background-image: url('https://i.pinimg.com/originals/aa/2f/ba/aa2fba231f3c70034d0a122e9a1f5a75.gif');
background-size: cover;
}

div.col h1 {
font-family: 'Barlow Semi Condensed', sans-serif;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: #6599ff;
 }

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border-color: #6599ff; 
border-radius: 4px;}

.profile .blurbs .heading, .profile .friends .heading {
background-color: #ab75ff;
border-radius: 4px;}

div.row {
background-color: black;
border-radius: 4px; }

}


element.style {
}
.details-table td p {
    margin: 0;
    word-break: break-word;
}
p, ol li {
    font-size: 0.875em;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.details-table td:first-child {
background-color: #fe9900;
color: white;}

.details-table td:nth-child(2) {
background-color: white;
color: black;
}

.comments-table {
border-color: black;
}

.comments-table td:first-child {
background-color: #fe9900
}

.comments-table td:nth-child(2) {
background-color: #6599ff;
color: white;
}

.profile .friends .person p {
color: white;
}

footer {
position: relative;
top: 350px;
background-color: black;
color: white;
}

footer .links a {
color: white; }

footer .copyright a {
color: white }

.details-table td p a {
color: white }

h4 {
color: white;
}
.profile .blurbs .section h4 {
color: white;
}

.count {
color: white;
}
 
</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 10 of 10 comments ( View all | Add Comment )

jasper	1748756061 UUUSIIINGGG Report Comment
brutus	1734372672 Using! :) Report Comment
~~sophia~~	1722196297 using :D Report Comment
☆ rozz	1699940156 USING THIS OMG ^_^ Report Comment
ScottXD	1691627834 I. Love. This. Report Comment
Cain	1682522442 the most layout ever !!! Report Comment
Princess Damocles	1659058843 Where do you write your About Me and how do you change the online sign? Report Comment
james	1613326624 Love it! Report Comment
Laurie	1613007874 I like this background much appreciated. Many I found I am not impressed with. Thank you. Report Comment
Katie	1611589213 If I wasn't on mobile I'd 100% use this. It's so cool. Report Comment thanks!! Yeah, i had to force the main section to be the exact size of the background where it fits, so it made mobile not look too great :( I want to try to make a simpler version of this so it looks good on mobile too! by ꜱʜᴇʟʙᴢ; 1611590275; Report Seriously you did a fabulous job. I know how hard it is to do what you did. by Katie; 1611590410; Report