Creating the Start Menu

Make sure you have done the base files first

First, create the center and startmenu div

<div class="center">
  <div class="startmenu">
    
  </div>
</div>

Now style the css so that it is centered and blurred

.center{ /* centers the div */
  display: flex;
  justify-content: center;
}
.startmenu{
  position: absolute; /* makes it movable */
  backdrop-filter: blur(20px); /* blurs the background */
  background-color: rgba(255,255,255,.80); /* makes the background white */
  bottom: 55px; /* positions it */
  height: 90%;
  width: 625px;
  border-radius: 8px; /* rounds the corners */
  z-index: 11000; /* puts it on top of everything */
}

It should look like this:

Next, we need to add the start menu contents. First add the divs

<div class="sTop">
  <div class="pinnedlabel"> <!-- Shows the text "Pinned" -->
    Pinned
  </div>
  <div class="allapps"> <!-- Shows the allapps button -->
    <img src="img/allapps.png">
  </div>
</div>

Now add the css

.sTop{
   margin-top: 25px;
   margin-bottom: 25px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.pinnedlabel{
  margin-top: -5px;
  margin-left: 45px;
}

.allapps img{
  height: 20px;
  border-radius: 4px; /* rounds the corners */
  margin-right: 45px;
}

Next, add the start icons and center them by creating a grid in the css and html

HTML:

<div class="sAppscontainer">
  <div class="sApps">
    
  </div>
</div

CSS:

.sAppscontainer{ /*centers the icons with a display:grid */
  display: grid;
  justify-items: center;
}

.sApps{
  position: absolute;
  display: grid; /* makes it a grid */
  grid-template-columns: auto auto auto auto auto auto; /* 6 columns */
}

Now put icons inside of the sApps div. Here is the format for each one. Remember there are more app images in the img folder.

<div class="starticons">
  <img src="img/edge.png"> <!-- App image -->
  <p class="startlabels" align="center"> Microsoft Edge </p> <!-- Visible App Name -->
</div>

Next add the css for it

.starticons img{
  display: block;
  margin: 0 auto;
  margin-top: 12px;
  width: 30px;
}

.starticons{
  width: 100px;
  font-size: 13px;
}

.starticons:hover{
  background: white;
  width: 100px;
  border-radius: 5px;
}

.startlabels{
  margin-top: 3px
}

Now it should look something like this:

Now move on to create the taskbar