Ein Code von Mete

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Ein Code von Mete

Empfohlen

21 July 2024

9 December 2024

Ein Code von slowlogic992

2 October 2025

CSS-Ladeanimationsausschnitt

HTML

<!DOCTYPE html><html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mimarlık & Mühendislik Çözümleri</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>

/* Ana Stiller */

:root {

--primary-color: #2c3e50;

--secondary-color: #e67e22;

--accent-color: #3498db;

--light-color: #ecf0f1;

--dark-color: #2c3e50;

--text-color: #333;

--light-text: #f8f9fa;

}* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

line-height: 1.6;

color: var(--text-color);

background-color: #f8f9fa;

}

a {

text-decoration: none;

color: var(--primary-color);

transition: all 0.3s ease;

}

a:hover {

color: var(--secondary-color);

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

padding: 0 15px;

}

.btn {

display: inline-block;

background: var(--primary-color);

color: #fff;

padding: 12px 24px;

border: none;

cursor: pointer;

font-size: 16px;

border-radius: 4px;

transition: all 0.3s ease;

}

.btn:hover {

background: var(--secondary-color);

color: #fff;

}

.btn-outline {

background: transparent;

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

color: var(--primary-color);

}

.btn-outline:hover {

background: var(--primary-color);

color: #fff;

}

.section-title {

font-size: 2.5rem;

margin-bottom: 30px;

text-align: center;

color: var(--primary-color);

position: relative;

padding-bottom: 15px;

}

.section-title:after {

content: '';

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

width: 80px;

height: 4px;

background: var(--secondary-color);

}

/* Header */

header {

background-color: #fff;

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

position: fixed;

width: 100%;

top: 0;

left: 0;

z-index: 1000;

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 0;

}

.logo {

font-size: 1.8rem;

font-weight: 700;

color: var(--primary-color);

}

.logo span {

color: var(--secondary-color);

}

nav ul {

display: flex;

list-style: none;

}

nav ul li {

margin-left: 25px;

}

nav ul li a {

color: var(--dark-color);

font-weight: 500;

font-size: 16px;

}

nav ul li a:hover,

nav ul li a.active {

color: var(--secondary-color);

}

.menu-toggle {

display: none;

cursor: pointer;

font-size: 24px;

}

/* Hero Section */

.hero {

background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://source.unsplash.com/random/1920x1080/?architecture') no-repeat center center/cover;

height: 100vh;

color: #fff;

display: flex;

align-items: center;

text-align: center;

margin-top: 80px;

}

.hero-content {

max-width: 800px;

margin: 0 auto;

}

.hero-title {

font-size: 3.5rem;

margin-bottom: 20px;

font-weight: 700;

}

.hero-subtitle {

font-size: 1.5rem;

margin-bottom: 30px;

font-weight: 300;

}

/* Hizmetler */

.services {

padding: 100px 0;

}

.services-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.service-card {

background: #fff;

padding: 30px;

border-radius: 5px;

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

transition: transform 0.3s ease;

text-align: center;

}

.service-card:hover {

transform: translateY(-10px);

}

.service-icon {

font-size: 3rem;

color: var(--secondary-color);

margin-bottom: 20px;

}

.service-title {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--primary-color);

}

/* Projeler */

.projects {

padding: 100px 0;

background-color: var(--light-color);

}

.project-filters {

display: flex;

justify-content: center;

margin-bottom: 30px;

flex-wrap: wrap;

}

.filter-btn {

background: transparent;

border: none;

padding: 8px 20px;

margin: 5px;

cursor: pointer;

font-size: 16px;

border-radius: 20px;

transition: all 0.3s ease;

}

.filter-btn.active {

background: var(--primary-color);

color: #fff;

}

.projects-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

gap: 30px;

}

.project-card {

position: relative;

overflow: hidden;

border-radius: 5px;

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

}

.project-img {

width: 100%;

height: 250px;

object-fit: cover;

transition: all 0.5s ease;

}

.project-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.7);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

opacity: 0;

transition: all 0.5s ease;

padding: 20px;

text-align: center;

}

.project-card:hover .project-overlay {

opacity: 1;

}

.project-card:hover .project-img {

transform: scale(1.1);

}

.project-title {

color: #fff;

font-size: 1.5rem;

margin-bottom: 10px;

}

.project-category {

color: var(--secondary-color);

margin-bottom: 15px;

}

/* Ekip */

.team {

padding: 100px 0;

}

.team-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 30px;

}

.team-member {

background: #fff;

border-radius: 5px;

overflow: hidden;

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

transition: transform 0.3s ease;

}

.team-member:hover {

transform: translateY(-10px);

}

.member-img {

width: 100%;

height: 300px;

object-fit: cover;

}

.member-info {

padding: 20px;

text-align: center;

}

.member-name {

font-size: 1.2rem;

color: var(--primary-color);

margin-bottom: 5px;

}

.member-position {

color: var(--secondary-color);

margin-bottom: 15px;

}

.social-links {

display: flex;

justify-content: center;

}

.social-links a {

margin: 0 10px;

color: var(--dark-color);

transition: all 0.3s ease;

}

.social-links a:hover {

color: var(--secondary-color);

}

/* İletişim */

.contact {

padding: 100px 0;

background-color: var(--light-color);

}

.contact-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 50px;

}

.contact-info {

background: #fff;

padding: 30px;

border-radius: 5px;

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

}

.contact-item {

display: flex;

margin-bottom: 20px;

}

.contact-icon {

margin-right: 15px;

font-size: 20px;

color: var(--secondary-color);

}

.contact-form {

background: #fff;

padding: 30px;

border-radius: 5px;

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

}

.form-group {

margin-bottom: 20px;

}

.form-control {

width: 100%;

padding: 12px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 16px;

}

textarea.form-control {

height: 150px;

resize: vertical;

}

/* Footer */

footer {

background: var(--dark-color);

color: #fff;

padding: 50px 0 20px;

}

.footer-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 30px;

margin-bottom: 30px;

}

.footer-logo {

font-size: 1.8rem;

font-weight: 700;

color: #fff;

margin-bottom: 20px;

}

.footer-logo span {

color: var(--secondary-color);

}

.footer-links h4 {

font-size: 1.2rem;

margin-bottom: 20px;

color: #fff;

position: relative;

padding-bottom: 10px;

}

.footer-links h4:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 2px;

background: var(--secondary-color);

}

.footer-links ul {

list-style: none;

}

.footer-links ul li {

margin-bottom: 10px;

}

.footer-links ul li a {

color: #ccc;

}

.footer-links ul li a:hover {

color: var(--secondary-color);

}

.copyright {

text-align: center;

padding-top: 20px;

border-top: 1px solid #555;

color: #ccc;

}

/* Duyarlı Tasarım */

@media (max-width: 991px) {

.hero-title {

font-size: 2.5rem;

}

.hero-subtitle {

font-size: 1.2rem;

}

}

@media (max-width: 768px) {

.menu-toggle {

display: block;

}

nav ul {

position: absolute;

top: 80px;

left: 0;

width: 100%;

background: #fff;

flex-direction: column;

align-items: center;

padding: 20px 0;

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

display: none;

}

nav ul.show {

display: flex;

}

nav ul li {

margin: 10px 0;

}

.hero-title {

font-size: 2rem;

}

}

</style>

</head>

<body>

<header>

<div class="container header-container">

<a href="#" class="logo">Mimar<span>Mühendis</span></a>

<div class="menu-toggle">

<i class="fas fa-bars"></i>

</div>

<nav>

<ul>

<li><a href="#" class="active">Ana Sayfa</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#services">Hizmetler</a></li>

<li><a href="#projects">Projeler</a></li>

<li><a href="#team">Ekibimiz</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</nav>

</div>

</header>

<section class="hero">

<div class="container hero-content">

<h1 class="hero-title">Yenilikçi Mimarlık ve Mühendislik Çözümleri</h1>

<p class="hero-subtitle">Vizyoner tasarım ve teknik mükemmelliği birleştirerek geleceğin yapılarını inşa ediyoruz</p>

<div class="hero-buttons">

<a href="#projects" class="btn">Projelerimiz</a>

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

</div>

</div>

</section>

<section id="services" class="services">

<div class="container">

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

<div class="services-container">

<div class="service-card">

<div class="service-icon">

<i class="fas fa-drafting-compass"></i>

</div>

<h3 class="service-title">Mimari Tasarım</h3>

<p>Özgün ve işlevsel mimari tasarımlar ile yaşam alanlarınızı dönüştürüyoruz. Estetik ve fonksiyonelliği bir araya getirerek hayalinizdeki projeyi gerçeğe dönüştürüyoruz.</p>

</div>

<div class="service-card">

<div class="service-icon">

<i class="fas fa-cogs"></i>

</div>

<h3 class="service-title">Yapısal Mühendislik</h3>

<p>Güvenli, dayanıklı ve ekonomik yapılar için kapsamlı mühendislik hizmetleri sunuyoruz. En zorlu projelerde bile optimum çözümler üretiyoruz.</p>

</div>

<div class="service-card">

<div class="service-icon">

<i class="fas fa-leaf"></i>

</div>

<h3 class="service-title">Sürdürülebilir Tasarım</h3>

<p>Çevre dostu ve enerji verimli binalar tasarlıyoruz. Sürdürülebilir malzemeler ve yenilikçi teknolojilerle geleceğe yatırım yapıyoruz.</p>

</div>

<div class="service-card">

<div class="service-icon">

<i class="fas fa-building"></i>

</div>

<h3 class="service-title">İç Mekan Tasarımı</h3>

<p>Fonksiyonel ve estetik iç mekanlar yaratıyoruz. Müşterilerimizin ihtiyaç ve zevklerine uygun, özgün ve işlevsel iç mekan çözümleri sunuyoruz.</p>

</div>

<div class="service-card">

<div class="service-icon">

<i class="fas fa-tasks"></i>

</div>

<h3 class="service-title">Proje Yönetimi</h3>

<p>Projenizin her aşamasında profesyonel yönetim desteği sağlıyoruz. Zaman ve bütçe planlamasından, inşaat denetimine kadar tüm süreçleri yönetiyoruz.</p>

</div>

<div class="service-card">

<div class="service-icon">

<i class="fas fa-bolt"></i>

</div>

<h3 class="service-title">Elektrik ve Mekanik Sistemler</h3>

<p>Modern binaların karmaşık sistemleri için uzman çözümler üretiyoruz. Enerji verimli ve akıllı sistemlerle projelerinizi geleceğe hazırlıyoruz.</p>

</div>

</div>

</div>

</section>

<section id="projects" class="projects">

<div class="container">

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

<div class="project-filters">

<button class="filter-btn active" data-filter="all">Tümü</button>

<button class="filter-btn" data-filter="residential">Konut</button>

<button class="filter-btn" data-filter="commercial">Ticari</button>

<button class="filter-btn" data-filter="institutional">Kurumsal</button>

<button class="filter-btn" data-filter="industrial">Endüstriyel</button>

</div>

<div class="projects-grid">

<div class="project-card" data-category="residential">

<img src="https://source.unsplash.com/random/600x400/?modern,house" alt="Modern Villa" class="project-img">

<div class="project-overlay">

<h3 class="project-title">Modern Villa Projesi</h3>

<p class="project-category">Konut</p>

<a href="#" class="btn">Detayları Gör</a>

</div>

</div>

<div class="project-card" data-category="commercial">

<img src="https://source.unsplash.com/random/600x400/?office,building" alt="Office Complex" class="project-img">

<div class="project-overlay">

<h3 class="project-title">İş Merkezi Kompleksi</h3>

<p class="project-category">Ticari</p>

<a href="#" class="btn">Detayları Gör</a>

</div>

</div>

<div class="project-card" data-category="institutional">

<img src="https://source.unsplash.com/random/600x400/?university,campus" alt="University Campus" class="project-img">

<div class="project-overlay">

<h3 class="project-title">Üniversite Kampüsü</h3>

<p class="project-category">Kurumsal</p>

<a href="#" class="btn">Detayları Gör</a>

</div>

</div>

<div class="project-card" data-category="industrial">

<img src="https://source.unsplash.com/random/600x400/?factory,modern" alt="Smart Factory" class="project-img">

<div class="project-overlay">

<h3 class="project-title">Akıllı Fabrika</h3>

<p class="project-category">Endüstriyel</p>

<a href="#" class="btn">Detayları Gör</a>

</div>

</div>

<div class="project-card" data-category="residential">

<img src="https://source.unsplash.com/random/600x400/?apartment,complex" alt="Luxury Apartments" class="project-img">

<div class="project-overlay">

<h3 class="project-title">Lüks Apartman Kompleksi</h3>

<p class="project-category">Konut</p>

<a href="#" class="btn">Detayları Gör</a>

</div>

</div>

<div class="project-card" data-category="commercial">

<img src="https://source.unsplash.com/random/600x400/?shopping,mall" alt="Shopping Mall" class="project-img">

<div class="project-overlay">

<h3 class="project-title">Alışveriş Merkezi</h3>

<p class="project-category">Ticari</p>

<a href="#" class="btn">Detayları Gör</a>

</div>

</div>

</div>

</div>

</section>

<section id="team" class="team">

<div class="container">

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

<div class="team-grid">

<div class="team-member">

<img src="https://source.unsplash.com/random/600x800/?architect,man" alt="Ahmet Yılmaz" class="member-img">

<div class="member-info">

<h3 class="member-name">Ahmet Yılmaz</h3>

<p class="member-position">Baş Mimar</p>

<div class="social-links">

<a href="#"><i class="fab fa-linkedin"></i></a>

<a href="#"><i class="fab fa-twitter"></i></a>

<a href="#"><i class="fas fa-envelope"></i></a>

</div>

</div>

</div>

<div class="team-member">

<img src="https://source.unsplash.com/random/600x800/?engineer,woman" alt="Ayşe Demir" class="member-img">

<div class="member-info">

<h3 class="member-name">Ayşe Demir</h3>

<p class="member-position">Yapısal Mühendis</p>

<div class="social-links">

<a href="#"><i class="fab fa-linkedin"></i></a>

<a href="#"><i class="fab fa-twitter"></i></a>

<a href="#"><i class="fas fa-envelope"></i></a>

</div>

</div>

</div>

<div class="team-member">

<img src="https://source.unsplash.com/random/600x800/?architect,woman" alt="Elif Kaya" class="member-img">

<div class="member-info">

<h3 class="member-name">Elif Kaya</h3>

<p class="member-position">İç Mimar</p>

<div class="social-links">

<a href="#"><i class="fab fa-linkedin"></i></a>

<a href="#"><i class="fab fa-twitter"></i></a>

<a href="#"><i class="fas fa-envelope"></i></a>

</div>

</div>

</div>

<div class="team-member">

<img src="https://source.unsplash.com/random/600x800/?engineer,man" alt="Mehmet Öztürk" class="member-img">

<div class="member-info">

<h3 class="member-name">Mehmet Öztürk</h3>

<p class="member-position">Proje Yöneticisi</p>

<div class="social-links">

<a href="#"><i class="fab fa-linkedin"></i></a>

<a href="#"><i class="fab fa-twitter"></i></a>

<a href="#"><i class="fas fa-envelope"></i></a>

</div>

</div>

</div>

</div>

</div>

</section>

<section id="contact" class="contact">

<div class="container">

<h2 class="section-title">Bizimle İletişime Geçin</h2>

<div class="contact-container">

<div class="contact-info">

<h3>İletişim Bilgilerimiz</h3>

<div class="contact-item">

<div class="contact-icon">

<i class="fas fa-map-marker-alt"></i>

</div>

<div>

<h4>Adres</h4>

<p>Atatürk Bulvarı No:123, Çankaya, Ankara</p>

</div>

</div>

<div class="contact-item">

<div class="contact-icon">

<i class="fas fa-phone"></i>

</div>

<div>

<h4>Telefon</h4>

<p>+90 312 123 45 67</p>

</div>

</div>

<div class="contact-item">

<div class="contact-icon">

<i class="fas fa-envelope"></i>

</div>

<div>

<h4>E-posta</h4>

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

</div>

</div>

<div class="social-links" style="margin-top: 20px;">

<a href="#"><i class="fab fa-facebook-f"></i></a>

<a href="#"><i class="fab fa-twitter"></i></a>

<a href="#"><i class="fab fa-instagram"></i></a>

<a href="#"><i class="fab fa-linkedin-in"></i></a>

</div>

</div>

<div class="contact-form">

<h3>Mesaj Gönderin</h3>

<form>

<div class="form-group">

<input type="text" class="form-control" placeholder="Adınız Soyadınız" required>

</div>

<div class="form-group">

<input type="email" class="form-control" placeholder="E-posta Adresiniz" required>

</div>

<div class="form-group">

<input type="text" class="form-control" placeholder="Konu">

</div>

<div class="form-group">

<textarea class="form-control" placeholder="Mesajınız" required>

CSS

JS