<!--views/front/signup.ejs-->
<link rel="stylesheet" href="/styles/front/signup.css" />

<section class="Signup">
    <div class="outer">
        <div class="title">ចុះ​ឈ្មោះ​ចុះ​ផ្សាយ​លក់​ផលិតផល</div>
        <form action="/signup" method="post">
            <a>ឈ្មោះ​អ្នក​ប្រើប្រាស់ៈ</a><input type="text" name="title" required  />
            <a>Email:</a><input type="email" name="email" required  />
            <a>ពាក្យ​សំងាត់ៈ</a><input type="password" name="password" minlength="8" required />
            <a>បញ្ជាក់​ពាក្យ​សំងាត់ៈ</a><input type="password" name="password1" minlength="8" required />
            <a>តំណរ​ភ្ជាប់​រូប​តំណាងៈ</a><input type="text" name="thumb" placeholder="មិន​ចាំបាច់" />
            <a></a><input type="submit" value="បញ្ជូន" />
            <a></a><div class="info"><%= data.message %></div>
        </form>
    </div>
</section>

 

/* static/styles/front/signup.css */
.Signup .outer{
    max-width: 500px;
    margin: 100px auto;
    background: var(--background);
}

.Signup .outer .title{
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid grey;
    font: 22px/1.5 Oswald,Limonf3;
}

.Signup .outer form{
    display: grid;
    grid-template-columns: 28% auto;
    grid-gap: 5px;
    align-items: center;
    padding: 20px;
}

.Signup .outer form a{
    text-align: right;
    color: black;
}

.Signup .outer form input{
    font: var(--body-font);
    padding: 2px 5px;
}

.Signup .outer form .info{
    text-align: center;
}

@media only screen and (max-width: 600px){
    .Signup .outer form{
        grid-template-columns: 100%;
    }

    .Signup .outer form a{
        text-align: left;
    }
}

 

Heroku: https://khmerweb-sale.herokuapp.com