HTML/CSS - Form | Cool Effects Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
<head>
    <title>Login Form UI</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600|Work+Sans:400,500&display=swap" rel="stylesheet">
</head>
<body>
    
    <form class="form">
        <div class="form__image-box">
            
            <img src="https://i.imgur.com/cMZHiw8.png" class="form__image-box__icon"></img>
            
            <h1 class="form__image-box__heading">
                pixel labs
            
            </h1>
        </div>
        <div class="form__fields">
            
            <h3 class="form__fields__heading">
                Name
            </h3>
            <input type="text" class="form-field text-field" placeholder="Enter Your Name">

css

/*
Theme colors
#ff4e50,#f9d423
#89f7fe,#66a6ff
#ad5389,#3c1053
*/
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }
html {
  font-size: 62.5%; }
@media only screen and (min-width: 600px) {
  html {
    font-size: 72.5%; } }
@media only screen and (min-width: 768px) {
  html {
    font-size: 80.5%; } }
body {
  background-color: #f5f5f5;
  text-align: center; }

BROWSER

Console