<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.footer-fixed {
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<!-- ***************************navbar code******************* -->
<div class="navbar-fixed">
<nav>
<div class="row">
<div class="col s1 l1 m1 ">
<a href="#" class=" left"> <i class="material-icons">arrow_back</i> </a>
</div>
<div class="col s9 m9 l9">
<h5>Settings</h5>
</div>
</div>
</nav>
</div>
<main> <br>
<div class="row container">
<a href="">
<div class="card">
<div class="col s1 black-text">
<i class="material-icons">person</i>
</div>
<div class="col s11 black-text">
Follow and invite firends
</div>
</div>
</a>
</div>
<div class="row container">
<a href="">
<div class="card">
<div class="col s1 black-text">
<i class="material-icons">person</i>
</div>
<div class="col s11 black-text">
Follow and invite firends
</div>
</div>
</a>
</div>
<div class="row container">
<a href="">
<div class="card">
<div class="col s1 black-text">
<i class="material-icons">person</i>
</div>
<div class="col s11 black-text">
Follow and invite firends
</div>
</div>
</a>
</div>
<div class="row container">
<a href="">
<div class="card">
<div class="col s1 black-text">
<i class="material-icons">person</i>
</div>
<div class="col s11 black-text">
Follow and invite firends
</div>
</div>
</a>
</div>
</main>
<body >
<!-- *************************footer code**************************** -->
<div class="footer-fixed">
<footer>
<nav>
<div class="nav-wrapper">
<ul class="justify" style="display: table; margin: 0 auto;">
<li style=" width: 85px;"><a href="index.html"><i class="material-icons">home</i></a></li>
<li style=" width: 85px;"><a href="search.html"><i class="material-icons">search</i></a></li>
<li style=" width: 85px;"><a href="camera.html"><i class="material-icons">add</i></a></li>
<li style=" width: 85px;"><a href=""><i class="material-icons">favorite_border</i></a></li>
<li><a href="profile.html"><i class="material-icons"><img src="img/mufazmi.png" style="width: 20px;" class="circle responsive-img" alt=""></i></a></li>
</ul>
</div>
</nav>
</footer>
</div>
</body>
</html>