Un code de Mete

1,325 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 March 2023

Barre de navigation Bootstrap responsive

31 August 2024

Cartes de filtre CSS

27 February 2026

Minecraft

HTML

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

<head>

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

<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>

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

</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>

<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>

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

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

</div>

</section>

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

</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>

<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>

<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>

<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>

<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>

<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>

</section>

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

<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>

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

</section>

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

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

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

</div>

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

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

</div>

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

</div>

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

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

</div>

</section>

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

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

</div>

<div>

<h4>Adres</h4>

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

</div>

</div>

<div>

<h4>Telefon</h4>

</div>

</div>

<div>

<h4>E-posta</h4>

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

</div>

</div>

<h3>Mesaj Gönderin</h3>

<form>

</div>

</div>

</div>

CSS