Этот коммит содержится в:
2023-04-18 15:26:06 +05:30
родитель d37e6fad1a
Коммит 58143fd8d6
16 изменённых файлов: 455 добавлений и 222 удалений
+65 -99
Просмотреть файл
@@ -36,6 +36,10 @@
transform: scale(1.1);
/* rotate: 10deg; */
}
.card:hover .btn{
background-color: #000 !important;
color:#ffff !important;
}
.card-title{
font-size: 1.2rem;
}
@@ -71,25 +75,18 @@
Boasting an ultra-slim 1mm Heatsink, we defy temperature limits and redefine storage performance.
</p>
</div>
<div class="tab-content bg-lg-white rounded-4" id="pills-tabContent">
<div class="tab-content rounded-4" id="pills-tabContent">
<div class="text-center py-md-5 py-4">
<span class="bg-black fs-5 px-md-4 py-md-2 py-2 px-4 rounded-3 text-white">Join the future with Anwi Systems</span>
</div>
<!-- first tab-pane -->
<div class="tab-pane fade show active" id="pills-network-cards-card" role="tabpanel" aria-labelledby="pills-network-cards-card-tab">
<div class="row g-4 pb-5 px-md-4">
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="card-img-top" alt="...">
</a>
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="card-img-top" alt="...">
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 8GB DDR4 3200MHz Desktop RAM
</h5>
</a>
<h5 class="card-title satoshi_font mb-0">ORA 8GB DDR4 3200MHz Desktop RAM </h5>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class="border-0 py-0">
@@ -101,7 +98,7 @@
</ul>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 8GB DDR4 3200MHz Desktop RAM "
data_version="DDR4"
data_device="Desktop"
@@ -111,18 +108,13 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_desktop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 16GB DDR4 3200MHz Desktop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -134,7 +126,7 @@
</ul>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 16GB DDR4 3200MHz Desktop RAM "
data_version="DDR4"
data_device="Desktop"
@@ -144,18 +136,16 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 32GB DDR4 3200MHz Desktop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -173,7 +163,7 @@
</div>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 32GB DDR4 3200MHz Desktop RAM "
data_version="DDR4"
data_device="Desktop"
@@ -183,11 +173,11 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
@@ -212,7 +202,7 @@
</div>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 8GB DDR4 3200MHz Laptop RAM "
data_version="DDR4"
data_device="Laptop"
@@ -222,18 +212,13 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 16GB DDR4 3200MHz Laptop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -248,7 +233,7 @@
</ul>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 16GB DDR4 3200MHz Laptop RAM "
data_version="DDR4"
data_device="Laptop"
@@ -258,18 +243,13 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_desktop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 32GB DDR4 3200MHz Laptop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -283,7 +263,7 @@
</ul>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 32GB DDR4 3200MHz Laptop RAM "
data_version="DDR4"
data_device="Laptop"
@@ -293,18 +273,13 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 8GB DDR5 4800MHz Desktop RAM
</h5>
</a>
</h5>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -324,7 +299,7 @@
</div>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 8GB DDR5 4800MHz Desktop RAM "
data_version="DDR5"
data_device="Desktop"
@@ -334,18 +309,16 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 -100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 -100">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 16GB DDR5 4800MHz Desktop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -363,7 +336,7 @@
</div>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 16GB DDR5 4800MHz Desktop RAM "
data_version="DDR5"
data_device="Desktop"
@@ -373,18 +346,16 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 32GB DDR5 4800MHz Desktop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -397,7 +368,7 @@
</ul>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 32GB DDR5 4800MHz Desktop RAM "
data_version="DDR5"
data_device="Desktop"
@@ -407,18 +378,16 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_desktop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 8GB DDR5 4800MHz Laptop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -430,7 +399,7 @@
</ul>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 8GB DDR5 4800MHz Laptop RAM "
data_version="DDR5"
data_device="Laptop"
@@ -440,18 +409,16 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 16GB DDR5 4800MHz Laptop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -469,7 +436,7 @@
</div>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 16GB DDR5 4800MHz Laptop RAM "
data_version="DDR5"
data_device="Laptop"
@@ -479,18 +446,16 @@
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 ram_card">
<div class="card border rounded-3 p-1 h-100">
<a href="#">
<div class="col-lg-4 col-md-6 col-md-6 ram_card">
<div class="card border bg-gray-3 rounded-3 p-1 h-100">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="#"
class="text-decoration-none text-dark">
<h5 class="card-title satoshi_font mb-0">
ORA 32GB DDR5 4800MHz Laptop RAM
</h5>
</a>
</div>
<ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
<li class=" border-0 py-0">
@@ -508,7 +473,7 @@
</div>
<div class="card-body text-center">
<a href="#"
class="btn btn-outline-dark font-1-2 px-5 w-100 satoshi_font"
class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
data_name="ORA 32GB DDR5 4800MHz Laptop RAM "
data_version="DDR5"
data_device="Laptop"
@@ -562,6 +527,7 @@
<script>
$("#pills-tabContent").find(".ram_card").each(function(){
$(this).addClass("cursor-pointer");
$(this).click(function(){
let product_name = $(this).find(".card-body").find("a.btn").attr("data_name");
let version = $(this).find(".card-body").find("a.btn").attr("data_version");