<html>
<body>
  
  <div class = "topbar">
    <div> Microsoft Teams </div>
    <div class = "searchbar"> Search </div>
  </div>
  
  <div class = "main">
    <div class = "apps">
      <H3> Apps </H3>
      <div class = "searchbar2"> Search all apps </div>
      
      <div class = "app-parent-sub">
      <div class = "appsub home"> <b>Home</b> </div>  
      <div class = "appsub"> Built for your org </div>
      </div>
      
      <div class = "app-parent-sub">
      <div class = "appsub"> <b>Featured</b> </div> 
      <div class = "appsub"> Popular on Teams </div> 
      <div class = "appsub"> Top picks </div> 
      <div class = "appsub"> What's new </div> 
      </div>
      
      <div class = "app-parent-sub">
        <div class = "appsub"> <b>Categories</b> </div> 
      <div class = "appsub"> Education </div> 
      <div class = "appsub"> Productivity </div> 
      <div class = "appsub"> Image & Video Galleries </div> 
      <div class = "appsub"> Project Management </div> 
      <div class = "appsub"> Utilities </div> 
      <div class = "appsub"> Social </div> 
      <div class = "appsub"> See More </div> 
      </div>
        
      <div class = "app-parent-sub">
        <div class = "appsub"> <b>Capabilities</b> </div> 
      <div class = "appsub"> Personal Apps </div> 
      <div class = "appsub"> Bots </div> 
      <div class = "appsub"> Tabs </div> 
      <div class = "appsub"> Connectors </div> 
      <div class = "appsub"> Messaging </div> 
      <div class = "appsub"> Meetings </div> 
      </div>
        
      <div class = "appsub"> Submit to app catalog </div> 
      <div class = "appsub"> Upload a custom app </div> 
  </div>
    <div class = "mainbody">
      <div class = "row1">
        <div class = "text">
          <H2> Get more done with apps!</H2>
          <p> Simplify workflows, share data, or find new ways to work smarter together. </p>
          <p1> Learn about apps in Teams. </p1>
        </div>
        <img class = "elephant1" src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" style="width:174px; height: 80px;">
        <img class = "elephant2" src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" style="width:174px; height: 80px;">
        <img class = "elephant1" src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" style="width:174px; height: 80px;">
        <img class = "elephant2" src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" style="width:174px; height: 80px;">
      </div>
      <div class = "row2">
        <p2> <b>Built for your org</b> </p2>
        <div class = "grids">
            <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          </div>
        </div>
      <div class = "row2">
        <p2><b> What's new </b></p2>
        <div class = "grids">
            <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          </div>
        </div>
      <div class = "row2">
        <p2> <b>All Apps</b> </p2>
        <div class = "grids">
            <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm7mD3fFiVJ7haQhco81PLCTj4RqgPVxdkhA&usqp=CAU" style = "width: 22%; height: 115px">
          </div>
        </div>
      </div>
    </div>
  </div>
    </div>
  </div>
</body>
</html>
.topbar {
  display: flex;
  flex-direction: row;
  background-color: navy;
  color: white;
  padding: 10px
}
body {
  background-color: whitesmoke;
  font-family: arial;
}

.main {
 display: flex;
  flex-direction: row;
}

.searchbar{
  background-color: lightblue;
  margin: 0px 50px;
  width: 65%;
  padding: 10px;
  border-radius: 5px;
}

.appsub {
  font-family: arial;
  padding: 4px
}
.searchbar2 {
  padding: 10px 50px 10px 10px;
  color: grey;
  border-radius: 5px;
  background-color: white;
  display: inline;
  font-size: 13px;
  
}

.app-parent-sub{
  margin: 0px 0px 20px 0px
}

.home {
  color: navy;
  margin: 20px 0px 0px 0px
}

p1 {
  font-size: 10px;
}

.row1 {
  display: flex;
  flex-direction: row;
}

.row2 {
  display: flex;
  flex-direction: column;
  margin: 15px 0px 0px 0px
}

p2 {
  font-size: 12px
}

.elephant1 {
  position: relative;
  top: 35px
}

.mainbody {
  margin: 10px 0px 0px 0px
}

.grids {
  margin: 10px 0px 0px 0px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.