The First Web Windows 10 Style By Sachin Yadav Production

How to make windows 10 start menu bar using Html , CSS , javascript, and bootstrap.

Introducing the new The First Web Windows 10 Demo for custom web HTML, JavaScript , CSS and Bootstrap. 

Include these CSS Files :

<link href="http://fastlearning.in/controller/css/css_files/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

CSS (Internal CSS) :
This css is used to changing the body layout, background-color, .dropdown-menu is use to remove the box-shadow and add the animation when drop-down menus opened with a up-down animation. CSS Tutorials:  CSS Properties Details

<style type="text/css">
         /*!
         *(http://wwww.fastlearning.in)
         * Copyright 2015 Sachin Yadav Production.
         */
         body{ background-color:#ccc;}
         .main-bg{ background-color:#666; padding-right:3px; padding-top:3px; padding-bottom:3px;}
         .open > .dropdown-menu {
         -webkit-transform: scale(1, 1);
         transform: scale(1, 1);  
         opacity:1;
         }
         .dropdown-menu {
         opacity:.3;
         -webkit-transform-origin: bottom;
         transform-origin: bottom;
         -webkit-animation-fill-mode: forwards;  
         animation-fill-mode: forwards; 
         -webkit-transform: scale(1, 0);
         display: block; 
         transition: all 0.2s linear;
         -webkit-transition: all 0.2s linear;
         box-shadow:none !important;
         }
 </style>

.flmenu CSS 
This class is used to changing the background color of menu bar option.

        .flmenu{
         width: 160px!important;
         height: 100px!important;
         margin:5px;
         display:block !important;
         padding-top:23px;
         color:#f5f5f5;
         border:2px solid transparent;
         }
         .span-icon{ font-size:30px;}
         .flmenu:hover{ background-color:#f5f5f5 !important; cursor:pointer; color:#CCCCCC;border-color:rgba(161,161,161,0.5);}
         .flmenu1{
         background-color: #000000;
         }
         .flmenu2{
         background-color: #00B159;
         }
         .flmenu3{
         background-color: #00AEDB;
         }
         .flmenu4{
         background-color: #F37735;
         }
         .flmenu5{
         background-color: #EC098C;
         }
         .flmenu6{
         background-color: #314E6C;
         }
         .flmenu7{
         background-color: #44A5AC;
         }
         .flmenu8{
         background-color: #297E83;
         }
         .flmenu9{
         background-color:#CC3366;
         }
         .flmenu10{
         background-color: #C9312C;
         }
         .flmenu11{
         background-color:#6699CC;
         }
         .flmenu12{
         background-color: #7C4199;
         }

Start Button CSS Code : 

.start-btn{
         padding: 8px 30px;
         border: 0;
         border-radius:1px !important;
         text-transform: uppercase;
         text-decoration: none;
         transition: 0.2s ease;
         box-shadow:0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
         outline: none!important;}
         .start-btn:hover{ box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)}
         .start-btn:active{}
         #startmenu{width:1050px !important;background:none; !important;position: absolute; border:none;}

Volume & Time CSS Code :

.time{ font-size:25px; color:#f5f5f5; float:right;}
         .volume {
         transform: rotate(-90deg);
         }
         .volume:before {
         content: " ";
         }
         .volume input[type=range] {
         outline: none;
         -webkit-appearance: none;
         padding: 2px;
         background-color:#fff;
         border:10px solid rgba(0,0,0,0.4);
         position: relative;
         margin: 0;
         cursor: pointer;
         }
         .volume input[type=range]::-webkit-slider-thumb {
         -webkit-appearance: none;
         background:#66CCCC;
         height: 15px;
         width: 15px;
         border-radius: 10%;
         }
         .volume input[type=range]::-moz-range-track {
         border: none;
         background:none;
         }
         .volume input[type=range]::-moz-range-thumb {
         background:#66CCCC;
         height: 20px;
         width: 20px;
         border-radius: 10%;
         }
         .volume input[type=range]::-ms-fill-lower, .volume input[type=range]::-ms-fill-upper {
         background: transparent;
         }
         .volume input[type=range]::-ms-track {
         height: 18px;
         border: none;
         background:none;
         margin: 0;
         }
         .volume input[type=range]::-ms-thumb {
         background:#66CCCC;
         height: 20px;
         width: 20px;
         border-radius: 10%;
         }
         .volume-settings{ margin-top:-100px !important; position:fixed;}
         .volume-none{ background:none !important; border:none !important; margin-left:50px;}

HTML Code : Option Menus 

<div id="context_menu" class="right-click-menu">
         <div class="list-group">
            <a href="#" class="list-group-item">View <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
            <a href="#" class="list-group-item">Sort By <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
            <a href="#" class="list-group-item">Refresh</a>
            <hr/>
            <a href="#" class="list-group-item">Paste</a>
            <a href="#" class="list-group-item">Paste shortcut</a>
            <a href="#" class="list-group-item">Undo Delete</a>
            <hr/>
            <a href="#" class="list-group-item">Graphics Properties...</a>
            <a href="#" class="list-group-item">Graphics Options <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
            <hr/>
            <a href="#" class="list-group-item">New <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
         </div>
      </div>