<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="style.css">
    <title>Sign Up</title>
    <link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/295/295128.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>

<body>
    <div class="container">
        <div class="container-wrapper">

            <h3 class="login-text"><i class="bi bi-person-circle ac-logo"></i>Sign Up</h3>

            <form method="post">
                <div class="item"><input class="input" type="text" placeholder="Name"></div>
                <div class="item"><input class="input" type="email" placeholder="Email"></div>
                <div class="item"><input class="input" type="text" placeholder="Username"></div>
                <div class="item"><input class="input" type="password" placeholder="Password"> </div>
          
                <input type="checkbox" name="remember" id="remember"><span id="toc"> I Accept Terms and Condition</span>
                <div class="item submit"><button type="submit"><b>Submit</b></button></div>
            </form>

      
                <h2><span>OR</span></h2>
         
            <div class="social-media">

               <a href="#"><div class="icons8-google social-mediaImg"></div></a> 
               <a href="#"><div class="icons8-facebook-circled social-mediaImg"></div></a> 
               <a href="#"><div class="icons8-twitter social-mediaImg"></div></a> 
  
            </div>

            <span class="ac">Already have an Account? <a href="#">Login</a></span>
        </div>

    </div>
</body>

</html>

External CSS

  1. https://codepen.io/kevinnadar22/pen/eYyyLOB.css

External JavaScript

This Pen doesn't use any external JavaScript resources.