Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Integrate Bootstrap 4 Template in Django
- Loading branch information
1 parent
361b0ea
commit b8a0f03
Showing
14 changed files
with
23,054 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
|
|
||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
|
|
||
| <title>Contact Management</title> | ||
|
|
||
| <!-- Custom fonts for this template--> | ||
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> | ||
|
|
||
| <!-- Custom styles for this template--> | ||
| <link href="css/sb-admin-2.min.css" rel="stylesheet"> | ||
|
|
||
| </head> | ||
|
|
||
| <body id="page-top"> | ||
|
|
||
| <!-- Page Wrapper --> | ||
| <div id="wrapper"> | ||
|
|
||
| <!-- Sidebar --> | ||
| <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> | ||
|
|
||
| <!-- Sidebar - Brand --> | ||
| <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#"> | ||
| <div class="sidebar-brand-icon rotate-n-15"> | ||
| <i class="fas fa-address-card"></i> | ||
| </div> | ||
| <div class="sidebar-brand-text mx-3">Contact <sup>Management</sup></div> | ||
| </a> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider my-0"> | ||
|
|
||
| <!-- Nav Item - Dashboard --> | ||
| <li class="nav-item active"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-tachometer-alt"></i> | ||
| <span>Dashboard</span></a> | ||
| </li> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider my-0"> | ||
|
|
||
| <!-- Nav Item - Companies --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-chart-area"></i> | ||
| <span>Companies</span></a> | ||
| </li> | ||
|
|
||
| <!-- Nav Item - Contact --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-table"></i> | ||
| <span>Contact</span></a> | ||
| </li> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider my-0"> | ||
|
|
||
| <!-- Nav Item - Profile --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-user"></i> | ||
| <span>Profile</span></a> | ||
| </li> | ||
|
|
||
| <!-- Nav Item - Logout --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-sign-out-alt"></i> | ||
| <span>Logout</span></a> | ||
| </li> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider d-none d-md-block"> | ||
|
|
||
| </ul> | ||
| <!-- End of Sidebar --> | ||
|
|
||
| <!-- Content Wrapper --> | ||
| <div id="content-wrapper" class="d-flex flex-column"> | ||
|
|
||
| <!-- Main Content --> | ||
| <div id="content"> | ||
|
|
||
| <!-- Begin Page Content --> | ||
| <div class="container-fluid"> | ||
|
|
||
| <!-- Page Heading --> | ||
| <div class="d-sm-flex align-items-center justify-content-between mb-4 mt-4"> | ||
| <h1 class="h3 mb-0 text-gray-800">Dashboard</h1> | ||
| <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a> | ||
| </div> | ||
|
|
||
| <!-- Main Content Here --> | ||
| <div class="row"> | ||
|
|
||
| <!-- Earnings (Monthly) Card Example --> | ||
| <div class="col-xl-3 col-md-6 mb-4"> | ||
| <div class="card border-left-primary shadow h-100 py-2"> | ||
| <div class="card-body"> | ||
| <div class="row no-gutters align-items-center"> | ||
| <div class="col mr-2"> | ||
| <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Companies</div> | ||
| <div class="h5 mb-0 font-weight-bold text-gray-800">40,000</div> | ||
| </div> | ||
| <div class="col-auto"> | ||
| <i class="fas fa-calendar fa-2x text-gray-300"></i> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Pending Requests Card Example --> | ||
| <div class="col-xl-3 col-md-6 mb-4"> | ||
| <div class="card border-left-warning shadow h-100 py-2"> | ||
| <div class="card-body"> | ||
| <div class="row no-gutters align-items-center"> | ||
| <div class="col mr-2"> | ||
| <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Contacts</div> | ||
| <div class="h5 mb-0 font-weight-bold text-gray-800">1800</div> | ||
| </div> | ||
| <div class="col-auto"> | ||
| <i class="fas fa-comments fa-2x text-gray-300"></i> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!-- /.container-fluid --> | ||
|
|
||
| </div> | ||
| <!-- End of Main Content --> | ||
|
|
||
| </div> | ||
| <!-- End of Content Wrapper --> | ||
|
|
||
| </div> | ||
| <!-- End of Page Wrapper --> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
|
|
||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
|
|
||
| <title>Contact Management</title> | ||
|
|
||
| <!-- Custom fonts for this template--> | ||
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> | ||
|
|
||
| <!-- Custom styles for this template--> | ||
| <link href="css/sb-admin-2.min.css" rel="stylesheet"> | ||
|
|
||
| </head> | ||
|
|
||
| <body id="page-top"> | ||
|
|
||
| <!-- Page Wrapper --> | ||
| <div id="wrapper"> | ||
|
|
||
| <!-- Sidebar --> | ||
| <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> | ||
|
|
||
| <!-- Sidebar - Brand --> | ||
| <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#"> | ||
| <div class="sidebar-brand-icon rotate-n-15"> | ||
| <i class="fas fa-address-card"></i> | ||
| </div> | ||
| <div class="sidebar-brand-text mx-3">Contact <sup>Management</sup></div> | ||
| </a> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider my-0"> | ||
|
|
||
| <!-- Nav Item - Dashboard --> | ||
| <li class="nav-item active"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-tachometer-alt"></i> | ||
| <span>Dashboard</span></a> | ||
| </li> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider my-0"> | ||
|
|
||
| <!-- Nav Item - Companies --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-chart-area"></i> | ||
| <span>Companies</span></a> | ||
| </li> | ||
|
|
||
| <!-- Nav Item - Contact --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-table"></i> | ||
| <span>Contact</span></a> | ||
| </li> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider my-0"> | ||
|
|
||
| <!-- Nav Item - Profile --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-user"></i> | ||
| <span>Profile</span></a> | ||
| </li> | ||
|
|
||
| <!-- Nav Item - Logout --> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#"> | ||
| <i class="fas fa-fw fa-sign-out-alt"></i> | ||
| <span>Logout</span></a> | ||
| </li> | ||
|
|
||
| <!-- Divider --> | ||
| <hr class="sidebar-divider d-none d-md-block"> | ||
|
|
||
| </ul> | ||
| <!-- End of Sidebar --> | ||
|
|
||
| <!-- Content Wrapper --> | ||
| <div id="content-wrapper" class="d-flex flex-column"> | ||
|
|
||
| <!-- Main Content --> | ||
| <div id="content"> | ||
|
|
||
| <!-- Begin Page Content --> | ||
| <div class="container-fluid"> | ||
|
|
||
| <!-- Page Heading --> | ||
| <div class="d-sm-flex align-items-center justify-content-between mb-4 mt-4"> | ||
| <h1 class="h3 mb-0 text-gray-800">Add Company</h1> | ||
| <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a> | ||
| </div> | ||
|
|
||
| <!-- Main Content Here --> | ||
| <div class="card shadow mb-4"> | ||
| <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> | ||
| <h6 class="m-0 font-weight-bold text-primary">Enter Company</h6> | ||
| <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-success shadow-sm"><i class="fas fa-save fa-sm text-white-50"></i> Save</a> | ||
| </div> | ||
| <div class="card-body"> | ||
| <form> | ||
| <div class="form-row"> | ||
| <div class="form-group col-md-6"> | ||
| <label for="inputEmail4">Email</label> | ||
| <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> | ||
| </div> | ||
| <div class="form-group col-md-6"> | ||
| <label for="inputPassword4">Password</label> | ||
| <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> | ||
| </div> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="inputAddress">Address</label> | ||
| <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="inputAddress2">Address 2</label> | ||
| <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> | ||
| </div> | ||
| <div class="form-row"> | ||
| <div class="form-group col-md-6"> | ||
| <label for="inputCity">City</label> | ||
| <input type="text" class="form-control" id="inputCity"> | ||
| </div> | ||
| <div class="form-group col-md-4"> | ||
| <label for="inputState">State</label> | ||
| <select id="inputState" class="form-control"> | ||
| <option selected>Choose...</option> | ||
| <option>...</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group col-md-2"> | ||
| <label for="inputZip">Zip</label> | ||
| <input type="text" class="form-control" id="inputZip"> | ||
| </div> | ||
| </div> | ||
| <div class="form-group"> | ||
| <div class="form-check"> | ||
| <input class="form-check-input" type="checkbox" id="gridCheck"> | ||
| <label class="form-check-label" for="gridCheck"> | ||
| Check me out | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| <!-- /.container-fluid --> | ||
|
|
||
| </div> | ||
| <!-- End of Main Content --> | ||
|
|
||
| </div> | ||
| <!-- End of Content Wrapper --> | ||
|
|
||
| </div> | ||
| <!-- End of Page Wrapper --> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.