Simple Front End Website in Neumorphism in HTML CSS and Java script

Table of Contents

Introduction

A responsive grid layout is one of the most effective ways to design modern front-end interfaces. At its core, this layout uses CSS Grid or Flexbox to divide the page into flexible rows and columns. Each section can hold cards, text, or images, and the grid automatically adjusts to different screen sizes. This makes it ideal for websites that need to look polished on desktops, tablets, and mobile devices without requiring separate designs for each platform. The simplicity of the code also ensures that developers can maintain and expand the layout easily as projects grow.

The strength of this approach lies in its adaptability. By defining grid columns with properties like repeat(auto-fit, minmax(250px, 1fr)), the layout intelligently resizes elements to fit available space. Cards or content blocks remain evenly spaced, and the design avoids awkward gaps or overlaps. This responsiveness is crucial in today’s environment, where users access websites from a wide range of devices. Combined with modern CSS features such as shadows, rounded corners, and hover effects, the grid layout achieves a clean, professional look that aligns with current design trends.

Beyond aesthetics, the responsive grid layout also enhances usability. Visitors can quickly scan information presented in card-based sections, while developers can integrate JavaScript to add interactivity—such as filtering, sorting, or animations—without breaking the structure. This balance of clarity, flexibility, and interactivity makes the grid layout a universal solution for portfolios, dashboards, e-commerce sites, and landing pages.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Nexus Sports | Neumorphism Gear Shop</title>
<!-- Google Fonts & Simple CSS Reset -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],300;14..32,400;14..32,600;14..32,700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background: #e0e5ec;
padding: 2rem 1.5rem;
}
/* NEUMORPHISM GLOBAL UTILITIES */
.neu-card {
background: #e0e5ec;
border-radius: 2rem;
box-shadow: 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff;
transition: all 0.25s ease;
}
.neu-card:hover {
box-shadow: 5px 5px 12px #a3b1c6, -5px -5px 12px #ffffff;
transform: translateY(-3px);
}
.neu-press {
box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff;
background: #e0e5ec;
}
button, .btn {
background: #e0e5ec;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 3rem;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
transition: 0.2s;
color: #2c3e66;
}
button:active {
box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
transform: scale(0.97);
}
/* responsive grid layout */
.container {
max-width: 1400px;
margin: 0 auto;
}
/* header area */
.hero {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
gap: 1.5rem;
}
.brand h1 {
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(135deg, #1f2a48, #2c3e66);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.5px;
}
.brand p {
color: #4a5b7a;
font-weight: 500;
margin-top: 0.3rem;
}
.cart-indicator {
display: flex;
align-items: center;
gap: 1rem;
background: #e0e5ec;
padding: 0.6rem 1.8rem;
border-radius: 3rem;
box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
}
.cart-indicator span {
font-weight: 700;
font-size: 1.4rem;
color: #1f2a48;
}
/* product grid - responsive grid layout */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0 3rem;
}
/* product card neumorphism + image animation */
.product-card {
background: #e0e5ec;
border-radius: 2rem;
padding: 1.5rem 1.2rem 1.8rem;
box-shadow: 12px 12px 20px #a3b1c6, -12px -12px 20px #ffffff;
transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.product-card:hover {
transform: scale(1.02);
box-shadow: 6px 6px 14px #a3b1c6, -6px -6px 14px #ffffff;
}
/* image wrapper with animation (subtle float + hover scale) */
.img-wrapper {
width: 160px;
height: 160px;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s;
animation: floatImage 4s ease-in-out infinite;
}
.product-card:hover .img-wrapper {
animation: none;
transform: scale(1.05);
box-shadow: 4px 4px 12px #a3b1c6, -4px -4px 12px #ffffff;
}
@keyframes floatImage {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0px); }
}
.product-img {
width: 130px;
height: 130px;
object-fit: contain;
filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.1));
}
.product-title {
font-size: 1.4rem;
font-weight: 700;
margin: 0.7rem 0 0.3rem;
color: #1e2b3f;
}
.product-category {
font-size: 0.8rem;
background: #d9dfea;
padding: 0.2rem 1rem;
border-radius: 30px;
display: inline-block;
margin: 0.4rem 0;
color: #2c3e66;
font-weight: 600;
box-shadow: inset 1px 1px 2px #b5c1d4, inset -1px -1px 2px #ffffff;
}
.price {
font-size: 1.7rem;
font-weight: 800;
color: #1f3a5f;
margin: 0.6rem 0;
}
.price small {
font-size: 0.9rem;
font-weight: 500;
}
.add-to-cart {
margin-top: 0.7rem;
width: 80%;
font-weight: 700;
letter-spacing: 0.5px;
}
/* cart sidebar / toast + cart summary section */
.cart-section {
margin-top: 2rem;
padding: 1.5rem;
border-radius: 2rem;
background: #e0e5ec;
box-shadow: 12px 12px 20px #a3b1c6, -12px -12px 20px #ffffff;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 1rem;
border-bottom: 2px solid #cbd2e0;
padding-bottom: 0.7rem;
margin-bottom: 1.2rem;
}
.cart-items-list {
max-height: 220px;
overflow-y: auto;
padding-right: 0.5rem;
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.7rem 0;
border-bottom: 1px solid #ccd3e2;
}
.cart-item-info {
display: flex;
gap: 1rem;
align-items: center;
font-weight: 500;
}
.cart-item-name {
font-weight: 600;
}
.cart-item-price {
font-weight: 700;
}
.remove-item {
background: none;
box-shadow: none;
font-size: 1.2rem;
padding: 0.3rem 0.7rem;
color: #b0003a;
box-shadow: 3px 3px 6px #a3b1c6, -3px -3px 6px #ffffff;
}
.cart-total {
text-align: right;
margin-top: 1rem;
font-size: 1.4rem;
font-weight: 800;
padding-top: 0.7rem;
}
.empty-cart-msg {
text-align: center;
padding: 1rem;
color: #5c6f91;
font-style: italic;
}
.action-buttons {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 1rem;
}
/* toast message */
.toast-msg {
position: fixed;
bottom: 30px;
right: 30px;
background: #2c3e66;
color: white;
padding: 12px 24px;
border-radius: 50px;
font-weight: 600;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
z-index: 1000;
backdrop-filter: blur(2px);
transition: opacity 0.3s;
opacity: 0;
pointer-events: none;
}
footer {
margin-top: 3rem;
text-align: center;
font-size: 0.8rem;
color: #4a5b7a;
padding: 1rem;
}
@media (max-width: 680px) {
body { padding: 1rem; }
.brand h1 { font-size: 1.8rem; }
.cart-indicator { padding: 0.4rem 1rem; }
.products-grid { gap: 1.2rem; }
.img-wrapper { width: 130px; height: 130px; }
.product-img { width: 100px; height: 100px; }
}
</style>
</head>
<body>
<div class="container">
<!-- Hero Section with title & intro -->
<div class="hero">
<div class="brand">
<h1>⚡ NEXUS SPORTS</h1>
<p>Soft shadows · Pure performance · Neumorphic edge</p>
</div>
<div class="cart-indicator">
🛒 <span id="cartCount">0</span> items
</div>
</div>
<!-- Introduction text block with neumorphism -->
<div class="neu-card" style="padding: 1.2rem 1.8rem; margin-bottom: 1.5rem;">
<p style="font-weight: 500; color: #2b3b5c;">🏆 <strong>Beyond the ordinary</strong> — Experience premium sports gear with a 3D soft interface. Every item is crafted for athletes who love style & comfort. Hover over cards, feel the depth, and add your favorites to the cart. <br> ✨ <em>Responsive grid, smooth animations, and pure neumorphism delight.</em></p>
</div>
<!-- Product Grid (Responsive Grid Layout) -->
<div class="products-grid" id="productsGrid"></div>
<!-- Shopping Cart Section (Neumorphism style) -->
<div class="cart-section">
<div class="cart-header">
<h3>🛍️ Your Gear Bag</h3>
<button id="clearCartBtn" class="btn" style="padding: 0.5rem 1rem;">🗑️ Clear cart</button>
</div>
<div id="cartItemsContainer" class="cart-items-list">
<div class="empty-cart-msg">Your cart feels empty. Add some sports energy!</div>
</div>
<div class="cart-total" id="cartTotal">Total: $0.00</div>
<div class="action-buttons">
<button id="checkoutBtn" class="btn">✔️ Checkout (Demo)</button>
</div>
</div>
<footer>
© 2025 Nexus Sports — Neumorphism concept | Smooth 3D Interaction | Responsive Grid
</footer>
</div>
<!-- Toast Notification -->
<div id="toastMsg" class="toast-msg">✨ Item added</div>
<script>
// ---------- PRODUCT DATA ----------
const products = [
{
id: 1,
name: "Aero Strike Soccer Ball",
category: "Football",
price: 29.99,
image: "https://cdn-icons-png.flaticon.com/512/3095/3095125.png",
alt: "soccer ball"
},
{
id: 2,
name: "Trailblaze Running Shoes",
category: "Running",
price: 79.99,
image: "https://cdn-icons-png.flaticon.com/512/2961/2961550.png",
alt: "running shoes"
},
{
id: 3,
name: "Hydra Peak Water Bottle",
category: "Accessories",
price: 14.99,
image: "https://cdn-icons-png.flaticon.com/512/2935/2935391.png",
alt: "water bottle"
},
{
id: 4,
name: "Viper Elite Basketball",
category: "Basketball",
price: 39.99,
image: "https://cdn-icons-png.flaticon.com/512/1170/1170624.png",
alt: "basketball"
},
{
id: 5,
name: "Carbon Flex Yoga Mat",
category: "Yoga",
price: 45.00,
image: "https://cdn-icons-png.flaticon.com/512/3096/3096807.png",
alt: "yoga mat"
},
{
id: 6,
name: "Shadow Strike Badminton Set",
category: "Racquet Sports",
price: 59.99,
image: "https://cdn-icons-png.flaticon.com/512/2985/2985941.png",
alt: "badminton racket"
}
];
// -------- CART STATE ----------
let cart = [];   // each item: { id, name, price, quantity }
// DOM Elements
const productsGrid = document.getElementById('productsGrid');
const cartItemsContainer = document.getElementById('cartItemsContainer');
const cartTotalSpan = document.getElementById('cartTotal');
const cartCountSpan = document.getElementById('cartCount');
const clearCartBtn = document.getElementById('clearCartBtn');
const checkoutBtn = document.getElementById('checkoutBtn');
const toastEl = document.getElementById('toastMsg');
// Helper: Show toast message with animation
let toastTimeout;
function showToast(message, isError = false) {
if (toastTimeout) clearTimeout(toastTimeout);
toastEl.textContent = message;
toastEl.style.backgroundColor = isError ? '#b0003a' : '#2c3e66';
toastEl.style.opacity = '1';
toastTimeout = setTimeout(() => {
toastEl.style.opacity = '0';
}, 2000);
}
// Update entire cart UI: display items, total, badge count
function updateCartUI() {
// update cart count badge
const totalItems = cart.reduce((acc, item) => acc + item.quantity, 0);
cartCountSpan.innerText = totalItems;
// calculate total price
let totalPrice = 0;
if (cart.length === 0) {
cartItemsContainer.innerHTML = `<div class="empty-cart-msg">🛒 Your gear bag is empty. Explore our collection!</div>`;
cartTotalSpan.innerText = `Total: $0.00`;
return;
}
// build cart items HTML
let cartHtml = '';
cart.forEach(item => {
const itemTotal = (item.price * item.quantity).toFixed(2);
cartHtml += `
<div class="cart-item" data-id="${item.id}">
<div class="cart-item-info">
<span class="cart-item-name">${escapeHtml(item.name)}</span>
<span> x${item.quantity}</span>
</div>
<div style="display: flex; align-items: center; gap: 1rem;">
<span class="cart-item-price">$${itemTotal}</span>
<button class="btn remove-item" data-id="${item.id}" style="padding: 0.3rem 0.9rem;">🗑️</button>
</div>
</div>
`;
totalPrice += item.price * item.quantity;
});
cartItemsContainer.innerHTML = cartHtml;
cartTotalSpan.innerText = `Total: $${totalPrice.toFixed(2)}`;
// attach remove event listeners to each remove button
document.querySelectorAll('.remove-item').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const prodId = parseInt(btn.getAttribute('data-id'));
removeFromCart(prodId);
});
});
}
// Remove item from cart (by product id) - removes entire product line
function removeFromCart(productId) {
const existingIndex = cart.findIndex(item => item.id === productId);
if (existingIndex !== -1) {
cart.splice(existingIndex, 1);
updateCartUI();
showToast(`Removed from bag`, false);
saveCartToLocal();
}
}
// Add product to cart: if exists increase quantity
function addToCart(product) {
const existing = cart.find(item => item.id === product.id);
if (existing) {
existing.quantity += 1;
showToast(`+1 ${product.name} added`, false);
} else {
cart.push({
id: product.id,
name: product.name,
price: product.price,
quantity: 1
});
showToast(`✨ ${product.name} added to bag!`, false);
}
updateCartUI();
saveCartToLocal();
}
// clear whole cart
function clearCart() {
if (cart.length === 0) {
showToast(`Cart already empty`, true);
return;
}
cart = [];
updateCartUI();
showToast(`Cart cleared 🧹`, false);
saveCartToLocal();
}
// demo checkout
function handleCheckout() {
if (cart.length === 0) {
showToast(`Your bag is empty, add some gear first!`, true);
return;
}
const totalItems = cart.reduce((sum, i) => sum + i.quantity, 0);
showToast(`🎉 Thanks for shopping (demo)! ${totalItems} item(s) ordered.`, false);
// optional: reset cart for demo experience
cart = [];
updateCartUI();
saveCartToLocal();
}
// Local storage persistence (optional)
function saveCartToLocal() {
localStorage.setItem('sportShopCart', JSON.stringify(cart));
}
function loadCartFromLocal() {
const saved = localStorage.getItem('sportShopCart');
if (saved) {
try {
cart = JSON.parse(saved);
if (!Array.isArray(cart)) cart = [];
// ensure quantity and structure
cart = cart.filter(item => item.id && typeof item.quantity === 'number');
updateCartUI();
} catch(e) { cart = []; }
}
}
// Helper: escape html to avoid injection
function escapeHtml(str) {
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&amp;';
if (m === '<') return '&lt;';
if (m === '>') return '&gt;';
return m;
});
}
// Render product cards dynamically with image animation
function renderProducts() {
if (!productsGrid) return;
productsGrid.innerHTML = '';
products.forEach(prod => {
const card = document.createElement('div');
card.className = 'product-card';
// Using image icons from flaticon (high quality, free for demo, consistent sports theme)
card.innerHTML = `
<div class="img-wrapper">
<img class="product-img" src="${prod.image}" alt="${prod.alt}" loading="lazy">
</div>
<div class="product-title">${escapeHtml(prod.name)}</div>
<div class="product-category">${escapeHtml(prod.category)}</div>
<div class="price">$${prod.price.toFixed(2)} <small>USD</small></div>
<button class="add-to-cart btn" data-id="${prod.id}">+ Add to Cart</button>
`;
productsGrid.appendChild(card);
});
// attach add-to-cart events to all buttons
document.querySelectorAll('.add-to-cart').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = parseInt(btn.getAttribute('data-id'));
const product = products.find(p => p.id === id);
if (product) addToCart(product);
});
});
}
// Additional small micro-interaction: neumorphism active effect on cards but we already have.
// Also implement window load & responsive friendly.
// init: load cart from localstorage, render grid, update UI, bind global buttons
function init() {
renderProducts();
loadCartFromLocal();    // loads cart and updates UI
// bind clear cart and checkout
if (clearCartBtn) clearCartBtn.addEventListener('click', clearCart);
if (checkoutBtn) checkoutBtn.addEventListener('click', handleCheckout);
// Optional: localStorage update on cart changes already via saveCartToLocal in add/remove/clear.
}
// Whenever cart changes manually, we call saveCartToLocal after each update.
// Override addToCart, removeFromCart, clearCart to ensure save.
// Already done: addToCart -> updateCartUI + saveCartToLocal; removeFromCart -> updateCartUI + saveCartToLocal
// clearCart -> update + save
// For completeness, ensure that any manual cart mutations also call save, but we are safe.
// Adding a subtle live demo effect - product image loading animated is already via css
// start application
init();
</script>
</body>
</html>

Conclusion

The responsive grid layout stands out as the best modern front-end style because it combines adaptability, simplicity, and elegance. It ensures a seamless user experience across devices, supports scalable content organization, and provides a visually appealing framework that can be customized for any type of website. For developers and designers aiming to create modern, future-proof interfaces, this layout is the most reliable choice.

Related News: Programming Concepts, Web Development & AI Learning Projects

The technology landscape continues to evolve through programming education, practical web development tools, and AI-powered learning systems. From mastering core coding concepts to building real-world machine learning applications, these resources highlight the growing importance of technical skills in today’s digital economy.

Complete Guide to Constants in Programming

Understanding constants is essential for writing stable and maintainable code. Constants help developers store fixed values that remain unchanged throughout program execution, improving code readability and reliability.
https://macronepal.com/complete-guide-to-constants-in-programming/

Complete Guide to Variables in Programming

Variables are the foundation of programming logic, enabling developers to store, modify, and manipulate data dynamically across applications and systems.
https://macronepal.com/complete-guide-to-variables-in-programming/

TradingView Widget Integration for Web Projects

TradingView widgets allow developers to integrate real-time financial charts, market data, and technical analysis tools into websites and trading platforms.
https://macronepal.com/code-for-trading-view-widget-integration/

Learning Management System with Content-Based Recommendations

Modern LMS platforms are increasingly using recommendation systems to personalize educational content and improve learner engagement through intelligent content delivery.
https://macronepal.com/learning-management-system-lms-with-content-based-recommendations/

Advanced LMS Recommendation System Development

The continued development of recommendation-based learning systems demonstrates how AI can optimize digital education experiences and adaptive learning pathways.
https://macronepal.com/learning-management-system-lms-with-content-based-recommendations-continued/

100 Unique Themed Login & Signup Forms

Creative authentication page designs play an important role in improving user experience and branding consistency across modern websites and applications.
https://macronepal.com/100-unique-themed-login-signup-forms-2/

Digital Timestamping Service

Digital timestamping technologies are becoming increasingly valuable for document verification, data integrity, and secure proof-of-existence systems.
https://macronepal.com/digital-timestamping-service/

Beginner NLP Project: Spam Classifier

Spam classification remains one of the most practical beginner machine learning projects, helping developers understand natural language processing and supervised learning fundamentals.
https://macronepal.com/project-no-1-spam-classifier-beginner-nlp-project/

More Unique Login & Signup Form Designs

User interface innovation continues to shape web development, with modern authentication designs focusing on accessibility, responsiveness, and visual engagement.
https://macronepal.com/100-unique-themed-login-signup-forms/