Webleb - fragmentos de código - Un código de Mete

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>

Un código de Mete

Recomendado

CSS Aurora

Animación de texto fluida

Animación de rastros de estrellas

HTML

CSS

JS

Recomendado

CSS Aurora

Animación de texto fluida

Animación de rastros de estrellas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS