Report Blog Entry
(My first space hey layout)
Yall can change the images btw bc they're mostly just for me n this is just so I can create a different profile layout and still save my code.( ps idk why the images r so blurry on the top two previews...)
Image links-
Codes-
<style>
body {
background-color: #e3e3e3;
background: url(https://i.pinimg.com/736x/d1/82/9e/d1829e2fe6cb1ce661962c0315ddd9f3.jpg);
font-family: verdana, arial, sans-serif, helvetica;
background-size: 900px;
}
.online {
content: url(https://64.media.tumblr.com/c09cd428352ed1004cd3933aa9022d65/57fce79f2c64a249-a3/s100x200/d03a4930e9a5bcf325a9ed8e0967d844df7546fc.gifv);
}
/*============= profile name ===================*/
h1 {
padding-left: 20px !important;
font-family: 'Gotu', sans-serif;
font-size: 25px !important;
margin-top: -10px!important;
color: var(--links)!important;
}
nav {
background: white;
box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #a1696a;
margin-bottom: 30px;
border: var(--borders);
}
nav .top {
background: rgba(0, 0, 0, 0.0);
}
nav .top a {
color: pink!important;
}
nav .links {
background: transparent!important;
text-align: center;
}
nav .links a{
text-shadow:none;
}
nav img.logo {
filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(432%) hue-rotate(305deg) brightness(104%) contrast(105%);
!important;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " | ";
color: var(--headers);
}
/*============= color the search bar and button ===================*/
.search-wrapper input[type=text] {
background-color: rgba(0, 0, 0, 0.0) !important;
border: 2px solid pink !important;
color: pink !important;
border-radius: 0px !important;
}
button {
border-radius: 0px !important;
border: 0px solid pink!important;
font-family: var(--font-family) !important;
background-color: rgba(0, 0, 0, 0.0) !important;
color: pink!important;
}
/*============= online icon ===================*/
.online {
content: url(https://64.media.tumblr.com/c09cd428352ed1004cd3933aa9022d65/57fce79f2c64a249-a3/s100x200/d03a4930e9a5bcf325a9ed8e0967d844df7546fc.gifv
}
/*============= profile name ===================*/
h1 {
padding-left: 20px !important;
font-family: 'Gotu', sans-serif;
font-size: 25px !important;
margin-top: -10px!important;
color: var(--links)!important;
}
/*============= box shadows ===================*/
.mood, .blog-preview, .contact {
margin-bottom: 30px;
box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #a1696a;
}
.table-section, .blurbs, .friends {
margin-bottom: 30px !important;
box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #a1696a;
}
.friends {
margin-top: 10px!important;
}
.profile-info {
background: white;
border: var(--borders)!important;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 5px;
margin-bottom: 30px;
box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #a1696a;
}
.profile-info .inner {
font-weight: bold;
text-align: center;
}
.contact {
background: white;
padding: 20px;
margin-bottom: 40px!important;
}
main {
background: transparent;
padding: 6px 0px;
}
.profile-pic img {
outline: none !important;
border: none!important;
box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #a1696a;
}
.friends-grid img {
outline: none !important;
filter: opacity(90%) !important;
border-radius: var(--curve) !important;
}
td {
background-color: transparent!important;
}
hr {
border-top: 1px solid pink;
}
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
border-radius: var(--curve) !important;
padding: 2px !important;
border: var(--borders) !important;
}
.friends, .blurbs {
background: white;
}
.mood, .contact, .blog-preview {
border-radius: var(--curve) !important;
padding: 2px !important;
border: var(--borders) !important;
}
.mood, .blog-preview {
text-align: center;
background: white;
border: var(--borders) !important;
}
.table-section {
border: var(--borders) !important;
background-color: white!important;
border-radius: var(--curve) !important;
}
.heading {
background: transparent!important;
padding-bottom: 4px !important;
background-size: 100%100%!important;
text-align: center;
border: none!important;
}
.comments-table {
display: block;
height: 500px!important;
overflow-y: scroll;
border: var(--borders) !important;
outline: none !important;
border: none!important;
}
.comments-table td {
background-image: url('') !important;
background-size: cover;
border: var(--borders);
}
.comments-table td:first-child img {
/* you can clip images at https://bennettfeely.com/clippy and add the code here */
}
footer {
color: var(--text);
text-align: center;
font-size: 60%;
margin: 10px 0 10px;
padding: 10px 5px;
background: white;
box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #a1696a;
}
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
</style>
<img src="https://64.media.tumblr.com/1980f3f412b00d6cc55fca5d6b7de230/bc151d5e71482285-73/s2048x3072/dc96e1c9fb8cf68a9b3cc59661f4af48c73a2d53.pnj" width="" height=""/>
<img src="https://i.pinimg.com/originals/d0/72/6b/d0726b880460ff795c9bd5c5c9886dea.gif" width="" height=""/>
<div style="float: ; max-height: 400px; position: fixed; left: 1px; bottom: 9px; z-index: 200;">
<img src="https://i.pinimg.com/originals/98/2a/53/982a5348caa25e3430bd6fbcd436c950.gif"/></div>
<div style="float: ; max-height: 400px; position: fixed; right: 1px; top: 9px; z-index: 200;">
<img src="https://i.pinimg.com/originals/4a/a9/bf/4aa9bf9404ce1824e624624e506cc7cb.gif" width="250" height="250"/></div>
<img src="https://i.pinimg.com/736x/0f/20/dc/0f20dcecceb15c5d8daa29a67a502568.jpg" width="100" height="100"/>
<img src="https://i.pinimg.com/236x/cc/b5/49/ccb54998ff4903d78d30a16f642e0e4f.jpg" width="100 height="/>
<img src="https://external-media.spacehey.net/media/s03DlqY9BudkuKuo4qHZ-Z7whMoCPy8w2ZEOoyOMFJwo=/https://i.pinimg.com/736x/b6/94/60/b69460de23ed235c53e33c7cd10e2b89.jpg" width="100 height="/>
<img src="https://i.pinimg.com/236x/77/e9/b9/77e9b9a60fea8b22c479fd69e72ac5e9.jpg" width="100" height="100"/>
<img src="https://64.media.tumblr.com/edf30b80743299b6ebdb928e6a93463e/bc151d5e71482285-40/s2048x3072/dc1b47079e236dc70e2791047ccef0d03b8316b0.gifv" width="" height=""/>
<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>
<img src="https://i.pinimg.com/originals/24/e9/77/24e9778dc96ad75959d8c5c42b0527f4.gif" width="" height=""/>
<div class="vinyl-gallery">
<div class="vinyl-item">
<img src="https://i.pinimg.com/736x/c5/df/8f/c5df8f1781d541fb3de91b32241e1a39.jpg" alt="Vinyl 1"/>
<p>TYLA</p>
</div>
<div class="vinyl-item">
<img src="https://i.pinimg.com/736x/5d/0c/f3/5d0cf3e8ab231c2fc20b84951ce797ae.jpg" alt="Vinyl 2"/>
<p>rise and fall of a midwest princess</p>
</div>
<div class="vinyl-item">
<img src="https://i.pinimg.com/736x/bf/13/d5/bf13d5588f312fb41aac79c9639f0b12.jpg" alt="Vinyl 3"/>
<p>immunity</p>
</div>
</div>
<style>
.vinyl-gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.vinyl-item {
text-align: center;
width: 150px; /* Adjust size as needed */
}
.vinyl-item img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
}
.vinyl-item img:hover {
transform: scale(1.1);
}
.vinyl-item p {
margin-top: 10px;
font-size: 14px;
color: #333;
}
</style>
<style>body { cursor: url('https://64.media.tumblr.com/e1b63e20fde14ec0e69e30ce0e2993be/d21f76ec1304ec07-7e/s75x75_c1/5d9fa9c09bbf4ef2519ec1aab8a3e3b1c6b29514.webp'), auto; }</style>
<img src="https://i.pinimg.com/originals/a4/60/e1/a460e1a591edf380aff4ead4797a34ea.gif" width="150" height="150"/>
<img src="https://i.pinimg.com/474x/d2/cc/64/d2cc64d065ac4b160cd51bb27134fc4d.jpg" width="150" height="150"/>
<img src="https://i.pinimg.com/474x/4f/3d/3f/4f3d3f8653b5b0f5c2084c141517aa56.jpg" width="150" height="150"/>
<img src="https://i.pinimg.com/474x/6d/70/10/6d7010fc2c5a0197bea6b9f705b14c42.jpg" width="150" height="150"/>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )