Lean Back Layout Cyan 1.1

Tags: cyan, crashtestdummy, aqua, layout, simple, compact, sidebar

Description:

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Crash Test Dummy (https://layouts.spacehey.com/layout?id=2994) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text&family=Courier+Prime&display=swap');

html {

    background-color:#008B8B;
}
body, footer, .top {
background: rgba(0,0,0,0) !important;
color: white;
}
main {
background: #00000066 !important;
backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius:25px;
	padding:25px;
	color:#FFFFFF;
}

input {
border: 1px white solid;
border-radius: 4px;
padding: 4px;
background-color: rgba(255,255,255,0.7);
}
nav .links {
background-color: #008080;
}

/* header->sidebar */
@media(min-width:810px) {
nav {
float: left;
width: 190px;
}
main {
float: right;
width: calc(100% - 190px);
position: relative;
z-index: 10;
}

/* fix header */
nav > .top {
flex-direction: column;
align-items: center;
}
nav form {
margin-top: 10px !important;
}
nav form * {
width: 140px;
}
nav .left {
display: flex !important;
transform: translateX(-20px);
}

/* fix links */
nav .links {
display: flex;
flex-direction: column;
transform: translateX(100px);
margin: 40px 0;
position: relative;
border-radius: 4px 0 0 4px;
width: 90px;
}
nav .links li::after {
content: "" !important;
}
}

/* friends list */
.friends-grid {
display: flex;
flex-wrap: wrap;
}
.person {
display: flex !important;
flex-direction: row-reverse;
padding: 1px !important;
margin: 4px !important;
width: unset !important;
background-color: #AFEEEE;
}
.person p {
margin: 0 1px !important;
}
.person img {
max-width: 20px !important;
margin: 0 !important;
}
.blurbs {
margin: 0;
}


/* biggify */
@media(max-width:810px) {
nav .links {
text-size:20px;
}
}

/* fix img width */
.col.right img {
max-width: 100%;
}

/* fix ONLINE indicator */
.online {
font-size: smaller;
}
.container {
width: 60%;
    background: transparent;
    background-size: 40%;
    background-position: center;
}

.profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    
.heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #008080 !important;
        border-bottom: 2px solid;
    }

h1, h2, h3, h4,h5,a, p, nav label, .section {color:#7FFFD4;}

 {
        font-family: 'Big Shoulders Stencil Text', cursive;
    }

.profile-info h3 a {
	color:#7FFFD4 ;
}


.comments-table, .details-table {
	border: 1px solid #0000;
	border-collapse: separate;
	border-spacing: 0 .5em;
}
.comments-table tr td:last-child {
	height: 250px;
	display: block;
	overflow-y: scroll;
}
.comments-table td, .music-table td {
	background: none;
	color: #7FFFD4;
}
.comments-table tr {
	border-bottom: 1px solid #7FFFD4;
}
.comments-table td:first-child, .music-table td:first-child {
	background: none;
	text-align: left;
}
.details-table td:first-child {
    background: transparent;
    font-weight: normal;
    color: #00000066;
    padding: 0;
    vertical-align: inherit;
}
.details-table td {
     background: transparent;
}

.profile .left h1 {
	text-transform: capitalize;
	font-size: 2.5rem;
	color: #7FFFD4;
	text-shadow: 3px 3px 0 #008080;
	font-family: 'Big Shoulders Stencil Text', cursive;
}

.profile-pic img {
	max-width: 300px!important;
	max-height: 300px!important;
	height: 130px!important;
	width: 130px!important;
	border-radius: 100%;
	object-fit: cover;
	border: 2px solid #008080;
	
}
</style>

<style>

.left .contact {
border: 0;
background: none;
}

.profile .contact .heading h4 {
font-size: 0;
}

:root {
       --hover:#66CDAA ;
}

a:hover{color: var(--hover) !important;}
    
    a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
text-decoration: underline;
text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
text-decoration: underline;
text-decoration-style: wavy;
}
nav .top a:hover{
text-decoration: underline;
text-decoration-style: wavy;
}
nav .links a:hover{
text-decoration: underline;
text-decoration-style: wavy;
}


.profile,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    
  .profile .blurbs .section h4 {
	color:#00FFFF ;
	font-size: 1rem;
} 

#q, button {
color: #E0FFFF	;
background-color:#008080;
border: 1px solid #E0FFFF;
font-family: inherit;
}

nav img.logo {
  filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(2642%) hue-rotate(106deg) brightness(107%) contrast(106%);
}




.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: "\2795"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\2b50"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\1F4ac"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\23e9"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\1F4f1"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\274c"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\1F465"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\1f5e3"
}


.profile {
    font-family: 'Big Shoulders Stencil Text', cursive;
    text-shadow: 1px 1px 2px #5F9EA0, 0 0 25px #5F9EA0 , 0 0 3px#5F9EA0 ;
}
.profile .left h1 {
	
    font-family: 'Courier Prime', monospace;
	line-height:1em;
	
}
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
    font-family: 'Courier Prime', monospace;
	line-height:1em;
    text-shadow: 1px 1px 2px#5F9EA0 , 0 0 25px#5F9EA0 , 0 0 3px #5F9EA0;
	font-size: 1.5rem;
	
}

.profile-info {
    background-image: url(https://i.imgur.com/WromKky.gif);
    background-size: cover;
    border-color:#008080 ;
}

.online{content:url(https://i.imgur.com/aeGSU1B.gif);
    width: 55px;
    height: 55px;
}

<style>
</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 2 of 2 comments ( View all | Add Comment )

Lauren

1686253617

Hi, I'm Lauren and I need help with you layout if you have time.

I'm currently using your "Lean Back Layout Cyan 1.1:" layout. It's great! Can you please make me an amended version of the layout? I tried to do it myself, buy I failed miserably. I suck. Obi Wan, you’re my only hope. Let me explain why I love the layout and also what I'd like amended.

I love the table body with and how uncluttered everything. I have vision impairments and this layout was so easy to look at and read text. I love having the nav stuff to the side instead of on top. The rounded corners of the table are really nice and I love the color scheme. Now, I’d explain (probably poorly) what I’d like changed. You totally don’t have to do any of this work if you don’t want to. I’m just an idiot and can’t figure it out. I was hoping you could help my learning-disabled ass figure it out.

Can you please help me with the following changes?

1. Can you please remove the blur filter from the music, tv, movies and heroes sections?
2. Can you remove the width & height limit from the profile pic?
3. Can you had Contact Heading, URL, Blog Preview, Comments (without removing the "add comment" link), About Me, Who I'd Like To Meet and Books?
5. I already have code to hide to contact heading, url box, about me, who I’d like to meet, comments, friends and blogs. I need to add code to hide the book section and comments with removing add comment.
Current Code:

[
.contact .heading{display: none !important;}

.url-info{display: none !important;}

.blog-preview{display: none !important;}

style>:

5. Can you make the music, tv, movies and heroes sections to be stylized like the interest header? By that I mean make the font bigger and on top of the sections instead of beside?
6. Can you make the tables (for music, tv, movies, heroes) into separate div boxes with box shadows Sort of like this (https://layouts.spacehey.com/layout?id=4041) but with borders with box shadows and separation between each interest section?

7. Can you put in some code so I change add a background image later if I want? No repeat, cover, fixed.
8. Can you make a banner space similar to this one in style but blank so I can put in my own image?
(https://layouts.spacehey.com/layout?id=30102)

If none of this makes sense, here's some layouts I like so you have an idea

https://layouts.spacehey.com/layout?id=2994

https://layouts.spacehey.com/layout?id=344

https://layouts.spacehey.com/layout?id=1545
https://layouts.spacehey.com/layout?id=30102

Report Comment

疲れた

1638949642

wow this layout is great ! im gonna use it,thx ! and i'll give credit to you

Report Comment