Webleb - UI Elements

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

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS