CINXE.COM

Windows 95 UI Kit

<!-- ========================================================= * Windows 95 UI Kit ========================================================= * Product Page: https://themesberg.com/product/ui-kit/windows-95-ui-kit * Copyright 2019 Themesberg (https://www.themesberg.com) * License Themesberg (Crafty Dwarf LLC) (https://themesberg.com/licensing) * Coded by https://themesberg.com ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. --> <!DOCTYPE html> <html lang="en"> <head> <link rel="canonical" href="https://themesberg.com/product/ui-kit/windows-95-ui-kit"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Windows 95 UI Kit</title> <meta name="author" content="Themesberg"> <meta name="description" content="Windows 95 is a free Retro UI Kit to bring back the great memories of the 95's. Original Windows 95 Buttons, Icons, Windows, Tabs and many more await you!"> <meta name="keywords" content="Windows 95, Windows 95 UI Kit, Windows 95 Buttons, Windows 95 Cards, Windows 95 Icons, Windows 95 Forms, Windows 95 Typography, Windows 95 Website, Retro Website, Bootstrap Retro, Themesberg"/> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://themesberg.com/product/ui-kit/windows-95-ui-kit"> <meta property="og:title" content="Windows 95 UI Kit"> <meta property="og:description" content="Windows 95 is a free Retro UI Kit to bring back the great memories of the 95's. Original Windows 95 Buttons, Icons, Windows, Tabs and many more await you!"> <meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/windows-95/windows-95-ui-kit-preview.jpg"> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://themesberg.com/product/ui-kit/windows-95-ui-kit"> <meta property="twitter:title" content="Windows 95 UI Kit"> <meta property="twitter:description" content="Windows 95 is a free Retro UI Kit to bring back the great memories of the 95's. Original Windows 95 Buttons, Icons, Windows, Tabs and many more await you!"> <meta property="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/windows-95/windows-95-ui-kit-preview.jpg"> <!-- Favicon --> <link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png"> <link rel="manifest" href="img/favicon/site.webmanifest"> <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#2d89ef"> <meta name="theme-color" content="#ffffff"> <!-- Bootstrap CSS --> <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <!-- Pixel CSS --> <link type="text/css" rel="stylesheet" href="css/w95.css"> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141734189-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-141734189-1'); </script> </head> <body> <header class="header-global"> <nav id="navbar-main" class="navbar d-flex flex-row align-items-center navbar-main navbar-expand-lg navbar-dark justify-content-between"> <ul class="navbar-nav navbar-nav-hover flex-row align-items-center"> <li class="nav-item"> <a href="index.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📺 Start</span> </a> </li> <li class="nav-item"> <a href="docs/introduction.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📕 Docs</span> </a> </li> <li class="nav-item"> <a href="login.html" class="nav-link" role="button"> <span class="nav-link-inner-text">Login</span> </a> </li> <li class="nav-item"> <a href="register.html" class="nav-link" role="button"> <span class="nav-link-inner-text">Register</span> </a> </li> </ul> <div class="time text-center"> <span class="time text-uppercase">1:47 PM</span> </div> </nav> </header> <main> <!-- Hero --> <section class="section section-lg bg-secondary overflow-hidden z-2"> <div class="container z-2"> <div class="row justify-content-center pt-6 pt-md-5 pb-0 mb-2"> <div class="col-12 col-xl-7"> <div class="card card-tertiary"> <div class="card-header text-center"> <span>Windows 95 UI Kit</span> </div> <div class="card-body"> <p class="card-text">Tired of all the new design trends? Fly back in time and use this free <span class="text-italic">Windows 95 User Interface Kit</span> to create awesome retro websites. It is based on the latest Bootstrap 4 Framework and you can download it for free by creating an account at <a href="https://themesberg.com/register" target="_blank">Themesberg.com</a>.</p> <div class="text-center"> <a href="https://themesberg.com/product/ui-kit/windows-95-ui-kit" target="_blank" class="btn btn-sm mr-2 btn-primary border-dark" role="button"><span class="btn-text">Free download</span></a> </div> </div> </div> </div> </div> </div> </section> <section class="section-sm"> <div class="container"> <div class="row mt-5 mt-lg-2"> <div class="col-lg-12"> <h4 class="mb-5">Buttons</h4> <button class="btn mr-2 mb-2 btn-primary" type="button"><span class="btn-text">Primary</span></button> <button class="btn mr-2 mb-2 btn-primary border-dark" type="button"><span class="btn-text">Bordered</span></button> <button class="btn mr-2 mb-2 btn-primary border-dark-lg" type="button"><span class="btn-text">Bordered 2</span></button> <h6 class="text-gray my-5">Color Variations</h6> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">Primary</span> </button> <button class="btn mr-2 mb-2 btn-secondary" type="button"> <span class="btn-text">Secondary</span> </button> <button class="btn mr-2 mb-2 btn-tertiary" type="button"> <span class="btn-text">Tertiary</span> </button> <button class="btn mr-2 mb-2 btn-info" type="button"> <span class="btn-text">Info</span> </button> <button class="btn mr-2 mb-2 btn-success" type="button"> <span class="btn-text">Success</span> </button> <button class="btn mr-2 mb-2 btn-warning" type="button"> <span class="btn-text">Warning</span> </button> <button class="btn mr-2 mb-2 btn-danger" type="button"> <span class="btn-text">Danger</span> </button> <h6 class="text-gray my-5">Sizes</h6> <button class="btn mr-2 mb-2 btn-sm btn-primary" type="button"> <span class="btn-text">Small</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">Regular</span> </button> <button class="btn mr-2 mb-2 btn-lg btn-primary" type="button"> <span class="btn-text">Large</span> </button> <h6 class="text-gray my-5">Icon Buttons</h6> <div class="d-flex flex-wrap align-items-center mb-5"> <button class="btn btn-sm mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">📺 Start</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">📺 Start</span> </button> <button class="btn btn-lg mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">📺 Start</span> </button> </div> <div class="d-flex align-items-center flex-wrap"> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">⌨ Keyboard</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">💣 Bombermann</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">🖨 Print</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">🔒 Locked</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">💾 Floppy</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">💿 Disk</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">🍎 Apple</span> </button> <button class="btn mr-2 mb-2 btn-primary" type="button"> <span class="btn-text">📺 Help Manual</span> </button> </div> </div> </div> </div> </section> <section class="section-sm"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="mt-5 mb-5 mt-md-0"> <h4>Forms</h4> </div> <div class="row"> <div class="col-12 col-lg-6 mr-lg-5 mb-4 mb-lg-0"> <div class="mb-4 mb-md-5"> <h6 class="text-gray">Form Controls</h6> </div> <div class="form-group d-flex align-items-center justify-content-between"> <label for="default" class="mr-3">Default:</label> <input id="default" type="text" class="form-control w-75" /> </div> <div class="form-group d-flex align-items-center justify-content-between"> <label for="disabled" class="mr-3">Disabled:</label> <input id="disabled" type="text" class="form-control w-75" disabled /> </div> <div class="form-group has-success d-flex align-items-center justify-content-between"> <label for="success" class="mr-3">Success:</label> <input id="success" type="text" class="form-control is-valid w-75" /> </div> <div class="form-group has-danger d-flex align-items-center justify-content-between"> <label for="error" class="mr-3">Error:</label> <input id="error" type="text" class="form-control is-invalid w-75" /> </div> <div class="form-group d-flex justify-content-between mb-2"> <label for="textarea" class="mr-3">Textarea:</label> <textarea id="textarea" class="form-control w-75" cols="30" rows="10"></textarea> </div> <div class="form-group d-flex justify-content-end mb-4"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> <span class="form-check-x"></span> <span class="form-check-sign"></span> I agree to the terms and conditions </label> </div> </div> <div class="d-flex justify-content-end"> <div class="d-flex"> <button class="btn btn-sm mr-3 btn-primary border-dark" type="button"> <span class="btn-text">Submit</span> </button> <button class="btn btn-sm btn-primary" type="button"> <span class="btn-text">Cancel</span> </button> </div> </div> </div> <div class="col-12 col-lg-2 mb-4 mb-lg-0"> <div class="mb-4 mb-md-5"> <h6 class="text-gray">Checkboxes</h6> </div> <!-- Checkbox --> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> <span class="form-check-x"></span> <span class="form-check-sign"></span> Unchecked </label> </div> <!-- End of Checkbox --> <!-- Checkbox --> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" checked> <span class="form-check-x"></span> <span class="form-check-sign"></span> Checked </label> </div> <!-- End of Checkbox --> <!-- Checkbox --> <div class="form-check disabled"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" disabled> <span class="form-check-x"></span> <span class="form-check-sign"></span> Disabled Unchecked </label> </div> <!-- End of Checkbox --> <!-- Checkbox --> <div class="form-check disabled"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" checked disabled> <span class="form-check-x"></span> <span class="form-check-sign"></span> Disabled Checked </label> </div> <!-- End of Checkbox --> </div> <div class="col-12 col-lg-2 mb-4 mb-lg-0"> <div class="mt-4 mb-4 mt-md-0 mb-md-5"> <h6 class="text-gray">Radios</h6> </div> <!-- Radio --> <div class="form-check form-check-radio"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> <span class="form-check-sign"></span> Radio is off </label> </div> <!-- End of Radio --> <!-- Radio --> <div class="form-check form-check-radio"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked> <span class="form-check-sign"></span> Radio is on </label> </div> <!-- End of Radio --> <!-- Radio --> <div class="form-check form-check-radio disabled"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios3" value="option3" disabled> <span class="form-check-sign"></span> Disabled radio is off </label> </div> <!-- End of Radio --> <!-- Radio --> <div class="form-check form-check-radio disabled"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios4" value="option4" disabled checked> <span class="form-check-sign"></span> Disabled radio is on </label> </div> <!-- End of Radio --> </div> </div> </div> </div> </div> </section> <section class="section-sm bg-secondary"> <div class="container"> <div class="row"> <div class="col-12"> <div class="mt-5 mb-5 mt-md-0"> <h4 class="text-white">Cards</h4> </div> </div> <div class="col-12 col-lg-6 mb-4 mb-lg-0"> <div class="card"> <div class="card-header"> Default Primary Card Header Title </div> <div class="card-body"> <p class="card-text">Windows 95 sold for $89.99 as an upgrade or $179.99 for the full version.</p> <div class="d-flex justify-content-end mt-3"> <button class="btn btn-sm mr-2 btn-primary border-dark" type="button"><span class="btn-text">OK</span></button> <button class="btn btn-sm btn-primary" type="button"><span class="btn-text">Cancel</span></button> </div> </div> </div> </div> <div class="col-12 col-lg-6 mb-4 mb-lg-5"> <div class="card card-secondary"> <div class="card-header text-center"> Default Secondary Card Header Title </div> <div class="card-body"> <p class="card-text">Windows 95 was available on either floppy disks or a CD-ROM. The floppy version shipped with 13 disks.</p> <div class="d-flex mt-3"> <button class="btn btn-sm mr-2 btn-primary border-dark" type="button"><span class="btn-text">OK</span></button> <button class="btn btn-sm btn-primary" type="button"><span class="btn-text">Cancel</span></button> </div> </div> </div> </div> <div class="col-12 col-lg-6 mb-4 mb-lg-0"> <div class="card card-tertiary"> <div class="card-header"> <span>Default Tertiary Card Header Title</span> </div> <div class="card-body"> <p class="card-text">The minimum system requirements called for a 386DX processor, 4MB of RAM, and a 120MB hard drive.</p> <div class="d-flex mt-3"> <button class="btn btn-sm mr-2 btn-primary border-dark" type="button"><span class="btn-text">OK</span></button> <button class="btn btn-sm btn-primary" type="button"><span class="btn-text">Cancel</span></button> </div> </div> </div> </div> <div class="col-12 col-lg-6 mb-4 mb-lg-0"> <div class="card card-tertiary"> <div class="card-header"> Card with white background </div> <div class="card-body bg-white"> <p class="card-text">The minimum system requirements called for a 386DX processor, 4MB of RAM, and a 120MB hard drive.</p> </div> <div class="card-footer"> <div class="d-flex"> <button class="btn btn-sm mr-2 btn-primary border-dark" type="button"><span class="btn-text">OK</span></button> <button class="btn btn-sm btn-primary" type="button"><span class="btn-text">Cancel</span></button> </div> </div> </div> </div> </div> </div> </section> <section class="section-sm"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="mt-5 mb-5 mt-md-0"> <h4>Navbars</h4> </div> <nav class="navbar navbar-expand-lg navbar-dark justify-content-between mb-3"> <ul class="navbar-nav navbar-nav-hover flex-row align-items-center"> <li class="nav-item"> <a href="index.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📺 Start</span> </a> </li> <li class="nav-item"> <a href="docs/introduction.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📕 Docs</span> </a> </li> </ul> <div class="time text-center"> <span class="time text-uppercase">1:47 PM</span> </div> </nav> <nav class="navbar navbar-expand-lg navbar-dark navbar-secondary justify-content-between mb-3"> <ul class="navbar-nav navbar-nav-hover flex-row align-items-center"> <li class="nav-item"> <a href="index.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📺 Start</span> </a> </li> <li class="nav-item"> <a href="docs/introduction.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📕 Docs</span> </a> </li> </ul> <div class="time text-center"> <span class="time text-uppercase">1:47 PM</span> </div> </nav> <nav class="navbar navbar-expand-lg navbar-dark navbar-tertiary justify-content-between"> <ul class="navbar-nav navbar-nav-hover flex-row align-items-center"> <li class="nav-item"> <a href="index.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📺 Start</span> </a> </li> <li class="nav-item"> <a href="docs/introduction.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📕 Docs</span> </a> </li> </ul> <div class="time text-center"> <span class="time text-uppercase text-white">1:47 PM</span> </div> </nav> </div> </div> </div> </section> <section class="section-sm"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="mt-5 mb-5 mt-md-0"> <h4 class="my-5">Tabs</h4> <div class="p-5 bg-secondary"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Programs</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Control Panel</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Documents</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta voluptatem nam ut temporibus corporis dolorem dolores accusamus deserunt veniam eius maiores suscipit veritatis necessitatibus voluptatum incidunt repellendus eligendi, consequatur rem?</p> <button class="btn btn-sm mr-2 btn-primary border-dark" type="button"> <span class="btn-text">Show Other Options</span> </button> </div> <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur earum consequuntur accusamus reprehenderit quae sint, quia eligendi sed quidem neque omnis odit suscipit dolorum corrupti minima quas temporibus recusandae vel.</p> <button class="btn btn-sm mr-2 btn-secondary border-dark" type="button"> <span class="btn-text">Show Other Options</span> </button> </div> <div class="tab-pane" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea ad tempora, quam quisquam, neque possimus ducimus eligendi cumque ipsum autem nam magnam atque, ipsam sint inventore repellat iste sunt harum!</p> <button class="btn btn-sm mr-2 btn-tertiary border-dark" type="button"> <span class="btn-text">Show Other Options</span> </button> </div> </div> </div> </div> </div> </div> </div> </section> <section class="section-sm"> <div class="container"> <div class="row mt-5 mt-lg-2"> <div class="col-lg-12"> <h4 class="mb-5">Tooltips</h4> <button class="btn mr-2 mb-2 btn-primary" type="button" data-toggle="tooltip" data-placement="top" title="The quick brown fox jumps over the lazy dog."><span class="btn-text">Top</span></button> <button class="btn mr-2 mb-2 btn-primary" type="button" data-toggle="tooltip" data-placement="right" title="The quick brown fox jumps over the lazy dog."><span class="btn-text">Right</span></button> <button class="btn mr-2 mb-2 btn-primary" type="button" data-toggle="tooltip" data-placement="bottom" title="The quick brown fox jumps over the lazy dog."><span class="btn-text">Bottom</span></button> <button class="btn mr-2 mb-2 btn-primary" type="button" data-toggle="tooltip" data-placement="left" title="The quick brown fox jumps over the lazy dog."><span class="btn-text">Left</span></button> </div> </div> </div> </section> <section class="section-sm"> <div class="container"> <div class="mt-5 mb-5 mt-md-0"> <h4>Typography</h4> </div> <div class="row py-3 align-items-center"> <div class="col-sm-3"> <small class="text-uppercase text-muted">Heading 1</small> </div> <div class="col-sm-9"> <h1 class="mb-0">Windows 95 UI Kit</h1> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-3"> <small class="text-uppercase text-muted">Heading 2</small> </div> <div class="col-sm-9"> <h2 class="mb-0">Crafted by Themesberg.com</h2> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-3"> <small class="text-uppercase text-muted">Heading 3</small> </div> <div class="col-sm-9"> <h3 class="mb-0">For the most awesome developers</h3> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-3"> <small class="text-uppercase text-muted">Heading 4</small> </div> <div class="col-sm-9"> <h4 class="mb-0">Use this kit to travel back in time and have fun</h4> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-3"> <small class="text-uppercase text-muted">Heading 5</small> </div> <div class="col-sm-9"> <h5 class="mb-0">I don't know what else to write so that it looks good compared to</h5> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-3"> <small class="text-uppercase text-muted">Heading 6</small> </div> <div class="col-sm-9"> <h6 class="mb-0">The previous header and this header has to be even longer but we did it finally :) :) :)</h6> </div> </div> <hr class="my-5"> <!-- Paragraphs --> <div class="my-5 mt-6"> <h4>Paragraphs</h4> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Paragraph</small> </div> <div class="col-sm-10"> <p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Lead</small> </div> <div class="col-sm-10"> <p class="lead">Ich werde der Anfuhrer eines Unternehmens sein, das Milliarden von Dollar wert ist, weil ich die Antworten habe. Ich verstehe Kultur. Ich bin der Kern. Ich denke das ist ein Verantwortung, die ich habe, Moglichkeiten zu schieben, Menschen zu zeigen, Dies ist das Niveau, auf dem die Dinge sein konnten.</p> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Quote</small> </div> <div class="col-sm-10"> <blockquote class="blockquote"> <p class="mb-0">Sere el lider de una empresa que termina valiendo miles de millones de dolares, porque obtuve las respuestas ...</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Muted text</small> </div> <div class="col-sm-10"> <p class="text-muted mb-0">Voi fi liderul unei companii care ajunge sa valoreze miliarde de dolari, pentru ca am toate raspunsurile...</p> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Primary text</small> </div> <div class="col-sm-10"> <p class="text-primary mb-0">Olyan tarsasag vezetoje leszek, amely tobb milliard dollarba kerul, mert megkaptam a valaszokat ...</p> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Info text</small> </div> <div class="col-sm-10"> <p class="text-info mb-0">Je serai le chef d'une entreprise qui vaudra des milliards de dollars, car j'ai eu les reponses...</p> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Success text</small> </div> <div class="col-sm-10"> <p class="text-success mb-0">Saro il leader di un'azienda che finira per valere miliardi di dollari, perche ho avuto le risposte...</p> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Warning text</small> </div> <div class="col-sm-10"> <p class="text-warning mb-0">Eu serei o lider de uma empresa que acaba valendo bilhoes de dolares, porque recebi as respostas...</p> </div> </div> <div class="row py-3 align-items-center"> <div class="col-sm-2"> <small class="text-uppercase text-muted">Danger text</small> </div> <div class="col-sm-10"> <p class="text-danger mb-0">Bede liderem firmy, ktora ostatecznie jest warta miliardy dolarow, poniewaz mam odpowiedzi...</p> </div> </div> </div> </section> <section class="section-lg"> <div class="container"> <div class="row"> <div class="col-12"> <h3 class="text-center mb-5 pb-5">Hand-crafted retro example pages:</h3> </div> <div class="col-12 col-lg-6"> <div class="card card-tertiary"> <div class="card-header text-center"> <span>Login page</span> </div> <div class="card-body"> <div class="text-center"> <a href="./login.html" target="_blank"> <img class="w-100 mb-3" src="./img/w95-bootstrap-login-page.png" alt="Windows 95 Bootstrap Login Page Preview"> </a> </div> <div class="text-center"> <a href="./login.html" class="btn btn-sm mr-2 btn-primary border-dark" role="button"><span class="btn-text">Preview</span></a> </div> </div> </div> </div> <div class="col-12 col-lg-6"> <div class="card card-tertiary"> <div class="card-header text-center"> <span>Register page</span> </div> <div class="card-body"> <div class="text-center"> <a href="./register.html" target="_blank"> <img class="w-100 mb-3" src="./img/w95-bootstrap-register-page.png" alt="Windows 95 Bootstrap Register Page Preview"> </a> </div> <div class="text-center"> <a href="./register.html" class="btn btn-sm mr-2 btn-primary border-dark" role="button"><span class="btn-text">Preview</span></a> </div> </div> </div> </div> </div> </div> </section> <!-- Hero --> <section class="section section-lg bg-secondary overflow-hidden z-2"> <div class="container z-2"> <div class="row justify-content-center pt-6 pt-md-5 pb-0 mb-2"> <div class="col-12 col-xl-8 mb-5"> <div class="card card-secondary"> <div class="card-header text-center"> <span>Windows 95 UI Kit</span> </div> <div class="card-body"> <p class="card-text">Tired of all the new design trends? Fly back in time and use this free <span class="text-italic">Windows 95 User Interface Kit</span> to create awesome retro websites. It is based on the latest Bootstrap 4 Framework and you can download it for free by creating an account at <a href="https://themesberg.com/register" target="_blank">Themesberg.com</a>.</p> <div class="text-center"> <a href="https://themesberg.com/product/ui-kit/windows-95-ui-kit" target="_blank" class="btn btn-sm mr-2 btn-primary border-dark" role="button"><span class="btn-text">Free download</span></a> </div> </div> </div> </div> <div class="col-12 col-xl-8"> <div class="card card-tertiary"> <div class="card-header"> <span>Themesberg</span> </div> <div class="card-body"> <p class="card-text">Brought to you by <a href="https://themesberg.com" target="_blank">Themesberg.com</a>. Join our community for awesome products:</p> <div class="d-flex flex-wrap mt-3"> <a href="https://themesberg.com" target="_blank" class="btn btn-sm mb-2 mb-lg-0 mr-2 btn-primary border-dark" role="button"><span class="btn-text">Themesberg</span></a> <a href="https://github.com/themesberg" target="_blank" class="btn btn-sm mb-2 mb-lg-0 mr-2" role="button"><span class="btn-text">Github</span></a> <a href="https://twitter.com/themesberg" target="_blank" class="btn btn-sm mb-2 mb-lg-0 mr-2 btn-primary" role="button"><span class="btn-text">Twitter</span></a> <a href="https://www.facebook.com/themesberg/" target="_blank" class="btn btn-sm mb-2 mb-lg-0 mr-2 btn-primary" role="button"><span class="btn-text">Facebook</span></a> <a href="https://dribbble.com/themesberg" target="_blank" class="btn btn-sm mb-2 mb-lg-0 btn-primary" role="button"><span class="btn-text">Dribbble</span></a> </div> </div> </div> </div> </div> </div> </section> </main> <footer> <nav id="navbar-footer" class="navbar navbar-main navbar-expand-lg navbar-dark justify-content-between navbar-footer"> <ul class="navbar-nav navbar-nav-hover flex-row align-items-center"> <li class="nav-item"> <a href="index.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📺 Start</span> </a> </li> <li class="nav-item"> <a href="docs/introduction.html" class="nav-link" role="button"> <span class="nav-link-inner-text">📕 Docs</span> </a> </li> <li class="nav-item"> <a href="login.html" class="nav-link" role="button"> <span class="nav-link-inner-text">Login</span> </a> </li> <li class="nav-item"> <a href="register.html" class="nav-link" role="button"> <span class="nav-link-inner-text">Register</span> </a> </li> </ul> <div class="time text-center"> <span class="time text-uppercase">1:47 PM</span> </div> </nav> </footer> <!-- Core --> <script src="node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- pixel JS --> <script src="js/w95.js"></script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10