Published by MilesLeo05

published 1668975639

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

my layout

<style>

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

</style>

<style>

/*this is for the intro animation. Cory is the one who came up with this fantastic css code so go give them a follow if you like this! He has a ton of other super helpful codes and their profile is overall one of the best on spacehey imo https://spacehey.com/cory*/

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('https://wallpapercave.com/uwp/uwp1758014.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 3s ease 0s 1 normal forwards;

pointer-events: none;

}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

body {

background: url(https://wallpapercave.com/uwp/uwp1758014.gif);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

background-size: cover;

}</style>

<style>

.profile {

background: rgba(0, 0, 0, 0.6);

border-radius: none;

border: 4px solid #2B7114;

font-family: 'Rye', cursive;

}

table, td {

border-spacing: 2px;

}

.profile .contact, .profile .table-section, .home-actions

{

width: 100%;

border: 0px solid var(--#2B7114);

color: #2B7114;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

.profile .url-info {

color: #2B7114;

}

.table-section td {

color: #2B7114;

}

.profile .table-section {

overflow-y: scroll;

}

mood {

color: #2B7114!important;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

.mood p {

color: #2B7114;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

.mood a {

color: #2B7114;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

.mood a:hover {

color: #163CA0;

}

table, th, td

{

border: 0px solid #2B7114;

border-spacing: 0px;

}

.profile .table-section, .home-actions

{

border: 2px solid #2B7114;

border-radius: 8px;

}

:root

{

--logo-blue: ;

--darker-blue: ;

--lighter-blue: purple 55;

--even-lighter-blue: ;

--lightest-blue: ;

--dark-orange: ;

--light-orange: ;

--even-lighter-orange: ;

--turquoise: ;

--hover: #163CA0;

--table-header:#000000;

--table-color: white;

--link-text:#2B7114;

--main-text: #870303;

}

footer

{

background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f849f1e6-b991-4b89-bd9b-7b86ae209054/d65uvrw-5b284168-18aa-49a4-8a96-db9fdaf33174.jpg/v1/fill/w_1024,h_576,q_75,strp/konoha__nocturna__by_lwisf3rxd_d65uvrw-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTc2IiwicGF0aCI6IlwvZlwvZjg0OWYxZTYtYjk5MS00Yjg5LWJkOWItN2I4NmFlMjA5MDU0XC9kNjV1dnJ3LTViMjg0MTY4LTE4YWEtNDlhNC04YTk2LWRiOWZkYWYzMzE3NC5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.ezFcABMFa5HvPsQisBh_uW1NnRNbxAGncrH-KJ-SivI);

background-position: center;

background-repeat: no-repeat;

border-radius: none;

border: 2px solid #2B7114;

}

.comments-table{

display: block;

height: 500px;

overflow-y: scroll;

color: #2B7114;

border: 2px solid #2B7114;

border-radius: 8px;

}

.contact .heading {

background: transparent!importnt;

text-align: center;

color: #2B7114!important;

font-size: medium;

font-family: 'Rye', cursive;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

.contact {

border-radius: 8px; border: 2px solid #2B7114!important;

background-image: url(https://i.pinimg.com/564x/7b/69/7d/7b697d306e1287bd7ff1be8494477fc0.jpg);

background-repeat: no-repeat;

background-attachment: scroll;

Width: 300px;

Height:180px;

}

.contact a {

color: #2B7114;

font-family: 'Rye', cursive;

text-decoration: italic;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

font-size: 12px;

}

.contact a:hover{

color: #163CA0!important;

}

.friends th, tr, .friends td, th, .icon, main, .comments-table, .friends, .profile-info, .table, .table-section, .url-info, .mood, .blog-preview, .details,

{

border: 1px #2B7114!important;

}

footer, .profile .contact {

color: #2B7114!important;

font-family: 'Rye', cursive;

font-weight: bold;

}

main {

background: transparent!important;

border: none;

padding: 0;

font-size: 90%;

color: #2B7114;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

nav {

background-position: center;

background-repeat: no-repeat;

border: 2px solid #2B7114!important;

border-radius: none!important;

color: #2B7114!important;

font-family: 'Rye', cursive;

font-weight: bold;

}

nav .top a, nav .logout-btn, nav .links a {

color: #2B7114!important;

font-family: 'Rye', cursive;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

.logout-btn:hover{

color: #163CA0!important;

}

nav .top a:hover{

color: #163CA0!important;

}

nav .links a:hover{

color: #163CA0!important;

}

.logo {

filter: invert(27%) sepia(87%) saturate(3290%) hue-rotate(22deg) brightness(94%) contrast(101%);!important;

}

.profile .table-section{

border:2px solid #2B7114;

}

.profile .table-section .heading{

border: none;

text-align: center;

}

.profile .table-section .heading h4{

color: #2B7114;

}

.profile .friends .heading{

border: none;

border-radius: 8px;

background: transparent;

color: #2B7114;

text-align: center;

}

.profile .friends .heading h4{

text-align: center;

color: #2B7114;

}

.general-about {

border-radius: 8px;

border: 2px solid #2B7114;

background: url(https://i.pinimg.com/564x/5d/e5/62/5de5622ecdd4e24685f141f10e4573e3.jpg);

background-position: center;

background-size: cover;

padding: 5px;

}

.profile-pic {

border-radius: 8px;

border: 2px solid #2B7114;

overflow: hidden;

}

.blog-preview h4, .blurbs .heading {

border: none;

border-radius: 8px;

background: transparent!important;

color: #2B7114;

text-align: center;

}

.blog-preview h4 a, .more{

color: #2B7114;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

.blog-preview h4 a:hover {

color: #163CA0!important;

}

h1, .blurbs .heading, .profile .blurbs .section h4 {

color: #2B7114!important;

}

.profile .blurbs .section :nth-child(2) {

color: #2B7114;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

/* margin-top: -5px; */

padding: 18px;

}

.profile .profile-info .inner h3 a {

color: #2B7114;

}

.profile .profile-info {

background-image: url(https://i.pinimg.com/564x/36/1c/48/361c484fefab25865a19682640c2e814.jpg);

background-position: left;

background-size: cover;

padding: 5px;

border-radius: 8px;

border: 2px solid #2B7114;

text-align: center;

text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;

}

//--The last line of code is the image of the robot, keep it if you like, if not, just delete it.--//

</style>

I haven't even finished naruto

0 Kudos

Comments

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