urunstyle.css
.urunlersayfasi-indexurunler-container-alani {
width:100%;
height:auto;
}
.tumbolumlerdiv {
position:absolute;
width:1140px;
margin-top:60px;
margin-left:0px;
}
.index-cok-satanlar-buton {
position:absolute;
width:160px;
height:40px;
background:#cd5c5c;
color:#fff;
margin-top:10px;
}
.index-kampanyali-urunler-buton {
position:absolute;
width:190px;
height:40px;
background:#cd5c5c;
color:#fff;
margin-top:10px;
margin-left:180px;
}
.index-yeni-urunler-buton {
position:absolute;
width:160px;
height:40px;
background:#cd5c5c;
color:#fff;
margin-top:10px;
margin-left:390px;
}
.urunkarti {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-left:2.66%;
margin-top:15px;
}
.urunkarti:nth-child(-n+4) {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-top:0px;
}
.urunkarti:first-child {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-left:0%;
}
.urunkarti:nth-child(4n+1) {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-left:0%;
}
.urunkarti img {
width:100%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:200px;
text-align: center;
font-family:arial;
float:left;
margin-left:0px;
}
.indexurunler-icerik-yazisi {
height:67px;
font-size:17px;
margin-top:210px;
padding:0px 5px;
}
.fiyat {
height:35px;
line-height:35px;
color: grey;
font-size:22px;
margin-top:0px;
}
.urunkarti button {
width:100%;
height:35px;
line-height:35px;
border:none;
outline:0;
padding:0px 5px;
color:white;
background:#60a3bc;
text-align:center;
cursor:pointer;
font-size:18px;
margin-top:0px;
}
.urunkarti button:hover {
background:#596275;
opacity: 0.9;
margin-top:0px;
}
.index-urunler-asagiacilir-div {
position:absolute;
width:1140px;
height:45px;
margin-top:1070px;
text-align:center;
}
.index-urunler-asagiacilir-div img {
width:65px;
height:30px;
}
.indexdigerfirsaturunleri {
position:absolute;
width:1140px;
height:450px;
margin-top:1100px;
margin-left:0px;
}
.indexdigercokurunleri {
position:absolute;
width:1140px;
margin-top:1100px;
margin-left:0px;
}
.indexdigerkampanyaurunleri {
position:absolute;
width:1140px;
margin-top:1100px;
margin-left:0px;
}
.indexurun-incele-yazisi {
position:absolute;
width:10%;
height:30px;
line-height:30px;
font-size:16px;
background:#60a3bc;
color:#fff;
}
urunler.php
`<body>
<div class="urunlersayfasi-indexurunler-container-alani">
<form action="" method="POST">
<input type="submit" class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-1 index-cok-satanlar-buton" onclick="cok()" name="coksatanlar" value="Çok Satılanlar">
<input type="submit" class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-1 index-kampanyali-urunler-buton" onclick="kampanya()" name="kampanyaliurunler" value="Kampanyalı Ürünler">
<input type="submit" class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-1 index-yeni-urunler-buton" onclick="yeni()" name="yeniurunler" value="Yeni Ürünler">
</form>
<div class="row no-gutters">
<?php if(isset($_POST['yeniurunler'])) { ?>
<div id="yeniurunlerbolumu" class="tumbolumlerdiv">
<?php
$veriler = "SELECT indexurunleryeni_resim, indexurunleryeni_icerik, indexurunleryeni_fiyat FROM indexurunleryeni ORDER BY indexurunleryeni_id DESC LIMIT 20";
$result = $conn->query($veriler);
foreach ($result as $row) {
?>
<div class="urunkarti">
<img src="images/indexproductcard/<?php echo $row['indexurunleryeni_resim']; ?>">
<h5 class="indexurunler-icerik-yazisi">
<?php echo substr($row['indexurunleryeni_icerik'],0,88); ?>
</h5>
<p class="fiyat"><?php echo $row['indexurunleryeni_fiyat']; ?></p>
<p><button>Sepete Ekle</button></p>
</div>
<?php } ?>
</div>
<?php } elseif (isset($_POST['kampanyaliurunler'])) { ?>
<div id="kampanyabolumu" class="tumbolumlerdiv">
<?php
$veriler = "SELECT indexurunlerkampanya_resim, indexurunlerkampanya_icerik, indexurunlerkampanya_fiyat FROM indexurunlerkampanya ORDER BY indexurunlerkampanya_id DESC LIMIT 20";
$result = $conn->query($veriler);
foreach ($result as $row) {
?>
<div class="urunkarti">
<img src="images/indexproductcard/<?php echo $row['indexurunlerkampanya_resim']; ?>">
<h5 class="indexurunler-icerik-yazisi">
<?php echo substr($row['indexurunlerkampanya_icerik'],0,88); ?>
</h5>
<p class="fiyat"><?php echo $row['indexurunlerkampanya_fiyat']; ?></p>
<p><button>Sepete Ekle</button></p>
</div>
<?php } ?>
</div>
<?php } else { ?>
<div id="cokbolumu" class="tumbolumlerdiv">
<?php
$veriler = "SELECT indexurunlercoksatanlar_resim, indexurunlercoksatanlar_icerik, indexurunlercoksatanlar_fiyat FROM indexurunlercoksatanlar ORDER BY indexurunlercoksatanlar_id DESC LIMIT 20";
$result = $conn->query($veriler);
foreach ($result as $row) {
?>
<div class="urunkarti">
<img src="images/indexproductcard/<?php echo $row['indexurunlercoksatanlar_resim']; ?>">
<h5 class="indexurunler-icerik-yazisi">
<?php echo substr($row['indexurunlercoksatanlar_icerik'],0,88); ?>
</h5>
<p class="fiyat"><?php echo $row['indexurunlercoksatanlar_fiyat']; ?></p>
<p><button>Sepete Ekle</button></p>
</div>
<?php } ?>
</div>
<?php } ?>
</div> <!-- row bitişi -->
</div> <!-- Container Bitişi -->
<script type="text/javascript">
function yeni {
document.getElementById("#yeniurunlerbolumu").style.display = "block";
document.getElementById("#cokbolumu").style.display = "none";
document.getElementById("#kampanyabolumu").style.display = "none";
}
function cok {
document.getElementById("#cokbolumu").style.display = "block";
document.getElementById("#yeniurunlerbolumu").style.display = "none";
document.getElementById("#kampanyabolumu").style.display = "none";
}
function kampanya {
document.getElementById("#kampanyabolumu").style.display = "block";
document.getElementById("#yeniurunlerbolumu").style.display = "none";
document.getElementById("#cokbolumu").style.display = "none";
}
</script>
</body>`
