<!--views/front/index.ejs-->
<link rel="stylesheet" href="/styles/front/index.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">
        <% if(data.route === '/'){ %>
            <%- include('home.ejs') %>
        <% } %>
    </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 class="smedia">
            <div class="title">បណ្តាញ​សង្គម</div>
            <ul>
                <li>Telegram</li>
                <li>Facebook</li>
            </ul>
            
        </div>
    </div>
    <div class="credit">&copy; 2022 <a href="https://khmerweb.vercel.app/">Khmer Web</a></div>
</section>

 

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

<section class="Content">
    <div class="outer">
        <a href="/land">
            <img src="/images/land.png" />
            <p>​​​​​​​ដីឡូតិ៍</p>
        </a>
        <a href="/house">
            <img src="/images/housing.png" />
            <p>​​​​​​​លំនៅដ្ឋាន</p>
        </a>
        <a href="/car">
            <img src="/images/car.png" />
            <p>​​​​​​​រថយន្ត</p>
        </a>
        <a href="/motorbike">
            <img src="/images/motorbike.jpg" />
            <p>​​​​​​​ទោចក្រយានយន្ត</p>
        </a>
        <a href="/electronic">
            <img src="/images/electronic.jpeg" />
            <p>​​​​​​​គ្រឿង​ Electronic</p>
        </a>
        <a href="/furniture">
            <img src="/images/furniture.jpg" />
            <p>​​​​​​​គ្រឿង​​សង្ហារឹម</p>
        </a>
        <a href="/sport">
            <img src="/images/sport.jpg" />
            <p>​​​​​​​សំភារៈ​កីឡា</p>
        </a>
        <a href="/clothes">
            <img src="/images/clothes.png" />
            <p>សំលៀក​បំពាក់</p>
        </a>
        <a href="/shoe">
            <img src="/images/shoe.png" />
            <p>ស្បែក​ជើង</p>
        </a>
        <a href="/cosmetic">
            <img src="/images/cosmetic.png" />
            <p>គ្រឿង​សំអាង</p>
        </a>
        <a href="/book">
            <img src="/images/bookstore.png" />
            <p>សៀវភៅ</p>
        </a>
        <a href="/food">
            <img src="/images/food-drink.png" />
            <p>ភេសជ្ជៈ-ម្ហូប​អាហារ</p>
        </a>
    </div>
</section>

 

/* static/styles/front/home.css */
.Content .outer{
    display: grid;
    grid-template-columns: calc(25% - 7.5px) calc(25% - 7.5px) 
    calc(25% - 7.5px) calc(25% - 7.5px);
    grid-gap: 10px;
    padding: 10px 0;
}

.Content .outer a{
    position: relative;
    padding-top: 56.25%;
    color: white;
}

.Content .outer a img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.Content .outer a p{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 5px 5px 7px;
    text-align: center;
    font: 20px/1.5 Oswald, Bayon;
    text-shadow: 2px 2px 4px #000000;
    background: -webkit-linear-gradient(bottom, black,transparent);
}

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

 

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