Cengizhanjj
Femtopat
- Katılım
- 8 Aralık 2022
- Mesajlar
- 52
Daha fazla
- Cinsiyet
- Erkek
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="m.css" type="text/css" media="all" />
<title>Market</title>
</head>
<body>
<div class="navbar">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar").hide();
$("#showNavbar").click(function(){
$(".navbar").toggle();
});
});
</script>
<button id="showNavbar">Kodunda Market</button>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
</div>
</div>
<main class="container">
<div class="product-section">
<h1>Ürünler</h1>
<ul class="product-list">
<li>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h2>Ürün 1</h2>
<p>Açıklama: Ürün 1'in açıklaması</p>
<p>Fiyat: 100 TL</p>
<div class="button">
<button>Sepete Ekle</button>
</div>
</div>
</li>
<li>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h2>Ürün 2</h2>
<p>Açıklama: Ürün 2'nin açıklaması</p>
<p>Fiyat: 200 TL</p>
<div class="button2">
<button>Sepete Ekle</button>
</div>
</div>
</li>
</ul>
</div>
</main>
<footer>
<p>© Market</p>
</footer>
</body>
</html>
body {
background-image:url('https://cdn.pixabay.com/photo/2017/08/30/11/50/stripe-2696784_640.png');
margin: 0;
font-family: Arial, sans-serif;
}
.container {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.button1 {
margin: 0 15px;
padding: 10px 20px;
border-radius: 5px;
border: 5px solid red;
background-color: transparent;
color: red;
}
.button2 {
margin: 0 15px;
padding: 10px 20px;
border-radius: 5px;
border: 5px solid red;
background-color: transparent;
color: red;
}
.navbar {
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
}
li a {
color: #333;
text-decoration: none;
font-size: 16px;
}
li a:hover {
color: #fff;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 80px;
padding: 20px;
}
.product {
width: 20%;
background-color: #fff;
margin: 10px;
padding: 20px;
text-align: center;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.product img {
width: 100%;
margin-bottom: 20px;
}
.product h3 {
font-size: 18px;
margin-bottom: 10px;
}
.product p {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}
.product button {
padding: 10px 20px;
border-radius: 5px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
@media (max-width: 767px) {
.navbar {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.logo {
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
ul {
width: 100%;
}
.products {
margin-top: 60px;
}
.product {
width: 40%;
}
}
Bu şekilde dener misiniz?JavaScript:$(document).ready(function(){ $(".navbar").hide(); $("#showNavbar").click(function(){ $(".navbar").show(); }); });
O butona stil işlemi yapmamışsınız. Şimdilik button1 sınıfı verip deneyelim.HTML:<button id="showNavbar" class="button1">Kodunda Market</button>
body {
background-image: url("https://cdn.pixabay.com/photo/2017/08/30/11/50/stripe-2696784_640.png");
margin: 0;
font-family: Arial, sans-serif;
}
.container {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.navbar button {
background-color: red;
color: #fff;
cursor: pointer;
padding: 10px 15px;
border: none;
outline: none;
font-size: 18px;
}
.navbar button:hover {
background-color: #fff;
color: #333;
}
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
}
li a {
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #fff;
color: #333;
}
button {
padding: 10px 20px;
border-radius: 5px;
background-color: red;
color: #fff;
border: none;
font-size: 14px;
cursor: pointer;
}
.product-section {
background-color: #fff;
padding: 20px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
text-align: center;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.product-item {
width: 20%;
background-color: #fff;
margin: 10px;
padding: 20px;
text-align: center;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.product-item img {
width: 100%;
margin-bottom: 20px;
}
.product-item h2 {
font-size: 18px;
margin-bottom: 10px;
}
.product-item p {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
@media only screen and (max-width: 767px) {
.container {
height: auto;
}
.navbar button {
display: block;
margin: 10px 0;
}
ul {
display: none;
}
.product-section {
padding: 10px;
}
.product-item {
width: 100%;
margin: 10px 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="m.css" type="text/css" media="all" />
<title>Market</title>
</head>
<body>
<div class="navbar">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar").hide();
$("#showNavbar").click(function(){
$(".navbar").toggle();
});
});
</script>
<div class="navbar">
<button id="showNavbar">Kodunda Market</button>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
<main class="container">
<div class="product-section">
<h1>Ürünler</h1>
<ul class="product-list">
<li>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h2>Ürün 1</h2>
<p>Açıklama: Ürün 1'in açıklaması</p>
<p>Fiyat: 100 TL</p>
<div class="button">
<button>Sepete Ekle</button>
</div>
</div>
</li>
<li>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h2>Ürün 2</h2>
<p>Açıklama: Ürün 2'nin açıklaması</p>
<p>Fiyat: 200 TL</p>
<div class="button">
<button>Sepete Ekle</button>
</div>
</div>
</li>
</ul>
</div>
</main>
<footer>
<p>© Market</p>
</footer>
</body>
</html>
O butona stil işlemi yapmamışsınız. Şimdilik button1 sınıfı verip deneyelim.HTML:<button id="showNavbar" class="button1">Kodunda Market</button>
Sizden önce olayı çözdüm ama şu anda site gözükmemekte yardım edebilir misiniz?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="m.css" type="text/css" media="all" />
<title>Market</title>
</head>
<body>
<div class="navbar">
<button id="showNavbar">Kodunda Market</button>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
<main class="container">
<div class="product-section">
<h1>Ürünler</h1>
<ul class="product-list">
<li>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image" />
<h2>Ürün 1</h2>
<p>Açıklama: Ürün 1'in açıklaması</p>
<p>Fiyat: 100 TL</p>
<div class="button">
<button>Sepete Ekle</button>
</div>
</div>
</li>
<li>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image" />
<h2>Ürün 2</h2>
<p>Açıklama: Ürün 2'nin açıklaması</p>
<p>Fiyat: 200 TL</p>
<div class="button">
<button>Sepete Ekle</button>
</div>
</div>
</li>
</ul>
</div>
</main>
<footer>
<p>© Market</p>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$(".navbar").hide();
$("#showNavbar").click(function () {
$(".navbar").toggle();
});
});
</script>
</body>
</html>
Yardımın için teşekürler abi seviliyorsun.Script taglerini body sonuna ekledim gözüküyor site. Geç cevaplarım için özür dilerim.HTML:<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="m.css" type="text/css" media="all" /> <title>Market</title> </head> <body> <div class="navbar"> <button id="showNavbar">Kodunda Market</button> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> </ul> </div> <main class="container"> <div class="product-section"> <h1>Ürünler</h1> <ul class="product-list"> <li> <div class="product-item"> <img src="https://via.placeholder.com/150" alt="Product Image" /> <h2>Ürün 1</h2> <p>Açıklama: Ürün 1'in açıklaması</p> <p>Fiyat: 100 TL</p> <div class="button"> <button>Sepete Ekle</button> </div> </div> </li> <li> <div class="product-item"> <img src="https://via.placeholder.com/150" alt="Product Image" /> <h2>Ürün 2</h2> <p>Açıklama: Ürün 2'nin açıklaması</p> <p>Fiyat: 200 TL</p> <div class="button"> <button>Sepete Ekle</button> </div> </div> </li> </ul> </div> </main> <footer> <p>© Market</p> </footer> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { $(".navbar").hide(); $("#showNavbar").click(function () { $(".navbar").toggle(); }); }); </script> </body> </html>
Abi navbar gözükmüyor tekrar.Yardımın için teşekürler abi seviliyorsun
Çözdüm olayı fakat ben bunların yan yana olmasını istiyorum abi.Yardımın için teşekürler abi seviliyorsun
Abi navbar gözükmüyor tekrar
Yardımın için teşekürler abi seviliyorsun.
Abi navbar gözükmüyor tekrar.
Çözdüm olayı fakat ben bunların yan yana olmasını istiyorum abi.
Teşekürlerdisplay: flex; ile yan yana getirebilirsiniz.
Peki bunu nereye ekleyeceğim?display: flex; ile yan yana getirebilirsiniz.
Teşekürler
Peki bunu nereye ekleyeceğim?