<!--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">© 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;
}
}