simplyrowan's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Blog Layout HTML

hello! Here is my code for my current  blog layout!
Feel free to play around and edit it however you like to make it suit ur needs! Most of my stuff is reused from my profile layout. It includes music and a custom cursor and colored scroll at the side
Please dont judge bc i know NOTHING about coding or whatever! I just play around with stuff i find!

<div style="text-align: center;">insert text here!</div><style>* {cursor: url(https://cur.cursors-4u.net/anime/ani-12/ani1148.ani), url(https://cur.cursors-4u.net/anime/ani-12/ani1148.gif), auto !important;}

</style><style>

.container{

  width:100%!important;

}

</style><style>

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

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

h1{

font-size: 30px !important;

font-family: 'Creepster', sans-serif;

text-transform:uppercase !important;

padding-left: 2px !important;

}

</style><style> 

/* this changes the color of your name */

.profile h1{

background: -webkit-linear-gradient(#ea0099, #ea0099);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

</style><style>

html:before {

    animation: grain 8s steps(10) infinite;

    background-image: url(https://media.istockphoto.com/photos/closeup-led-screen-display-abstract-background-with-copy-space-picture-id1151479341?k=20&m=1151479341&s=612x612&w=0&h=YILfC1WZZyk_IJ-5pyUhwqJ9nqSprBcbVKYktGv3v9g=);

    content: "";

    height: 300%;

    left: -50%;

    opacity:.1;

    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%) }

}

.top input{

        

    background-color: #ea0099 !important;

}


nav{

    background-image: url('https://i.pinimg.com/originals/43/95/1b/43951bd54299bedef4413d2a10e4a948.gif');

    border: none;

    text-align: center;

}


nav .top{

    color: #ea0099;

}


nav .top, nav .links {

    background-color: transparent;

}

nav .links{

    border-top:1px solid #ea0099;

    border-bottom:1px solid #ea0099;

}


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

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

    content: " ";

    color: deeppink;

}

    .links a{

    

    color: deeppink !important;

    

    }

    .links a:hover{


    color: deeppink !important;


    }

    .links a:visited{


    color: deeppink !important;

}


nav img.logo{

    filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(7493%) hue-rotate(324deg) brightness(103%) contrast(105%);

    height:30px;

}


.search-wrapper input[type=text] {

    background-color: rgba(0, 0, 0, 0.5) !important;

    border: 1px solid #ea0099 !important;

    color: deeppink !important;

}


button{

    border: 0px solid #ffffff !important;

    font-family: 'Creepster', cursive;;!important;

    background-color:rgba(0, 0, 0, 0.0) !important;

    color: white! important;

    background-color: #ea0099!important;

    color: #ea0099;

}

   body{

     background-image: url(https://38.media.tumblr.com/80dce52377386831f6f7e6cc53499204/tumblr_nd1w5rDDJ41thhhgxo1_500.gif?ref=weheartit);/*background for whole page*/

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    font-family: 'Courier New', monospace;

    height: 100%;

    color: #ffffff;

    h1: #ffffff;

    h2: #ffffff;

    h3: #ffffff;

    h4: #ffffff;

    li: #ffffff;}

}

main{

background-color: dimgray;

    border: transparent;

    outline: none;}

}

.profile-info {

    background-color: transparent !important;

    border:none !important;

}


.profile-pic img{

    background-color: #651e4d;

    background-size: 30%30%;

    padding:4px;

    border: 3px solid #ea0099;

}

.profile-pic {

    margin:auto;

} .edit-info{

  background-color:#373738;

 border: none;

}

footer{

    background: transparent;

}

footer a{

    color: #ea0099;

}

footer p{

    color: #ea0099;


}

.comments-table td:first-child *{

    color: var(--text);

}

 .comment-replies{

  border: 3px deeppink;

}

.comments-table td{

    border: 2px solid #ea0099;

    padding:10px #ea0099;

    border-radius: 0px;

}

.comments-table td{

        

    background-color: dimgrey!important;

    }

 table.comments-table{

border: none;

display: block;

height: 220px!important;

overflow-y: scroll;

}

  .container{

        

    width: 800px !important;

        

    }

</style>

<style>

main{

       color: white;

     background-color:#373738;

    box-shadow: 0px 0px 5px 2px deeppink;

}

</style>

<style>

             ::-webkit-scrollbar {

    width: 3px;

    height: 10px;

    }


    ::-webkit-scrollbar-thumb {

    background: rgba(22, 244, 229,1);

    }


    ::-webkit-scrollbar-track {

    background: rgba(24, 208, 196, 1);

    }

</style>

<div style="text-align: center;"><iframe width="0" height="0" src="https://www.youtube.com/embed/baF6NjFZNqc?start=98//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe></div>



10 Kudos

Comments

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

alcaChofi୭*。✿

alcaChofi୭*。✿'s profile picture

Thank you so much! I'll play aroound with it and see what I can do ^^


Report Comment

ʚSavannahɞ

ʚSavannahɞ's profile picture

Iḿ going to try it out. It looks really good! :)


Report Comment