It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://adresegit.net

  1. <!DOCTYPE html>
  2. <html lang="tr">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <title>El Yapımı Ahşap Mobilyalar</title>
  7.    <style>
  8.        /* Genel Reset ve Temel Stiller */
  9.        * {
  10.            margin: 0;
  11.            padding: 0;
  12.            box-sizing: border-box;
  13.        }
  14.  
  15.        body {
  16.            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  17.            line-height: 1.6;
  18.            color: #333;
  19.            background-color: #fdfdfd; /* Hafif kirli beyaz */
  20.        }
  21.  
  22.        .container {
  23.            width: 90%;
  24.            max-width: 1200px;
  25.            margin: 0 auto;
  26.            padding: 20px 0;
  27.        }
  28.  
  29.        h1, h2, h3, h4 {
  30.            font-weight: 600;
  31.            margin-bottom: 15px;
  32.            color: #2c3e50;
  33.        }
  34.  
  35.        p {
  36.            margin-bottom: 10px;
  37.            color: #555;
  38.        }
  39.  
  40.        a {
  41.            text-decoration: none;
  42.            color: #8c6b4f; /* Ahşap tonu */
  43.            transition: color 0.3s ease;
  44.        }
  45.  
  46.        a:hover {
  47.            color: #5a422d;
  48.        }
  49.  
  50.        img {
  51.            max-width: 100%;
  52.            height: auto;
  53.            display: block;
  54.        }
  55.  
  56.        /* Header */
  57.        .site-header {
  58.            background-color: #ffffff;
  59.            padding: 15px 0;
  60.            border-bottom: 1px solid #eaeaea;
  61.            position: sticky;
  62.            top: 0;
  63.            z-index: 1000;
  64.            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  65.        }
  66.  
  67.        .site-header .container {
  68.            display: flex;
  69.            justify-content: space-between;
  70.            align-items: center;
  71.        }
  72.  
  73.        .logo-container {
  74.            background-color: #ffffff;
  75.            padding: 5px;
  76.            display: inline-block;
  77.        }
  78.  
  79.        .logo {
  80.            max-height: 50px;
  81.        }
  82.  
  83.        .main-nav ul {
  84.            list-style: none;
  85.            display: flex;
  86.        }
  87.  
  88.        .main-nav ul li {
  89.            margin-left: 30px;
  90.        }
  91.  
  92.        .main-nav ul li a {
  93.            font-size: 16px;
  94.            font-weight: 500;
  95.            color: #333;
  96.            padding-bottom: 5px;
  97.            border-bottom: 2px solid transparent;
  98.            transition: color 0.3s ease, border-bottom-color 0.3s ease;
  99.        }
  100.  
  101.        .main-nav ul li a:hover,
  102.        .main-nav ul li a.active {
  103.            color: #8c6b4f;
  104.            border-bottom: 2px solid #8c6b4f;
  105.        }
  106.  
  107.        .menu-toggle {
  108.            display: none;
  109.            font-size: 24px;
  110.            background: none;
  111.            border: none;
  112.            color: #333;
  113.            cursor: pointer;
  114.        }
  115.  
  116.        /* Hero Section */
  117.        .hero {
  118.            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZnVybml0dXJlfGVufDB8fDB8fHww&auto=format&fit=crop&w=1200&q=80') no-repeat center center/cover;
  119.            color: #fff;
  120.            padding: 120px 0;
  121.            text-align: center;
  122.        }
  123.  
  124.        .hero h1 {
  125.            font-size: 3.2em;
  126.            margin-bottom: 20px;
  127.            color: #fff;
  128.            font-weight: 700;
  129.            text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  130.        }
  131.  
  132.        .hero p {
  133.            font-size: 1.25em;
  134.            margin-bottom: 30px;
  135.            color: #f0f0f0;
  136.            max-width: 700px;
  137.            margin-left: auto;
  138.            margin-right: auto;
  139.        }
  140.  
  141.        .btn {
  142.            display: inline-block;
  143.            background-color: #8c6b4f;
  144.            color: #fff !important; /* Önemli: Footer linkleriyle çakışmaması için */
  145.            padding: 14px 30px;
  146.            border-radius: 5px;
  147.            font-size: 1.05em;
  148.            font-weight: 500;
  149.            transition: background-color 0.3s ease, transform 0.3s ease;
  150.            border: none;
  151.            text-transform: uppercase;
  152.            letter-spacing: 0.5px;
  153.        }
  154.  
  155.        .btn:hover {
  156.            background-color: #5a422d;
  157.            transform: translateY(-3px);
  158.            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  159.        }
  160.  
  161.        /* Ürünler Bölümü */
  162.        .products-section {
  163.            padding: 70px 0;
  164.            background-color: #fff;
  165.        }
  166.  
  167.        .products-section h2 {
  168.            text-align: center;
  169.            font-size: 2.8em;
  170.            margin-bottom: 50px;
  171.        }
  172.  
  173.        .product-grid {
  174.            display: grid;
  175.            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  176.            gap: 35px;
  177.        }
  178.  
  179.        .product-card {
  180.            background-color: #ffffff;
  181.            border: 1px solid #e0e0e0;
  182.            border-radius: 8px;
  183.            overflow: hidden;
  184.            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  185.            transition: transform 0.3s ease, box-shadow 0.3s ease;
  186.            display: flex;
  187.            flex-direction: column;
  188.        }
  189.  
  190.        .product-card:hover {
  191.            transform: translateY(-8px);
  192.            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  193.        }
  194.  
  195.        .product-card img {
  196.            width: 100%;
  197.            height: 260px;
  198.            object-fit: cover;
  199.        }
  200.  
  201.        .product-info {
  202.            padding: 25px;
  203.            flex-grow: 1;
  204.            display: flex;
  205.            flex-direction: column;
  206.            justify-content: space-between;
  207.        }
  208.  
  209.        .product-info h3 {
  210.            font-size: 1.5em;
  211.            margin-bottom: 10px;
  212.        }
  213.  
  214.        .product-info p {
  215.            font-size: 0.95em;
  216.            margin-bottom: 15px;
  217.            flex-grow: 1;
  218.        }
  219.  
  220.        .product-price {
  221.            font-size: 1.3em;
  222.            font-weight: bold;
  223.            color: #8c6b4f;
  224.            margin-bottom: 20px;
  225.        }
  226.  
  227.        /* Neden Biz Bölümü */
  228.        .why-choose-us-section {
  229.            padding: 60px 0;
  230.            background-color: #f4f0eb;
  231.        }
  232.        .why-choose-us-section h2 {
  233.            text-align: center;
  234.            font-size: 2.5em;
  235.            margin-bottom: 40px;
  236.        }
  237.        .features-grid {
  238.            display: grid;
  239.            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  240.            gap: 30px;
  241.            text-align: center;
  242.        }
  243.        .feature-item {
  244.            padding: 20px;
  245.        }
  246.        .feature-item svg { /* SVG ikonlar için yer tutucu */
  247.            width: 50px;
  248.            height: 50px;
  249.            margin-bottom: 15px;
  250.            fill: #8c6b4f;
  251.        }
  252.        .feature-item h3 {
  253.            font-size: 1.3em;
  254.            margin-bottom: 10px;
  255.        }
  256.  
  257.        /* Hakkımızda (Bizim Sanatımız) Bölümü */
  258.        .about-section {
  259.            padding: 70px 0;
  260.            background-color: #ffffff;
  261.        }
  262.  
  263.        .about-section .container {
  264.            display: flex;
  265.            flex-wrap: wrap;
  266.            align-items: center;
  267.            gap: 50px;
  268.        }
  269.  
  270.        .about-content, .about-image {
  271.            flex: 1;
  272.            min-width: 300px;
  273.        }
  274.  
  275.        .about-section h2 {
  276.            font-size: 2.5em;
  277.            margin-bottom: 20px;
  278.        }
  279.  
  280.        .about-section p {
  281.            font-size: 1.05em;
  282.            margin-bottom: 15px;
  283.        }
  284.  
  285.        .about-image img {
  286.            border-radius: 8px;
  287.            box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  288.        }
  289.        
  290.        /* Müşteri Yorumları Bölümü */
  291.        .testimonials-section {
  292.            padding: 60px 0;
  293.            background-color: #f9f9f9;
  294.        }
  295.        .testimonials-section h2 {
  296.            text-align: center;
  297.            font-size: 2.5em;
  298.            margin-bottom: 40px;
  299.        }
  300.        .testimonial-grid {
  301.            display: grid;
  302.            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  303.            gap: 30px;
  304.        }
  305.        .testimonial-card {
  306.            background-color: #fff;
  307.            padding: 25px;
  308.            border-radius: 8px;
  309.            box-shadow: 0 5px 15px rgba(0,0,0,0.07);
  310.            border-left: 5px solid #8c6b4f;
  311.        }
  312.        .testimonial-card p.quote {
  313.            font-style: italic;
  314.            margin-bottom: 15px;
  315.            color: #555;
  316.        }
  317.        .testimonial-card p.author {
  318.            font-weight: bold;
  319.            text-align: right;
  320.            color: #333;
  321.        }
  322.  
  323.        /* İletişim Bölümü */
  324.        .contact-section {
  325.            padding: 70px 0;
  326.            background-color: #eef1f3; /* Daha yumuşak bir arka plan */
  327.        }
  328.  
  329.        .contact-section h2 {
  330.            text-align: center;
  331.            font-size: 2.8em;
  332.            margin-bottom: 20px;
  333.        }
  334.        .contact-section .subtitle {
  335.            text-align: center;
  336.            font-size: 1.1em;
  337.            color: #555;
  338.            margin-bottom: 40px;
  339.            max-width: 600px;
  340.            margin-left: auto;
  341.            margin-right: auto;
  342.        }
  343.  
  344.        .contact-form-container {
  345.            max-width: 700px;
  346.            margin: 0 auto;
  347.            background-color: #ffffff;
  348.            padding: 40px;
  349.            border-radius: 8px;
  350.            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  351.        }
  352.  
  353.        .form-group {
  354.            margin-bottom: 20px;
  355.        }
  356.  
  357.        .form-group label {
  358.            display: block;
  359.            margin-bottom: 8px;
  360.            font-weight: 500;
  361.            color: #444;
  362.        }
  363.  
  364.        .form-group input[type="text"],
  365.        .form-group input[type="email"],
  366.        .form-group textarea {
  367.            width: 100%;
  368.            padding: 12px 15px;
  369.            border: 1px solid #ccc;
  370.            border-radius: 5px;
  371.            font-size: 1em;
  372.            transition: border-color 0.3s ease, box-shadow 0.3s ease;
  373.        }
  374.  
  375.        .form-group input[type="text"]:focus,
  376.        .form-group input[type="email"]:focus,
  377.        .form-group textarea:focus {
  378.            border-color: #8c6b4f;
  379.            box-shadow: 0 0 0 2px rgba(140, 107, 79, 0.2);
  380.            outline: none;
  381.        }
  382.  
  383.        .form-group textarea {
  384.            min-height: 120px;
  385.            resize: vertical;
  386.        }
  387.  
  388.        .contact-form-container .btn {
  389.            display: block;
  390.            width: auto;
  391.            margin: 20px auto 0 auto;
  392.            padding: 14px 35px;
  393.        }
  394.  
  395.        /* Footer */
  396.        .site-footer {
  397.            background-color: #2c3e50;
  398.            color: #bdc3c7; /* Daha açık gri */
  399.            padding: 50px 0 30px 0;
  400.            margin-top: 40px;
  401.        }
  402.        .footer-content {
  403.            display: grid;
  404.            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  405.            gap: 30px;
  406.            margin-bottom: 30px;
  407.            text-align: left;
  408.        }
  409.        .footer-section h4 {
  410.            color: #ecf0f1;
  411.            margin-bottom: 15px;
  412.            font-size: 1.2em;
  413.        }
  414.        .footer-section p, .footer-section ul li {
  415.            margin-bottom: 8px;
  416.            font-size: 0.95em;
  417.        }
  418.        .footer-section ul {
  419.            list-style: none;
  420.        }
  421.        .footer-section ul li a {
  422.            color: #bdc3c7;
  423.            transition: color 0.3s ease, padding-left 0.3s ease;
  424.        }
  425.        .footer-section ul li a:hover {
  426.            color: #ffffff;
  427.            padding-left: 5px;
  428.        }
  429.        .footer-section .contact-info p i { /* İkonlar için yer tutucu */
  430.            margin-right: 8px;
  431.            color: #8c6b4f;
  432.        }
  433.        .footer-bottom {
  434.            text-align: center;
  435.            padding-top: 20px;
  436.            border-top: 1px solid #3e5062;
  437.            font-size: 0.9em;
  438.            color: #95a5a6;
  439.        }
  440.  
  441.  
  442.        /* Responsive Tasarım */
  443.        @media (max-width: 992px) {
  444.            .product-grid {
  445.                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  446.            }
  447.        }
  448.  
  449.        @media (max-width: 768px) {
  450.            .site-header .container {
  451.                flex-direction: column;
  452.            }
  453.  
  454.            .logo-container {
  455.                margin-bottom: 15px;
  456.            }
  457.  
  458.            .main-nav {
  459.                width: 100%;
  460.                display: none;
  461.            }
  462.  
  463.            .main-nav.active {
  464.                display: block;
  465.            }
  466.  
  467.            .main-nav ul {
  468.                flex-direction: column;
  469.                text-align: center;
  470.                width: 100%;
  471.            }
  472.  
  473.            .main-nav ul li {
  474.                margin: 12px 0;
  475.            }
  476.  
  477.            .menu-toggle {
  478.                display: block;
  479.                position: absolute;
  480.                top: 25px;
  481.                right: 25px;
  482.            }
  483.  
  484.            .hero h1 {
  485.                font-size: 2.5em;
  486.            }
  487.  
  488.            .hero p {
  489.                font-size: 1.1em;
  490.            }
  491.            .products-section h2, .about-section h2, .testimonials-section h2, .contact-section h2, .why-choose-us-section h2 {
  492.                font-size: 2.2em;
  493.            }
  494.  
  495.            .product-grid, .features-grid, .testimonial-grid {
  496.                grid-template-columns: 1fr;
  497.            }
  498.  
  499.            .about-section .container {
  500.                flex-direction: column;
  501.            }
  502.            .footer-content {
  503.                text-align: center;
  504.            }
  505.            .footer-section {
  506.                margin-bottom: 20px;
  507.            }
  508.        }
  509.  
  510.        @media (max-width: 480px) {
  511.            .hero h1 {
  512.                font-size: 2em;
  513.            }
  514.            .btn {
  515.                padding: 12px 25px;
  516.                font-size: 0.95em;
  517.            }
  518.            .products-section h2, .about-section h2, .testimonials-section h2, .contact-section h2, .why-choose-us-section h2 {
  519.                font-size: 1.9em;
  520.            }
  521.            .product-info h3 {
  522.                font-size: 1.3em;
  523.            }
  524.            .contact-form-container {
  525.                padding: 25px;
  526.            }
  527.        }
  528.    </style>
  529. </head>
  530. <body>
  531.  
  532.    <header class="site-header">
  533.        <div class="container">
  534.            <div class="logo-container">
  535.                <a href="#">
  536.                    <img src="https://bwoodworks.com.au/cdn/shop/files/bwwg-logo-rgb-hires-black_280x@2x.png" alt="El Yapımı Ahşap Mobilyalar Logo" class="logo">
  537.                </a>
  538.            </div>
  539.            <button class="menu-toggle" aria-label="Menüyü Aç/Kapat" aria-expanded="false">☰</button>
  540.            <nav class="main-nav">
  541.                <ul>
  542.                    <li><a href="#" class="active">Ana Sayfa</a></li>
  543.                    <li><a href="#urunler">Ürünler</a></li>
  544.                    <li><a href="#hakkimizda">Hakkımızda</a></li>
  545.                    <li><a href="#yorumlar">Müşteri Yorumları</a></li>
  546.                    <li><a href="#iletisim">İletişim</a></li>
  547.                </ul>
  548.            </nav>
  549.        </div>
  550.    </header>
  551.  
  552.    <section class="hero">
  553.        <div class="container">
  554.            <h1>Sanat ve Doğallığın Buluştuğu Mobilyalar</h1>
  555.            <p>Her biri özenle, ustalıkla ve sevgiyle üretilmiş el yapımı ahşap mobilyalarla yaşam alanlarınıza değer katın.</p>
  556.            <a href="#urunler" class="btn">Koleksiyonu Keşfet</a>
  557.        </div>
  558.    </section>
  559.  
  560.    <section class="why-choose-us-section">
  561.        <div class="container">
  562.            <h2>Neden Bizi Tercih Etmelisiniz?</h2>
  563.            <div class="features-grid">
  564.                <div class="feature-item">
  565.                    <svg viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.13,5.12L18.88,8.87M3,17.25V21H6.75L17.81,9.94L14.06,6.19L3,17.25Z" /></svg>
  566.                    <h3>El İşçiliği Ustalığı</h3>
  567.                    <p>Her detayda özen ve ustalıkla üretilmiş, eşsiz mobilyalar.</p>
  568.                </div>
  569.                <div class="feature-item">
  570.                    <svg viewBox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /></svg>
  571.                    <h3>Kaliteli Malzemeler</h3>
  572.                    <p>Sadece en iyi ve sürdürülebilir kaynaklardan elde edilen ahşaplar kullanılır.</p>
  573.                </div>
  574.                <div class="feature-item">
  575.                     <svg viewBox="0 0 24 24"><path d="M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V12H16.75L17.95,9.6C17.2,8.5 16.08,7.83 14.82,7.83C13,7.83 11.5,9.04 11.07,10.59H19V5M5,5H10.07C10.5,6.55 12,7.75 13.75,7.75C14.33,7.75 14.89,7.63 15.39,7.41L13.19,12H5V5M5,19V13H9.25L8.05,15.4C8.8,16.5 9.92,17.17 11.18,17.17C13,17.17 14.5,15.96 14.93,14.41H5V19Z" /></svg>
  576.                    <h3>Özel Tasarım İmkanı</h3>
  577.                    <p>Hayalinizdeki mobilyayı sizin için özel olarak tasarlayıp üretiyoruz.</p>
  578.                </div>
  579.            </div>
  580.        </div>
  581.    </section>
  582.  
  583.    <section id="urunler" class="products-section">
  584.        <div class="container">
  585.            <h2>Özel Tasarımlarımız</h2>
  586.            <div class="product-grid">
  587.                <div class="product-card">
  588.                    <img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8d29vZCUyMGZ1cm5pdHVyZXxlbnwwfHwwfHx8MA&auto=format&fit=crop&w=500&q=60" alt="Ahşap Sandalye">
  589.                    <div class="product-info">
  590.                        <h3>Rustik Meşe Sandalye</h3>
  591.                        <p>Doğal meşe ağacından el yapımı, konforlu ve şık tasarım.</p>
  592.                        <p class="product-price">1.250 TL</p>
  593.                        <a href="#" class="btn">Detayları Gör</a>
  594.                    </div>
  595.                </div>
  596.                <div class="product-card">
  597.                    <img src="https://images.unsplash.com/photo-1604079628040-94301bb21b91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHdhbG51dCUyMGRpbmluZyUyMHRhYmxlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" alt="Ceviz Yemek Masası Güncel">
  598.                    <div class="product-info">
  599.                        <h3>Ceviz Yemek Masası</h3>
  600.                        <p>Geniş aileler için ideal, masif cevizden üretilmiş dayanıklı masa.</p>
  601.                        <p class="product-price">4.800 TL</p>
  602.                        <a href="#" class="btn">Detayları Gör</a>
  603.                    </div>
  604.                </div>
  605.                <div class="product-card">
  606.                    <img src="https://images.unsplash.com/photo-1618220179428-22790b461013?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHdvb2QlMjBmdXJuaXR1cmV8ZW58MHx8MHx8fDA&auto=format&fit=crop&w=500&q=60" alt="Ahşap Kitaplık">
  607.                    <div class="product-info">
  608.                        <h3>Modern Çam Kitaplık</h3>
  609.                        <p>Minimalist tasarımıyla evinize modern bir dokunuş katacak kitaplık.</p>
  610.                        <p class="product-price">2.100 TL</p>
  611.                        <a href="#" class="btn">Detayları Gör</a>
  612.                    </div>
  613.                </div>
  614.                 <div class="product-card">
  615.                    <img src="https://images.unsplash.com/photo-1540932239986-30128078f3c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHdvb2QlMjBmdXJuaXR1cmV8ZW58MHx8MHx8fDA&auto=format&fit=crop&w=500&q=60" alt="Ahşap Komodin">
  616.                    <div class="product-info">
  617.                        <h3>Vintage Tarz Komodin</h3>
  618.                        <p>El oyması detaylarıyla yatak odanıza nostaljik bir hava katın.</p>
  619.                        <p class="product-price">1.750 TL</p>
  620.                        <a href="#" class="btn">Detayları Gör</a>
  621.                    </div>
  622.                </div>
  623.                <div class="product-card">
  624.                    <img src="https://images.unsplash.com/photo-1544093120-52793369d09b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8d29vZGVuJTIwY29mZmVlJTIwdGFibGV8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" alt="Ahşap Kahve Sehpası">
  625.                    <div class="product-info">
  626.                        <h3>Ahşap Kahve Sehpası</h3>
  627.                        <p>Oturma odanız için şık ve kullanışlı, masif ahşap orta sehpa.</p>
  628.                        <p class="product-price">1.900 TL</p>
  629.                        <a href="#" class="btn">Detayları Gör</a>
  630.                    </div>
  631.                </div>
  632.                <div class="product-card">
  633.                    <img src="https://images.unsplash.com/photo-1594851140213-76e25659c061?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8d29vZGVuJTIwc2hlbGZ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" alt="Masif Ahşap Raf Ünitesi">
  634.                    <div class="product-info">
  635.                        <h3>Masif Ahşap Raf Ünitesi</h3>
  636.                        <p>Kitaplarınız ve dekoratif objeleriniz için doğal ve sağlam raf sistemi.</p>
  637.                        <p class="product-price">2.650 TL</p>
  638.                        <a href="#" class="btn">Detayları Gör</a>
  639.                    </div>
  640.                </div>
  641.            </div>
  642.        </div>
  643.    </section>
  644.  
  645.    <section id="hakkimizda" class="about-section">
  646.        <div class="container">
  647.            <div class="about-content">
  648.                <h2>Bizim Sanatımız, Sizin Yaşamınız</h2>
  649.                <p>Yılların deneyimi ve ahşaba olan tutkumuzla, her biri bir sanat eseri niteliğinde mobilyalar üretiyoruz. Kullandığımız her ahşap parçasını özenle seçiyor, geleneksel yöntemleri modern tasarımlarla birleştiriyoruz.</p>
  650.                <p>Amacımız sadece mobilya üretmek değil, aynı zamanda yaşam alanlarınıza sıcaklık, karakter ve kalıcı bir değer katmaktır. Sürdürülebilir kaynaklardan elde edilen malzemelerle doğaya saygılı üretim yapıyoruz.</p>
  651.                <a href="#" class="btn">Hikayemizi Okuyun</a>
  652.            </div>
  653.            <div class="about-image">
  654.                <img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FycGVudGVyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=80" alt="El yapımı mobilya ustası">
  655.            </div>
  656.        </div>
  657.    </section>
  658.    
  659.    <section id="yorumlar" class="testimonials-section">
  660.        <div class="container">
  661.            <h2>Müşterilerimiz Ne Diyor?</h2>
  662.            <div class="testimonial-grid">
  663.                <div class="testimonial-card">
  664.                    <p class="quote">"Aldığım yemek masası tam hayal ettiğim gibiydi. Kalitesi ve işçiliği harika. Teşekkürler!"</p>
  665.                    <p class="author">- Ayşe K.</p>
  666.                </div>
  667.                <div class="testimonial-card">
  668.                    <p class="quote">"Özel tasarım kitaplığım için çok yardımcı oldular. Sonuçtan çok memnunum, herkese tavsiye ederim."</p>
  669.                    <p class="author">- Mehmet T.</p>
  670.                </div>
  671.                <div class="testimonial-card">
  672.                    <p class="quote">"Hem şık hem de çok sağlam mobilyalar. Evime bambaşka bir hava kattı."</p>
  673.                    <p class="author">- Zeynep S.</p>
  674.                </div>
  675.            </div>
  676.        </div>
  677.    </section>
  678.  
  679.    <section id="iletisim" class="contact-section">
  680.        <div class="container">
  681.            <h2>Bize Ulaşın</h2>
  682.            <p class="subtitle">Özel siparişleriniz, sorularınız veya iş birliği talepleriniz için aşağıdaki formu doldurarak bizimle iletişime geçebilirsiniz.</p>
  683.            <div class="contact-form-container">
  684.                <form action="#" method="POST"> <div class="form-group">
  685.                        <label for="name">Adınız Soyadınız:</label>
  686.                        <input type="text" id="name" name="name" required>
  687.                    </div>
  688.                    <div class="form-group">
  689.                        <label for="email">E-posta Adresiniz:</label>
  690.                        <input type="email" id="email" name="email" required>
  691.                    </div>
  692.                    <div class="form-group">
  693.                        <label for="subject">Konu:</label>
  694.                        <input type="text" id="subject" name="subject">
  695.                    </div>
  696.                    <div class="form-group">
  697.                        <label for="message">Mesajınız:</label>
  698.                        <textarea id="message" name="message" rows="5" required></textarea>
  699.                    </div>
  700.                    <button type="submit" class="btn">Mesajı Gönder</button>
  701.                </form>
  702.            </div>
  703.        </div>
  704.    </section>
  705.  
  706.    <footer class="site-footer">
  707.        <div class="container">
  708.            <div class="footer-content">
  709.                <div class="footer-section about-brief">
  710.                    <h4>El Yapımı Ahşap</h4>
  711.                    <p>Doğadan ilham alarak, her biri özenle tasarlanmış ve ustalıkla üretilmiş el yapımı ahşap mobilyalarla yaşam alanlarınıza değer katıyoruz.</p>
  712.                </div>
  713.                <div class="footer-section links">
  714.                    <h4>Hızlı Erişim</h4>
  715.                    <ul>
  716.                        <li><a href="#">Ana Sayfa</a></li>
  717.                        <li><a href="#urunler">Ürünlerimiz</a></li>
  718.                        <li><a href="#hakkimizda">Hakkımızda</a></li>
  719.                        <li><a href="#yorumlar">Müşteri Yorumları</a></li>
  720.                        <li><a href="#iletisim">İletişim</a></li>
  721.                        <li><a href="#">S.S.S.</a></li>
  722.                    </ul>
  723.                </div>
  724.                <div class="footer-section contact-info-footer">
  725.                    <h4>İletişim Bilgileri</h4>
  726.                    <p><i class="icon-mail"></i>Email: bilgi@elyapimiahsap.com</p>
  727.                    <p><i class="icon-phone"></i>Telefon: +90 555 123 45 67</p>
  728.                    <p><i class="icon-location"></i>Adres: Ahşap Sanatkarları Sok. No:12, İstanbul</p>
  729.                    </div>
  730.            </div>
  731.            <div class="footer-bottom">
  732.                &copy; <span id="currentYear"></span> El Yapımı Ahşap Mobilyalar. Tüm Hakları Saklıdır.
  733.            </div>
  734.        </div>
  735.    </footer>
  736.  
  737.    <script>
  738.        // Mobil Menü Toggle
  739.        const menuToggle = document.querySelector('.menu-toggle');
  740.        const mainNav = document.querySelector('.main-nav');
  741.  
  742.        menuToggle.addEventListener('click', () => {
  743.            const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true' || false;
  744.            menuToggle.setAttribute('aria-expanded', !isExpanded);
  745.            mainNav.classList.toggle('active');
  746.        });
  747.  
  748.        // Aktif Menü Öğesini Ayarlama ve Mobil Menüyü Kapatma
  749.        const navLinks = document.querySelectorAll('.main-nav ul li a');
  750.        navLinks.forEach(link => {
  751.            link.addEventListener('click', function() {
  752.                navLinks.forEach(nav => nav.classList.remove('active'));
  753.                this.classList.add('active');
  754.                if (mainNav.classList.contains('active')) {
  755.                    mainNav.classList.remove('active');
  756.                    menuToggle.setAttribute('aria-expanded', 'false');
  757.                }
  758.            });
  759.        });
  760.        
  761.        document.getElementById('currentYear').textContent = new Date().getFullYear();
  762.  
  763.        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  764.            anchor.addEventListener('click', function (e) {
  765.                const href = this.getAttribute('href');
  766.                if (href === '#') {
  767.                    e.preventDefault();
  768.                    window.scrollTo({ top: 0, behavior: 'smooth' });
  769.                    return;
  770.                }
  771.                
  772.                const targetElement = document.querySelector(href);
  773.                if (targetElement) {
  774.                    e.preventDefault();
  775.                    // Header yüksekliğini hesaba katmak için (eğer sticky ise)
  776.                    const headerOffset = document.querySelector('.site-header') ? document.querySelector('.site-header').offsetHeight : 0;
  777.                    const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
  778.                    const offsetPosition = elementPosition - headerOffset - 15; // 15px ek boşluk
  779.  
  780.                    window.scrollTo({
  781.                        top: offsetPosition,
  782.                        behavior: 'smooth'
  783.                    });
  784.                }
  785.            });
  786.        });
  787.    </script>
  788.  
  789. </body>
  790. </html>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda