Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>NovaMimarlık | Modern Mimari Çözümleri</title>

<style>

:root {

--primary: #E67E22;

--primary-light: #F39C12;

--secondary: #2C3E50;

--light: #F8F9FA;

--cream: #FDF5E6;

--transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Raleway', sans-serif;

color: var(--secondary);

background-color: var(--light);

line-height: 1.6;

overflow-x: hidden;

}

h1, h2, h3, h4, h5 {

font-family: 'Montserrat', sans-serif;

font-weight: 700;

line-height: 1.2;

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

}

.btn {

display: inline-block;

padding: 14px 32px;

background: linear-gradient(135deg, var(--primary), var(--primary-light));

color: white;

border: none;

border-radius: 4px;

font-weight: 600;

text-decoration: none;

text-transform: uppercase;

letter-spacing: 1px;

cursor: pointer;

transition: var(--transition);

box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);

}

.btn:hover {

transform: translateY(-3px);

box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);

}

.btn-outline {

background: transparent;

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

color: var(--primary);

box-shadow: none;

}

.btn-outline:hover {

background: var(--primary);

color: white;

}

section {

padding: 80px 0;

}

.section-header {

text-align: center;

margin-bottom: 60px;

}

.section-header h2 {

font-size: 2.5rem;

margin-bottom: 20px;

position: relative;

display: inline-block;

}

.section-header h2:after {

content: '';

position: absolute;

width: 60%;

height: 4px;

background: linear-gradient(to right, var(--primary), var(--primary-light));

bottom: -10px;

left: 20%;

border-radius: 2px;

}

.section-header p {

font-size: 1.1rem;

max-width: 700px;

margin: 0 auto;

color: #666;

}

/* Header & Navigation */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

background: rgba(255, 255, 255, 0.95);

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

padding: 15px 0;

transition: var(--transition);

}

header.scrolled {

padding: 10px 0;

background: rgba(255, 255, 255, 0.98);

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 1.8rem;

font-weight: 700;

color: var(--secondary);

text-decoration: none;

display: flex;

align-items: center;

}

.logo span {

color: var(--primary);

}

.logo i {

margin-right: 8px;

color: var(--primary);

}

nav ul {

display: flex;

list-style: none;

}

nav ul li {

margin-left: 30px;

}

nav ul li a {

text-decoration: none;

color: var(--secondary);

font-weight: 600;

font-size: 1rem;

position: relative;

transition: var(--transition);

}

nav ul li a:after {

content: '';

position: absolute;

width: 0;

height: 2px;

background: var(--primary);

bottom: -5px;

left: 0;

transition: var(--transition);

}

nav ul li a:hover {

color: var(--primary);

}

nav ul li a:hover:after {

width: 100%;

}

.mobile-menu-btn {

display: none;

background: none;

border: none;

font-size: 1.5rem;

color: var(--secondary);

cursor: pointer;

}

/* Hero Section */

.hero {

height: 100vh;

background: linear-gradient(rgba(44, 62, 80, 0.85), rgba(44, 62, 80, 0.9)), url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') no-repeat center center/cover;

display: flex;

align-items: center;

color: white;

position: relative;

overflow: hidden;

}

.hero-content {

max-width: 700px;

z-index: 2;

}

.hero h1 {

font-size: 3.5rem;

margin-bottom: 20px;

line-height: 1.1;

}

.hero p {

font-size: 1.2rem;

margin-bottom: 30px;

font-weight: 300;

max-width: 600px;

}

.hero-buttons {

display: flex;

gap: 20px;

margin-top: 30px;

}

.floating-shapes {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

pointer-events: none;

}

.shape {

position: absolute;

opacity: 0.1;

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

animation: float 12s infinite ease-in-out;

}

.shape:nth-child(1) {

top: 20%;

left: 70%;

width: 100px;

height: 100px;

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

animation-delay: 0s;

}

.shape:nth-child(2) {

top: 60%;

left: 10%;

width: 150px;

height: 150px;

border-radius: 50%;

animation-delay: 2s;

}

.shape:nth-child(3) {

top: 40%;

left: 85%;

width: 80px;

height: 80px;

border-radius: 20% 80% 80% 20% / 20% 20% 80% 80%;

animation-delay: 4s;

}

@keyframes float {

0%, 100% { transform: translate(0, 0) rotate(0deg); }

25% { transform: translate(-20px, -15px) rotate(5deg); }

50% { transform: translate(10px, 20px) rotate(-5deg); }

75% { transform: translate(15px, -10px) rotate(3deg); }

}

/* Services */

.services-grid {

display: grid;

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

gap: 30px;

}

.service-card {

background: white;

border-radius: 10px;

overflow: hidden;

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

transition: var(--transition);

}

.service-card:hover {

transform: translateY(-10px);

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

}

.service-icon {

height: 200px;

background: linear-gradient(135deg, var(--secondary), #1a2530);

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 3.5rem;

}

.service-content {

padding: 25px;

}

.service-content h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--secondary);

}

.service-content ul {

list-style: none;

margin-top: 15px;

}

.service-content ul li {

padding: 8px 0;

border-bottom: 1px solid #eee;

display: flex;

align-items: center;

}

.service-content ul li:before {

content: '✓';

color: var(--primary);

margin-right: 10px;

font-weight: bold;

}

/* Portfolio */

.portfolio {

background-color: var(--cream);

}

.portfolio-filters {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 15px;

margin-bottom: 40px;

}

.filter-btn {

padding: 10px 20px;

background: white;

border: 1px solid #ddd;

border-radius: 30px;

cursor: pointer;

transition: var(--transition);

}

.filter-btn.active, .filter-btn:hover {

background: var(--primary);

color: white;

border-color: var(--primary);

}

.portfolio-grid {

display: grid;

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

gap: 25px;

}

.portfolio-item {

border-radius: 10px;

overflow: hidden;

position: relative;

height: 300px;

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

}

.portfolio-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.portfolio-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(to top, rgba(230, 126, 34, 0.85), transparent);

display: flex;

flex-direction: column;

justify-content: flex-end;

padding: 25px;

color: white;

opacity: 0;

transition: var(--transition);

}

.portfolio-item:hover .portfolio-overlay {

opacity: 1;

}

.portfolio-item:hover .portfolio-img {

transform: scale(1.05);

}

/* Pricing */

.pricing-cards {

display: grid;

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

gap: 30px;

}

.pricing-card {

background: white;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

transition: var(--transition);

position: relative;

}

.pricing-card.featured {

transform: scale(1.05);

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

z-index: 2;

}

.pricing-card.featured .pricing-header {

background: linear-gradient(135deg, var(--primary), var(--primary-light));

}

.pricing-header {

background: var(--secondary);

color: white;

text-align: center;

padding: 30px 20px;

}

.pricing-header h3 {

font-size: 1.8rem;

margin-bottom: 10px;

}

.price {

font-size: 2.5rem;

font-weight: 700;

margin: 20px 0;

}

.price span {

font-size: 1rem;

font-weight: normal;

}

.pricing-features {

padding: 30px;

}

.pricing-features ul {

list-style: none;

}

.pricing-features ul li {

padding: 12px 0;

border-bottom: 1px solid #f0f0f0;

display: flex;

align-items: center;

}

.pricing-features ul li:before {

content: '✓';

color: var(--primary);

margin-right: 10px;

font-weight: bold;

}

.pricing-footer {

padding: 0 30px 30px;

text-align: center;

}

/* Contact */

.contact {

background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.95)), url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1951&q=80') no-repeat center center/cover;

color: white;

}

.contact-container {

display: grid;

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

gap: 50px;

}

.contact-info h3 {

font-size: 2rem;

margin-bottom: 30px;

}

.contact-detail {

display: flex;

align-items: flex-start;

margin-bottom: 25px;

}

.contact-icon {

font-size: 1.5rem;

color: var(--primary);

margin-right: 15px;

min-width: 30px;

}

.contact-text h4 {

margin-bottom: 5px;

font-size: 1.2rem;

}

.contact-form .form-group {

margin-bottom: 20px;

}

.contact-form input,

.contact-form textarea,

.contact-form select {

width: 100%;

padding: 15px;

border: none;

border-radius: 5px;

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.2);

color: white;

font-family: 'Raleway', sans-serif;

}

.contact-form input::placeholder,

.contact-form textarea::placeholder {

color: #ccc;

}

.contact-form textarea {

min-height: 150px;

resize: vertical;

}

/* Footer */

footer {

background: var(--secondary);

color: white;

padding: 60px 0 30px;

}

.footer-grid {

display: grid;

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

gap: 40px;

margin-bottom: 40px;

}

.footer-col h4 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 10px;

}

.footer-col h4:after {

content: '';

position: absolute;

width: 50px;

height: 3px;

background: var(--primary);

bottom: 0;

left: 0;

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links a {

color: #ccc;

text-decoration: none;

transition: var(--transition);

}

.footer-links a:hover {

color: var(--primary);

padding-left: 5px;

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.social-links a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.1);

color: white;

transition: var(--transition);

}

.social-links a:hover {

background: var(--primary);

transform: translateY(-3px);

}

.copyright {

text-align: center;

padding-top: 30px;

border-top: 1px solid rgba(255, 255, 255, 0.1);

color: #aaa;

font-size: 0.9rem;

}

/* Animation on Scroll */

.hidden {

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease;

}

.show {

opacity: 1;

transform: translateY(0);

}

/* Responsive */

@media (max-width: 992px) {

.hero h1 {

font-size: 3rem;

}

.section-header h2 {

font-size: 2.2rem;

}

@media (max-width: 768px) {

nav ul {

display: none;

}

.mobile-menu-btn {

display: block;

}

.hero h1 {

font-size: 2.5rem;

}

.hero p {

font-size: 1.1rem;

}

.hero-buttons {

flex-direction: column;

gap: 15px;

}

.btn {

width: 100%;

text-align: center;

}

.pricing-card.featured {

transform: scale(1);

}

@media (max-width: 576px) {

section {

padding: 60px 0;

}

.section-header h2 {

font-size: 2rem;

}

.portfolio-grid {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<a href="#" class="logo"><i class="fas fa-building"></i>Nova<span>Mimarlık</span></a>

</button>

<nav>

<ul>

<li><a href="#home">Ana Sayfa</a></li>

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

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

<li><a href="#pricing">Fiyatlandırma</a></li>

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

</ul>

</nav>

</div>

</header>

<h1>Modern Mimarlık ile Hayallerinizi İnşa Ediyoruz</h1>

<p>Yenilikçi tasarımlar, sürdürülebilir çözümler ve özgün mimari yaklaşımlarla geleceğin yaşam alanlarını şekillendiriyoruz.</p>

<a href="#portfolio" class="btn">Projelerimizi Keşfedin</a>

<a href="#contact" class="btn btn-outline">Ücretsiz Danışmanlık</a>

</div>

</div>

</section>

<h2>Uzmanlık Alanlarımız</h2>

<p>Mimari vizyonunuzu hayata geçirmek için kapsamlı hizmetler sunuyoruz. Her projeye özel çözümlerle ihtiyaçlarınızı karşılıyoruz.</p>

</div>

</div>

<h3>Konut Mimarisi</h3>

<p>Özel konut projelerinden lüks villalara, her ölçekte konut çözümleri.</p>

<ul>

<li>Villa ve müstakil ev tasarımları</li>

<li>Apartman projeleri</li>

<li>Ev yenileme ve tadilat</li>

<li>İç mekan tasarımı</li>

</ul>

</div>

</div>

<h3>Ticari Mimarlık</h3>

<p>İşlevsel ve estetik ticari alanlar yaratıyoruz.</p>

<ul>

<li>Ofis binaları</li>

<li>Perakende mağazalar</li>

<li>Otel ve restoran tasarımları</li>

<li>Endüstriyel yapılar</li>

</ul>

</div>

</div>

<h3>Uzman Danışmanlık</h3>

<p>Projenizin her aşamasında profesyonel rehberlik.</p>

<ul>

<li>Proje geliştirme</li>

<li>Yasal süreç yönetimi</li>

<li>Sürdürülebilirlik danışmanlığı</li>

<li>BIM modellemesi</li>

</ul>

</div>

</section>

<h2>Seçkin Projelerimiz</h2>

<p>Gerçekleştirdiğimiz örnek projelerle yaratıcılığımızı ve uzmanlığımızı keşfedin.</p>

</div>

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

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

<button class="filter-btn">Restorasyon</button>

</div>

<h3>Skyline Villaları</h3>

<p>İstanbul / 2023</p>

</div>

<h3>Teknopark İş Merkezi</h3>

<p>Ankara / 2022</p>

</div>

<h3>Lezzet Kulesi Restoran</h3>

<p>İzmir / 2023</p>

</div>

<h3>Kültür ve Sanat Merkezi</h3>

<p>Bursa / 2022</p>

</div>

</section>

<h2>Fiyatlandırma Paketleri</h2>

<p>Bütçenize ve ihtiyaçlarınıza uygun esnek çözümler sunuyoruz.</p>

</div>

<h3>Başlangıç</h3>

<p>Temel tasarım çözümleri</p>

</div>

<ul>

<li>Ön tasarım ve konsept</li>

<li>2D planlar</li>

<li>Temel görselleştirme</li>

<li>İlk danışmanlık seansı</li>

<li>3 revizyon hakkı</li>

</ul>

</div>

<a href="#contact" class="btn btn-outline">Teklif Al</a>

</div>

<h3>Profesyonel</h3>

<p>En çok tercih edilen paket</p>

</div>

<ul>

<li>Detaylı mimari projeler</li>

<li>3D görselleştirmeler</li>

<li>Yapı denetim desteği</li>

<li>Malzeme seçim danışmanlığı</li>

<li>Sınırsız revizyon</li>

<li>Proje takip desteği</li>

</ul>

</div>

<a href="#contact" class="btn">Teklif Al</a>

</div>

<h3>Premium</h3>

<p>Kapsamlı çözümler</p>

</div>

<ul>

<li>Tam proje yönetimi</li>

<li>VR/AR sunumlar</li>

<li>İç mimarlık dahil</li>

<li>İnşaat sürecinde takip</li>

<li>After-sale destek</li>

<li>Özel danışmanlık</li>

</ul>

</div>

<a href="#contact" class="btn btn-outline">Teklif Al</a>

</div>

</section>

<h2>İletişime Geçin</h2>

<p>Projeniz hakkında detaylı bilgi almak ve ücretsiz danışmanlık için bize ulaşın.</p>

</div>

<h3>Ofis Bilgilerimiz</h3>

</div>

<h4>Adres</h4>

<p>Levent Mah. Yapı Sok. No:12 <br>Beşiktaş/İstanbul</p>

</div>

</div>

<h4>Telefon</h4>

</div>

</div>

<h4>E-posta</h4>

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

</div>

</div>

<h4>Çalışma Saatleri</h4>

<p>Pzt-Cmt: 09:00 - 18:00 <br>Pazar: Kapalı</p>

</div>

<form>

</div>

</div>

</div>

<option value="" disabled selected>Proje Türü</option>

<option value="residential">Konut Mimarisi</option>

<option value="commercial">Ticari Mimari</option>

<option value="renovation">Restorasyon</option>

<option value="consulting">Danışmanlık</option>

<option value="other">Diğer</option>

</select>

</div>

</div>

<button type="submit" class="btn">Gönder</button>

</form>

</div>

</section>

<h4>NovaMimarlık</h4>

<p>Modern mimari çözümlerle hayallerinizi inşa ediyoruz. Yenilikçi, sürdürülebilir ve estetik tasarımlarla geleceği şekillendiriyoruz.</p>

</div>

<h4>Hızlı Erişim</h4>

<li><a href="#home">Ana Sayfa</a></li>

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

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

<li><a href="#pricing">Fiyatlandırma</a></li>

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

</ul>

</div>

<h4>Hizmetlerimiz</h4>

<li><a href="#">Konut Mimarisi</a></li>

<li><a href="#">Ticari Mimari</a></li>

<li><a href="#">Restorasyon</a></li>

<li><a href="#">İç Mimari Tasarım</a></li>

<li><a href="#">3D Görselleştirme</a></li>

</ul>

</div>

<h4>Bülten Aboneliği</h4>

<p>Yeni projelerimiz ve mimari trendler hakkında bilgi almak için abone olun.</p>

<form>

</div>

<button type="submit" class="btn">Abone Ol</button>

</form>

</div>

</div>

</footer>

// Header scroll effect

window.addEventListener('scroll', function() {

const header = document.getElementById('header');

if (window.scrollY > 100) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Animation on Scroll

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('show');

}

});

const hiddenElements = document.querySelectorAll('.hidden');

hiddenElements.forEach((el) => observer.observe(el));

// Portfolio filtering

const filterBtns = document.querySelectorAll('.filter-btn');

filterBtns.forEach(btn => {

btn.addEventListener('click', () => {

// Remove active class from all buttons

filterBtns.forEach(b => b.classList.remove('active'));

// Add active class to clicked button

btn.classList.add('active');

// In a real implementation, you would filter portfolio items here

console.log(`Filtered by: ${btn.textContent}`);

});

// Mobile menu toggle

const mobileMenuBtn = document.querySelector('.mobile-menu-btn');

mobileMenuBtn.addEventListener('click', () => {

const nav = document.querySelector('nav ul');

nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';

});

</script>

</body>

</html>

CSS

JS

Mete'nin bir kodu

Recommended