Published by ventiz

published 1739485933
updated 1739902556

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

side order splatoon layout i made!!

go to https://nein-mc.neocities.org/csstest/ to see the full thing if u wanna!!

code here!!

<style> .blurbs {

text-align: center;

}</style>

MY LAYOUT IS ON MY BLOG!! https://blog.spacehey.com/entry?id=1420954

width: 98%;

height: 200px ;

display: block;

border-radius: 1000px;

content: "";

background-image: url('https://media1.tenor.com/m/h46Mqzr4GqEAAAAd/side-order-splatoon.gif');

background-position: center center;

background-size: cover;

border: 10px solid white;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

}</style>

<style>

body{

background: url("https://64.media.tumblr.com/4854322497c81c805842e3ed160f963b/e3c0790d52945b15-35/s1280x1920/e88687a5e4b0ef978f4b3c3129cadedbc3e3d069.pnj") no-repeat fixed; background-size:cover;

text-transform: lowercase;

}

nav .top {

margin-top: 30px;

background: url(https://64.media.tumblr.com/738bf7960618d49afc57895be94e90a4/1848f9b97f3a07fc-91/s540x810/4d76de031db16c9b87ce2a2c7a16c40b7a5cd553.gifv);

background-position: center;

box-shadow: 0 0 28px #ffffff;

border-radius: 8px;

border: 2px solid white;

}

nav .links {

background: transparent;

padding: 3.5px 16px;

text-align: center;

margin-top: 15px!important;

border-radius: 8px;

display: flex;

justify-content: center;

}

nav .links a {

text-decoration: none;

color: white;

text-shadow: none;

font-size: smaller;

background: #cfafa6;

border-radius: 5px;

border-right: 4px solid #cfafa6;

border-left: 4px solid #cfafa6;

border-bottom: 3px solid #cfafa6;

}

nav .links .special a {

color: white;

}

nav .links a:hover {

text-decoration: none;

color: #efd9d3;

font-style: italic;

}

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

content: " ♡ ";

color: #9f3f23;

}

button, input {

overflow: visible;

background: white;

border: none;

color: #ceaea5;

}

@keyframes floating {

0% { transform: translate(0, 0px); }

50% { transform: translate(0, 15px); }

100% { transform: translate(0, -0px); }

}

main{

background:url("https://cdn.wikimg.net/en/splatoonwiki/images/7/79/SO_creatures_promo_3.jpg")no-repeat fixed; background-size:cover;

border: 4px solid white;

box-shadow: 0 0 13px #fff;

border-radius: 29px;

margin-top: 10px;

}

.profile h1 {

font-size: 1.5em;

margin: 0 0 10px 0;

text-align: center;

color: white;

text-shadow: 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f, 0 0 2px #b9697f;

}

.edit-link {

font-size: 90%;

text-align: center;

}

.general-about{

background: url(https://64.media.tumblr.com/8aa86591751ef977f108c1842f161eb1/1848f9b97f3a07fc-da/s1280x1920/8da35330d9aca956d94d83dbba395ba279ca20e1.gifv) center;

height: 186px;

padding: 10px;

border: 2px solid white;

border-radius: 8px;

box-shadow: inset 0 0 15px #706565;

}

.profile .mood {

padding: 7px;

width: 100%;

display: inline-block;

text-align: center;

margin-top: 15px;

margin-bottom: 15px;

background: url(https://64.media.tumblr.com/8aa86591751ef977f108c1842f161eb1/1848f9b97f3a07fc-da/s1280x1920/8da35330d9aca956d94d83dbba395ba279ca20e1.gifv) right;

border: 2px solid white;

border-radius: 8px;

box-shadow: inset 0 0 15px #706565;

}

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

background: url(https://64.media.tumblr.com/738bf7960618d49afc57895be94e90a4/1848f9b97f3a07fc-91/s540x810/4d76de031db16c9b87ce2a2c7a16c40b7a5cd553.gifv) left;

border: 2px solid white;

border-radius: 8px;

box-shadow: inset 0 0 15px #706565;

}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {

background: #ceafa6;

color: white;

text-align: center;

padding: 2px 7px;

border-radius: 8px 8px 0px 0px;

border-bottom: 2px solid white;

}

.icon, .award img {

display: none;

}

.contact a:before {

content: "♡";

}

.details-table td:first-child {

background: #ceafa6;

color: white;

font-weight: bold;

width: 33%;

border-radius: 8px;

}

.details-table td {

background: #ceafa6;

color: white;

border-radius: 8px;

}

.profile-info{

background: url(https://i.pinimg.com/564x/c7/ca/c5/c7cac5cefa9cb84c671231f16ac11a4e.jpg);

}

.profile-info {

border: 2px solid white;

display: flex;

align-items: center;

justify-content: center;

padding: 15px 5px;

margin-bottom: 10px;

background: url(https://64.media.tumblr.com/8aa86591751ef977f108c1842f161eb1/1848f9b97f3a07fc-da/s1280x1920/8da35330d9aca956d94d83dbba395ba279ca20e1.gifv);

background-size: cover;

background-position: center;

box-shadow: 0 0 9px #6c5648;

border-radius: 8px;

}

.blog-preview {

padding: 10px;

padding-top: 0;

background: url(https://64.media.tumblr.com/8aa86591751ef977f108c1842f161eb1/1848f9b97f3a07fc-da/s1280x1920/8da35330d9aca956d94d83dbba395ba279ca20e1.gifv) right;

border: 2px solid white;

border-radius: 8px;

box-shadow: inset 0 0 15px #706565;

}

.blurbs, .friends{

background: url(https://64.media.tumblr.com/738bf7960618d49afc57895be94e90a4/1848f9b97f3a07fc-91/s540x810/4d76de031db16c9b87ce2a2c7a16c40b7a5cd553.gifv);

border: 2px solid white;

border-radius: 8px;

box-shadow: inset 0 0 15px #706565;

}

.profile .blurbs .heading, .profile .friends .heading{

background: #ceafa6;

color: #8b7070;

text-align: center;

padding: 2px 7px;

border-radius: 8px 8px 0px 0px;

border-bottom: 2px solid white;

}

.profile .blurbs .section h4, h4 {

margin: 0;

color: #8b7070;

}

.count {

color: #e48484;

}

.profile .friends .person p {

color: inherit;

font-weight: bold;

width: 100%;

overflow-wrap: break-word;

word-break: break-word;

font-size: 100%;

text-align: center;

text-shadow: 0 0 5px #706565;

}

.profile .friends .person img:not(.icon) {

max-width: 95px;

max-height: 95px;

display: block;

margin: 0 auto;

box-shadow: 0 0 10px #5a3939;

border: 2px solid white;

border-radius: 8px;

}

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

width: 100%;

border: 1px solid transparent;

overflow-wrap: break-word;

word-break: break-word;

}

.comments-table td:first-child, .music-table td:first-child {

background: #ceafa6;

text-align: center;

font-weight: bold;

border-radius: 8px;

width: 38%;

}

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

background: #d7b9b1;

vertical-align: top;

color: white;

border-radius: 8px;

}

.comment-replies {

padding: 0 5px;

border: none;

margin-top: 10px;

background: #c9a9a0;

border-radius: 8px;

}

footer {

text-align: center;

font-size: 70%;

margin: 10px 0 10px;

padding: 10px 5px;

background-color: transparent;

}

a {

color: #8b7070;

text-decoration: none;

}

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

color: #94354f;

text-decoration: none;

font-style: italic;

}

::-webkit-scrollbar {

width: 12px;

background-color: #fff;

}

::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: pink;

}

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

border-radius: 10px;

background-color: #fff;

}

.online{ content: url(https://dl.glitter-graphics.com/pub/157/157641b27q8mcaol.gif); }

</style>

</div><div class="https://64.media.tumblr.com/8f761418c607854ee36f2c7cb6c1db55/1848f9b97f3a07fc-41/s75x75_c1/5d0c0f711157706230d34dfd97f199a3fcfb245a.pnj"></div>

<style>

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

<style>

/* this is the color of any text that you input */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');

.profile .blurbs .section h4{

font-family: 'Josefin Sans', sans-serif;

text-transform:lowercase !important;

color: #<style>

/* these are the colors for headers */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');

font-family: 'Josefin Sans', sans-serif;

font-size: 14px !important;

text-transform: !important;

color:#8b7070;

}

</style>

<style>

/* these are the colors for headers */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');

font-family: 'Josefin Sans', sans-serif;

font-size: 14px !important;

text-transform: !important;

color:#8b7070;

}

</style>

<style>

/* this adjusts the size/font of your name */

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');

h1{

font-size: 30px !important;

font-family: 'Paytone One', sans-serif;

text-transform:uppercase !important;

padding-left: 1px !important;

}

</style>

<style>

nav .top .left .logo {

width: 165px;

height: 42px;

content: url(https://i.ibb.co/S5zgBpF/IMG-8106-removebg-preview.png);

</style>

</iframe>

<style>

html:before {

content: " ";

display: block; position: fixed;

top: 0; left: 0; bottom: 0; right: 0;

background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.16) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

<style>

.profile .friends .person img:not(.icon) {

filter: blur(3px);

&:hover {

filter: blur(0px)} transition: all 500ms ease-in-out}

}

</style>

<style>

@keyframes spin{

from{ transform:rotate(0deg); }

to{ transform:rotate(0deg); }

}

.general-about .profile-pic img{

border-radius: 50%;

animation: spin 7s infinite linear;

}

</style>

<style>

.comments-table td:first-child img {

border-radius: 500px;

}

</style>

comment if u use it!!

0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )