Layout Preview

Mermaid core

Author: oceangirl
Category: Aesthetic
Created: August 14, 2026
Downloads: 6
pastel blue mermaid vibes
Log in to Apply

Live Preview

Comments (0)

No comments yet. Be the first!

Log in to leave a comment.

Layout CSS

/* =========================================================
   FRIEND REWIND — TEMA AZUL PASTEL
   ========================================================= */

/* Font + Background */
body {
  font-family: Georgia, monospace !important;
  background: url("https://i.postimg.cc/QC8G7LWY/92ca0801dbacc298cf3dc3cd43c3eecd.jpg") center center / cover fixed !important;
  color: #789eb5 !important;
}

/* Links */
a {
  color: #789eb5 !important;
  text-decoration: underline !important;
}


/* =========================================================
   BARRA DE NAVEGAÇÃO
   ========================================================= */

.myspace-header {
  position: relative;
  z-index: 100;
  width: 85%;
  max-width: 990px;
  color: #789eb5;
  padding: 0;
  margin: 0 auto;
  font-size: 12px;
  line-height: 0;
  background-color: rgba(169, 199, 216, 0.18) !important;
  border-radius: 51px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.myspace-header .top-nav {
  background: none !important;
  background-image: url("https://i.postimg.cc/kgTWWWR6/302-Sem-Titulo-20260814133453.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border: 6px solid #ffffff !important;
  border-radius: 57px;
  width: 519px;
}

.myspace-header .top-nav .search-button {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #789eb5 !important;
  border-radius: 0 10px 10px 0;
}

.myspace-header .top-nav .search-input {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #789eb5 !important;
  border-color: #ffffff !important;
  border-radius: 10px 0 0 10px;
}

.myspace-header .main-nav-wrapper {
  background: linear-gradient(
    to bottom,
    #a9c7d8 0%,
    #789eb5 100%
  ) !important;
  border-top-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  border-radius: 10px;
  height: 48px;
}

.myspace-header .main-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  padding-left: 42px;
}

.myspace-header .main-nav li a {
  border: 2px outset rgba(255, 255, 255, 0.8);
  border-radius: 30px;
}

.myspace-header .main-nav li a:hover {
  background-color: #789eb5 !important;
}

.myspace-header .main-nav li a {
  border-right-color: rgba(255, 255, 255, 0) !important;
}

.myspace-header .dropdown-menu {
  background: #8fb3c9 !important;
  border-color: #ffffff !important;
  box-shadow: 2px 2px 8px rgba(120, 158, 181, 0.3) !important;
  border-radius: 15px;
}

.myspace-header .nav-logo {
  height: 73px;
  width: auto;
  margin: 0 10px;
  position: relative;
  top: 2px;
}


/* =========================================================
   MAIN BLOG CONTAINER
   ========================================================= */

main {
  background: #a9c7d8 !important;
  border-left: 2px dotted #ffffff !important;
  border-right: 2px dotted #ffffff !important;
  padding: 20px !important;
  color: #ffffff !important;
}

/* =========================================================
   BLOG TITLE
   ========================================================= */

.blog-entry .title {
  color: #ffffff !important;
  background: url("https://i.postimg.cc/HnYDMG7S/4b4b73c6c89dd97e6b4348ac361de59e.jpg") center center / cover !important;
  border: 2px solid #ffffff !important;
  padding: 15px !important;
  font-size: 2em !important;
  text-align: center !important;
}

/* =========================================================
   BLOG CONTENT / TEXTO
   ========================================================= */

.blog-entry .content {
  background: url("https://i.postimg.cc/9FLgxRvX/329-Sem-Titulo-20260814143044.png") center center / cover !important;
  border: 2px dotted #ffffff !important;
  padding: 20px !important;
  color: #ffffff !important;
}

/* Texto em negrito */
.blog-entry .content b {
  color: #ffffff !important;
}

/* Links dentro do texto */
.blog-entry .content a {
  color: #dceef7 !important;
  text-decoration: underline !important;
}

/* =========================================================
   LISTAS
   ========================================================= */

.blog-entry ul,
.blog-entry ol {
  background: #8fb3c9 !important;
  border: 1px solid #ffffff !important;
  padding: 15px !important;
  color: #ffffff !important;
}

.blog-entry li::marker {
  color: #ffffff !important;
}

/* =========================================================
   BLOCKQUOTES
   ========================================================= */

.blog-entry blockquote {
  background: #789eb5 !important;
  border-left: 4px solid #ffffff !important;
  padding: 15px !important;
  color: #ffffff !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.edit-info {
  background: #8fb3c9 !important;
  border: 2px solid #ffffff !important;
  padding: 20px !important;
}

.edit-info h4 {
  color: #ffffff !important;
}

.edit-info a {
  color: #e4f2f8 !important;
}

/* =========================================================
   PROFILE PIC — GIRO
   ========================================================= */

.edit-info .profile-pic img {
  border-radius: 50% !important;
  animation: spin 7s infinite linear !important;
  border: 2px solid #ffffff !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

/* =========================================================
   COMMENTS
   ========================================================= */

#comments {
  background: #a9c7d8 !important;
  border-bottom: 2px dotted #ffffff !important;
  padding: 20px !important;
}

#comments h2 {
  color: #ffffff !important;
}

.comments-table td {
  background: #8fb3c9 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  background: #789eb5 !important;
  border: 2px dotted #ffffff !important;
}

footer p {
  color: #ffffff !important;
}

/* =========================================================
   LINKS GERAIS
   ========================================================= */

main a,
footer a,
.edit-info a {
  color: #e4f2f8 !important;
}

/* =========================================================
   CURSOR PERSONALIZADO
   ========================================================= */

* {
  cursor: url("https://i.postimg.cc/vBhRfH6d/237-Sem-Titulo.png") 32 32, auto !important;
}

/* =========================================================
   FIM DO CÓDIGO
   ========================================================= */