nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2024-11-22 14:26:29 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

Add lazy load to Home Page

Browse source
This commit is contained in:
Moe Poi ~ 2021-09-26 20:50:32 +07:00
parent c8863600c3
commit 7cc083a923
1 changed files with 27 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
index.html
View file

@ -16,10 +16,11 @@
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect"> <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Style-index.css"> <link rel="stylesheet" type="text/css" href="Style-index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
</head> </head>
<body class="bg-color"> <body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark nav-color ml-5 mr-5 nav-radius"> <nav class="navbar navbar-expand-lg navbar-dark nav-color ml-5 mr-5 nav-radius">
<a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.webp" <a href="/"><img alt="Banner" class="navbar-brand lazyload" height="80" src="assets/logo_transparent.webp"
style="margin-top: 0%;" width="80"></a> style="margin-top: 0%;" width="80"></a>
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler" class="navbar-toggler"
@ -61,13 +62,13 @@
</ol> </ol>
<div class="carousel-inner" id="carousel-img"> <div class="carousel-inner" id="carousel-img">
<div class="carousel-item active"> <div class="carousel-item active">
<img class="d-block w-100" src="assets/Carousel_1.webp" alt="First slide"> <img class="d-block w-100 lazyload" src="assets/Carousel_1.webp" alt="First slide">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" src="assets/Carousel_2.webp" alt="Second slide"> <img class="d-block w-100 lazyload" src="assets/Carousel_2.webp" alt="Second slide">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" src="assets/Carousel_3.webp" alt="Third slide"> <img class="d-block w-100 lazyload" src="assets/Carousel_3.webp" alt="Third slide">
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
@ -139,7 +140,7 @@
<div class="product-item men"> <div class="product-item men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_1.webp" alt="product_1"> <img src="assets/Product_1.webp" alt="product_1" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -155,7 +156,7 @@
<div class="product-item women"> <div class="product-item women">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_2.webp" alt="product_2"> <img src="assets/Product_2.webp" alt="product_2" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -171,7 +172,7 @@
<div class="product-item women"> <div class="product-item women">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_3.webp" alt="product_3"> <img src="assets/Product_3.webp" alt="product_3" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -187,7 +188,7 @@
<div class="product-item women"> <div class="product-item women">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_4.webp" alt="product_4"> <img src="assets/Product_4.webp" alt="product_4" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -200,7 +201,7 @@
<div class="product-item women men"> <div class="product-item women men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_5.webp" alt="product_5"> <img src="assets/Product_5.webp" alt="product_5" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -213,7 +214,7 @@
<div class="product-item men"> <div class="product-item men">
<div class="product discount product_filter"> <div class="product discount product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_6.webp" alt="product_6"> <img src="assets/Product_6.webp" alt="product_6" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -229,7 +230,7 @@
<div class="product-item women"> <div class="product-item women">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_7.webp" alt="product_7"> <img src="assets/Product_7.webp" alt="product_7" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -245,7 +246,7 @@
<div class="product-item women men"> <div class="product-item women men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_8.webp" alt="product_8"> <img src="assets/Product_8.webp" alt="product_8" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -258,7 +259,7 @@
<div class="product-item men"> <div class="product-item men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_9.webp" alt="product_9"> <img src="assets/Product_9.webp" alt="product_9" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -274,7 +275,7 @@
<div class="product-item men"> <div class="product-item men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_10.webp" alt="product_1"> <img src="assets/Product_10.webp" alt="product_1" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -322,7 +323,7 @@
<div class="product-item men"> <div class="product-item men">
<div class="product discount product_filter"> <div class="product discount product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_1.webp" alt="product_1"> <img src="assets/Product_1.webp" alt="product_1" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -339,7 +340,7 @@
<div class="product-item women"> <div class="product-item women">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_2.webp" alt="product_2"> <img src="assets/Product_2.webp" alt="product_2" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -357,7 +358,7 @@
<div class="product-item women"> <div class="product-item women">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_3.webp" alt="product_3"> <img src="assets/Product_3.webp" alt="product_3" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -376,7 +377,7 @@
<div class="product-item accessories"> <div class="product-item accessories">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_4.webp" alt="product_4"> <img src="assets/Product_4.webp" alt="product_4" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -392,7 +393,7 @@
<div class="product-item women men"> <div class="product-item women men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_5.webp" alt="product_5"> <img src="assets/Product_5.webp" alt="product_5" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -407,7 +408,7 @@
<div class="product-item accessories"> <div class="product-item accessories">
<div class="product discount product_filter"> <div class="product discount product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_6.webp" alt="product_6"> <img src="assets/Product_6.webp" alt="product_6" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -426,7 +427,7 @@
<div class="product-item women"> <div class="product-item women">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_7.webp" alt="product_7"> <img src="assets/Product_7.webp" alt="product_7" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -445,7 +446,7 @@
<div class="product-item accessories"> <div class="product-item accessories">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_8.webp" alt="product_8"> <img src="assets/Product_8.webp" alt="product_8" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -460,7 +461,7 @@
<div class="product-item men"> <div class="product-item men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_9.webp" alt="product_9"> <img src="assets/Product_9.webp" alt="product_9" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"> <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
@ -479,7 +480,7 @@
<div class="product-item men"> <div class="product-item men">
<div class="product product_filter"> <div class="product product_filter">
<div class="product_image"> <div class="product_image">
<img src="assets/Product_10.webp" alt="product_1"> <img src="assets/Product_10.webp" alt="product_1" class="lazyload">
</div> </div>
<div class="favorite favorite_left"></div> <div class="favorite favorite_left"></div>
<div class="product_info"> <div class="product_info">
@ -493,11 +494,11 @@
</div> </div>
<div class="product_slider_nav_left product_slider_nav d-flex align-items-center justify-content-center flex-column"> <div class="product_slider_nav_left product_slider_nav d-flex align-items-center justify-content-center flex-column">
<i class="fa fas-chevron-left" aria-hidden="true"><img <i class="fa fas-chevron-left" aria-hidden="true"><img
src="https://img.icons8.com/material-rounded/48/000000/back--v1.webp"/></i> src="https://img.icons8.com/material-rounded/48/000000/back--v1.webp" class="lazyload"/></i>
</div> </div>
<div class="product_slider_nav_right product_slider_nav d-flex align-items-center justify-content-center flex-column"> <div class="product_slider_nav_right product_slider_nav d-flex align-items-center justify-content-center flex-column">
<i class="fa fas-chevron-right" aria-hidden="true"><img <i class="fa fas-chevron-right" aria-hidden="true"><img
src="https://img.icons8.com/ios-glyphs/30/000000/more-than"/></i> src="https://img.icons8.com/ios-glyphs/30/000000/more-than" class="lazyload"/></i>
</div> </div>
</div> </div>
</div> </div>