hariomkushwaha/nav.html

## nav.html
<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="https://www.betterbuys.com/wp-content/uploads/2016/08/IPM-Global-logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,500&display=swap" rel="stylesheet">
<style>
body {
   background-color: #ffffff;
  /*background: linear-gradient(to bottom, #33cccc -34%, #006699 107%);*/
}
a{
  text-decoration: none;
}

.grid {
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 40px;
  align-items: center;
  margin: 130px ;
  justify-content: center;
  /*border-radius: 20px;*/

}

.mera {
  border: 1px solid #ccc;
  box-shadow: 18px 21px 6px 0px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  /*border: 1px solid black;*/
  border-radius: 20px;
}

.grid > div img {
  max-width: 100%;
}

.grid .text {
  padding: 20px;
  background-color:#000000;
  color:#ffffff;
  /*border-radius: 20px;*/
}


/*ul {
  list-style-type: none;
  margin: -8px;

  overflow: hidden;
  background-color: #333;
}
*/
/*li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #111;
}*/


</style>
</head>
<body>
<!--   <ul>
  <li><a href="{% url 'profill'%}">Home</a></li>
  <li><a href="{% url 'jira'%}">Jira</a></li>
  <li><a href="{% url 'Confluence'%}">Confluence</a></li>
  <li><a href="{% url 'Github'%}">Github</a></li>
  <li><a href="{% url 'mailsearcher'%}">Email</a></li>

  <li style="float:right"><a class="active" href="{% url 'index'%}">Logout</a></li>
</ul> -->
<div class="container">
  <main class="grid">
    <a href="#"><div class="mera">
      <div style="background-image: linear-gradient(to bottom, rgba(0,102,255,0.8), rgba(0,0,0,1));">
      <div style="width: 435px; background-image: url(https://cdn.freebiesupply.com/logos/large/2x/jira-logo-black-and-white.png );background-size: 89%;/*border-radius: 20px;*/
    background-position: center;
  background-repeat: no-repeat;height:250px">
    </div>
  </div>
      <div class="text">
        <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      </div>
    </div></a>
     <a><div class="mera">
      <div style="background-image: linear-gradient(to bottom, rgba(102,0,255,0.8), rgba(0,0,0,1)); ">
      <div style="width: 435px; background-image: url(https://cdn.freebiesupply.com/logos/large/2x/confluence-logo-black-and-white.png);background-size: 89%;
    background-position: center;
  background-repeat: no-repeat;height:250px">
    </div>
  </div>
      <div class="text">
        <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      </div>
    </div></a>
     <a><div class="mera">
      <div style="background-image: linear-gradient(to bottom, rgba(204,204,204,0.8),rgba(102,102,102,0.8), rgba(0,0,0,1));">
      <div style="width: 435px; background-image: url(https://saas.whitesourcesoftware.com/Wss/github/github-logo-white.png);background-size: 89%;
    background-position: center;
  background-repeat: no-repeat;height:250px">
    </div>
  </div>

      <div class="text">
        <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      </div>
    </div></a>
     <a><div class="mera">
      <div style="background-image: linear-gradient(to bottom,rgba(21,131,120,0.8), rgba(0,0,0,1));">
      <div style="width: 435px; background-image: url(https://cfdn.clearvision-cm.com/wp-content/uploads/2018/05/31102732/Bitbucket%402x-white1.png);background-size: 89%;
    background-position: center;
  background-repeat: no-repeat;height:250px">
    </div>
    </div>
      <div class="text">
        <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      </div>
    </div></a>

     <a><div class="mera">
      <div style="background-image: linear-gradient(to bottom, rgba(255, 102, 102,0.8), rgba(0,0,0,1));">
      <div style="font-size:139px;text-align: center;padding: 45px;color: white; font-family: 'Ubuntu', sans-serif;">Mail
    </div>
  </div>
      <div class="text">
        <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      </div>
    </div></a>


      <a><div class="mera">
        <div style="background-image: linear-gradient(to bottom, rgba(0, 153, 204,0.8), rgba(0,0,0,1));">
      <div style="font-size:108px;text-align: center;padding: 61px;width: 313px; font-family: 'Ubuntu', sans-serif;color: white;">
        Logout
    </div>
  </div>
      <div class="text">
        <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      </div>
    </div></a>
  </main>
</div>
</body>
</html>