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:

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.