Webleb - HTML UI Elements - Um código de Metehan

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);

});

Um código de Metehan

Recomendado

Botão de página inválido

texto

HTML

CSS

JS

Recomendado

Botão de página inválido

texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS