Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Samsung Galaxy S24 Ultra - Experience the Future</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

line-height: 1.6;

color: #333;

overflow-x: hidden;

}

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

header {

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

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

position: fixed;

width: 100%;

top: 0;

z-index: 1000;

transition: all 0.3s ease;

}

header.scrolled {

padding: 10px 0;

}

nav {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px 0;

}

.logo img {

height: 30px;

transition: all 0.3s ease;

}

.nav-links {

display: flex;

gap: 30px;

}

.nav-links a {

text-decoration: none;

color: #333;

font-weight: 500;

transition: color 0.3s ease;

}

.nav-links a:hover {

color: #1428a0;

}

.hero {

background: linear-gradient(135deg, #e7f0fd, #ffffff);

padding: 120px 0 60px;

overflow: hidden;

}

.hero-content {

display: flex;

align-items: center;

gap: 60px;

}

.hero-text {

flex: 1;

}

.hero-image {

flex: 1;

text-align: center;

}

.hero-image img {

max-width: 100%;

height: auto;

filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));

transition: transform 0.5s ease;

}

.hero-image img:hover {

transform: scale(1.05) rotate(2deg);

}

.badge {

display: inline-block;

background-color: #1428a0;

color: #fff;

padding: 5px 15px;

border-radius: 25px;

font-size: 0.9rem;

font-weight: 600;

margin-bottom: 20px;

}

h1 {

font-size: 3rem;

margin-bottom: 20px;

line-height: 1.2;

}

.hero p {

font-size: 1.2rem;

margin-bottom: 30px;

color: #666;

}

.btn {

display: inline-block;

background-color: #1428a0;

color: #fff;

padding: 12px 30px;

text-decoration: none;

border-radius: 30px;

font-weight: 600;

transition: all 0.3s ease;

}

.btn:hover {

background-color: #0f1f7a;

transform: translateY(-3px);

}

.btn-outline {

background-color: transparent;

border: 2px solid #1428a0;

color: #1428a0;

}

.btn-outline:hover {

background-color: #1428a0;

color: #fff;

}

.features {

padding: 100px 0;

background-color: #fff;

}

.features h2 {

text-align: center;

margin-bottom: 60px;

font-size: 2.5rem;

color: #333;

}

.feature-grid {

display: grid;

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

gap: 40px;

}

.feature-card {

background-color: #f8f9fa;

border-radius: 15px;

overflow: hidden;

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

transition: all 0.3s ease;

}

.feature-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 40px rgba(0,0,0,0.2);

}

.feature-content {

padding: 30px;

}

.feature-content h3 {

margin-bottom: 15px;

font-size: 1.5rem;

color: #1428a0;

}

.feature-content p {

color: #666;

}

.purchase {

background-color: #f8f9fa;

padding: 100px 0;

}

.purchase-content {

max-width: 600px;

margin: 0 auto;

text-align: center;

}

.purchase-card {

background-color: #fff;

border-radius: 15px;

padding: 40px;

margin-top: 40px;

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

}

.quantity-selector {

display: flex;

justify-content: center;

align-items: center;

gap: 15px;

margin-bottom: 30px;

}

.quantity-btn {

background-color: #f0f0f0;

border: none;

width: 40px;

height: 40px;

border-radius: 50%;

font-size: 1.2rem;

cursor: pointer;

transition: all 0.3s ease;

}

.quantity-btn:hover {

background-color: #1428a0;

color: #fff;

}

#quantity {

font-size: 1.2rem;

width: 60px;

text-align: center;

border: 2px solid #f0f0f0;

border-radius: 25px;

padding: 5px;

}

.purchase-info {

margin-bottom: 30px;

}

.purchase-info p {

margin-bottom: 10px;

color: #666;

}

.cart-icon {

position: relative;

cursor: pointer;

}

.cart-count {

position: absolute;

top: -8px;

right: -8px;

background-color: #1428a0;

color: #fff;

font-size: 0.8rem;

width: 20px;

height: 20px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

}

.cart-modal {

display: none;

position: fixed;

top: 80px;

right: 20px;

background-color: #fff;

border-radius: 15px;

box-shadow: 0 10px 40px rgba(0,0,0,0.2);

padding: 30px;

width: 350px;

max-width: 90vw;

z-index: 1000;

}

.cart-modal h3 {

margin-bottom: 20px;

color: #1428a0;

}

.cart-item {

display: flex;

align-items: center;

gap: 15px;

margin-bottom: 20px;

padding-bottom: 20px;

border-bottom: 1px solid #f0f0f0;

}

.cart-item img {

width: 80px;

height: 80px;

object-fit: cover;

border-radius: 10px;

}

.cart-item-info h4 {

margin-bottom: 5px;

color: #333;

}

.cart-item-info p {

color: #666;

}

@media (max-width: 768px) {

.hero-content {

flex-direction: column;

}

.hero-image {

order: -1;

}

h1 {

font-size: 2rem;

}

.feature-grid {

grid-template-columns: 1fr;

}

.nav-links {

display: none;

}

</style>

</head>

<body>

</div>

<a href="#features">Features</a>

????

</div>

</nav>

</header>

<h1>Samsung Galaxy S24 Ultra</h1>

<p>Experience the future of mobile technology with AI-powered innovation</p>

<div>

<a href="#features" class="btn">Explore Features</a>

<a href="#" class="btn btn-outline" style="margin-left: 15px;">View Specs</a>

</div>

</div>

</section>

<h2>Key Features</h2>

<h3>AI-Powered Camera</h3>

<p>Capture stunning photos and videos with advanced AI enhancements</p>

</div>

<h3>S Pen Included</h3>

<p>Write, draw, and navigate with precision using the built-in S Pen</p>

</div>

<h3>Powerful Performance</h3>

<p>Experience lightning-fast speeds with the latest processor</p>

</div>

<h3>All-Day Battery</h3>

<p>Stay connected longer with intelligent battery management</p>

</div>

<h3>5G Connectivity</h3>

<p>Enjoy ultra-fast download and streaming speeds</p>

</div>

<h3>Durable Design</h3>

<p>Protected by Corning® Gorilla® Glass Victus® 2</p>

</div>

</section>

<h2>Get Your Galaxy S24 Ultra</h2>

<p>Starting from $1,299 or $54.12/mo for 24 mo</p>

</div>

<p>✓ Free shipping</p>

<p>✓ 24-month financing available</p>

<p>✓ Samsung official warranty</p>

</div>

</div>

</section>

<h3>Shopping Cart</h3>

<a href="#" class="btn" id="checkout">Proceed to Checkout</a>

</div>

// Sticky header

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

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

if (window.scrollY > 100) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Smooth scrolling

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

// Cart functionality

let cartCount = 0;

const cartCountElement = document.getElementById('cartCount');

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

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

const addToCartBtn = document.getElementById('addToCart');

const quantityInput = document.getElementById('quantity');

const decreaseQuantityBtn = document.getElementById('decreaseQuantity');

const increaseQuantityBtn = document.getElementById('increaseQuantity');

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

function updateCartCount() {

cartCountElement.textContent = cartCount;

}

function updateCartModal() {

cartItems.innerHTML = `

<h4>Samsung Galaxy S24 Ultra</h4>

<p>Quantity: ${cartCount}</p>

</div>

`;

}

addToCartBtn.addEventListener('click', (e) => {

e.preventDefault();

const quantity = parseInt(quantityInput.value);

cartCount += quantity;

updateCartCount();

updateCartModal();

cartModal.style.display = 'block';

});

cartIcon.addEventListener('click', (e) => {

e.preventDefault();

cartModal.style.display = cartModal.style.display === 'none' ? 'block' : 'none';

});

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

if (quantityInput.value > 1) {

quantityInput.value = parseInt(quantityInput.value) - 1;

}

});

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

if (quantityInput.value < 10) {

quantityInput.value = parseInt(quantityInput.value) + 1;

}

});

</script>

</body>

</html>

CSS

// Sticky header

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

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

if (window.scrollY > 100) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Smooth scrolling

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

// Cart functionality

let cartCount = 0;

const cartCountElement = document.getElementById('cartCount');

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

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

const addToCartBtn = document.getElementById('addToCart');

const quantityInput = document.getElementById('quantity');

const decreaseQuantityBtn = document.getElementById('decreaseQuantity');

const increaseQuantityBtn = document.getElementById('increaseQuantity');

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

function updateCartCount() {

cartCountElement.textContent = cartCount;

}

function updateCartModal() {

cartItems.innerHTML = `

<h4>Samsung Galaxy S24 Ultra</h4>

<p>Quantity: ${cartCount}</p>

</div>

`;

}

addToCartBtn.addEventListener('click', (e) => {

e.preventDefault();

const quantity = parseInt(quantityInput.value);

cartCount += quantity;

updateCartCount();

updateCartModal();

cartModal.style.display = 'block';

});

cartIcon.addEventListener('click', (e) => {

e.preventDefault();

cartModal.style.display = cartModal.style.display === 'none' ? 'block' : 'none';

});

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

if (quantityInput.value > 1) {

quantityInput.value = parseInt(quantityInput.value) - 1;

}

});

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

if (quantityInput.value < 10) {

quantityInput.value = parseInt(quantityInput.value) + 1;

}

});

JS

// Sticky header

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

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

if (window.scrollY > 100) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Smooth scrolling

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

// Cart functionality

let cartCount = 0;

const cartCountElement = document.getElementById('cartCount');

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

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

const addToCartBtn = document.getElementById('addToCart');

const quantityInput = document.getElementById('quantity');

const decreaseQuantityBtn = document.getElementById('decreaseQuantity');

const increaseQuantityBtn = document.getElementById('increaseQuantity');

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

function updateCartCount() {

cartCountElement.textContent = cartCount;

}

function updateCartModal() {

cartItems.innerHTML = `

<h4>Samsung Galaxy S24 Ultra</h4>

<p>Quantity: ${cartCount}</p>

</div>

`;

}

addToCartBtn.addEventListener('click', (e) => {

e.preventDefault();

const quantity = parseInt(quantityInput.value);

cartCount += quantity;

updateCartCount();

updateCartModal();

cartModal.style.display = 'block';

});

cartIcon.addEventListener('click', (e) => {

e.preventDefault();

cartModal.style.display = cartModal.style.display === 'none' ? 'block' : 'none';

});

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

if (quantityInput.value > 1) {

quantityInput.value = parseInt(quantityInput.value) - 1;

}

});

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

if (quantityInput.value < 10) {

quantityInput.value = parseInt(quantityInput.value) + 1;

}

});

S24 serisi

Recommended

NETFLIX LOADING PAGE

404 page

CSS Sunflower HTML Structure

HTML

CSS

JS

Recommended

NETFLIX LOADING PAGE

404 page

CSS Sunflower HTML Structure

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS