funky and clean

Tags:

Description:

A direct carbon copy of my layout. For this to work you need your "About me" section to contain only the style and the "Who I'd like to meet" section to contain div elements with a class of boxed and containing a heading 4. These act as the titles to the sections your creating that act like your "About me" or any other section. You can then put whatever else you want in the div. This gives you custom sections that will fit in perfectly with everything else but only with this layout.

example:

<div class="boxed ">
<h4>About me</h4>
<p>I am failure</p>
</div>

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 𝓵𝓸𝓼𝓮𝓻 𝓫𝓸𝓲 (https://layouts.spacehey.com/layout?id=2162) -->

<style>

  :root {
  /* this color is the cyan and changes things that are that color */
    --logo-blue: #7AF0C6;
  /* used to be the color for background now it does nothing */
    --darker-blue: #161B24;
  /* heading text color */
    --dark-orange: black;
  /* most text color */
    --light-orange: #C98459;
  /* boxes and links in nav bar color */
    --lighter-blue: rgba(85, 79, 89, 0.8);
  }

  body {
  /* sets background */
    background-image: url(https://j.gifs.com/p8xjYy.gif);
    background-repeat: no-repeat;
    background-size: 100% 110%;
  }

  main {
  /* changes made to stuff outside of columns */
    background: transparent;
    padding: 0;
    font-size: 80%;
    color: var(--light-orange);
  }

  p, ol li {
  /* makes plain text a bit bigger */
    font-size: 1em;
  }

  div .section > p:nth-last-child(1), .details p:nth-child(3), .mood p:first-of-type a, .url-info p:nth-child(3), a[href^="/edit"]:not(.drl), .w-40 > p, .profile-info, .blurbs .heading, .blurbs .section > *:not(.boxed), .online {
    display: none !important;
  }

  footer {
  /* keeps footer at bottom of page */
    position: absolute;
    width: 100%;
  }

  .w-40 > h1 {
  /* username */
    font-size: 3em;
    text-align: center;
    font-family: cursive;
    width: 100%;
    padding-bottom: 6%;
    margin-bottom: -16%;
    border-radius: 10px;
    background: linear-gradient(rgba(0,0,0,0), var(--logo-blue), var(--logo-blue));
  }

  .general-about .profile-pic {
  /* profile pic container */
    height: 100%;
    width: 100%;
    background: var(--logo-blue);
    border-radius: 10px;
    padding-top: 6%;
  }

  .general-about .profile-pic img {
  /* profile pic */
    max-width: 100%;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;
    display: block;
  }

  .details {
  /* makes the status panel special from other boxes */
    font-size: medium;
    border-top-left-radius: 10px;
    width: 100%;
    border-top-right-radius: 10px;
    background: var(--lighter-blue);
    color: var(--light-orange);
    margin-bottom: -16px;
  }

  .mood {
  /* makes the mood panel look like part of the status panel */
    font-size: small;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
    background: var(--lighter-blue);
    color: var(--light-orange);
    padding-bottom: 2px;
    margin-bottom: 10px;
    padding-top: 6%
  }

  .pics {
    max-width: 95px;
    max-height: 95px;
    display: inline-block;
    margin: 0 auto;
  }

  .pics:active {
    max-width: 2000%;
    max-height: 2000%;
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 30%;
    height: auto;
    }

  .container {
  /* makes it full screen*/
    width: auto;
  }

  .f-col {
    /* allow contacts to stack */
    vertical-align: top;
    margin-bottom: 5px;
    display: block;
  }

  .profile .contact .f-row {
  /* removes extra spacing from contacts */
    margin: 0;
  }

  .blog-preview > p {
  /* makes blogs have the same look as other boxes */
    margin: 7px;
  }

  .profile .blurbs .inner {
    padding: 0;
  }

  .profile .blurbs .section .boxed *:not(h4) {
    margin: 7px;
  }

  .profile .contact, .blog-preview, .profile .url-info, .profile .table-section, .home-actions, .profile .blurbs .section .boxed, .profile .friends, .blog-entry .comments {
  /* boxes */
    width: 100%;
    border: none;
    margin: 10px 0;
    background: var(--lighter-blue);
    color: var(--light-orange);
    border-radius: 10px;
    padding-bottom: 2px;
  }

  .profile .contact:hover, .blog-preview:hover, .profile .url-info:hover, .profile .table-section:hover, .home-actions:hover, .profile .boxed:hover, .profile .friends:hover, .blog-entry .comments:hover {
  /* transform on hover over for boxes */
    transform: scale(1.01);
  }

  .pics:hover, .profile .friends .person img:hover {
  /* transform on hover for all pics */
    transform: scale(1.5)
  }

  .w-40 > h1:hover, .profile-pic:hover {
  /* transform on hover for username */
    transform: scale(1.02)
  }


  .blog-preview h4,.profile .heading, .profile .contact .heading, .profile .table-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading, .boxed > h4 {
    /* headers on the boxes */
    background: var(--logo-blue);
    color: var(--light-orange);
    padding: 2px 7px;
    border-radius: 10px;
  }

  a {
  /* color of links */
  color: var(--logo-blue);
  }

  .profile .blurbs .heading a, .blog-preview h4 a, .profile .friends .heading a, .profile .contact .heading a, .profile .table-section .heading a, .home-actions .heading a, .profile .blurbs .section h4, .profile .friends .person p {
  /* color of specific links &amp; other stuff so they don't blend in */
    color: var(--light-orange);
  }

 .details-table td, .comments-table td, .music-table td, .comments-table td:first-child, .music-table td:first-child, .details-table td:first-child {
  /* tables */
    vertical-align: top;
    background: rgba(0, 0, 0, 0);
    color: var(--light-orange);
    border: 0;
    outline: none;
    border-bottom: 1px solid var(--light-orange);
  }

  div.friends-grid {
  /* center friends names */
  text-align: center;
  }

  .profile .friends .person img, .pics {
  /* friend images with curved edges */
    border-radius: 15px;
  }

  .col.w-40 {
  /* size of left column but often size is different due to breakpoints */
      width: 30%;
    }

/* everything below is for resizing */

  @media (min-width: 1100px) {
    .col.w-40 {
      width: 20.1%;
      background: var(--lighter-blue);
      border-bottom-right-radius: 10px;
    }

    nav {
      position: absolute;
      right: 0;
      width: 80%;
      height: fit-content;
      background: var(--lighter-blue);
    }

    nav .top {
      border-bottom-left-radius: 10px;
    }

    nav .links {
      background: transparent;
    }

    main .right {
      padding-top: 8%;
    }

    .w-40 > h1 {
      background: var(--logo-blue)
    }
  }

  @media (max-width: 1000px) {
    .col.w-40 {
      width: 32%;
    }
  }

  @media screen and (max-width: 800px) {
    .col.w-40 {
      width: 36%;
    }
    .w-40 > h1 {
      font-size: 350%;
    }
    .pics:active {
    max-width: 2000%;
    max-height: 2000%;
    position: fixed;
    top: 0;
    left: 15%;
    width: 65%;
    height: auto;
    }
  }

  @media screen and (max-width: 667px) {
    .w-40 > h1 {
      font-size: 320%;
    }
  }

  @media screen and (max-width: 600px) {
    .w-40 > h1 {
      font-size: 300%;
    }

  @media screen and (max-width: 567px) {
    .w-40 > h1 {
      font-size: 230%;
    }
  }

  @media screen and (max-width: 482px) {
    .col.w-40 {
      width: 100%;
    }

    .f-col {
    display: table-cell;
    }

    .profile .contact .f-row {
      margin: 7px;
    }

    .profile .contact .inner {
      text-align: unset;
    }

    .w-40 > h1 {
      font-size: 360%;
      background: var(--logo-blue);
      margin-bottom: -12%;
    }

    body {
      background-image: url(https://fancy-free-veteran.000webhostapp.com/images/PicsArt_12-18-02.28.31.jpg);
      background-repeat: repeat-y;
      background-size: 100% auto;
    }
  }

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

Dev-ine

1721100915

Using

Report Comment