<div class="col-sm-3" *ngFor="let result of mockResults">
<!-- cards -->
<div class="card" style="width: 410px; justify-content: center;">
<!--<img class="card-img-top" src="java.png" alt="java" style="width: 100px; height: auto; margin-left: auto; margin-right: auto; padding-top: 15px; box-shadow: 3px;">-->
<div class="card-body">
<h5 class="card-title">{{result.title}}</h5>
<p class="card-text" style="text-align: left;">This exercise provides a spimle Java IO Test. And some aditional informations about this course</p>
</div>
<div class="card-body">
<!-- card rating-->
<div style="float: left; width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<p class="card-text">Rating</p>
</div>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div> <!-- card rating end-->
<!-- card bookmark-->
<div style="float: left; width: 100%;">
<div style="float: left;">
<p class="card-text">Bookmark</p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1"></label>
</div>
</div> <!-- card bookmark end-->
</div>
<div class="card-body" style="text-align: center;">
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#myModal">Open course</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<!--<img class="card-img-top" src="java.png" alt="java" style="width: 50px; height: auto; float: left;">-->
<h4 class="modal-title">Java IO Tests</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<p style="padding-bottom: 15px; text-align: justify;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="row">
<div class="col-6 col-md-4" style="margin-bottom: 15px;">
<p style="text-align: left;"><strong>Details</strong><hr></p>
<!-- modal rating-->
<div style="float: left; width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<p class="card-text">Rating</p>
</div>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div> <!-- modal rating end-->
<!-- modal bookmark-->
<div style="float: left; width: 100%; margin-bottom: 25px;">
<div style="float: left;">
<p class="card-text">Bookmark</p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1"></label>
</div>
</div> <!-- modal bookmark end-->
<button type="button" class="btn btn-outline-secondary" style="display: block; margin-bottom: 5px;" >Show hit details</button>
<button type="button" class="btn btn-outline-secondary" style="display: block;">Show all excerises </br> for this course</button>
</div>
<div class="col-12 col-md-8">
<p style="text-align: left;"><strong>Meta data</strong><hr></p>
<p style="text-align: left;">Program Language: Java
<br>Creator: Michael Breu
<br>Last update: 26.11.2020
<br>License: CCv2</p>
<a href="https://git-scm.com/" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: right;">Git</a>
</div>
<div class="col-6 col-md-4"></div>
<div class="col-12 col-md-8">
<p style="text-align: left;"><strong>Export options</strong><hr></p>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Export ArtTEMIS</a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Export LaTeX</a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Download file</a>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- Modal end-->
</div>
</div>
</div> <!-- card end-->
</div> <!-- col-sm-3 end -->