Struggling to create a certificate using HTML and CSS, I am facing issues with aligning text and images. Can anyone provide assistance in achieving the design shown in the image above?
Here is my current code:
<!Doctype>
<html>
<head>
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.l1
{
position: absolute;
top: 100px;
left: 200px;
}
.l2
{
position: absolute;
top: 100px;
left: 200px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="l3.jpg" height="600" class="l3"/>
<img src="l1.png" style = "align:left" width="100" height="100" class="l1"/>
<img src="l2.png" style = "align:right" width="100" height="100" class="l2">
<div class="centered" style= "color: lightblue" >This is to certify that the building described herein has been inspected and confirms substantially to the approved drawings & to the requirements of all the applicable codes, laws, rules and regulations that were in place at the time of the issue of this certificate.</div>
</div>
</body>
</html>