Monochrome Layout

Tags: monochrome, layout, aesthetic, black and white

Description:

Hi! This is the second time I've coded a new layout, this time it's a Monochrome one! I just used the monochrome colors for the texts, headings etc. Took me an hour and a half, if using just comment! I hope you like it:)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by striderax (https://layouts.spacehey.com/layout?id=27237) -->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

p{
  font-family: 'Poppins', sans-serif;
  font-size: 100%;
  color: white;
}
h1,h2,h3,h4,h5{
  font-family: 'Poppins', sans-serif;
  font-size: 100%; 
  color: white;
}
  body {
   background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-5kVGhM-IQACM2WlGNWaWr4O2rpMJmYDe8Q&usqp=CAU.png);

}
.profile {
   background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQMjyUKBSuZ04ti1i5vbo_-Upb_GTO9mP0QQ&usqp=CAU.png);
}
.profile-pic {

border-radius: 500px;

overflow: hidden;

}

.profile .friends .person img {

border-radius: 500px;

}

/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: rgb(28, 28, 28);
   color: gray;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: rgb(46, 46, 46);
   color: gray;

}

.blurbs {

    background:#2b2b2b;

  border-radius: 12px;

}

footer {
    border-radius: 15px;
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMvRjwM0fNdEPLpLZrwrFlE3MnuLNaoH7ZZg&usqp=CAU.png);
    color: white;
}

table.comments-table td {
    color: rgb(122, 122, 122);
}

:root {
    --logo-blue:black;
    --darker-blue: white;
    --lighter-blue: gray;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: gray;
    --light-orange: black;
    --even-lighter-orange: black;
    --green: red;
}

.friends:not(#comments) {

  grid-area: friends;

  background: #141414;  

  border-radius: 15px

}
 .online { visibility: hidden; } .online img { content: url("https://i5.glitter-graphics.org/pub/745/745455rvacxjsot2.gif"); animation-name: none; visibility: visible; height: 20px; width: 80px; 
}

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

h!biy3x8!!	1722178131 Using <3 Report Comment
gene!!	1720173752 It looks so cool, Im using this ^ ^ Report Comment
gene!!	1720173751 It looks so cool, Im using this ^ ^ Report Comment
w1ll1am	1685725281 using this!! thank uu Report Comment