<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="quiz-card"> <span> -1</span> <div class="top-cat"> Online test </div> <div class="quiz-but"> <h5> <a href="https://studyshoot.com/quizzes/free-online-german-language-test-level-a1-1/">START NOW</a> </h5> </div> </div> </div> <div class="col-lg-4"> <div class="quiz-card"> <span> -2 </span> <div class="top-cat"> Online test </div> <div class="quiz-but"> <h5> <a href="https://studyshoot.com/quizzes/free-online-german-language-test-level-a1-2-2/"> START NOW </a> </h5> </div> </div> </div> <div class="col-lg-4"> <div class="quiz-card"> <span> -3 </span> <div class="top-cat"> Online test </div> <div class="quiz-but"> <h5> <a href="https://studyshoot.com/quizzes/free-online-german-language-test-level-a2/">START NOW</a> </h5> </div> </div> </div> </div> </div>

.quizz-header { height: 120px; opacity: 1; visibility: visible; background-color: #f99071; background-repeat: repeat; background-position: center bottom; } .quizz-header h2{ text-transform: uppercase; padding-top: 40px; text-align: center; line-height: 40px; font-weight: 500; font-style: normal; color: #fff; font-size: 35px; } .quiz-content h3{ font-size: 30px; line-height: 45px; color: black; text-align: center; font-weight: normal; margin-bottom: 20px; padding-top: 20px; } .quiz-content hr { border-style: solid; border-bottom-width: 5px; border-color: rgb(255, 196, 0); width: 30px; margin: 0px auto; } .quiz-content h4{ text-align: left; font-size: 22px; font-weight: 600; } .quiz-content p{ text-align: left; font-size: 18px; font-weight: normal; } .quiz-card{ height: auto; background-color: #3abce4; color: #ffffff; padding-top: 20px; text-align: center; } .top-cat{ position: relative; background-color: white; color: #3abce4; font-size: 15px; z-index: 1; font-weight: 700; line-height: 34px; } .quiz-card span{ font-size: 80px; text-align: center; color: white; } .quiz-card span:hover{ font-size: 80px; text-align: center; color: #ed5b44; } .quiz-but{ color: white; font-size: 15px; font-weight: normal; border: none; background: #ed5b44; height: 80px; padding-bottom: 20px; padding-top: 30px; } .quiz-but a{ text-decoration: none; color: white; } .quiz-but:hover{ text-decoration: none; color: white; -moz-box-sizing: border-box; box-sizing: border-box; background: black;top: -100%; transition: all .3s; cursor: pointer; }