mirror of
https://gitlab.com/nekoya/web.git
synced 2024-11-22 14:26:29 +01:00
Add lazy load to Home Page
This commit is contained in:
parent
c8863600c3
commit
7cc083a923
1 changed files with 27 additions and 26 deletions
53
index.html
53
index.html
|
@ -16,10 +16,11 @@
|
|||
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
|
||||
<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>
|
||||
<body class="bg-color">
|
||||
<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>
|
||||
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
|
||||
class="navbar-toggler"
|
||||
|
@ -61,13 +62,13 @@
|
|||
</ol>
|
||||
<div class="carousel-inner" id="carousel-img">
|
||||
<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 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 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>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
|
@ -139,7 +140,7 @@
|
|||
<div class="product-item men">
|
||||
<div class="product product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -200,7 +201,7 @@
|
|||
<div class="product-item women men">
|
||||
<div class="product product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -213,7 +214,7 @@
|
|||
<div class="product-item men">
|
||||
<div class="product discount product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -258,7 +259,7 @@
|
|||
<div class="product-item men">
|
||||
<div class="product product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -322,7 +323,7 @@
|
|||
<div class="product-item men">
|
||||
<div class="product discount product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -392,7 +393,7 @@
|
|||
<div class="product-item women men">
|
||||
<div class="product product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -407,7 +408,7 @@
|
|||
<div class="product-item accessories">
|
||||
<div class="product discount product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -460,7 +461,7 @@
|
|||
<div class="product-item men">
|
||||
<div class="product product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<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 product_filter">
|
||||
<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 class="favorite favorite_left"></div>
|
||||
<div class="product_info">
|
||||
|
@ -493,11 +494,11 @@
|
|||
</div>
|
||||
<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
|
||||
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 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
|
||||
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>
|
||||
|
|
Loading…
Reference in a new issue