Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
35 views

HTML HTML

Uploaded by

cg783191
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
35 views

HTML HTML

Uploaded by

cg783191
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oyuncu Marketim</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #333;
}
header {
background: #343a40;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
header h1 {
margin: 0;
font-size: 36px;
}
nav {
background: #495057;
padding: 10px 0;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
font-size: 18px;
display: inline-block;
}
nav a:hover {
background: #6c757d;
border-radius: 5px;
}
.hero {
background: url('https://via.placeholder.com/1920x600') no-repeat
center center/cover;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
margin-bottom: 40px;
position: relative;
}
.hero h2 {
font-size: 48px;
margin: 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
overflow: hidden;
}
.slider {
position: relative;
width: 100%;
max-width: 1200px;
margin: auto;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-bottom: 40px;
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
.slide img {
width: 100%;
border-radius: 8px;
}
.slider-controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.slider-controls button {
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
.slider-controls button:hover {
background: rgba(0, 0, 0, 0.8);
}
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.product {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
flex: 1 1 calc(33.333% - 40px);
box-sizing: border-box;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
.product:hover {
transform: scale(1.03);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.product img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}
.product h2 {
font-size: 20px;
margin: 10px 0;
}
.product p {
color: #666;
}
.price {
font-size: 18px;
color: #e74c3c;
font-weight: bold;
margin: 10px 0;
}
.form-container, .feedback-container, .faq-container, .blog-
container, .about-container {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-top: 40px;
}
.form-container h2, .feedback-container h2, .faq-container h2, .blog-
container h2, .about-container h2 {
margin-top: 0;
font-size: 28px;
color: #007bff;
}
.form-container label, .feedback-container label, .faq-container label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
.form-container input, .form-container textarea, .feedback-container input,
.feedback-container textarea {
width: calc(100% - 20px);
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.form-container button, .feedback-container button {
background: #007bff;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s, transform 0.3s;
}
.form-container button:hover, .feedback-container button:hover {
background: #0056b3;
transform: scale(1.05);
}
.feedback-list {
margin-top: 20px;
}
.feedback-item {
background: #f1f1f1;
padding: 15px;
border-radius: 5px;
margin-bottom: 10px;
}
.feedback-item p {
margin: 0;
}
.social-links {
margin-top: 40px;
text-align: center;
}
.social-links a {
color: #007bff;
font-size: 24px;
text-decoration: none;
margin: 0 10px;
}
.social-links a:hover {
color: #0056b3;
}
.faq-item {
margin-bottom: 15px;
}
.faq-item h3 {
font-size: 20px;
margin: 0;
cursor: pointer;
background: #007bff;
color: #fff;
padding: 10px;
border-radius: 4px;
}
.faq-item p {
display: none;
margin: 10px 0;
padding: 10px;
background: #f1f1f1;
border-radius: 4px;
}
.faq-item.active p {
display: block;
}
.blog-post {
margin-bottom: 20px;
}
.blog-post h3 {
font-size: 24px;
margin: 0 0 10px;
}
.blog-post p {
margin: 0;
}
.live-chat {
position: fixed;
bottom: 20px;
right: 20px;
background: #007bff;
color: #fff;
padding: 15px;
border-radius: 50%;
cursor: pointer;
font-size: 24px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.live-chat:hover {
background: #0056b3;
}
@media (max-width: 768px) {
.product {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 480px) {
.product {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<header>
<h1>Oyuncu Marketim</h1>
</header>

<nav>
<a href="#home">Ana Sayfa</a>
<a href="#products">Ürünler</a>
<a href="#contact">İletişim</a>
<a href="#feedback">Yorumlar</a>
<a href="#faq">SSS</a>
<a href="#blog">Blog</a>
<a href="#about">Hakkımızda</a>
</nav>

<div class="hero">
<h2>En Yeni Oyun Hesapları Burada!</h2>
</div>

<!-- Slider -->


<div class="slider">
<div class="slides">
<div class="slide">
<img src
<img src="https://via.placeholder.com/1200x600" alt="Slide 1">
</div>
<div class="slide">
<img src="https://via.placeholder.com/1200x600" alt="Slide 2">
</div>
<div class="slide">
<img src="https://via.placeholder.com/1200x600" alt="Slide 3">
</div>
<div class="slide">
<img src="https://via.placeholder.com/1200x600" alt="Slide 4">
</div>
<div class="slide">
<img src="https://via.placeholder.com/1200x600" alt="Slide 5">
</div>
</div>
<div class="slider-controls">
<button class="prev">‹</button>
<button class="next">›</button>
</div>
</div>

<!-- Products -->


<div class="container">
<div id="products" class="product-grid">
<div class="product">
<img src="https://via.placeholder.com/300" alt="Product 1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="price">$19.99</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/300" alt="Product 2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="price">$29.99</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/300" alt="Product 3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="price">$39.99</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/300" alt="Product 4">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="price">$49.99</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/300" alt="Product 5">
<h2>Product 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="price">$59.99</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/300" alt="Product 6">
<h2>Product 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="price">$69.99</div>
</div>
</div>
</div>
<!-- Contact Form -->
<div id="contact" class="form-container">
<h2>İletişim</h2>
<form action="#">
<label for="name">İsim:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required>
<label for="message">Mesaj:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Gönder</button>
</form>
</div>

<!-- Feedback Section -->


<div id="feedback" class="feedback-container">
<h2>Yorumlar</h2>
<form action="#">
<label for="feedback-name">İsim:</label>
<input type="text" id="feedback-name" name="feedback-name" required>
<label for="feedback-message">Yorum:</label>
<textarea id="feedback-message" name="feedback-message" rows="5"
required></textarea>
<button type="submit">Gönder</button>
</form>
<div class="feedback-list">
<div class="feedback-item">
<p><strong>Ali:</strong> Çok memnun kaldım, teşekkürler!</p>
</div>
<div class="feedback-item">
<p><strong>Ayşe:</strong> Ürünler çok kaliteli.</p>
</div>
<div class="feedback-item">
<p><strong>Mehmet:</strong> Hızlı teslimat, harika hizmet!</p>
</div>
</div>
</div>

<!-- FAQ Section -->


<div id="faq" class="faq-container">
<h2>SSS</h2>
<div class="faq-item">
<h3>Soru 1: Hangi ürünleri satıyorsunuz?</h3>
<p>Cevap: Çeşitli oyun hesapları ve aksesuarları satıyoruz.</p>
</div>
<div class="faq-item">
<h3>Soru 2: Teslimat süresi nedir?</h3>
<p>Cevap: Teslimat süresi genellikle 3-5 iş günü arasında
değişmektedir.</p>
</div>
<div class="faq-item">
<h3>Soru 3: İade politikası nedir?</h3>
<p>Cevap: Ürünleri teslim aldıktan sonra 14 gün içinde iade
edebilirsiniz.</p>
</div>
<div class="faq-item">
<h3>Soru 4: Hangi ödeme yöntemlerini kabul ediyorsunuz?</h3>
<p>Cevap: Kredi kartı, banka kartı ve PayPal ile ödeme
yapabilirsiniz.</p>
</div>
</div>

<!-- Blog Section -->


<div id="blog" class="blog-container">
<h2>Blog</h2>
<div class="blog-post">
<h3>Yeni Çıkan Oyunlar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
vehicula dictum diam, at gravida ligula.</p>
</div>
<div class="blog-post">
<h3>Oyun İpuçları ve Taktikleri</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
vehicula dictum diam, at gravida ligula.</p>
</div>
<div class="blog-post">
<h3>Oyuncu Ekipmanları İncelemeleri</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
vehicula dictum diam, at gravida ligula.</p>
</div>
<div class="blog-post">
<h3>En Popüler Oyun Modları</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
vehicula dictum diam, at gravida ligula.</p>
</div>
<div class="blog-post">
<h3>Yılın En İyi Oyunları</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
vehicula dictum diam, at gravida ligula.</p>
</div>
</div>

<!-- About Section -->


<div id="about" class="about-container">
<h2>Hakkımızda</h2>
<p>Oyuncu Marketim, oyunculara en iyi oyun hesaplarını ve aksesuarlarını
sunmayı amaçlayan bir e-ticaret platformudur. Müşteri memnuniyeti bizim için en
önemli önceliktir ve bu nedenle kaliteli ürünler ve hızlı teslimat hizmeti
sunmaktayız.</p>
<p>Ekibimiz, oyun dünyasında uzun yıllara dayanan deneyime sahip
profesyonellerden oluşmaktadır. Amacımız, müşterilerimize en iyi alışveriş
deneyimini yaşatmak ve onların ihtiyaçlarına en uygun ürünleri sunmaktır.</p>
</div>

<!-- Social Links -->


<div class="social-links">
<a href="https://facebook.com" target="_blank">Facebook</a>
<a href="https://twitter.com" target="_blank">Twitter</a>
<a href="https://instagram.com" target="_blank">Instagram</a>
<a href="https://youtube.com" target="_blank">YouTube</a>
<a href="https://linkedin.com" target="_blank">LinkedIn</a>
</div>

<!-- Live Chat Button -->


<div class="live-chat">💬</div>

<script>
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const slides = document.querySelector('.slides');
let index = 0;

prev.addEventListener('click', () => {
index = (index > 0) ? index - 1 : slides.children.length - 1;
slides.style.transform = `translateX(${-index * 100}%)`;
});

next.addEventListener('click', () => {
index = (index < slides.children.length - 1) ? index + 1 : 0;
slides.style.transform = `translateX($
slides.style.transform = `translateX(${-index * 100}%)`;
});

// FAQ Toggle
document.querySelectorAll('.faq-item h3').forEach(item => {
item.addEventListener('click', () => {
const parent = item.parentElement;
parent.classList.toggle('active');
});
});
</script>
</body>
</html>

You might also like