Un código de Mete

1283 Metehan

Abrir en el editor Video Publica tu código

Recomendado

30 November 2024

Arte de texto

19 March 2025

Animación de sombra de texto

23 December 2025

Metehan

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>

Un código de Mete

Recomendado

Arte de texto

Animación de sombra de texto

Metehan

HTML

CSS

JS

Recomendado

Arte de texto

Animación de sombra de texto

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS