Mermaid Scales

Tags: layout, bela, blue, mermaid, simple, green, purple

Description:

This layout was Originally created by Bela and then modified by me. I loved the layout of the original but wanted to put a spin on it so I am crediting her as the original creator!

Original Layout by Bela @ https://layouts.spacehey.com/layout?id=1527

Modified by Coffee Queen

Mermaid Scales background Image from Vecteezy.com

Bubble image from vector4free.com

If you use this layout please do not remove any of the credits and please post a comment below that you are using it.

If you decided to modify anything please make sure that you credit Bela as she is the original creator of this layout. I simply modified things and had no hand in the creation of this layout.

Preview:

Code:

<!-- (c) Layout created by Coffee Queen (https://layouts.spacehey.com/layout?id=28032) --> <style> /*==========⚠️========== * Original Layout by Bela @ https://layouts.spacehey.com/layout?id=1527 * * Modified by Coffee Queen * * Background from Vecteezy.com, other box image from vector4free.com ============⚠️========*/ /* cursors */ a:hover{ cursor: url('https://cur.cursors-4u.net/nature/nat-1/nat49.cur'), auto; } * { cursor: url('https://cur.cursors-4u.net/toons/too-7/too635.cur'), auto; } </style> <style> /* font style */ @font-face { font-family: "Macondo-Regular"; src: url('//dl.dropbox.com/s/bb6f0lsfy48oqp3/Macondo-Regular.ttf'); } @font-face { font-family: "TextMeOne-Regular"; src: url('//dl.dropbox.com/s/ob6fg25uw67e72i/TextMeOne-Regular.ttf'); } </style> <style> /* layout details */ :root{ --headers: MidnightBlue; --text: MidnightBlue; --names: Teal; --links: #2b506e; --hover: Aqua; --borders: 10px double #007399 !important; --background_image: url('https://i.imgur.com/gOOUjQK.jpg'); --font-family: "TextMeOne-Regular"; --curve: 50px; } .url-info{display:none !important;} /* to hide the url */ .blurbs .heading{display:none !important;} /* to hide the blurbs heading */ h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ a:hover{color: var(--hover) !important;} /* color of links on hover */ p, h2{color: var(--text) !important;} /* color of text */ h1, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */ h1, .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */ nav label{color: var(--links) !important;} /* color of search */ .section h4 {color: var(--headers) !important;text-align:center;} /* aboutme & want2meet headings */ .section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */ .comment-reply:not(:first-child){border-top: 3px solid var(--links);} /* line in bewtween comment replies*/ .count{color:var(--links);} a, p{padding-left: 5px;margin:1px;} .mood, DIV.friends:nth-child(3){margin-bottom:10px;} /* text decoration */ 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; } /* font family */ a, p, nav label, .section{ font-family: var(--font-family) !important; text-shadow: 0px 0px 0px black !important; font-size: 12px!important; } h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{ font-family: "Macondo-Regular"; text-shadow: 0px 0px 0px black !important; letter-spacing: .3px; font-size: 16px!important; } /* padding and margin */ .icon{border:none !important;} .profile-info{border-radius: var(--curve) !important;} .comment-replies{border:3px solid var(--links);border-radius:var(--curve);} .comments-table{border-radius: var(--curve) !important;border:none !important;} #comments{margin-top:5px !important;padding-bottom:5px !important} .details p:last-child{color:var(--links) !important; filter: brightness(95%);} table.details-table{padding: 5px;} .blog-preview p{padding:5px;} /* background image */ body { background-image: var(--background_image) !important; background-color: black ; background-attachment: fixed; background-size: contain; } /* navigation */ /* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */ nav{ background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; border: var(--borders); border-radius: var(--curve); padding:5px; } nav .top { background: rgba(0,0,0,0.0); } nav .top a{ color: var(--links)!important; } nav .links { background: transparent!important; background-size: 100%100%!important; text-align: center; font-size: 12px; } nav img.logo{ filter: invert(5%) sepia(70%) saturate(7133%) hue-rotate(246deg) brightness(0%) contrast(100%); } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: " ∷"; color: var(--links); } /* color the search bar and button */ .search-wrapper input[type=text] { background-color: rgba(0, 0, 0, 0.0) !important; border: 2px solid var(--links) !important; color:DarkGray !important; border-radius: 10px !important; } button{ border-radius: 10px !important; border: 0px solid DarkGray!important; font-family: var(--font-family) !important; background-color:rgba(0, 0, 0, 0.0) !important; color:var(--links)!important; } /* online icon and color */ .online{color: var(--links) !important;} .online img { filter: brightness(0) saturate(100%) invert(76%) sepia(9%) saturate(942%) hue-rotate(314deg) brightness(80%) contrast(86%); !important; } /* profile name */ h1{ padding-left: 30px !important; font-family: "Macondo-Regular"; font-size:30px !important; color: var(--headers)!important; } /* profile info */ .profile-info{ background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; border: var(--borders)!important; display: flex; align-items: center; justify-content: center; padding: 15px 5px; } .profile-info .inner{ font-weight: bold; text-align: center; } /* contact */ .contact { background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; border-radius: var(--curve) !important; padding: 5px !important; border: var(--borders) !important; } .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: "🧜‍♀️" } /* images */ main{ font-family:var(--font-family)!important; color: var(--text)!important; background: transparent; background-size: 100%; background-position: center; } .profile-pic img{ outline:none !important; border: var(--borders)!important; filter:drop-shadow(0px 0px 0px black)!important; background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; padding: 5px; border-radius: var(--curve); } .profile .friends .person img{ border: none!important; border-radius: var(--curve); } .friends-grid{ text-align: center; } .friends .heading a.more{ padding-right: 16px; } /* interest table background color. replace transparent with any color to see the change */ td { background-color: transparent!important; } hr{ border: 5px solid pink; border-radius: 50px; background: pink; } /* boxes */ .heading, .url-info, .blurbs, .friends, .table, .table-section, footer{ border-radius: var(--curve) !important; border: var(--borders) !important; } .friends, .blurbs{ background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; } .mood, .blog-preview{ text-align: center; border-radius: var(--curve) !important; border: var(--borders) !important; } .mood, .blog-preview { background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; } .table-section{ border:var(--borders) !important; background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; border-radius: var(--curve) !important; } .heading{ background:transparent!important; text-align: center; border:none!important; } .comments-table td { background: transparent!important; color:transparent!important; border-radius: var(--curve); } .comments-table td:first-child{ background: transparent!important } .comments-table td:first-child img { border: none!important; border-radius: var(--curve); /* you can clip images at https://bennettfeely.com/clippy and add the code here */ } /* footer */ footer{ text-align: center; font-size: 60%; margin: 10px 0 10px; padding: 10px 5px; background: url('https://i.imgur.com/tx40p1U.jpg'); background-size: cover; } </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.