
<!DOCTYPE html>
<html>
<head>
<title>Certificate</title>

<link rel="stylesheet" href="styles/styles-print.css">

<style>

.container {
  position: relative;
  text-align: center;
  color:rgb(83, 171, 201);

  width: 1028px; 
  margin: 0 auto;
  margin-top: 30px;

  border: 1px solid #b9d0e7;
  box-shadow: 0 12px 23px rgba(59, 72, 125, 0.2); 

}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.qr-code {
  position: absolute;
  bottom: 13px;
  right: 17px;
}


.course-learner {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: cursive;
  text-align: center;
  font-size: 3.40em;
  color:rgb(219, 164, 92);
}

.course-prologue {
  position: absolute;
  top: 64%;
  left: 55%;
  transform: translate(-65%, -250%);
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.30rem;
 }

.course-name {
  position: absolute;
  top: 64%;
  left: 55%;
  transform: translate(-65%, -140%);
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.30rem;
 }

 .course-date {
  position: absolute;
  top: 64%;
  left: 55%;
  transform: translate(-65%, -30%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.30rem;
 }

 .course-location {
  position: absolute;
  top: 64%;
  left: 55%;
  transform: translate(-95%, 91%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.30rem;
 }

  


</style>
</head>

<body style="background-color: aliceblue;">

<div class="container">
  <img src="images/background-cert.jpg" alt="certification" style="width:100%;">
  <div class="bottom-left" style="color:red"></div>
  <div class="top-left" style="color:red"></div>
  <div class="top-right" style="color:red"></div>
  <div class="qr-code"><img src="images/qr-code.jpg" style="width: 78px;"></div>

  <div class="course-learner">Aaron E. Walsh</span></div>
  <div class="course-prologue">who attended the training course on</div>
  <div class="course-name">"Ransomware Investigation"</div>
  <div class="course-date">18<sup>th</sup>&ndash;19<sup>th</sup> September 2024</div>
  <div class="course-location">Doha, Qatar</div>
</div>

</body>
</html> 
