Webleb - fragmentos de código

HTML

<!DOCTYPE html>

<head>

<title>Nexus | Modern Tasarım ve Geliştirme</title>

</head>

<body>

</div>

<a href="#" class="logo">Nexus<span>.</span></a>

<nav>

<li class="nav-item"><a href="#home" class="nav-link active">Ana Sayfa</a></li>

<li class="nav-item"><a href="#about" class="nav-link">Hakkımızda</a></li>

<li class="nav-item"><a href="#services" class="nav-link">Hizmetler</a></li>

<li class="nav-item"><a href="#portfolio" class="nav-link">Portföy</a></li>

<li class="nav-item"><a href="#contact" class="nav-link">İletişim</a></li>

</ul>

</nav>

</div>

</header>

<main>

<h1>Modern ve <span class="highlight">İlham Verici</span> Çözümler</h1>

<p class="subtitle">Dijital dünyada yaratıcılık, teknoloji ve tasarımı birleştiriyoruz.</p>

<p>Nexus olarak, işletmenizin dijital varlığını güçlendirmek için modern web teknolojileri, etkileyici tasarımlar ve kullanıcı odaklı yaklaşımlar sunuyoruz.</p>

<a href="#portfolio" class="btn">Projelerimizi Gör</a>

<a href="#contact" class="btn btn-secondary">İletişime Geç</a>

</div>

</div>

</div>

</div>

</section>

<h2 class="section-title">Hakkımızda</h2>

</div>

<h3>Yaratıcılık ve Teknolojinin Kesistiği Nokta</h3>

<p>Nexus, 2015 yılından bu yana dijital dünyada yenilikçi çözümler sunan bir tasarım ve geliştirme stüdyosudur. Amacımız, müşterilerimizin hedeflerine ulaşmalarına yardımcı olacak etkileyici ve işlevsel dijital deneyimler oluşturmaktır.</p>

<p style="margin-top: 1rem;">Ekibimiz, deneyimli tasarımcılar, geliştiriciler ve dijital stratejistlerden oluşmaktadır. Her projeye yenilikçi bir bakış açısı getirerek, markanızın dijital varlığını güçlendiriyoruz.</p>

<span>Web Geliştirme</span>

</div>

</div>

<span>UI/UX Tasarım</span>

</div>

</div>

<span>Dijital Strateji</span>

</div>

</div>

</section>

<h2 class="section-title">Hizmetlerimiz</h2>

</div>

<h3>Web Geliştirme</h3>

<p>Modern, responsive ve kullanıcı dostu web siteleri ve web uygulamaları geliştiriyoruz. En son teknolojileri kullanarak performanslı çözümler sunuyoruz.</p>

</div>

</div>

<h3>UI/UX Tasarım</h3>

<p>Kullanıcı ihtiyaçlarına odaklanan, estetik ve işlevsel arayüz tasarımları oluşturuyoruz. Marka kimliğinizi yansıtan tasarımlar geliştiriyoruz.</p>

</div>

</div>

<h3>Mobil Uygulama</h3>

<p>iOS ve Android platformları için native ve hybrid mobil uygulamalar geliştiriyoruz. Kullanıcı deneyimini ön planda tutan çözümler sunuyoruz.</p>

</div>

</section>

<h2 class="section-title">Portföyümüz</h2>

<h3>Finans Dashboard</h3>

<p>Kapsamlı finansal analiz ve yönetim dashboard'u.</p>

</div>

<h3>Modern E-ticaret</h3>

<p>Responsive tasarım ve gelişmiş ödeme entegrasyonları.</p>

</div>

<h3>Sosyal Ağ Platformu</h3>

<p>Kullanıcı odaklı sosyal medya uygulaması.</p>

</div>

</section>

<h2 class="section-title">Ekibimiz</h2>

<h3>Ahmet Yılmaz</h3>

<span>UI Tasarımcı</span>

<ul>

</ul>

</div>

<h3>Zeynep Kaya</h3>

<span>UX Tasarımcı</span>

<ul>

</ul>

</div>

<h3>Mehmet Demir</h3>

<span>Full-Stack Geliştirici</span>

<ul>

</ul>

</div>

</section>

<h2 class="section-title">Son Blog Yazıları</h2>

<h3>2024 Web Tasarım Trendleri</h3>

</div>

<p>Bu yılın en önemli web tasarım trendlerini ve nasıl uygulayabileceğinizi keşfedin.</p>

</div>

<h3>Modern SEO Stratejileri</h3>

</div>

<p>2024'te web sitenizin görünürlüğünü artıracak en etkili SEO stratejileri.</p>

</div>

<h3>Kullanıcı Deneyimi İpuçları</h3>

</div>

<p>Kullanıcılarınızı memnun edecek ve dönüşümleri artıracak UX ipuçları.</p>

</div>

</section>

<h2 class="section-title">Sıkça Sorulan Sorular</h2>

<h3>Proje teslim süreleri ne kadar?</h3>

</div>

<p>Proje teslim süreleri projenin kapsamına ve karmaşıklığına göre değişiklik gösterir. Basit bir web sitesi için 2-4 hafta, daha karmaşık projeler için 8-12 hafta arasında değişen süreler söz konusudur. Detaylı zaman çizelgesi için bizimle iletişime geçebilirsiniz.</p>

</div>

<h3>Fiyatlandırma nasıl yapılıyor?</h3>

</div>

<p>Fiyatlandırma projenin gereksinimlerine, kapsamına ve karmaşıklığına göre belirlenir. Her proje için özel teklif hazırlıyoruz. İhtiyaçlarınızı dinledikten sonra size uygun bir fiyat teklifi sunuyoruz.</p>

</div>

<h3>Proje tamamlandıktan sonra destek sunuyor musunuz?</h3>

</div>

<p>Evet, tüm projelerimiz için proje tesliminden sonra belirli bir süre ücretsiz destek sağlıyoruz. Ayrıca bakım ve güncelleme paketleri sunarak projenizin uzun vadede sorunsuz çalışmasını garantiliyoruz.</p>

</div>

<h3>SEO hizmeti de veriyor musunuz?</h3>

</div>

<p>Evet, web sitelerimizi SEO dostu olarak geliştiriyoruz. Ayrıca profesyonel SEO danışmanlığı ve optimizasyon hizmetleri de sunuyoruz. Web sitenizin arama motorlarında üst sıralarda yer alması için gerekli tüm çalışmaları yapıyoruz.</p>

</div>

</div>

</section>

<h2 class="section-title">İletişim</h2>

<h3 style="margin-bottom: 1.5rem;">Bize Ulaşın</h3>

</div>

<div>

<h4>Konum</h4>

<p>İstanbul, Türkiye</p>

</div>

</div>

<div>

<h4>Email</h4>

<p>info@nexusdesign.com</p>

</div>

</div>

<div>

<h4>Telefon</h4>

</div>

</div>

<div>

<h4>Çalışma Saatleri</h4>

</div>

</div>

<label for="email">Email</label>

</div>

</div>

<label for="message">Mesaj</label>

</div>

<button type="submit" class="btn">Gönder</button>

</form>

</div>

</section>

</main>

<a href="#" class="footer-logo">Nexus<span>.</span></a>

<p class="footer-information">Modern ve ilham verici dijital çözümler için doğru adres.</p>

</div>

<h3 class="footer-title">Hızlı Bağlantılar</h3>

<li class="footer-information-link"><a href="#home">Ana Sayfa</a></li>

<li class="footer-information-link"><a href="#about">Hakkımızda</a></li>

<li class="footer-information-link"><a href="#services">Hizmetler</a></li>

<li class="footer-information-link"><a href="#portfolio">Portföy</a></li>

</ul>

</div>

<h3 class="footer-title">Hizmetlerimiz</h3>

<li class="footer-information-link"><a href="#">Web Geliştirme</a></li>

<li class="footer-information-link"><a href="#">UI/UX Tasarım</a></li>

<li class="footer-information-link"><a href="#">Mobil Uygulama</a></li>

<li class="footer-information-link"><a href="#">SEO Optimizasyon</a></li>

<li class="footer-information-link"><a href="#">Dijital Pazarlama</a></li>

</ul>

</div>

<h3 class="footer-title">Bültenimize Abone Olun</h3>

<p class="footer-information">En son gelişmelerden haberdar olun.</p>

</button>

</div>

</footer>

</button>

</body>

</html>

CSS

/* CSS Variables - Modern Color Palette */

:root {

--primary-color: #7B68EE;

--secondary-color: #5F4B8B;

--accent-color: #FF7043;

--dark-bg: #0A0A0A;

--card-bg: rgba(255, 255, 255, 0.08);

--light-text: #E0E0E0;

--border-color: rgba(255, 255, 255, 0.15);

--gradient-main: linear-gradient(135deg, var(--primary-color), var(--accent-color));

--card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);

--font-primary: 'Inter', sans-serif;

--font-heading: 'Poppins', sans-serif;

--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

/* Reset & Base Styles */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

font-family: var(--font-primary);

background-color: var(--dark-bg);

color: var(--light-text);

line-height: 1.6;

overflow-x: hidden;

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

}

section {

padding: 100px 0;

}

h1, h2, h3, h4, h5, h6 {

font-family: var(--font-heading);

font-weight: 700;

}

.section-title {

font-size: 2.5rem;

text-align: center;

margin-bottom: 3rem;

position: relative;

}

.section-title::after {

content: '';

display: block;

width: 80px;

height: 4px;

background: var(--gradient-main);

border-radius: 2px;

margin: 1rem auto;

}

/* Preloader */

#preloader {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: var(--dark-bg);

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

transition: opacity 0.5s, visibility 0.5s;

}

.loader {

width: 60px;

height: 60px;

border: 5px solid rgba(123, 104, 238, 0.3);

border-top-color: var(--primary-color);

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

/* Header & Navigation */

.header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

padding: 20px 0;

transition: all 0.4s ease;

background-color: rgba(10, 10, 10, 0.95);

backdrop-filter: blur(10px);

box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 1.8rem;

font-weight: 800;

color: var(--light-text);

text-decoration: none;

display: flex;

align-items: center;

}

.logo span {

color: var(--primary-color);

margin-left: 4px;

}

.nav-menu {

display: flex;

list-style: none;

gap: 40px;

}

.nav-link {

text-decoration: none;

color: var(--light-text);

font-weight: 500;

transition: color 0.3s;

position: relative;

padding-bottom: 5px;

}

.nav-link::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: var(--gradient-main);

transition: width 0.3s;

}

.nav-link:hover, .nav-link.active {

color: var(--primary-color);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

.menu-toggle {

display: none;

font-size: 1.5rem;

background: none;

border: none;

color: var(--light-text);

cursor: pointer;

}

/* Hero Section */

#home {

min-height: 100vh;

display: flex;

align-items: center;

position: relative;

overflow: hidden;

background: radial-gradient(circle at top left, rgba(123, 104, 238, 0.2), transparent 70%);

}

.hero-content {

display: flex;

align-items: center;

justify-content: space-between;

gap: 3rem;

}

.hero-text {

flex: 1;

}

.hero-text h1 {

font-size: 3.5rem;

line-height: 1.2;

margin-bottom: 1.5rem;

}

.hero-text h1 .highlight {

background: var(--gradient-main);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

.hero-text .subtitle {

font-size: 1.25rem;

margin-bottom: 2rem;

color: rgba(224, 224, 224, 0.8);

}

/* Button Styles */

.btn {

display: inline-flex;

align-items: center;

padding: 12px 30px;

background: var(--gradient-main);

color: white;

text-decoration: none;

font-weight: 600;

border-radius: 2rem;

transition: var(--transition);

box-shadow: 0 8px 32px rgba(123, 104, 238, 0.3);

border: none;

cursor: pointer;

}

.btn:hover {

transform: translateY(-4px);

box-shadow: 0 12px 40px rgba(123, 104, 238, 0.5);

}

.button-icon {

margin-left: 0.5rem;

transition: transform 0.3s ease;

}

.btn:hover .button-icon {

transform: scale(1.2) rotate(15deg);

}

.btn-secondary {

background: transparent;

color: var(--light-text);

border: 2px solid var(--light-text);

margin-left: 1rem;

}

.btn-secondary:hover {

background: var(--light-text);

color: var(--dark-bg);

}

.btn-group {

display: flex;

gap: 1rem;

margin-top: 2rem;

}

.hero-image {

flex: 1;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.hero-visual {

position: relative;

width: 300px;

height: 400px;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

transform: rotate(3deg);

transition: transform 0.5s ease;

}

.hero-visual:hover {

transform: rotate(0deg);

}

.hero-visual img {

width: 100%;

height: 100%;

object-fit: cover;

}

.floating-elements {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.floating-element {

position: absolute;

width: 60px;

height: 60px;

border-radius: 15px;

background: rgba(123, 104, 238, 0.2);

backdrop-filter: blur(5px);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

color: var(--primary-color);

animation: float 6s infinite ease-in-out;

}

.floating-element:nth-child(1) {

top: -30px;

left: 30px;

animation-delay: 0s;

}

.floating-element:nth-child(2) {

top: 50%;

right: -30px;

animation-delay: 2s;

}

.floating-element:nth-child(3) {

bottom: -30px;

left: 50%;

animation-delay: 4s;

}

@keyframes float {

0%, 100% { transform: translateY(0px); }

50% { transform: translateY(-20px); }

}

/* About Section */

.about-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 3rem;

align-items: center;

}

.about-img {

border-radius: 12px;

overflow: hidden;

box-shadow: var(--card-shadow);

}

.about-img img {

width: 100%;

height: auto;

transition: transform 0.5s;

}

.about-img:hover img {

transform: scale(1.05);

}

.about-text h3 {

font-size: 1.8rem;

margin-bottom: 1.5rem;

background: var(--gradient-main);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

/* Skills Section */

.skills-container {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 2rem;

}

.skills-item {

margin-bottom: 1.5rem;

}

.skills-header {

display: flex;

justify-content: space-between;

margin-bottom: 0.5rem;

}

.skills-bar {

height: 8px;

background-color: rgba(255, 255, 255, 0.1);

border-radius: 4px;

overflow: hidden;

}

.skills-progress {

height: 100%;

background: var(--gradient-main);

border-radius: 4px;

position: relative;

width: 0;

transition: width 1s ease-in-out;

}

/* Services Section */

.services-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

}

.service-card {

background-color: var(--card-bg);

backdrop-filter: blur(10px);

border: 1px solid var(--border-color);

border-radius: 12px;

padding: 2rem;

text-align: center;

transition: var(--transition);

box-shadow: var(--card-shadow);

}

.service-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

border-color: var(--primary-color);

}

.service-icon {

font-size: 3rem;

margin-bottom: 1.5rem;

background: var(--gradient-main);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

/* Portfolio Section */

.portfolio-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

}

.portfolio-item {

background-color: var(--card-bg);

border: 1px solid var(--border-color);

border-radius: 12px;

overflow: hidden;

transition: var(--transition);

box-shadow: var(--card-shadow);

}

.portfolio-item:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

}

.portfolio-img {

width: 100%;

height: 200px;

object-fit: cover;

transition: transform 0.4s;

}

.portfolio-item:hover .portfolio-img {

transform: scale(1.05);

}

.portfolio-content {

padding: 1.5rem;

}

.portfolio-content h3 {

font-size: 1.3rem;

margin-bottom: 0.5rem;

}

/* Testimonials/Team Section */

.testimonials-container {

padding-bottom: 2rem;

}

.testimonial-item {

padding: 2rem;

background-color: var(--card-bg);

width: 340px;

border-radius: 12px;

text-align: center;

box-shadow: var(--card-shadow);

transition: var(--transition);

border: 1px solid var(--border-color);

}

.testimonial-item:hover {

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

border-color: var(--primary-color);

}

.testimonial-item .img-box {

width: 120px;

height: 120px;

margin: 0 auto 1.5rem;

border: 4px solid var(--primary-color);

border-radius: 50%;

overflow: hidden;

}

.testimonial-item h3 {

font-size: 1.3rem;

background: var(--gradient-main);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

.testimonial-item span {

display: block;

margin-bottom: 0.75rem;

color: rgba(224, 224, 224, 0.7);

font-size: 0.9rem;

}

.testimonial-item ul {

display: flex;

justify-content: center;

gap: 0.75rem;

list-style: none;

}

.testimonial-item ul li a {

color: var(--light-text);

font-size: 1.2rem;

transition: color 0.3s ease;

}

.testimonial-item:hover ul li a {

color: var(--primary-color);

}

/* Blog Section */

.blog-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

}

.blog-card {

background-color: var(--card-bg);

border: 1px solid var(--border-color);

border-radius: 12px;

overflow: hidden;

transition: var(--transition);

box-shadow: var(--card-shadow);

}

.blog-card:hover {

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

border-color: var(--primary-color);

}

.blog-img {

width: 100%;

height: 200px;

object-fit: cover;

transition: transform 0.4s;

}

.blog-card:hover .blog-img {

transform: scale(1.05);

}

.blog-content {

padding: 1.5rem;

}

.blog-content h3 {

font-size: 1.3rem;

margin-bottom: 0.5rem;

}

.blog-meta {

display: flex;

justify-content: space-between;

font-size: 0.9rem;

color: rgba(224, 224, 224, 0.7);

margin-bottom: 1rem;

}

/* FAQ Section */

.accordion-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 3rem;

align-items: center;

}

.accordion-item {

background-color: var(--card-bg);

border-radius: 12px;

overflow: hidden;

box-shadow: var(--card-shadow);

margin-bottom: 1rem;

border: 1px solid var(--border-color);

}

.accordion-header {

padding: 1rem 1.5rem;

background: rgba(123, 104, 238, 0.2);

color: white;

cursor: pointer;

position: relative;

display: flex;

justify-content: space-between;

align-items: center;

}

.accordion-header h3 {

color: white;

font-size: 1.1rem;

}

.accordion-icon {

transition: transform 0.3s;

}

.accordion-item.active .accordion-icon {

transform: rotate(45deg);

}

.accordion-body {

max-height: 0;

overflow: hidden;

transition: max-height 0.3s ease-out;

}

.accordion-item.active .accordion-body {

max-height: 500px;

padding: 1.5rem;

}

.accordion-body p {

font-size: 0.9rem;

color: rgba(224, 224, 224, 0.8);

}

/* Contact Section */

.contact-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 3rem;

}

.contact-info {

display: flex;

flex-direction: column;

gap: 1.5rem;

}

.contact-item {

display: flex;

align-items: flex-start;

gap: 1rem;

background-color: var(--card-bg);

padding: 1.5rem;

border-radius: 12px;

border: 1px solid var(--border-color);

}

.contact-icon {

font-size: 1.5rem;

color: var(--primary-color);

}

.contact-form {

display: flex;

flex-direction: column;

gap: 1.5rem;

}

.form-group {

display: flex;

flex-direction: column;

gap: 0.5rem;

}

.form-input {

padding: 12px 15px;

background-color: var(--card-bg);

border: 1px solid var(--border-color);

border-radius: 8px;

color: var(--light-text);

font-family: var(--font-primary);

transition: border-color 0.3s;

}

.form-input:focus {

outline: none;

border-color: var(--primary-color);

}

textarea.form-input {

min-height: 150px;

resize: vertical;

}

/* Footer */

.footer {

background-color: rgba(10, 10, 10, 0.9);

border-top: 1px solid var(--border-color);

padding: 50px 0 30px;

}

.footer-container {

display: grid;

grid-template-columns: repeat(4, 1fr);

column-gap: 3rem;

}

.footer-content {

margin-bottom: 2rem;

}

.footer-logo {

display: flex;

align-items: center;

column-gap: 0.5rem;

margin-bottom: 2rem;

font-size: 1.5rem;

font-weight: 800;

color: var(--light-text);

text-decoration: none;

}

.footer-logo span {

color: var(--primary-color);

}

.footer-title {

font-size: 1.3rem;

margin-bottom: 1.5rem;

}

.footer-subscribe {

background: var(--card-bg);

padding: 0.75rem;

display: flex;

justify-content: space-between;

border-radius: 2rem;

box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);

border: 1px solid var(--border-color);

}

.footer-input {

width: 70%;

padding: 0 0.5rem;

background: none;

border: none;

outline: none;

color: var(--light-text);

}

.footer-button {

padding: 1rem;

border-radius: 2rem;

}

.footer-data {

display: grid;

row-gap: 0.75rem;

}

.footer-information {

font-size: 0.9rem;

color: rgba(224, 224, 224, 0.7);

}

.footer-information-link a {

color: rgba(224, 224, 224, 0.7);

font-size: 0.9rem;

transition: color 0.3s ease;

text-decoration: none;

}

.footer-information-link:hover a {

color: var(--primary-color);

}

.footer-social {

display: inline-flex;

column-gap: 0.75rem;

}

.footer-social-link {

font-size: 1rem;

color: rgba(224, 224, 224, 0.7);

transition: color 0.3s ease;

}

.footer-social-link:hover {

color: var(--primary-color);

}

.footer-copy {

margin: 3rem 0 2rem;

text-align: center;

font-size: 0.8rem;

color: rgba(224, 224, 224, 0.5);

}

/* Scroll to Top Button */

#scroll-top-btn {

position: fixed;

bottom: 30px;

right: 30px;

width: 50px;

height: 50px;

background: var(--gradient-main);

color: white;

border: none;

border-radius: 50%;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

z-index: 100;

opacity: 0;

visibility: hidden;

transition: all 0.3s ease;

}

#scroll-top-btn.active {

opacity: 1;

visibility: visible;

}

#scroll-top-btn:hover {

transform: translateY(-5px);

box-shadow: 0 8px 20px rgba(123, 104, 238, 0.5);

}

/* Animations */

.reveal {

opacity: 0;

transform: translateY(50px);

transition: opacity 0.8s, transform 0.8s;

}

.reveal.visible {

opacity: 1;

transform: translateY(0);

}

/* Swiper */

.swiper {

width: 100%;

padding-top: 50px;

padding-bottom: 50px;

}

.swiper-slide {

background-position: center;

background-size: cover;

width: 300px;

display: flex;

justify-content: center;

}

/* Responsive Tasarım */

@media (max-width: 1200px) {

.footer-container {

grid-template-columns: repeat(2, 1fr);

}

@media (max-width: 992px) {

.services-grid,

.portfolio-grid,

.blog-grid,

.accordion-container,

.contact-container {

grid-template-columns: 1fr;

}

.hero-content,

.about-content {

grid-template-columns: 1fr;

}

.hero-text {

text-align: center;

}

.skills-container {

grid-template-columns: 1fr;

}

.footer-container {

grid-template-columns: 1fr;

}

.btn-group {

flex-direction: column;

align-items: center;

}

.btn-secondary {

margin-left: 0;

}

@media (max-width: 768px) {

.menu-toggle {

display: block;

z-index: 1001;

}

.nav-menu {

position: fixed;

top: 0;

right: -100%;

width: 70%;

height: 100vh;

background-color: rgba(10, 10, 10, 0.95);

backdrop-filter: blur(10px);

flex-direction: column;

justify-content: center;

align-items: center;

transition: right 0.5s ease-in-out;

gap: 2rem;

box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);

}

.nav-menu.active {

right: 0;

}

.hero-text h1 {

font-size: 2.5rem;

}

.section-title {

font-size: 2rem;

}

.testimonial-item {

width: 280px;

}

.floating-element {

width: 50px;

height: 50px;

font-size: 1.2rem;

}

@media (max-width: 576px) {

.hero-text h1 {

font-size: 2rem;

}

section {

padding: 70px 0;

}

.hero-visual {

width: 250px;

height: 350px;

}

JS

document.addEventListener('DOMContentLoaded', () => {

// Preloader

const preloader = document.getElementById('preloader');

window.addEventListener('load', () => {

setTimeout(() => {

preloader.style.opacity = '0';

preloader.style.visibility = 'hidden';

}, 500);

});

// Set current year in footer

document.getElementById('current-year').textContent = new Date().getFullYear();

// Header Scroll Effect

const header = document.getElementById('header');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

header.style.backgroundColor = 'rgba(10, 10, 10, 0.98)';

header.style.padding = '15px 0';

} else {

header.style.backgroundColor = 'rgba(10, 10, 10, 0.95)';

header.style.padding = '20px 0';

}

});

// Mobile Menu

const menuToggle = document.getElementById('menu-toggle');

const navMenu = document.getElementById('nav-menu');

const navLinks = document.querySelectorAll('.nav-link');

menuToggle.addEventListener('click', () => {

navMenu.classList.toggle('active');

// Change menu icon

const icon = menuToggle.querySelector('i');

if (navMenu.classList.contains('active')) {

icon.classList.remove('fa-bars');

icon.classList.add('fa-times');

} else {

icon.classList.remove('fa-times');

icon.classList.add('fa-bars');

}

});

navLinks.forEach(link => {

link.addEventListener('click', () => {

if (navMenu.classList.contains('active')) {

navMenu.classList.remove('active');

const icon = menuToggle.querySelector('i');

icon.classList.remove('fa-times');

icon.classList.add('fa-bars');

}

});

// Scroll Animations

const revealElements = document.querySelectorAll('.reveal');

const revealObserver = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

// Animate skill bars

if (entry.target.querySelector('.skills-progress')) {

const progressBars = entry.target.querySelectorAll('.skills-progress');

progressBars.forEach(bar => {

const width = bar.getAttribute('data-width');

bar.style.width = width;

});

}

});

}, {

threshold: 0.1

});

revealElements.forEach(el => {

revealObserver.observe(el);

});

// Active Navigation Link Highlighting

const sections = document.querySelectorAll('section[id]');

const navHighlighter = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const id = entry.target.getAttribute('id');

document.querySelectorAll('.nav-link.active').forEach(link => {

link.classList.remove('active');

});

const activeLink = document.querySelector(`.nav-link[href="#${id}"]`);

if (activeLink) {

activeLink.classList.add('active');

}

});

}, {

rootMargin: '-50% 0px -50% 0px'

});

sections.forEach(section => {

navHighlighter.observe(section);

});

// Testimonial Swiper

var testimonialSwiper = new Swiper(".testimonials-swiper", {

slidesPerView: 1,

spaceBetween: 20,

loop: true,

autoplay: {

delay: 3000,

disableOnInteraction: false,

},

breakpoints: {

768: {

slidesPerView: 2,

spaceBetween: 30

},

992: {

slidesPerView: 3,

spaceBetween: 30

}

},

pagination: {

el: ".swiper-pagination",

clickable: true,

},

});

// Accordion FAQ

let accordionHeaders = document.querySelectorAll('.accordion-header');

let accordionItems = document.querySelectorAll('.accordion-item');

accordionHeaders.forEach(header => {

header.addEventListener('click', function() {

const item = this.parentNode;

// Close all other items

accordionItems.forEach(otherItem => {

if (otherItem !== item) {

otherItem.classList.remove('active');

}

});

// Toggle current item

item.classList.toggle('active');

});

// Form submission

const contactForm = document.querySelector('.contact-form');

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

alert('Mesajınız alınmıştır. En kısa sürede sizinle iletişime geçeceğiz.');

contactForm.reset();

});

// Scroll to Top Button

const scrollTopBtn = document.getElementById('scroll-top-btn');

window.addEventListener('scroll', () => {

if (window.scrollY > 300) {

scrollTopBtn.classList.add('active');

} else {

scrollTopBtn.classList.remove('active');

}

});

scrollTopBtn.addEventListener('click', () => {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Newsletter subscription

const newsletterForm = document.querySelector('.footer-subscribe');

const newsletterInput = document.querySelector('.footer-input');

newsletterForm.addEventListener('submit', function(e) {

e.preventDefault();

if (newsletterInput.value) {

alert('Bültenimize abone olduğunuz için teşekkür ederiz!');

newsletterInput.value = '';

}

});

Metehan

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS