<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> <script src="./js/script.js" defer></script> <link rel="stylesheet" href="./css/style.css"> <title>Frontend Mentor | Intro component with sign up form</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <!-- <style> .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } </style> --> </head> <body> <header> <h1> Learn to code by watching others </h1> <p> See how experienced developers solve problems in real-time. Watching scripted tutorials is great, but understanding how developers think is invaluable. </p> </header> <main> <h2><span>Try it free 7 days</span> then $20/mo. thereafter</h2> <form id="details-form" action="submit" novalidate> <input type="text" name="firstName" id="firstNameInput" placeholder="First Name" autocomplete="given-name" autofocus required> <div class="errorSection"> <!-- hidden --> <p hidden class="errorMessage-styling" id="errorMessage-firstNameInput">First Name cannot be empty</p> </div> <input type="text" name="lastName" id="lastNameInput" placeholder="Last Name" autocomplete="family-name" required> <div class="errorSection"> <!-- hidden --> <p hidden class="errorMessage-styling" id="errorMessage-lastNameInput">Last Name cannot be empty</p> </div> <input type="email" name="email" id="emailInput" placeholder="Email Address" autocomplete="email" required> <div class="errorSection"> <!-- hidden --> <p hidden class="errorMessage-styling" id="errorMessage-emailInput">Looks like this is not an email</p> </div> <input type="password" name="password" id="passwordInput" placeholder="Password" autocomplete="new-password" required> <div class="errorSection"> <!-- hidden --> <p hidden class="errorMessage-styling" id="errorMessage-passwordInput">Password cannot be empty</p> </div> <button type="submit">Claim your free trial</button> <p> By clicking the button, you are agreeing to our <a href="#" rel="">Terms and Services</a> </p> </form> </main> <!-- <footer> <p class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </p> </footer> --> </body> </html>