Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Negative Media Web Search</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="grid-container">
    <h1>Negative Media Search</h1>

    <form class="material-form">
        <h3>Please fill the client's details</h3>
        <label class="pure-material-textfield-outlined">
            <input id="name" placeholder=" " required>
            <span>Name</span>
        </label>

        <label class="pure-material-textfield-outlined">
            <input id="email" placeholder=" " type="email">
            <span>E-mail</span>
        </label>

        <label class="pure-material-textfield-outlined">
            <input id="phone" placeholder=" " type="text">
            <span>Phone</span>
        </label>

        <label class="pure-material-textfield-outlined">
            <input id="city" placeholder=" " type="text">
            <span>City</span>
        </label>

        <label class="pure-material-textfield-outlined">
            <input id="date-of-birth" placeholder=" " type="text">
            <span>Date of Birth</span>
        </label>

        <button class="pure-material-button-contained">Convert to PDF</button>

        <div class="resources">
            <a href="#">Download Resources</a>
        </div>

        <div class="status">
            <h4>PDF created successfully.</h4>
        </div>

        <pre class="raw-data">No Data</pre>
    </form>
</div>

</body>
</html>