Um código de Mete

1083 Metehan

Abrir no Editor Publique Seu Código

Recomendado

26 May 2025

Um Código por mironovbogdan341

2 September 2024

20 September 2025

Modelo HTML de Portfólio do Desenvolvedor

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>

Um código de Mete

Recomendado

Um Código por mironovbogdan341

Modelo HTML de Portfólio do Desenvolvedor

HTML

CSS

JS

Recomendado

Um Código por mironovbogdan341

Modelo HTML de Portfólio do Desenvolvedor

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS