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

<section class="Header">
    <div class="outer">
        <div class="header region">
            <div class="logo"><%= data.siteTitle %></div>
            <form action="/search" method="post">
                <select name="fsearch">
                    <% for(let category of data.categories){ %>
                        <option><%= category.title %></option>
                    <% } %>
                </select>
                <input type="text" name="q" required placeholder="Search" />
                <input type="submit" value="ស្វែង​រក" />
            </form>
            <div class="signup">
                <a href="/login">ចូល​ក្នុង</a> | <a href="signup">ចុះ​ឈ្មោះ</a>
            </div>
        </div>
    </div>
</section>

<section class="Main">
    <div class="outer region">
        Main
    </div>
</section>

<section class="Footer">
    <div class="outer region">
        <div class="contact">
            <div class="title">ទំនាក់ទំនង</div>
            <ul>
                <li>Email: vuthdevelop@gmail.com</li>
                <li>គេហទំព័រ https://www.khmerweb.vercel.app</li>
            </ul>
            
        </div>
        <div class="conduct">
            <div class="title">ក្រម​សីលធម៌</div>
            <ul>
                <li>អំពី​ការទទួល​ខុស​ត្រូវ</li>
                <li>អំពី​ឯកជនភាព</li>
            </ul>
            
        </div>
    </div>
    <div class="credit">&copy; 2022 <a href="https://khmerweb.vercel.app/">Khmer Web</a></div>
</section>

 

/* static/styles/front/Header.css */
.Header .outer{
    background: var(--background-dark);
    color: white;
    padding: 5px 0;
    border-bottom: 8px solid white;
} 

.Header .outer .header{
    display: grid;
    grid-template-columns: 25% auto 20%;
    align-items: center;
}

.Header .outer .header .logo{
    font: 35px/1.5 StardosStencil, Limonf3;
    
}

.Header .outer .header form{
    display: grid;
    grid-template-columns: 23% auto 20%;
}

.Header .outer .header form input,
.Header .outer .header form select{
    font: var(--body-font);
    padding: 2px 5px;
}

.Header .outer .header .signup{
    text-align: right;
}

.Header .outer .header .signup a{
    color: white;
    font-size: 16px;
}

.Footer{
    background: var(--background);
    padding: 20px 0;
}

.Footer .outer{
    display: grid;
    grid-template-columns: 50% 50%;
    padding-bottom: 20px;
}

.Footer .outer div .title{
    font: 18px/1.5 Oswald, Koulen;
    padding-bottom: 15px;
}

.Footer .outer div ul{
    list-style-position: inside;
}

.Footer .credit{
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid grey;
}

.Footer .credit a{
    color: black;
}

@media only screen and (max-width: 600px){
    .Header .outer .header{
        grid-template-columns: 100%;
        text-align: center;
        padding: 0 10px;
    }

    .Header .outer .header .signup{
        text-align: center;
    }

    .Footer .outer{
        grid-template-columns: 100%;
        padding: 0 10px;
    }

    .Footer .outer div{
        padding-bottom: 15px;
    }
}

 

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