certificate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p1{
    height: 180px;
    width: 300px;
    margin-left: 8%;
    margin-top: 0%;
    color:chocolate;
   
    border-radius: 5%;
}
h1{
    width: 350px;
    font-size:13px;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: chocolate;
    overflow: hidden;
    white-space: nowrap;
    border-right: 5px solid;
    animation: 
    typing 6s steps(50),
    cursor .4s step-end infinite alternate;
}
@keyframes cursor{
    50%{border-color: transparent}
}
@keyframes typing{
    from {width: 0}
}
#cyber{
    height: 170px;
    width: 280px;
    margin-left: 1%;
    margin-top: 2%;
}
#html{
    height: 300px;
    width: 250px;
    margin-left: 11%;
    margin-top: 4%;
}
#sql{
    height: 300px;
    width: 250px;
    margin-left: 11%;
    margin-top: 4%;
}
body{
    background-image: url(images\ \(4\).jpg);
    background-size: 55%;
}
button{
    height: 30px;
    width: 60px;
    background-color: aqua;
    margin-left: 20%;
}
a{
    font-size: medium;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-weight: bolder;
    color: chocolate;
}
    </style>
</head>
<body>
    <form id="form1">
        <h1>THOSE ARE THE CERTIFICATE I HAVE BEEN OFFERED</h1>
        <P id="p1">
<img src="cyber.JPG" id="cyber">
        </P>
        <p id="p2">
<img src="html.JPG" id="html">
        </p>
        <p id="p3">
<img src="sql.JPG" id="sql">
        </p>
    </form>
    <button><a href="./">HOME</a></button>
</body>
</html>