<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dash.css">
    <style>
        .navbab{
            width: 1200px;
	        background-color: #f2f2f2;
            border-bottom: 1px solid #ccc;
            position: fixed;
            margin: auto;
            right: 0px;

        }
        html{
            width:100%;
        }
        .boy{
            color: rgb(250, 250, 249);
            text-align: justify;
            font-size: 30px;
            align-content: center;
        }
        .icon{
            color:cornsilk;
        }
        .carding{
            margin-top: 0px;
        }
        #iiit {
	            background-image: url("https://images.unsplash.com/photo-1519452635265-7b1fbfd1e4e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
	            max-width: 600vh;
	            height: 70vh;
	            margin-top: -1rem;
                background-size: cover;
	            background-position: center;
	            background-repeat: repeat;
                right:0px;
                left:0%;
                }
        body {
	            background-image: linear-gradient(to left,#cfb29e,#86561f);
	            overflow-x: hidden;
            }

</style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbab nav-fill w-100">
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <i class="fas fa-university fa-6x icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li><p class="lead mb-3 boy"><b>Welcome</b> <%= user.name %></p></li>
          </ul>
          <a href="/users/logout" class="btn btn-danger">Logout</a>
        </div>
      </nav>
      <div class="jumbotron jumbotron-fluid" id="iiit">
        </div>

      
        <!-- Card Row-->
        <div class="row">
          <div class="card-deck text-center" style="padding: 5px;" id="grp1">
             
             <div class="card ml-3">
              <img src="https://images.unsplash.com/photo-1520004434532-668416a08753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="Clubs">
              <div class="card-body d-flex flex-column justify-content-center">
                <h3 class="card-title font-weight-bold">Quiz 1</h3>
                <a href="/users/index" class="btn btn-secondary mt-auto"><i class="fa fa-trophy"></i> Give the test! </a>
              </div>
            </div>
            
            <div class="card ml-3">
              <img src="https://images.unsplash.com/photo-1520004434532-668416a08753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="Gallery">
              <div class="card-body d-flex flex-column justify-content-center">
                <h3 class="card-title font-weight-bold">Quiz 2</h3>
                <a href="/users/index" class="btn btn-warning mt-auto"><i class="fa fa-trophy"></i> Give the test! </a>
              </div>
            </div>
            
            <div class="card ml-3">
              <img src="https://images.unsplash.com/photo-1520004434532-668416a08753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="Activities and Achievements">
              <div class="card-body d-flex flex-column justify-content-center">
                
                <h3 class="card-title font-weight-bold">Quiz 3</h3>
                <a href="/users/index" class="btn btn-info mt-auto"><i class="fa fa-trophy"></i> Give the test!</a>
              </div>
            </div>      
            
            <div class="card ml-3">
              <img src="https://images.unsplash.com/photo-1520004434532-668416a08753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="Newsletter">
              <div class="card-body d-flex flex-column justify-content-center">
                <h3 class="card-title font-weight-bold">Quiz 4</h3>
                <a href="/users/index" class="btn btn-success mt-auto"><i class="fa fa-trophy"></i> Give the test! </a>
              </div>
            </div>
          </div>
        </div>
</body>
</html>
