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 21 comments ( View all | Add 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 ♡ihaveoliviasheart♡; 1729966333; Report Yea it doesn't work for bulletins but I use it for blogs. by Mr. Mandelbrot; 1730031031; Report oh okay ty :> by ♡ihaveoliviasheart♡; 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
c0l0rful_bl00d.666	1725561807 Using Report Comment
A (//_×)	1724571487 usinn Report Comment
Anthny (KaiserPug)	1724377044 usign Report Comment
charlie!! :3	1722235651 using ^o^ Report Comment
elodie☆	1721066004 using thanks Report Comment
DreamiiXO	1720754691 I'll def be using this thank you !! Report Comment
meatcrowns	1718043265 usinggg!! <3 Report Comment
Yandere Elf (#1!!!! robot lover)	1717425739 using!!! Report Comment
/pol/	1716913966 using! Report Comment
Beshii	1714270904 using :> Report Comment
Insomniac ⁠˘⁠ ⁠o⁠ ⁠˘	1713998532 Using!! Report Comment
Dominique	1713796346 using! Report Comment
𝔢𝔯𝔬𝔰ೃ⁀➷	1713279965 using!! Report Comment
charlie	1684767469 love the code!! not sure if this was intended or not but kudos options and usernames in the comments are invisible in the layout, just thought i'd let you know in case it was by mistake :) Report Comment