Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- 95 Windows - Toyhouse HTML theme by Circlejourney
- More codes: https://toyhou.se/orchestrator
- All buttons and desktop icons should be interactive! This was a challenge to make mobile responsive, but I'm now satisfied with how it resizes.
- I've used dummy classnames to make it easier to find each section. Ctrl + F to search for these and find the corresponding windows:
- * DESKTOP_ICONS
- * PAINT_WINDOW
- * PLAYLIST_WINDOW
- * BROWSER_WINDOW
- * NOTEPAD_WINDOW
- * GIF_WINDOW
- * TASKBAR
- * START_MENU
- -->
- <div style="margin: -15px -15px 0; background: url(https://i.imgur.com/JKfcdAJ.png); background-size: 300px auto; font-family: 'MS Sans Serif', sans-serif;">
- <div class="w-100 h-100 flex-column" style="opacity: 0.97;">
- <!-- Change hex code below to change the desktop background -->
- <div class="DESKTOP tab-content p-4 order-2 order-md-1" style="background-color: #008081; min-height: 550px; position: relative; font-size: small;">
- <div class="DESKTOP_ICONS row text-white nav" style="font-size: 9pt; position: absolute;">
- <a class="col-auto text-center text-white m-1" href=".PAINT-1" style="width: 100px;" data-toggle="tab">
- <!-- Desktop icon 1, change the src URL below to replace image -->
- <img style="max-height: 50px;" src="http://68.media.tumblr.com/0433fbfd7125ac9489d6d9f50a6d1aac/tumblr_obc2r93vte1sw1xnko1_500.png">
- <span class="d-block mt-1">
- <!-- Title of icon 1 -->
- castle.jpg
- </span>
- </a>
- <a class="col-auto text-center text-white m-1" href=".PAINT-2" style="width: 100px;" data-toggle="tab">
- <!-- Desktop icon 2, change the src URL below to replace image -->
- <img style="max-height: 50px;" src="https://64.media.tumblr.com/520af87c73f44971851dadb596f7a3e9/tumblr_pouppyajAA1r0r06s_1280.png">
- <span class="d-block mt-1">
- <!-- Title of icon 2 -->
- 道を指す.jpg
- </span>
- </a>
- <a class="col-auto text-center text-white m-1" href=".PAINT-3" style="width: 100px;" data-toggle="tab">
- <!-- Desktop icon 3, change the src URL below to replace image -->
- <img style="max-height: 50px;" src="https://64.media.tumblr.com/f812b7cfa516fc44053cd3b175a71963/tumblr_oaxnveuIoP1sw1xnko1_r3_500.png">
- <span class="d-block mt-1">
- <!-- Title of icon 3 -->
- observatory.jpg
- </span>
- </a>
- </div>
- <div class="row">
- <div class="col-md-4" style="z-index: 3; margin-top: 100px; height: 380px;">
- <div class="PAINT_WINDOW collapse show" style="transition: none; border: 2px outset #c0c0c0; width: 108%;">
- <div class="card h-100 rounded-0" style="background-color: #c0c0c0; color: black;">
- <div class="p-1 d-flex justify-content-between align-items-center font-weight-bold" style="background-color: #000080; color: white; font-size: 9pt;">
- <span>
- <!-- Title of Paint window -->
- Paint
- </span>
- <a class="MINIMISE font-weight-bold" href=".PAINT_WINDOW" data-toggle="collapse" style="border: 2px outset #ccc; background-color: #c0c0c0; color: black; padding: 0 0.4rem; font-family: monospace;">
- _
- </a>
- </div>
- <div class="overflow-auto flex-column" style="height: 180px;">
- <div class="tab-content flex-grow-1">
- <!-- Change the URL below to change image 1 -->
- <div class="PAINT-1 h-100 tab-pane active"
- style="background-image: url(http://68.media.tumblr.com/0433fbfd7125ac9489d6d9f50a6d1aac/tumblr_obc2r93vte1sw1xnko1_500.png);
- background-color: white; border: 2px inset lightgrey;
- background-size: cover; background-position: center 90%;">
- </div>
- <!-- Change the URL below to change image 2 -->
- <div class="PAINT-2 h-100 tab-pane"
- style="background-image: url(https://64.media.tumblr.com/520af87c73f44971851dadb596f7a3e9/tumblr_pouppyajAA1r0r06s_1280.png);
- background-color: white; border: 2px inset lightgrey;
- background-size: cover; background-position: center 70%;">
- </div>
- <!-- Change the URL below to change image 3 -->
- <div class="PAINT-3 h-100 tab-pane"
- style="background-image: url(https://64.media.tumblr.com/f812b7cfa516fc44053cd3b175a71963/tumblr_oaxnveuIoP1sw1xnko1_r3_500.png);
- background-color: white;
- border: 2px inset lightgrey;
- background-position: center 80%;">
- </div>
- </div>
- <div>
- <div class="d-flex">
- <!-- Palette row 1, change the colour names/hex codes if you like -->
- <div style="background-color: black;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: grey;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: maroon;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: olive;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: green;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: teal;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: navy;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: purple;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #808040;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #004040;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #0080ff;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #004080;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #4000ff;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #804000;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- </div>
- <div class="d-flex">
- <!-- Palette row 2 -->
- <div style="background-color: white;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: silver;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: red;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: yellow;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: lime;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: aqua;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: blue;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: magenta;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #fff080;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #00ff80;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #80ffff;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #8080ff;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #ff0080;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- <div style="background-color: #ff8040;
- width: 15px; height: 15px; border: 2px inset lightgrey;"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="PLAYLIST_WINDOW collapse mt-2" style="width: 90%; margin-right: -10%; transition: none; border: 1px solid #c0c0c0; position: absolute; bottom: 0;">
- <div class="card h-100 rounded-0" style="background-color: #c0c0c0; color: black;">
- <div class="p-1 d-flex justify-content-between align-items-center font-weight-bold" style="background-color: #000080; color: white;">
- <span>
- <!-- Title of Playlist window -->
- Playlist
- </span>
- <a class="MINIMISE font-weight-bold" href=".PLAYLIST_WINDOW" data-toggle="collapse" style="border: 2px outset #ccc; background-color: #c0c0c0; color: black; padding: 0 0.4rem; font-family: monospace;">
- _
- </a>
- </div>
- <div class="bg-white" style="height: 130px; font-family: monospace;">
- <!-- Change the URL of the embed below to change the video -->
- <iframe
- src="https://www.youtube.com/embed/videoseries?list=PLo82EP2FnqGYpc742KW6V1JoMUzZvThc-"
- class="w-100 h-100"
- title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-5 mb-2 mb-md-0">
- <div class="BROWSER_WINDOW collapse show" style="width: 104%; height: 100%; margin-left: -2%; margin-right: -2% transition: none; border: 2px outset #c0c0c0; z-index: 2; transition: none;">
- <div class="card h-100 rounded-0" style="background-color: #c0c0c0; color: black;">
- <div class="p-1 d-flex justify-content-between align-items-center font-weight-bold" style="background-color: #000080; color: white; font-size: 9pt;">
- <span style="white-space: nowrap;">
- <!-- Title of the Explorer window -->
- Explorer
- </span>
- <a class="MINIMISE font-weight-bold" href=".BROWSER_WINDOW" data-toggle="collapse" style="border: 2px outset #ccc; background-color: #c0c0c0; color: black; padding: 0 0.4rem; font-family: monospace;">
- _
- </a>
- </div>
- <!-- Change #fec to something else to change the website background -->
- <div style="background-color: #fec;
- height: 420px; border: 2px inset lightgrey; padding: 2em 2vw; font-family: serif;"
- class="card-block overflow-auto">
- <!-- Change hex codes below to change banner background -->
- <div style="background: linear-gradient(90deg, #e3c, #f88);
- text-shadow: 2px 2px 0 black; font-size: 16pt; color: white;"
- class="font-weight-bold p-2 text-uppercase bg-light text-center">
- <!-- Website title -->
- Welcome to my site
- </div>
- <!-- Change hex code below to change the link bar background -->
- <div class="nav nav-pills" style="background-color: #09b;">
- <a href="#WEB-TAB-1" class="nav-link active mr-1" data-toggle="tab" style="border-radius: 0; color: white;">
- <!-- Title of 1st link in Explorer -->
- Link 1
- </a>
- <a href="#WEB-TAB-2" class="nav-link mr-2" data-toggle="tab" style="border-radius: 0; color: white;">
- <!-- Title of 2nd link in Explorer -->
- Link 2
- </a>
- <a href="#WEB-TAB-3" class="nav-link mr-2" data-toggle="tab" style="border-radius: 0; color: white;">
- <!-- Title of 3rd link in Explorer -->
- Link 3
- </a>
- </div>
- <div class="tab-content mt-3">
- <div id="WEB-TAB-1" class="tab-pane active">
- <!-- Contents of 1st link in Explorer -->
- Webpage 1. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- <div id="WEB-TAB-2" class="tab-pane">
- <!-- Contents of 2nd link in Explorer -->
- Webpage 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
- </div>
- <div id="WEB-TAB-3" class="tab-pane">
- <!-- Contents of 3rd link in Explorer -->
- <p>
- Webpage 3. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- <p>
- Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- <p>
- Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-3 flex-column justify-content-between" style="z-index: 3; position: relative;">
- <div style="height: 440px;">
- <div class="NOTEPAD_WINDOW collapse mb-4 mt-2 mt-md-0" style="transition: none; border: 2px outset #c0c0c0; width: 90%; height: 50%; position: absolute;">
- <div class="card rounded-0" style="background-color: #c0c0c0; color: black;">
- <div class="p-1 d-flex justify-content-between align-items-center font-weight-bold" style="background-color: #000080; color: white; font-size: 9pt;">
- <span style="white-space: nowrap;">
- <!-- Title of the Notepad window -->
- untitled.txt - Notepad
- </span>
- <a class="MINIMISE font-weight-bold" href=".NOTEPAD_WINDOW" data-toggle="collapse" style="border: 2px outset #ccc; background-color: #c0c0c0; color: black; padding: 0 0.4rem; font-family: monospace;">
- _
- </a>
- </div>
- <div class="card-block overflow-auto bg-white" style="height: 200px; font-family: monospace;">
- <!-- Contents of Notepad window -->
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
- </div>
- </div>
- </div>
- </div>
- <div class="GIF_WINDOW collapse show align-self-end" style="transition: none; border: 2px outset #c0c0c0; z-index: 1; position: absolute; bottom: -2%; width: 102%; margin-left: -2%;">
- <div class="card h-100 rounded-0" style="background-color: #c0c0c0; color: black;">
- <div class="p-1 d-flex justify-content-between align-items-center font-weight-bold" style="background-color: #000080; color: white; font-size: 9pt;">
- <span class="pl-2" style="white-space: nowrap; overflow-x: hidden;">
- <!-- Title of the GIF window -->
- A memory
- </span>
- <a class="MINIMISE font-weight-bold" href=".GIF_WINDOW" data-toggle="collapse" style="border: 2px outset #ccc; background-color: #c0c0c0; color: black; padding: 0 0.4rem; font-family: monospace;">
- _
- </a>
- </div>
- <!-- Change the URL below to change the GIF window -->
- <div class="overflow-auto" style="height: 160px; background-image: url(http://78.media.tumblr.com/fda2a250639a097ccffe6cef132e147c/tumblr_oqunq6Q27M1sw1xnko1_r1_500.gif); background-size: cover; background-position: center;">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="TASKBAR w-100 p-1 d-flex flex-wrap font-weight-bold order-1 order-md-2 sticky-bottom" style="background-color: #c0c0c0; color: black; font-size: 9pt;">
- <div class="dropup mr-1">
- <a class="TASKBAR_BUTTON dropdown-toggle d-block p-1" data-toggle="dropdown" href="#" style="color: black; text-decoration: none; background: none; border: none; font-size: 0; border: 2px outset #ccc; transition: none; font-size: 9pt;">
- <img src="https://i.imgur.com/pu9L0Ix.png" style="max-height: 0.9rem;">
- Start
- </a>
- <div class="START_MENU dropdown-menu p-0 rounded-0" style="border: 2px outset #c0c0c0; height: max-content;">
- <div class="flex-grow-1" style="background-color: #c0c0c0; border-left: 40px solid #808080; min-width: 240px;">
- <!--Links-->
- <a href="#" class="d-block w-100 p-2" style="color: black;">
- Link 1
- </a>
- <!--Links-->
- <a href="#" class="d-block w-100 p-2" style="color: black; background-color: #c0c0c0;">
- Link 2
- </a>
- </div>
- </div>
- </div>
- <a class="TASKBAR_BUTTON flex-column" href=".PAINT_WINDOW" data-toggle="collapse" style="color: black; text-decoration: none;">
- <span class="PAINT_WINDOW p-1 mr-1 collapse" style="border: 2px outset #ccc; transition: none;" >
- Paint
- </span>
- <span class="PAINT_WINDOW p-1 mr-1 collapse show" style="border: 2px inset lightgrey; transition: none;" >
- Paint
- </span>
- </a>
- <a class="TASKBAR_BUTTON flex-column" href=".PLAYLIST_WINDOW" data-toggle="collapse" style="color: black; text-decoration: none;">
- <span class="PLAYLIST_WINDOW p-1 mr-1 collapse show" style="border: 2px outset #ccc; transition: none;" >
- Playlist
- </span>
- <span class="PLAYLIST_WINDOW p-1 mr-1 collapse" style="border: 2px inset lightgrey; transition: none;" >
- Playlist
- </span>
- <!-- NOTE: The double button elements are my way of spoofing the appearance of the taskbar buttons toggling between active and inactive. -->
- </a>
- <a class="TASKBAR_BUTTON flex-column" href=".BROWSER_WINDOW" data-toggle="collapse" style="color: black; text-decoration: none;">
- <span class="BROWSER_WINDOW p-1 mr-1 collapse show" style="border: 2px inset lightgrey; transition: none;" >
- Explorer
- </span>
- <span class="BROWSER_WINDOW p-1 mr-1 collapse" style="border: 2px outset #ccc; transition: none;" >
- Explorer
- </span>
- </a>
- <a class="TASKBAR_BUTTON flex-column" href=".NOTEPAD_WINDOW" data-toggle="collapse" style="color: black; text-decoration: none;">
- <span class="NOTEPAD_WINDOW p-1 mr-1 collapse show" style="border: 2px outset #ccc; transition: none;" >
- Notepad
- </span>
- <span class="NOTEPAD_WINDOW p-1 mr-1 collapse" style="border: 2px inset lightgrey; transition: none;" >
- Notepad
- </span>
- </a>
- <a class="TASKBAR_BUTTON flex-column" href=".GIF_WINDOW" data-toggle="collapse" style="color: black; text-decoration: none;">
- <span class="GIF_WINDOW p-1 mr-1 collapse show" style="border: 2px inset lightgrey; transition: none;" >
- A memory
- </span>
- <span class="GIF_WINDOW p-1 mr-1 collapse" style="border: 2px outset #ccc; transition: none;" >
- A memory
- </span>
- </a>
- </div>
- </div>
- </div>
- <div class="small text-right"><a href="https://toyhou.se/28724072.95-windows-f2u" class="font-weight-normal text-dark">Theme by Circlejourney <i class="fa fa-code"></i></a></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement