Certifik8/constants/template.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Template</title>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Roboto&display=swap');
main{
position: relative;
width: 1096px;
height: 748px;
font-family: 'Roboto', sans-serif;
background-image: url(
https://cdn.discordapp.com/attachments/1034883038586351647/1049011662566465546/template.png);
}
#texto_principal{
position: absolute;
top: 250px;
left: 148px;
width: 800px;
text-align: justify;
font-size: 18px;
font-weight: 700;
}
.nome_participante,
.cpf_participante,
.nome_evento,
.nome_prof,
.nome_dep,
.cargo_participante,
.frequencia_participante{
text-transform: uppercase;
}
#local_data{
position: absolute;
top: 400px;
right: 148px;
font-size: 22px;
font-weight: 700;
}
#informacoes_adicionais{
position: absolute;
top: 470px;
width: 1096px;
}
.texto_adicional{
margin: 0;
font-size: 22px;
text-align: center;
font-weight: 700;
}
p.nao_negrito{
font-size: 20px;
font-weight: 400;
}
</style>
</head>
<body>
<main>
<p id="texto_principal">Certificamos que, <span class="nome_participante"></span>, CPF
<span class="cpf_participante"></span>, participou do
evento de extensão <span class="nome_evento"></span>, com carga horária de
<span class="carga_hor"></span>
hora(s), coordenado pelo(a) Professor(a) <span class="nome_prof"></span>, promovido
pelo(a) <span class="nome_dep"></span>, na função de
<span class="cargo_participante"></span>,
com frequência <span class="frequencia_participante"></span>%.
A atividade foi realizada no período de <span class="data_inicial"></span> a
<span class="data_final">***</span>.
</p>
<p id="local_data">Brasília, <span class="data_emissao"></span></p>
<div id="informacoes_adicionais">
<p class="texto_adicional"><span class="nome_decano"></span></p>
<p class="texto_adicional nao_negrito">Decano(a) de Extensão</p>
</div>
</main>
</body>
</html>