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 33 comments ( View all | Add Comment )

'🦇 . 𝙆𝙖𝙢𝙯 ♰ˎˊ˗	1744504981 using Report Comment
jewlsbip ⭑｡𖦹°‧	1743523445 using! Report Comment
PEE GiRL XD	1743216406 Using! Report Comment
matt	1742818674 usingggg Report Comment
spacehead	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
blamejohn	1734962454 using Report Comment
blamejohn	1734962454 using Report Comment
Belle 🌸	1734212112 Using! <3 Report Comment
Oliver	1732811578 Using!! Report Comment
Hunter	1731884520 using the corner pic! Report Comment
Mr. Mandelbrot	1728051985 using! Report Comment i have a question where did you put it in your bulletin becuz it didnt work when i tried to put it in the text of my bulletin -_- by 🅾🅼🅾🆁🅸; 1729966333; Report Yea it doesn't work for bulletins but I use it for blogs. by Mr. Mandelbrot; 1730031031; Report oh okay ty :> by 🅾🅼🅾🆁🅸; 1730053154; Report hii, it worked for bulletins for me, u gotta put in on where the link goes (^_^) by Elliottnotsmith; 1731626885; Report What link do you mean? Do you mean the "<>" button or something else 'cause it's still not working for me): by Mr. Mandelbrot; 1731660782; Report under "content", in the line where the <> is, theres the color bucket tool and an "A" (the remove format button), next to the "A" theres some kind of clip or chain, you click it and click "insert link" and paste the code in the URL, click confirm and it should work ^_^ by Elliottnotsmith; 1731719890; Report It worked!!! Thank you so much!! by Mr. Mandelbrot; 1731757670; Report
Yux	1726333116 Usinnng Report Comment
Yux	1726333116 Usinnng Report Comment
Chl03 XD	1725561807 Using Report Comment
acidrox(//_×)	1724571487 usinn Report Comment
Anthony Müller	1724377044 usign Report Comment