nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2025-01-09 11:44:10 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

product-list.html - Changed Products Card Button and beautify codes

Browse source
This commit is contained in:
Matthew Patrick 2021-09-24 14:21:25 +07:00
parent 979e6f67b0
commit 7ceda42fd0
1 changed files with 28 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
product-list.html
View file

@ -22,11 +22,24 @@
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.card {
border-radius: 20px;
background-color: #212226;
color: white;
}
.btn-product-card {
width: 100%;
background-color: darkred;
border-color: darkred;
border-radius: 10px;
}
.btn-product-card:hover {
background-color: red;
border-color: red;
}
</style>
</head>
@ -34,7 +47,8 @@
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.webp"
style="margin-top: 0%;" width="80"></a>
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler"
data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
@ -104,7 +118,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -121,7 +135,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -138,7 +152,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -155,7 +169,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -172,7 +186,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -189,7 +203,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -206,7 +220,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -223,7 +237,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -240,7 +254,7 @@
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info" type="button">View Detail</button>
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div>
@ -250,10 +264,12 @@
</div>
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
</body>