windows 95 bulletin/blog

Tags: old computer, internetcore, windows, windows 95, bulletin layout, blog layout, bulletin, blog

Description:

☆ CODE PREVIEW!!! ☆ (you could preview how it would look like if used in a bulletin or blog here!!)

i have been SEARCHING for bulletin layouts and none of them fit my style + there's not rlly much like I've only seen one or two. I'm a new user with zero knowledge of CSS so I searched for tutorials, and bases and messed around !! also, I think the code has like so much unnecessary stuff + its messy so feel free to fine or clean it!!!

this is heavily frankeinsteined or inspired by other layouts and I'll credit each and one of them!! if you are one of them and want this layout to be taken down, let me know and i'll comply ^^

the windows 98 design by Angel Is Pretty. Odd.
bulletin layout base sheet by Emma
floating images HTML by Sarah

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by a_0 (https://layouts.spacehey.com/layout?id=30868) -->

/* put whatever you wanna write on your bulletin or blog above this code!!! */
<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/CBTRb83/tumblr-4df68f56610e2e7ead892552ec9c6a30-5ad87c32-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"><br/></div>
<style>

/* DON'T DELETE THE MOBILE CODE */

@media (max-width: 600px) {

.container{

    width:100%!important;

    background-size: 50%!important;

    padding:20px!important;

}

nav:after{

    height: 150px!important;

}

}

</style>



<style>

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {

--logo-blue: #000;
--darker-blue: #0000ff;
--lighter-blue: #cfccc2;
--even-lighter-blue: #cfccc2;
--lightest-blue: #cfccc2;
--dark-orange: #dc2b31;
--light-orange:#0000ff;
--even-lighter-orange: #ffffff;
--light-gray: #0000ff;
--gray: #474747;
--dark-gray: #3a3a3a;
--darker-gray: #252525;
}



main {

border-style: outset;
border-width: 2px;
border-color: #fff #000 #000 #fff;
background: #cfccc2;
padding: 30px;

}



button {

    border-radius: 0px !important;

    color: #00000!important;

    font-family: 'Times New Roman';

}





body {

    /* background-image: url(https://i.pinimg.com/564x/24/d7/a9/24d7a917bd39cb046a807e01b69dac54.jpg); */
    
    background-color: #007f7e;
    
    background-attachment: fixed;
        
    font-family: Libre Franklin;
      
    font-size: 17px;
}



p {

    font-family: 'Times New Roman';

    font-size: 14px;

}


a {

color: #0000ff;

font-weight: 600;

font-family: 'Times New Roman';

}




/radius is how rounded are the corners of the border, 0 is totally squared/ 

.search-wrapper input[type=text] {

    background-color: #F5F4F2!important;

    color: #000 !important;

    border-radius: 0px !important;

    border-width: 2px;

    border-style: inset;

    border-color: -internal-light-dark(rgb(145, 20, 20), rgb(73, 213, 255));

}



/h1 is the title of the blog/

h1{

    font-size: 30px!important;

    font-family: 'Times New Roman';

    text-transform:initial !important;

    padding-left: 2px !important;

}



h4 {

    font-family: 'Times New Roman';

    font-weight: 600!important;

    font-size: 16px;

    color: #0000ff;

    }

}



/nav.top is where the home link is/

    nav {
        margin: 10px;
    }
    
     nav .links:before {
        display: block;
        padding-left: 5px;
        padding-bottom: 1px;
        border-bottom-style: groove;
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600;
        content: "spacehey - Microsoft Internet Explorer";
    }
    
    .top {
        color: transparent !important;
        height: 0 !important;
        background-color: transparent !important;
    }
    
    .top .left {
        display: none !important;
    }
    
    .top .center {
        display: none !important;
    }
    
    .search-wrapper{
        display: none !important;
    }
    
    .top .right {
        display: none !important;
    }
    
    .logout-btn{
        display: none !important;
    }
    
    .top a{
        color: transparent !important;
    }
    
    nav .links {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        padding: 0 0 3px 0;
    }
    
    nav .links a{
        font-size: 10px;
        color: #000;
        padding: 7px;
        font-weight: 500;
    }

/the "content" abov is what divide the links, you can put what you want/



element.style {

    padding-right: 20px;

    padding-left: 20px;

}



.comments-table {

    border-color: var(--even-lighter-orange);

}



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

    background: #cfccc2;

    text-align: center;

    font-weight: bold;

    width: 38%;

}



.comments-table td {

    background-color: #cfccc2; 

    font-size: 16px;

    color: black;

}



.comments-table td a {

    color: transparent;

}



.comment-replies {

    border: 0px;

}



/footer is the information below your blog entry and everything/

footer {

    background-color: transparent;

    font-size: 13px;

    color: rgb(255, 141, 249);

}

footer a, footer a:hover {

    color: rgb(131, 0, 87);

}



element.style {

    padding-right: 20px;

    padding-left: 20px;

}



.logout-btn {

    display: inline-block;

    font-size: 100%;

    color: #FFFFFF!important;

    border: 0px!important;

}



.blog-entry {

    display: inline-block;

    font-size: 100%;

    color: var(--logo-blue)!important;

    border: 0px!important;

}



/size of your pic/

.blog-entry .profile-pic img, .bulletin .profile-pic img {

    max-width: 104px;

    max-height: 104px;

    padding-left: 5px;

}



.kudos-btn {

    color: #cfccc2!important;

    border: 0px!important;

    display: inline-block;

    font-size: 100%;

}

/here is the square with your profile-pic, publishing date and etc/

.edit-info {

    border: 1px solid;

    width: 100%;

    padding: 8px;

    text-align: start;

}



<style></style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 41 comments ( View all | Add Comment )

axaleaaa	1755913956 usingg Report Comment
UNKN0WN_0CT0	1755898023 Using^^ Report Comment
Arlene Schram	1755606662 need this but as windows xp 3 Report Comment
Axel	1751656902 Using Report Comment
Th4tGuy	1747201368 USING!!! THANK U SM X33333 Report Comment
Phoenix :p	1746310049 usuing Report Comment
Connor	1746118246 using!! :> Report Comment
🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊<^ ฅ	1746039554 Using!! Tysm!! <3 Report Comment
'🦇 . 𝙆𝙖𝙢𝙯 ♰ˎˊ˗	1744504981 using Report Comment
jewlsbip	1743523445 using! Report Comment
KELLIN-09	1743216406 Using! Report Comment
matt	1742818674 usingggg Report Comment
sssakifro	1742643032 using!!!!!! Report Comment
selkie	1742300984 using tysm!! Report Comment
katerina ☆	1742287162 using <3 Report Comment
unpl3asant / cody	1739521081 USING!! Report Comment
kazuite	1739175324 using! Report Comment
IMCOOLERCUZIMBLUE	1734962454 using Report Comment
IMCOOLERCUZIMBLUE	1734962454 using Report Comment
Belle 🌸	1734212112 Using! <3 Report Comment