← Back to Blog Layouts
Layout Preview

Twin Peaks

Author: Chains_Of_Love
Category: Movies & TV
Created: August 17, 2026
Downloads: 27
Layout based on Twin Peaks TV show and Fire Walk With Me.
Log in to Apply

Live Preview

Comments (0)

No comments yet. Be the first!

Log in to leave a comment.

Layout CSS

/* =========================================================
   Twin Peaks Colour Palette 
   #9b4732 — Orange (155, 71, 50)
   #980505 — Red (152, 5, 5)
   #2d2d2d — Dark Blue (45, 45, 45)
   #2a4619 — Light Blue (42, 70, 25)
   #2a4619 — Light Light Blue (120, 175, 171)
   ========================================================= */


/* =========================================================
   Font
   ========================================================= */

body {
  font-family: Courier New, monospace !important;

  background:
    url("https://64.media.tumblr.com/c10259ab38ffca32c98d182e6d7cef93/e2ee416579148c9b-9a/s400x600/3c0647fe7b51f14c610248d84100ce17d36eb421.pnj")
    center center / cover fixed !important;

  color: #2d2d2d !important;

  text-shadow:
    0 0 3px rgba(42, 70, 25, 0.45),
    0 0 6px rgba(120, 175, 171, 0.2);
}


/* =========================================================
   Links
   ========================================================= */

a {
  color: #980505 !important;

  text-decoration: underline !important;

  text-shadow:
    0 0 4px rgba(120, 175, 171, 0.55);
}

a:hover {
  color: #2a4619 !important;

  text-shadow:
    0 0 5px #2a4619,
    0 0 10px rgba(120, 175, 171, 0.5);
}


/* =========================================================
   Nav Bar
   ========================================================= */

.myspace-header {
  position: relative;

  z-index: 100;

  width: 85%;

  max-width: 990px;

  color: #2d2d2d;

  padding: 0;

  margin: 0 auto;

  font-size: 12px;

  line-height: 0;

  background-color:
    rgba(42, 70, 25, 0.15) !important;

  border-radius:
    51px;

  border-top:
    1px solid rgba(42, 70, 25, 0.9);
}


/* =========================================================
   Also Nav Bar
   ========================================================= */

.myspace-header .top-nav {

  background:
    none !important;

  background-image:
    url("https://i.pinimg.com/736x/c5/81/da/c581dafc1782de45692a15975d9c751c.jpg")
    !important;

  background-position:
    center center !important;

  background-size:
    cover !important;

  background-repeat:
    no-repeat !important;

  border:
    5px solid #2d2d2d !important;

  border-radius:
    57px;

  width:
    519px;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  box-shadow:
    0 0 6px rgba(45, 45, 45, 0.8),
    0 0 14px rgba(45, 45, 45, 0.55);
}


/* =========================================================
   Search
   ========================================================= */

.myspace-header .top-nav .search-button {

  border-color:
    #2d2d2d !important;

  background:
    rgba(45, 45, 45, 0.94) !important;

  color:
    #2d2d2d !important;

  border-radius:
    0 10px 10px 0;

  box-shadow:
    0 0 5px rgba(45, 45, 45, 0.5);
}

.myspace-header .top-nav .search-input {

  background:
    rgba(45, 45, 45, 0.94) !important;

  color:
    #2d2d2d !important;

  border-color:
    #2d2d2d !important;

  border-radius:
    10px 0 0 10px;

  box-shadow:
    0 0 5px rgba(45, 45, 45, 0.45);
}


/* =========================================================
   Main Menu   ========================================================= */

.myspace-header .main-nav-wrapper {

  background:
    linear-gradient(
      to bottom,
      #2d2d2d 0%,
      #2a4619 48%,
      #2a4619 100%
    ) !important;

  border-top-color:
    #980505 !important;

  border-bottom-color:
    #980505 !important;

  border-radius:
    10px;

  height:
    48px;

  box-shadow:
    0 0 7px rgba(45, 45, 45, 0.65),
    0 0 15px rgba(45, 45, 45, 0.45);
}

.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(45, 45, 45, 0.95);

  border-radius:
    30px;

  text-shadow:
    0 0 3px #2d2d2d,
    0 0 6px rgba(45, 45, 45, 0.45);
}

.myspace-header .main-nav li a:hover {

  background-color:
    #2a4619 !important;

  box-shadow:
    0 0 5px #2a4619,
    0 0 12px rgba(120, 175, 171, 0.7),
    0 0 20px rgba(120, 175, 171, 0.35);
}

.myspace-header .main-nav li a {

  border-right-color:
    rgba(45, 45, 45, 0.7) !important;
}


/* =========================================================
   Dropdown Menu
   ========================================================= */

.myspace-header .dropdown-menu {

  background:
    #2d2d2d !important;

  border-color:
    #2a4619 !important;

  box-shadow:
    0 0 7px rgba(45, 45, 45, 0.7),
    0 0 16px rgba(45, 45, 45, 0.45) !important;

  border-radius:
    15px;
}


/* =========================================================
   Logo
   ========================================================= */

.myspace-header .nav-logo {

  height:
    73px;

  width:
    auto;

  margin:
    0 10px;

  position:
    relative;

  top:
    2px;

  
}


/* =========================================================
   Blog Container
   ========================================================= */

main {

  background:
    rgba(45, 45, 45, 0.92) !important;

  border-left:
    2px dotted #980505 !important;

  border-right:
    2px dotted #980505 !important;

  padding:
    20px !important;

  color:
    #9b4732 !important;

  box-shadow:
    0 0 8px rgba(155, 71, 50, 0.65),
    inset 0 0 20px rgba(155, 71, 50, 0.25);
}


/* =========================================================
   Blog Title
   ========================================================= */

.blog-entry .title {

font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
    font-size: 60px;
    font-weight: bold;
    color: #644647;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #47ff52, -1px -1px 0 #47ff52, 1px -1px 0 #47ff52, -1px 1px 0 #47ff52, 0px 1px 0 #47ff52, 1px 0px 0 #47ff52, 0px -1px 0 #47ff52, -1px 0px 0 #47ff52, 4px 2px 0 #333;

  color:
    #644647 !important;

  background:
    url("https://i.pinimg.com/1200x/69/4b/b3/694bb343e13ec3aad726a85f5a389f86.jpg")
    center center / cover !important;

  border:
    2px solid #2d2d2d !important;

  padding:
    15px !important;

  font-size:
    2em !important;

  text-align:
    center !important;

  box-shadow:
    0 0 6px rgba(45, 45, 45, 0.8),
    0 0 14px rgba(45, 45, 45, 0.55),
    0 0 25px rgba(45, 45, 45, 0.35);

}


/* =========================================================
   Blog Text
   ========================================================= */

.blog-entry .content {

  background:
    url("https://i.pinimg.com/1200x/98/a8/62/98a862194de4d91d41b7ceed47adcd49.jpg")
    center center / cover !important;

  border:
    2px dotted #2d2d2d !important;

  padding:
    20px !important;

  color:
    #9b4732 !important;

  box-shadow:
    0 0 6px rgba(45, 45, 45, 0.65),
    0 0 15px rgba(45, 45, 45, 0.3);

  text-shadow:
    0 0 10px rgba(45, 45, 45, 0.9);
}


/* =========================================================
   Bold Text
   ========================================================= */

.blog-entry .content b {

  color:
    #9b4732 !important;

  text-shadow:
    0 0 4px #2d2d2d,
    0 0 8px rgba(45, 45, 45, 0.9);
}


/* =========================================================
   Links within text
   ========================================================= */

.blog-entry .content a {

  color:
    #980505 !important;

  text-decoration:
    underline !important;

  text-shadow:
    0 0 4px #2d2d2d,
    0 0 8px rgba(45, 45, 45, 0.5);
}


/* =========================================================
   Lists
   ========================================================= */

.blog-entry ul,
.blog-entry ol {

  background:
    rgba(45, 45, 45, 0.88) !important;

  border:
    1px solid #2d2d2d !important;

  padding:
    15px !important;

  color:
    #9b4732 !important;

  box-shadow:
    0 0 6px rgba(45, 45, 45, 0.55);
}

.blog-entry li::marker {

  color:
    #2d2d2d !important;
}


/* =========================================================
   Quotes
   ========================================================= */

.blog-entry blockquote {

  background:
    #2d2d2d !important;

  border-left:
    4px solid #980505 !important;

  padding:
    15px !important;

  color:
    #9b4732 !important;

  box-shadow:
    0 0 7px rgba(244, 173, 187, 0.6),
    0 0 14px rgba(187, 222, 219, 0.4);

  text-shadow:
    0 0 4px #2a4619;
}


/* =========================================================
   Sidebar
   ========================================================= */

.edit-info {

  background:
    rgba(45, 45, 45, 0.9) !important;

  border:
    2px solid #2d2d2d !important;

  padding:
    20px !important;

  box-shadow:
    0 0 7px rgba(45, 45, 45, 0.65),
    0 0 16px rgba(45, 45, 45, 0.4);
}

.edit-info h4 {

  color:
    #9b4732 !important;

  text-shadow:
    0 0 5px #2d2d2d,
    0 0 9px rgba(45, 45, 45, 0.5);
}

.edit-info a {

  color:
    #9b4732 !important;

  text-shadow:
    0 0 5px #2d2d2d;
}


/* =========================================================
   Comments
   ========================================================= */

#comments {

  background:
    rgba(45, 45, 45, 0.92) !important;

  border-bottom:
    2px dotted #2d2d2d !important;

  padding:
    20px !important;

  box-shadow:
    0 0 8px rgba(45, 45, 45, 0.55);
}

#comments h2 {

  color:
    #2a4619 !important;

  text-shadow:
    0 0 5px #2d2d2d,
    0 0 10px rgba(45, 45, 45, 0.55);
}

.comments-table td {

  background:
    rgba(45, 45, 45, 0.9) !important;

  border:
    1px solid #fef7c1 !important;

  color:
    #2a4619 !important;

  box-shadow:
    0 0 5px rgba(45, 45, 45, 0.55);
}


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

footer {

  background:
    #2d2d2d !important;

  border:
    2px dotted #2d2d2d !important;

  box-shadow:
    0 0 7px rgba(45, 45, 45, 0.65),
    0 0 15px rgba(45, 45, 45, 0.3);
}

footer p {

  color:
    #980505 !important;

  text-shadow:
    0 0 5px #2d2d2d;
}


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

main a,
footer a,
.edit-info a {

  color:
    #9b4732 !important;

  text-shadow:
    0 0 4px #2a4619,
    0 0 8px rgba(42, 70, 25, 0.45);
}


/* =========================================================
   Custom Cursor
   ========================================================= */

* {

  cursor:
    url("https://www.kindpng.com/picc/m/585-5859200_twin-peaks-black-lodge-logo-hd-png-download.png")
    32 32,
    auto !important;
}


/* =========================================================
   BRILHO PASTEL
   ========================================================= */

.blog-entry .title,
.blog-entry .content,
.edit-info,
#comments,
.comments-table td,
footer {

  transition:
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.blog-entry .title:hover,
.blog-entry .content:hover,
.edit-info:hover,
.comments-table td:hover {

  filter:
    brightness(1.05);

  box-shadow:
    0 0 7px #2d2d2d,
    0 0 16px rgba(187, 222, 219, 0.7),
    0 0 25px rgba(167, 205, 240, 0.25);
}


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