
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="custom.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600" rel="stylesheet" type="text/css">
</head>



<style>
    body{
        
    font-family: 'Raleway', sans-serif;

}
.main-section{
   width: 950px;

    margin-left: -70px;
    text-align: center;
    padding: 0px 5px;
}
.dashbord{
    width:32%;
    display: inline-block;
    background-color:#34495E;
    color:#fff;
    margin-top: 50px; 
}
.icon-section i{
    font-size: 30px;
    padding:10px;
    border:1px solid #fff;
    border-radius:50%;
    margin-top:-25px;
    margin-bottom: 10px;
    background-color:#34495E;
}



    
    }
.icon-section p{
    margin:0px;
    font-size: 20px;
    padding-bottom: 10px;
}
.detail-section{
    background-color: #2F4254;
    padding: 5px 0px;
}
.dashbord .detail-section:hover{
    background-color: #5a5a5a;
    cursor: pointer;
}
.detail-section a{
    color:#fff;
    text-decoration: none;
}
.dashbord-green .icon-section,.dashbord-green .icon-section i{
    background-color: #16A085;
}
.dashbord-green .detail-section{
    background-color: #149077;
}
.dashbord-orange .icon-section,.dashbord-orange .icon-section i{
    background-color: #F39C12;
}
.dashbord-orange .detail-section{
    background-color: #DA8C10;
}
.dashbord-blue .icon-section,.dashbord-blue .icon-section i{
    background-color: #2980B9;
}
.dashbord-blue .detail-section{
    background-color:#2573A6;
}
.dashbord-red .icon-section,.dashbord-red .icon-section i{
    background-color:#E74C3C;
}
.dashbord-red .detail-section{
    background-color:#CF4436;
}
.dashbord-skyblue .icon-section,.dashbord-skyblue .icon-section i{
    background-color:#8E44AD;
}
.dashbord-skyblue .detail-section{
    background-color:#803D9B;
}
</style>

<!--Body Starts Here--><br><br><br>
      <center><h2>Dashboard</h2></center>
        <div class="main-section">
        <div class="dashbord">
            <div class="icon-section">
                <i class="fa fa-users" aria-hidden="true"></i><br>
                <small>Students</small>
                <p>25</p>
                <small>Students</small>
            </div>
            <div class="detail-section">
                <a href="#">More Info </a>
            </div>
        </div>
        <div class="dashbord dashbord-green">
            <div class="icon-section">
                <i class="fa fa-user" aria-hidden="true"></i><br>
                <small>Parents</small>
                <p> 25</p>
                <small>Students</small>
            </div>
            <div class="detail-section">
                <a href="#">More Info </a>
            </div>
        </div>
        <div class="dashbord dashbord-orange">
            <div class="icon-section">
                <i class="fa fa-bell" aria-hidden="true"></i><br>
                <small>Class</small>
                <p>9 New</p>
                <small>Students</small>
            </div>
            <div class="detail-section">
                <a href="#">More Info </a>
            </div>
        </div>
        <div class="dashbord dashbord-blue">
            <div class="icon-section">
                <i class="fa fa-question-circle" aria-hidden="true"></i><br>
                <small>Questions</small>
                <p>30</p>
                <small>Students</small>
            </div>
            <div class="detail-section">
                <a href="#">More Info </a>
            </div>
        </div>
        <div class="dashbord dashbord-red">
            <div class="icon-section">
                <i class="fa fa-gamepad" aria-hidden="true"></i><br>
                <small>Activites</small>
                <p>5</p>
                <small>Students</small>
            </div>
            <div class="detail-section">
                <a href="#">More Info </a>
            </div>
        </div>
        <div class="dashbord dashbord-skyblue">
            <div class="icon-section">
                <i class="fa fa-film" aria-hidden="true"></i><br>
                <small>Records</small>
                <p>6</p>
                <small>Students</small>
            </div>
            <div class="detail-section">
                <a href="#">More Info </a>
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
</body>
        <!--Body Ends Here-->