//pages/login.js
import Head from 'next/head'
import styles from '../styles/Login.module.css'

export default function Login(){
    return(
        <div className={styles.container}>
            <Head>
                <title>ទំព័រ​​ចុះ​ឈ្មោះ</title>
                <link rel="icon" href="/images/siteLogo.png" />
            </Head>
            <div className={styles.form_wrapper}>
                <div className={styles.title}>ចុះ​ឈ្មោះ​ចូល​ទំព័រ​គ្រប់គ្រង</div>
                <form>
                    <a>Username:</a><input type='text' name='username' required />
                    <a>Email:</a><input type='email' name='email' required />
                    <a>Password:</a><input type='password' name='password' required />
                    <a></a><input type='submit' value='បញ្ជូន' />
                    <div className={styles.info}></div>
                </form>
            </div>
        </div>
    )
}

 

/* styles/Login.module.css */
.form_wrapper{
    background: var(--background);
    width: 400px;
    margin: 100px auto;
    color: white;
}

.form_wrapper .title{
    text-align: center;
    font: var(--body-font);
    font: 18px/1.5 Koulen;
    padding: 5px;
    border-bottom: 1px solid white;
}

.form_wrapper form{
    display: grid;
    grid-template-columns: 20% auto;
    align-items: center;
    grid-gap: 2px;
    padding: 20px;
}

.form_wrapper form a{
    color: white;
    text-align: right;
}

.form_wrapper form input{
    font: var(--body-font);
    padding: 1px 5px;
}

 

GitHub: https://github.com/Sokhavuth/nblog

Vercel: https://khmerweb-nblog.vercel.app/