Frontend - HTML Files-CodePudding

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  position: relative;
}

/*---------------------Dashboard-----------------------*/
.dashboard{
  position: relative;
  width: 100%;
  min-height: 100vh;
}
/*--------------------Dashboard Sidebar Begin-----------------------*/
.dashboard-sidebar{
  position: fixed;
  width: 50px;
  min-height: 100vh;
  background-color: #2E86C1;
  color: white;
  padding: 15px 6px;
}

.dashboard-sidebar .dashboard-sidebar-top{
  position: relative;
  width: 100%;
  min-height: 100vh;
  justify-content: center;
  display: flex;
}

.dashboard-sidebar-top i{
  font-size: 17px;
}
/*-----------------------Dashboard Sidebar End--------------------*/


/*--------------------Dashboard Main Content Start----------------------*/

.dashboard-main-content{
  position: absolute;
  width: calc(100% - 50px);
  height: 100vh;
  left: 50px;
  padding: 10px 15px;
}



.dashboard-main-content .dashboard-app{
  position: relative;
  background-color: white;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.dashboard-main-content .dashboard-app:hover{
  background-color: #EBEDEF;
}


.dashboard-main-content .dashboard-app i{
  font-size: 30px;
  color: #2874A6
}

.app-name{
  font-size: 12px;
  font-family: tahoma, sans-serif;
  color: #2874A6
}



/*--------------------Dashboard Main Content End----------------------*/

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Dashboard</title>
  <link rel="stylesheet" href="dashboard.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>

    <div class="dashboard"><!--Dashboard begin-->
    <div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
      <div class="dashboard-sidebar-top">
        <i class="bx bxs-dashboard"></i>
      </div>
    </div><!--Dashboard sidebar end-->
    <div class="dashboard-main-content"><!--Dashboard contents begin-->
      <div class="dashboard-app"><!--App begin-->
        <i class="bx bx-laptop"></i>
        <div class="app-name">
          <span>Begin Design</span>
        </div>
      </div><!--App end-->
    </div>  <!--Dashboard contents end-->
    </div><!--Dashboard end-->
    <script src="script.js"></script>
  </body>
</html>

I have the following dashboard layout. The dashboard has the Begin Design dashboard app which will have many sub components of its own and will have a separate html file called begin-design.html. When the use clicks on it, it will take the user to the design app components. My question is, how can I go about bringing thebegin-design.html app into the dashboard.html file rather than writing the entire begin-design.htmlcomponents in the dashboard.html file? I would like to keep all the components in seperate html files and connect eachother together.

****HTML****
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Dashboard</title>
  <link rel="stylesheet" href="dashboard.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>

    <div class="dashboard"><!--Dashboard begin-->
    <div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
      <div class="dashboard-sidebar-top">
        <i class="bx bxs-dashboard"></i>
      </div>
    </div><!--Dashboard sidebar end-->
    <div class="dashboard-main-content"><!--Dashboard contents begin-->
      <div class="dashboard-app"><!--App begin-->
        <i class="bx bx-laptop"></i>
        <div class="app-name">
          <span>Begin Design</span>
        </div>
      </div><!--App end-->
    </div>  <!--Dashboard contents end-->
    </div><!--Dashboard end-->
    <script src="script.js"></script>
  </body>
</html>

CodePudding user response：

<a href="begin-design.htmk"><i class="bx bx-laptop"></i>
    <div class="app-name">
      <span>Begin Design</span>
    </div></a>