Stylize the products page

samples/MicroserviceDemo/applications/PublicWebSite.Host/Pages/Products.cshtml

@@ -3,20 +3,50 @@
 @using Volo.Abp.Settings
 @model PublicWebSite.Host.Pages.ProductsModel
 @inject ISettingProvider SettingProvider
-<h1>Our Products</h1>
-<ul>
-    @foreach (var product in Model.Products.Items)
+@{
+    const int columnSize = 3;
+}
+@section styles{
+    <link href="~/Pages/Products.css" rel="stylesheet" />
+}
+<h3 class="pt-5 pb-4 text-center">Our Products</h3>
+<div class="product-list">
+    @for (int i = 0; i < Math.Ceiling(Model.Products.Items.Count / (double)columnSize); i++)
     {
-        <li>
-            @if (!product.ImageName.IsNullOrEmpty())
+        <abp-row>
+            @for (int j = 0; j < columnSize; j++)
             {
-                <img src="/product-images/@product.ImageName" width="300" height="300"/>
+                <abp-column size-lg="_4" size-md="_6" size-sm="_12">
+                    @if ((i * columnSize) + j < Model.Products.Items.Count)
+                    {
+                        var product = Model.Products.Items[(i * columnSize) + j];
+                        <div class="product-list-item">
+                            @if (!product.ImageName.IsNullOrEmpty())
+                            {
+                                <img src="/product-images/@product.ImageName" />
+                            }
+                            else
+                            {
+                                <img src="/product-images/noimage.jpg" />
+                            }
+                            <div class="row mt-5">
+                                <div class="col">
+                                    <div class="product-info-box">
+                                        <h6>@product.Name</h6>
+                                        <em class="d-block text-muted">@product.Code - Stock count: @product.StockCount</em>
+                                    </div>
+                                </div>
+                                <div class="col-auto text-right text-danger">
+                                    <strong class="product-price">$@product.Price</strong>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </abp-column>
             }
-            @product.Code / @product.Name / $@product.Price <br/>
-            <i>Stock count: @product.StockCount</i>
-        </li>
+        </abp-row>
     }
-</ul>
+</div>
 
 @* An example to show how to read settings from the client side / UI *@
-<p><i>Maximum allowed page size: @await SettingProvider.GetOrNullAsync(ProductManagementSettings.MaxPageSize)</i></p>
+<p class="text-muted mt-5"><i>Maximum allowed page size: @await SettingProvider.GetOrNullAsync(ProductManagementSettings.MaxPageSize)</i></p>

samples/MicroserviceDemo/applications/PublicWebSite.Host/Pages/Products.css

@@ -0,0 +1,30 @@
+body {
+    background-color: #f9f9f9;
+}
+
+.product-list-item {
+    background-color: #fff;
+    padding: 2em;
+    border: 1px solid #eee;
+    border-radius: 3px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+    margin-bottom: 2em;
+    transition: all .2s;
+}
+
+.product-list-item:hover {
+    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+    cursor: pointer;
+}
+
+.product-list-item img {
+    width: 100%;
+}
+
+.product-list-item .text-muted {
+    opacity: .8
+}
+
+.product-info-box {
+    min-height: 80px;
+}