Scribd
Upload
27 views15 pages

Document

The document contains a series of HTML and CSS styles for a webpage layout, featuring a record player animation and various design elements such as navigation bars, tables, and background images. It includes styles for text color, borders, and hover effects, aiming for a visually appealing dark theme with red and blue accents. Additionally, there are animations and cursor styles to enhance user interaction.

Uploaded by

joury012elkady
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
27 views15 pages

Document

The document contains a series of HTML and CSS styles for a webpage layout, featuring a record player animation and various design elements such as navigation bars, tables, and background images. It includes styles for text color, borders, and hover effects, aiming for a visually appealing dark theme with red and blue accents. Additionally, there are animations and cursor styles to enhance user interaction.

Uploaded by

joury012elkady
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 15

<!-- (c) Layout created by Darren! (https://layouts.spacehey.com/layout?

id=101488) -->

<style>

@keyframes spin {

100% {

transform:rotate(360deg);

.recordPlayer {

display: flex;

justify-content: center;

align-items: center;

padding-bottom: 20px;

.cd{

height: 150px;

margin-left: 55px;

padding: 10px;

animation: spin 1.88s linear infinite;

position: absolute;

.cdCover {

height: 150px;

position: relative;
z-index: 1;

margin-right: 55px;

</style>

<div class="recordPlayer">

<img class="cd"
src="https://64.media.tumblr.com/286265356398c84d561e06cf5515a1e8/63a4b8be8ac46310-a3/
s400x600/70dd02451285ed067b36578e343b158dbd378767.pnj"/>

<img class="cdCover"
src="https://64.media.tumblr.com/a39ca6da572d6ab0166c233a49596a26/63a4b8be8ac46310-60/
s400x600/f310c0b868e3b92b2ee97187dcf3444bf2343187.pnj"/>

</div>

<!-- (c) Layout created by fluffy_☆rgans (https://layouts.spacehey.com/layout?id=101366) -->

<div style="float: ; max-height: 700px; position: fixed; left: 1px; bottom: 10px; z-index: 200;"><img
src="https://31.media.tumblr.com/0afa072009ab5e184441d044e57139fb/
tumblr_mrott1i9uj1sytnjeo1_500.gif" width="260" height="175"/></div>

<!-- (c) Layout created by ray ☆ 🍉 (yuri lover ⚢) (https://layouts.spacehey.com/layout?id=82840) -->

<style>

body {

background-color: black;

font-family: verdana, arial, sans-serif, helvetica;

nav .top {
background: black;

padding: 15px 10px 14px 10px;

position: relative;

margin-top: 20px;

border: 5px ridge darkred;

button, input {

overflow: visible;

border: 5px ridge darkred;

color: white;

padding-bottom: 3px;

background: black;

nav .links {

background-color: black;

padding: 3.5px 16px;

margin-top: 10px!important;

margin-bottom: 10px!important;

border: 5px ridge darkred;

text-align: center;

width: 750px;

transform: translateX(28px);

}
main {

background: black;

color: white;

padding: 6px 0px;

font-size: 80%;

border: 5px ridge darkred;

.profile-info {

background: black;

border: 5px ridge darkred;

width: 100%;

padding: 5px;

overflow-wrap: break-word;

word-break: break-word;

footer {

text-align: center;

font-size: 70%;

margin: 10px 0 10px;

padding: 10px 5px;

background-color: transparent;

color: white;
}

a{

color: red;

text-decoration: none;

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {

color: darkred;

text-decoration: none;

text-transform: uppercase;

font-weight: bold;

nav .links .special a {

color: red;

nav .links a:hover {

text-decoration: none;

color: darkred;

nav .links a {

text-decoration: none;
color: white;

text-shadow: none;

font-size: 0.98em;

font-size: max(0.98em, 12px);

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {

content: " | ";

color: white;

HTML,BODY{cursor:

url(https://external-media.spacehey.net/media/s6rl8pclY7DDunCpW9Dilx_i8_U618PDAm6u3qxen7js=/
https://ani.cursors-4u.net/symbols/sym-8/sym734.cur),

auto;}

A:hover{cursor:

url(https://external-media.spacehey.net/media/s6rl8pclY7DDunCpW9Dilx_i8_U618PDAm6u3qxen7js=/
https://ani.cursors-4u.net/symbols/sym-8/sym734.cur),

auto;}

::-webkit-scrollbar {

width: 12px;

height: 12px;

BACKGROUND-COLOR: black;
}

::-webkit-scrollbar-track {

width: 2px;

border: 1px solid darkred;

::-webkit-scrollbar-thumb {

background: darkred;

::-webkit-scrollbar-thumb:hover {

background: red;

.comments-table td, .music-table td {

background: black!important;

font-weight: bold;

border: 5px ridge darkred!important;

table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table {

width: 100%;

overflow-wrap: break-word;

word-break: break-word;

border: none!important;

}
.heading {

background: black!important;

border: 5px ridge darkred!important;

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

width: 100%;

border: none!important;

margin: 10px 0;

.inner {

border: 5px ridge darkred;

margin-top: 10px;

.profile-info .inner {

border: none!important;

margin-top: 0!important;

.profile .friends .person p {

color: red;

font-weight: bold;

width: 100%;
overflow-wrap: break-word;

word-break: break-word;

font-size: 100%;

text-align: center;

.details-table td:first-child, .details-table td {

background: black!important;

color: white;

font-weight: bold;

border: 2px double darkred;

.online {

color: #0C8C00;

font-weight: bold;

font-size: 95%;

filter: hue-rotate(245deg) saturate(2.5);

.comment-replies {

padding: 0 5px;

border: 5px ridge darkred;

margin-top: 10px;

}
.icon, .award img {

display: none;

height: 1.4em;

width: 1.4em;

aspect-ratio: 1/1;

margin: 0 0.05em 0 0.1em;

vertical-align: -0.3em;

color: rgba(0,0,0,0);

.f-col:before {

content: ">";

color: red;

</style>

<style>

html:before {

animation: grain 8s steps(10) infinite;

background-image: url(https://dl.glitter-graphics.com/pub/590/590935ankbyj1xx4.gif);

content: "";

height: 300%;

left: -50%;
opacity:.2;

position: fixed;

top: -110%;

width: 300%;

pointer-events:none;

@keyframes grain {

0%, 100% { transform:translate(0, 0) }

10% { transform:translate(-5%, -10%) }

20% { transform:translate(-15%, 5%) }

30% { transform:translate(7%, -25%) }

40% { transform:translate(-5%, 25%) }

50% { transform:translate(-15%, 10%) }

60% { transform:translate(15%, 0%) }

70% { transform:translate(0%, 15%) }

80% { transform:translate(3%, 35%) }

90% { transform:translate(-10%, 10%) }

body

{background: url("https://i.pinimg.com/564x/1c/0f/b5/1c0fb5416140c9713af88cbb56b38b82.jpg")

no-repeat fixed; background-size: cover;

}
<style>

.w-40 > h1 {

/* username */

font-size: 5em;

text-align: center;

font-family: cursive;

color: #731f6655;

</style>

<style>

footer {background-color: #00699455;}

</style>

<style>

table, th, td {
border: 1px solid blue;

table, th, td { border-radius: 15px}

</style>

<style>

:root {

--logo-blue:#006994;

--darker-blue:#006994 ;

--lighter-blue: #006994;

--even-lighter-blue: #006994;

--lightest-blue: #006994;

--dark-orange: #;

--light-orange: #006994;

--even-lighter-orange: #006994;

--green: Aliceblue;

main {

/* changes made to stuff outside of columns */


background: transparent;

padding: 0;

font-size: 80%;

color: var(--light-orange);

</style>

<style>

h1, h2, h3, h4,h5,a, p, nav label, .section {color: white;}

</style>

<style>

.profile-pic {

border-radius: 500px;

overflow: hidden;

.profile .friends .person img {

border-radius: 500px;

</style>
<style>

:root{ font-family: Georgia, serif;

font-size: 18px;

letter-spacing: 1px;

word-spacing: 2px;

color: #000000;

font-weight: normal;

text-decoration: none;

font-style: normal;

font-variant: normal;

text-transform: uppercase;

text-shadow: 2px 2px 2px #CE5937;

</style>

<style>

.comment-replies { border: 1px solid #006994;

</style>

You might also like