Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Responsive E-Commerce Layout with Auto-Playing Carousel and Countdown Timer

Tech 1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Retail Interface</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header class="main-header">
        <div class="container">
            <nav class="top-nav-links">
                <a href="#">Home</a>
                <span>|</span>
                <a href="#">Store</a>
                <span>|</span>
                <a href="#">OS</a>
                <span>|</span>
                <a href="#">IoT</a>
                <span>|</span>
                <a href="#">Cloud</a>
                <span>|</span>
                <a href="#">Tech</a>
                <span>|</span>
                <a href="#">Goods</a>
                <span>|</span>
                <a href="#">Platform</a>
                <span>|</span>
                <a href="#">Licenses</a>
                <span>|</span>
                <a href="#">Terms</a>
                <span>|</span>
                <a href="#">Download App</a>
                <span>|</span>
                <a href="#">Region</a>
            </nav>
            <div class="auth-actions">
                <a href="#">Sign In</a>
                <span>|</span>
                <a href="#">Register</a>
                <span>|</span>
                <a href="#">Notifications</a>
                <span>|</span>
                <a href="#" class="cart-icon">
                    Cart
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cart"></use>
                    </svg>
                </a>
            </div>
        </div>
    </header>

    <!-- Navigation Bar -->
    <nav class="navbar">
        <div class="container">
            <div class="logo-placeholder"></div>
            <ul class="nav-menu">
                <li><a href="#">Phones</a></li>
                <li><a href="#">Redmi</a></li>
                <li><a href="#">TVs</a></li>
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Tablets</a></li>
                <li><a href="#">Appliances</a></li>
                <li><a href="#">Routers</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Community</a></li>
            </ul>
            <div class="search-container">
                <input type="text" placeholder="Search products">
                <button type="submit">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Banner & Sidebar -->
    <section class="hero-section">
        <aside class="category-sidebar">
            <a href="#">Smartphones</a>
            <a href="#">Televisions</a>
            <a href="#">Home Appliances</a>
            <a href="#">Laptops</a>
            <a href="#">Tablets</a>
            <a href="#">Mobility & Wearables</a>
            <a href="#">Health & Kids</a>
            <a href="#">Lifestyle & Bags</a>
            <a href="#">Smart Routers</a>
            <a href="#">Power & Accessories</a>
        </aside>
        <div class="carousel-wrapper">
            <div class="slide-container">
                <img src="images/banner1.webp" alt="Promo 1">
                <img src="images/banner2.webp" alt="Promo 2">
                <img src="images/banner3.webp" alt="Promo 3">
                <img src="images/banner4.webp" alt="Promo 4">
            </div>
            <button class="prev-btn">‹</button>
            <button class="next-btn">›</button>
            <div class="dots-container">
                <span class="dot active"></span>
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>
        </div>
    </section>

    <!-- Feature Grid -->
    <section class="feature-grid">
        <ul>
            <li><a href="#"><img src="images/icon1.png">Support Services</a></li>
            <li><a href="#"><img src="images/icon2.png">Corporate Deals</a></li>
            <li><a href="#"><img src="images/icon3.png">F-Codes</a></li>
            <li><a href="#"><img src="images/icon4.png">Mi Card</a></li>
            <li><a href="#"><img src="images/icon5.png">Trade-In</a></li>
            <li><a href="#"><img src="images/icon6.png">Recharge</a></li>
        </ul>
        <div class="bottom-banner">
            <div class="banner-item item1"></div>
            <div class="banner-item item2"></div>
            <div class="banner-item item3"></div>
        </div>
    </section>

    <!-- Floating Navigation -->
    <aside class="floating-nav">
        <a href="#"><img src="images/app.png">App</a>
        <a href="#"><img src="images/profile.png">Account</a>
        <a href="#"><img src="images/support.png">Support</a>
        <a href="#"><img src="images/chat.png">Live Chat</a>
        <a href="#"><img src="images/cart.png">Cart</a>
    </aside>

    <!-- Countdown Timer -->
    <section class="countdown-section">
        <h1>Countdown to Summer Break 2024</h1>
        <p id="timerDisplay"></p>
    </section>

    <script src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
    width: 1226px;
    margin: 0 auto;
}

.main-header {
    height: 40px;
    background-color: #333;
    color: #B0B0B0;
    font-size: 12px;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-nav-links a {
    color: #B0B0B0;
    font-size: 12px;
    line-height: 40px;
}

.top-nav-links .sep {
    margin: 0 3.6px;
}

.auth-actions {
    display: flex;
    align-items: center;
}

.cart-icon {
    margin-left: 20px;
}

.navbar {
    height: 100px;
    background-color: white;
    position: relative;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-placeholder {
    width: 56px;
    height: 56px;
    background-image: url('https://inews.gtimg.com/newsapp_ls/0/13772180398/0/640');
    background-size: cover;
    background-repeat: no-repeat;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-menu a {
    color: #333;
    font-weight: 500;
}

.search-container {
    position: relative;
    width: 296px;
}

.search-container input {
    width: 245px;
    height: 50px;
    padding: 0 10px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-container button {
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.hero-section {
    display: flex;
    justify-content: space-between;
    margin: 14px 146px 35px;
    height: 460px;
    overflow: hidden;
}

.category-sidebar {
    width: 234px;
    height: 460px;
    background-color: rgba(105, 101, 101, 0.6);
    padding: 20px 0;
}

.category-sidebar a {
    display: block;
    padding: 0 30px;
    height: 42px;
    line-height: 42px;
    color: #fff;
    font-size: 14px;
    transition: background 0.3s;
}

.category-sidebar a:hover {
    background-color: #FF6700;
}

.carousel-wrapper {
    position: relative;
    width: 4904px;
    height: 460px;
    animation: slide 15s infinite linear;
}

.slide-container img {
    width: 1226px;
    height: 460px;
    float: left;
    border: 0;
}

@keyframes slide {
    0%, 20% { margin-left: 0; }
    25%, 45% { margin-left: -1226px; }
    50%, 70% { margin-left: -2452px; }
    75%, 100% { margin-left: -3678px; }
}

.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background-color: #FF6700;
}

.feature-grid {
    width: 1240px;
    margin: 0 auto;
    height: 170px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.feature-grid ul {
    width: 234px;
    height: 170px;
    background-color: #5F5750;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.feature-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 12px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.feature-grid li:hover {
    opacity: 1;
}

.feature-grid img {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.bottom-banner {
    display: flex;
    gap: 10px;
    width: 978px;
    height: 170px;
    margin-top: 10px;
}

.banner-item {
    width: 316px;
    height: 170px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0.5px solid #ddd;
}

.item1 {
    background-image: url('images/banner8.jpg');
}

.item2 {
    background-image: url('images/banner9.png');
}

.item3 {
    background-image: url('images/banner10.png');
}

.floating-nav {
    position: fixed;
    top: 210px;
    right: 0;
    width: 85px;
    height: 450px;
    background-color: #fff;
    border-collapse: collapse;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.floating-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    color: #B0B0B0;
    padding: 18px 0;
}

.countdown-section {
    text-align: center;
    margin-top: 40px;
}

#timerDisplay {
    font-size: 18px;
    color: #333;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

// Countdown Timer Script
const targetDate = new Date('2024-07-03T00:00:00');

function updateTimer() {
    const now = new Date();
    const diff = targetDate - now;
    
    if (diff <= 0) {
        document.getElementById('timerDisplay').textContent = 'Time is up!';
        clearInterval(timerInterval);
        return;
    }
    
    const time = new Date(diff);
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = time.getUTCHours();
    const minutes = time.getUTCMinutes();
    const seconds = time.getUTCSeconds();
    
    const display = `Days: ${days} | Hours: ${hours} | Minutes: ${minutes} | Seconds: ${seconds}`;
    document.getElementById('timerDisplay').textContent = display;
}

// Initialize timer
updateTimer();
const timerInterval = setInterval(updateTimer, 1000);

Key Concepts Summary

  • Positioning: static, relative, absolute, fixed, sticky — each affects layout differently.
  • Box Model: padding, margin, border, box-sizing: border-box controls sizing behavior.
  • Flexbox: display: flex, justify-content, align-items, flex-direction, flex-wrap for responsive layouts.
  • Grid: display: grid, repeat() for complex two-dimensional layouts.
  • Transforms: translate(), rotate(), scale(), skew(), transform-origin for visual effects.
  • Animations: @keyframes, animation-name, duration, delay, iteration-count, fill-mode, timing-function.
  • JavaScript Fundamentals: Variables (let, const), data types (number, string, boolean, null, undefined), operators, conditionals (if, switch), loops (for, while), arrays, functions, objects, DOM manipulation.
  • Event Hanlding: addEventListener, removeEventListener, event.preventDefault().
  • DOM Methods: querySelector, getElementById, innerHTML, innerText, textContent, classList.add/remove/toggle.
  • Math Object: Math.random(), Math.floor(), Math.ceil(), Math.round(), Math.max/min, Math.sqrt(), Math.pow().
  • Date Object: new Date(), getYear(), getMonth(), getDate(), getHours(), getTime().
  • Memory Management: Garbage collection via reference counting and mark-and-sweep algorithms.
  • Clsoures: Inner function accessing outer scope variables.
  • Template Literals: Backticks with ${} for dynamic string interpolation.
Tags: HTMLCSSjavascriptresponsive design
Back to List

Prev: Understanding Inheritance in Java Object-Oriented Programming

Next: Understanding the Diff Algorithm in Vue

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.

Copyright © fadingcoder.top