Webleb - UI Elements - Metehan'nın bir kodu

HTML

<!DOCTYPE html>

<head>

<title>TechVision | Premium Computer Store</title>

</head>

<body>

<div class="company-logo">TECHVISION</div>

<li class="nav-item"><a href="#" class="nav-link">ANA SAYFA</a></li>

<li class="nav-item"><a href="#" class="nav-link">KAMPANYALAR</a></li>

<li class="nav-item"><a href="#" class="nav-link">ÜRÜNLER</a></li>

<li class="nav-item"><a href="#" class="nav-link">İLETİŞİM</a></li>

</ul>

</nav>

</div>

</header>

<main>

<h1 class="company-title">TEKNOLOJİDE ÖNCÜ MARKA</h1>

Müşteri memnuniyetini her zaman ön planda tutan, bölgenin en büyük teknoloji mağazası.

</h2>

<div class="cart-btn">HEMEN KEŞFET</div>

</div>

</div>

</section>

<h2 class="offer-title">MacBook Pro M2</h2>

<p class="offer-hook">Üstün performans ve şık tasarımıyla yeni MacBook Pro, profesyonel iş akışınızı hızlandırın ve yaratıcılığınızı zirveye taşıyın.</p>

<div class="cart-btn">SEPETE EKLE</div>

</div>

<h2 class="offer-title">Lenovo ThinkPad</h2>

<p class="offer-hook">İş dünyasının güvenilir tercihi ThinkPad serisi ile verimliliğinizi artırın, zorlu koşullara dayanıklı yapısıyla her yerde çalışın.</p>

<div class="cart-btn">SEPETE EKLE</div>

</div>

</section>

<span class="product_add_cart">SEPETE EKLE</span>

</div>

<span class="product_add_cart">SEPETE EKLE</span>

</div>

<span class="product_add_cart">SEPETE EKLE</span>

</div>

<span class="product_add_cart">SEPETE EKLE</span>

</div>

</section>

</section>

<h2 class="subscribe-input-label">HABERDAR OLUN</h2>

</div>

</section>

</main>

<h2 class="footer-title">ADRES</h2>

<h3>Teknoloji Caddesi</h3>

<h3>Bilişim Sokak No:42</h3>

<h3>İstanbul, Türkiye</h3>

</div>

<h2 class="footer-title">HİZMETLERİMİZ</h2>

<h3>Teknik Servis</h3>

<h3>Kurumsal Çözümler</h3>

<h3>Yazılım Desteği</h3>

<h3>Ağ Kurulumu</h3>

<h3>Uzaktan Destek</h3>

</div>

<h2 class="footer-title">TEDARİKÇİLER</h2>

<h3>Apple</h3>

<h3>Microsoft</h3>

<h3>Lenovo</h3>

</div>

<h2 class="footer-title">KURUMSAL</h2>

<h3>Hakkımızda</h3>

<h3>Kariyer</h3>

<h3>Basın</h3>

<h3>İletişim</h3>

<h3>Yatırımcı İlişkileri</h3>

</div>

<a class="designer" href="#">Tasarım: TechVision</a>

</div>

</footer>

</body>

</html>

CSS

:root {

--primary-color: #0071e3;

--secondary-color: #111;

--light-color: #f5f5f7;

--accent-color: #86b7fe;

--dark-gray: #333;

--medium-gray: #666;

--light-gray: #f2f2f2;

--white: #fff;

--transition: all 0.3s ease;

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

--hover-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

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

}

body {

background-color: var(--light-color);

overflow-x: hidden;

}

a {

text-decoration: none;

color: inherit;

}

ul {

list-style: none;

}

/* Header styling */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 70px;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 5%;

background-color: rgba(255, 255, 255, 0.8);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

z-index: 1000;

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

transition: var(--transition);

}

header.scrolled {

height: 60px;

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

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

}

.company-logo {

font-size: 1.8rem;

font-weight: 700;

color: var(--primary-color);

letter-spacing: 1px;

position: relative;

}

.company-logo::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 2px;

background-color: var(--primary-color);

transform: scaleX(0);

transform-origin: right;

transition: transform 0.4s ease;

}

.company-logo:hover::after {

transform: scaleX(1);

transform-origin: left;

}

.navbar {

display: flex;

align-items: center;

}

.nav-items {

display: flex;

gap: 2rem;

}

.nav-item {

position: relative;

}

.nav-link {

font-size: 0.95rem;

font-weight: 500;

color: var(--secondary-color);

letter-spacing: 0.5px;

transition: var(--transition);

padding: 8px 0;

position: relative;

}

.nav-link::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 2px;

background-color: var(--primary-color);

transform: scaleX(0);

transform-origin: right;

transition: transform 0.4s ease;

}

.nav-link:hover {

color: var(--primary-color);

}

.nav-link:hover::after {

transform: scaleX(1);

transform-origin: left;

}

.menu-toggle {

display: none;

cursor: pointer;

font-size: 1.5rem;

color: var(--secondary-color);

}

.menu-toggle i:nth-child(2) {

display: none;

}

/* Main section styling */

main {

padding-top: 70px;

}

.container {

max-width: 1400px;

margin: 0 auto;

padding: 0 5%;

}

/* Hero section */

.section-1 {

display: grid;

grid-template-columns: 1fr 1fr;

min-height: 90vh;

align-items: center;

gap: 2rem;

padding: 2rem 5%;

}

.slogan {

display: flex;

flex-direction: column;

gap: 1.5rem;

}

.company-title {

font-size: 3.5rem;

font-weight: 700;

color: var(--secondary-color);

line-height: 1.2;

letter-spacing: 1px;

animation: fadeInLeft 1s ease;

}

.company-slogan {

font-size: 1.2rem;

font-weight: 400;

color: var(--medium-gray);

line-height: 1.5;

max-width: 80%;

animation: fadeInLeft 1.5s ease;

}

.home-computer-container {

display: flex;

justify-content: center;

animation: fadeInRight 1.5s ease;

}

.home-computer {

max-width: 100%;

filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.2));

transform-origin: center;

transition: transform 0.5s ease;

}

.home-computer:hover {

transform: scale(1.05);

}

/* Offer section */

.section-2 {

padding: 6rem 5%;

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 3rem;

background-color: var(--white);

}

.offer {

display: flex;

flex-direction: column;

border-radius: 20px;

overflow: hidden;

background-color: var(--light-gray);

box-shadow: var(--shadow);

transition: var(--transition);

}

.offer:hover {

transform: translateY(-10px);

box-shadow: var(--hover-shadow);

}

.offer-img {

width: 100%;

height: 300px;

object-fit: contain;

background-color: var(--white);

padding: 2rem;

transition: var(--transition);

}

.offer:hover .offer-img {

transform: scale(1.05);

}

.offer-description {

padding: 2rem;

background-color: var(--light-gray);

}

.offer-title {

font-size: 1.8rem;

font-weight: 600;

color: var(--secondary-color);

margin-bottom: 1rem;

}

.offer-hook {

font-size: 1rem;

color: var(--medium-gray);

margin-bottom: 1.5rem;

line-height: 1.5;

}

.cart-btn {

display: inline-block;

padding: 0.8rem 1.5rem;

background-color: var(--primary-color);

color: var(--white);

font-weight: 500;

border-radius: 30px;

cursor: pointer;

transition: var(--transition);

text-align: center;

}

.cart-btn:hover {

background-color: var(--secondary-color);

transform: translateY(-3px);

}

/* Product section */

.section-3 {

padding: 6rem 5%;

display: grid;

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

gap: 2rem;

}

.product {

position: relative;

border-radius: 15px;

overflow: hidden;

background-color: var(--white);

box-shadow: var(--shadow);

transition: var(--transition);

height: 350px;

display: flex;

align-items: center;

justify-content: center;

}

.product:hover {

transform: translateY(-10px);

box-shadow: var(--hover-shadow);

}

.product-img {

width: 90%;

height: auto;

max-height: 80%;

object-fit: contain;

transition: var(--transition);

}

.product:hover .product-img {

transform: scale(1.05);

}

.product_add_cart {

position: absolute;

bottom: -50px;

left: 0;

width: 100%;

padding: 1rem;

background-color: var(--primary-color);

color: var(--white);

text-align: center;

font-weight: 500;

cursor: pointer;

transition: var(--transition);

}

.product:hover .product_add_cart {

bottom: 0;

}

/* Sponsor section */

.section-4 {

padding: 4rem 5%;

display: grid;

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

gap: 2rem;

background-color: var(--light-gray);

}

.sponsor {

display: flex;

justify-content: center;

align-items: center;

padding: 1.5rem;

background-color: var(--white);

border-radius: 10px;

box-shadow: var(--shadow);

transition: var(--transition);

}

.sponsor:hover {

transform: translateY(-5px);

box-shadow: var(--hover-shadow);

}

.sponsor img {

max-width: 100%;

height: 40px;

object-fit: contain;

filter: grayscale(100%);

opacity: 0.7;

transition: var(--transition);

}

.sponsor:hover img {

filter: grayscale(0);

opacity: 1;

}

/* Subscribe section */

.section-5 {

padding: 6rem 5%;

display: flex;

flex-direction: column;

align-items: center;

gap: 2rem;

background-color: var(--white);

}

.subscribe-input-label {

font-size: 2rem;

font-weight: 600;

color: var(--secondary-color);

position: relative;

}

.subscribe-input-label::after {

content: '';

position: absolute;

bottom: -10px;

left: 50%;

transform: translateX(-50%);

width: 50px;

height: 3px;

background-color: var(--primary-color);

}

.subscribe-container {

display: flex;

width: 100%;

max-width: 600px;

overflow: hidden;

border-radius: 50px;

box-shadow: var(--shadow);

}

#email-subscribe {

flex: 1;

padding: 1.2rem 2rem;

border: none;

outline: none;

font-size: 1rem;

}

.subscribe-container input[type="submit"] {

padding: 1.2rem 2rem;

background-color: var(--primary-color);

color: var(--white);

border: none;

cursor: pointer;

font-weight: 500;

letter-spacing: 1px;

transition: var(--transition);

}

.subscribe-container input[type="submit"]:hover {

background-color: var(--secondary-color);

}

/* Footer */

footer {

background-color: var(--secondary-color);

color: var(--white);

}

.top-footer {

display: grid;

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

gap: 3rem;

padding: 5rem 5% 3rem;

}

.footer-title {

font-size: 1.2rem;

font-weight: 600;

margin-bottom: 1.5rem;

position: relative;

display: inline-block;

}

.footer-title::after {

content: '';

position: absolute;

bottom: -8px;

left: 0;

width: 40px;

height: 2px;

background-color: var(--primary-color);

}

.footer-items {

display: flex;

flex-direction: column;

gap: 1rem;

}

.footer-items h3 {

font-size: 0.9rem;

font-weight: 400;

color: var(--light-gray);

transition: var(--transition);

cursor: pointer;

}

.footer-items h3:hover {

color: var(--primary-color);

transform: translateX(5px);

}

.end-footer {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1.5rem 5%;

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

font-size: 0.9rem;

}

.copyright {

color: var(--light-gray);

}

.designer {

color: var(--primary-color);

font-weight: 500;

transition: var(--transition);

}

.designer:hover {

color: var(--white);

}

/* Animations */

@keyframes fadeInLeft {

from {

opacity: 0;

transform: translateX(-50px);

}

to {

opacity: 1;

transform: translateX(0);

}

@keyframes fadeInRight {

from {

opacity: 0;

transform: translateX(50px);

}

to {

opacity: 1;

transform: translateX(0);

}

/* Media Queries */

@media screen and (max-width: 992px) {

.section-1 {

grid-template-columns: 1fr;

text-align: center;

}

.company-slogan {

max-width: 100%;

margin: 0 auto;

}

.slogan .cart-btn {

margin: 0 auto;

}

@media screen and (max-width: 768px) {

header {

padding: 0 5%;

}

.nav-items {

position: fixed;

top: 70px;

left: -100%;

width: 100%;

height: calc(100vh - 70px);

flex-direction: column;

align-items: center;

justify-content: center;

gap: 3rem;

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

backdrop-filter: blur(10px);

transition: var(--transition);

}

.nav-items.active {

left: 0;

}

.nav-link {

font-size: 1.2rem;

}

.menu-toggle {

display: block;

}

.section-2 {

grid-template-columns: 1fr;

}

JS

// DOM Elementlerini Seçme

const menuToggle = document.querySelector('.menu-toggle');

const navItems = document.querySelector('.nav-items');

const menuIcon = document.querySelector('.bx-menu');

const closeIcon = document.querySelector('.bx-x');

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

const links = document.querySelectorAll('.nav-link');

// Mobil Menü Açma-Kapama İşlevi

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

navItems.classList.toggle('active');

// Menü ikonlarını değiştir

if (navItems.classList.contains('active')) {

menuIcon.style.display = 'none';

closeIcon.style.display = 'block';

} else {

menuIcon.style.display = 'block';

closeIcon.style.display = 'none';

}

});

// Sayfa kaydırıldığında header stilini değiştirme

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Mobil menüde link tıklandığında menüyü kapat

links.forEach(link => {

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

navItems.classList.remove('active');

menuIcon.style.display = 'block';

closeIcon.style.display = 'none';

});

// Sayfa yüklendiğinde çalışan animasyon

document.addEventListener('DOMContentLoaded', () => {

// Ana sayfa bölümündeki resimleri yükle

const images = document.querySelectorAll('img');

images.forEach(img => {

img.addEventListener('load', () => {

img.classList.add('loaded');

});

// Sayfayı yumuşak bir şekilde göster

setTimeout(() => {

document.body.classList.add('loaded');

}, 500);

});

// Kaydırma Animasyonu - Öğeleri kaydırma sırasında göster

const scrollElements = document.querySelectorAll('.offer, .product, .sponsor');

const elementInView = (el, percentageScroll = 100) => {

const elementTop = el.getBoundingClientRect().top;

const elementHeight = el.getBoundingClientRect().height;

return (

elementTop <=

((window.innerHeight || document.documentElement.clientHeight) * (percentageScroll/100))

);

};

const displayScrollElement = (element) => {

element.classList.add('scrolled');

};

const hideScrollElement = (element) => {

element.classList.remove('scrolled');

};

const handleScrollAnimation = () => {

scrollElements.forEach((el) => {

if (elementInView(el, 90)) {

displayScrollElement(el);

} else {

hideScrollElement(el);

}

});

};

// Kaydırma olayını dinle

window.addEventListener('scroll', () => {

handleScrollAnimation();

});

// Sepete Ekle butonu tıklama olayı

const addToCartButtons = document.querySelectorAll('.cart-btn, .product_add_cart');

addToCartButtons.forEach(button => {

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

// Orijinal buton metnini kaydet

const originalText = button.textContent;

// Buton metnini değiştir

button.textContent = 'SEPETE EKLENDİ ✓';

// Butona animasyon ekle

button.classList.add('added');

// 2 saniye sonra metni eski haline getir

setTimeout(() => {

button.textContent = originalText;

button.classList.remove('added');

}, 2000);

});

Metehan'nın bir kodu

Recommended

CodePen Home Push Button

Card Carousel JavaScript

BLACK HOLE

HTML

CSS

JS

Recommended

CodePen Home Push Button

Card Carousel JavaScript

BLACK HOLE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS