Rounded Darkmode w/ Wide Screen

Tags: darkmode, rounded, spinning avatar

Description:

This is a wider profile that allows you to take up more width to display information. Has a spinning avatar. Rounds the headers of sections, adds a darkmode, and you can change the background in the code below. Please give me credit somewhere if you do decide to use this!

Preview:

click on the image for a larger preview

Code:

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

@import url("https://myspace93.github.io/modules/dark-2.css");
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

nav {
  background-color: #151515;
}

.row {
    width: 175%;
    display: table;
    table-layout: fixed;
    margin-left: -300px;
}

.blurbs, #box, .box, #header, #hSub, #commentInput {
    background: #101010;
    border: none;
    padding: 0px;
    margin-bottom: 10px;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: #FFCC99;
    color: #FF6600;
    padding: 2px 7px;
    border-radius: 20px;
}

.top {
  background-color: #151515;
}

.profile-pic img {
  border-radius: 180px;
  border: 2px solid #fafafa;
}

.profile-pic {

  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 10000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 10000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}

.details-table td {
  background-color: #151515;
}

.details-table td:first-child {
  background-color: #151515;
}

body {
  background-image: url('https://i.imgur.com/L73zl6V.jpeg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.profile {
  background-color: #151515;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    width: 100%;
    border: 0px solid #151515;
    margin: 10px 0;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    border-radius: 20px;
    padding: 10px;
    color: #151515;
    border: none !important;
}

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

Ricky

1651535283

I'm so late for the party, but which code is it for the spinning pfp?

Report Comment

.profile-pic {

-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 10000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 10000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}

this is the code to make your pfp spin :3

by Zeph; 1728834554; Report

Ben

1613259821

It is not really working for me. Is it working for anyone else?

Report Comment

put in front of the code!

by maksi; 1647576686; Report