Join Now

Pepsi Landing Page Using Html Css Javascript

  • By CodingManish
  • Pepsi Landing Page Using Html Css Javascript

    Prepare to be amazed as we embark on an exhilarating journey to create a visually stunning Animated Pepsi Landing Page using the power of HTML, CSS, and JavaScript. Step by step, we'll unravel the secrets behind crafting captivating animations and immersive user experiences that will leave visitors thirsting for more

  • Video Tutorial of Pepsi Landing Page
  • Key Highlights

    • HTML and CSS Mastery:Learn how to structure your landing page and style it with CSS to achieve the desired Pepsi theme.
    • JavaScript Magic: Dive into JavaScript to add interactivity and create stunning animations that will dazzle your visitors.
    • Responsive Design:Ensure your landing page looks great on all devices, from desktops to smartphones, with responsive design techniques.
    • Optimization and Performance:Discover best practices for optimizing your animations and ensuring smooth performance across various browsers and devices.

    HTML Structure (index.html):
      
       
         
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <!-- codewithmanish -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive Pepsi Website</title>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" href="img/logo.png">
    </head>
    <body>
        <section class="sec">
            <header>
                <a href="#"><img src="img/logo.png" class="logo"></a>
                <div class="toggleMenu" onclick="menuToggle();"></div>
                <ul class="navigation">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">What's New</a></li>
                    <li><a href="#">Newsletter</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </header>
            <div class="content">
                <div class="textBox">
                    <h2>That's What<br><span>I like</span></h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In, architecto perspiciatis debitis autem repellendus eius nam expedita, aliquid distinctio molestiae temporibus, quidem voluptates rerum veniam saepe laboriosam vel quas asperiores.</p>
                    <a href="#">View All Products</a>
                </div>
                <div class="imgBox">
                    <img src="img/pepsi001.png" class="pepsi">
                </div>
            </div>
            <ul class="thumb">
                <li><img src="img/pepsi001.png" onclick="imgSlider('img/pepsi001.png');changeBgColor('#0062be')"></li>
                <li><img src="img/pepsi002.png" onclick="imgSlider('img/pepsi002.png');changeBgColor('#e60c2c')"></li>
                <li><img src="img/pepsi003.png" onclick="imgSlider('img/pepsi003.png');changeBgColor('#1e1e1e')"></li>
            </ul>
            <ul class="sci">
                <li><a href="#"><img src="img/facebook.png"></a></li>
                <li><a href="#"><img src="img/twitter.png"></a></li>
                <li><a href="#"><img src="img/instagram.png"></a></li>
            </ul>
        </section>
        <script src="script.js"></script>
    </body>
    </html>
    
    
        
      
      
      
    CSS Styling (style.css):
        
      
        
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
    
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        section{
            position: relative;
            width: 100%;
            min-height: 100vh;
            padding: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #0062be;
            transition: 0.5s;
        }
        header{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header .logo{
            position: relative;
            max-width: 80px;
        }
        header ul{
            position: relative;
            display: flex;
        }
        header ul li{
            list-style: none;
        }
        header ul li a{
            display: inline-block;
            color: #fff;
            font-weight: 400;
            margin-left: 40px;
            text-decoration: none;
        }
        .content{
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between;
            justify-items: center;
        }
        .content .textBox{
            position: relative;
            max-width: 600px;
            margin-top: 6%;
        }
        .content .textBox h2{
            color: #fff;
            font-size: 4em;
            line-height: 1.5em;
            font-weight: 900;
            text-transform: uppercase;
        }
        .content .textBox h2 span{
            font-size: 2em;
        }
        .content .textBox p{
            color: #fff;
        }
        .content .textBox a{
            display: inline-block;
            margin-top: 20px;
            padding: 8px 20px;
            background: #fff;
            color: #111;
            border-radius: 40px;
            font-weight: 500;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
        }
        .content .imgBox{
            width: 600px;
            display: flex;
            padding-right: 50px;
            margin-top: 50px;
            justify-content: flex-end;
        }
        .content .imgBox img{
            max-width: 260px;
        }
        .thumb{
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            display: flex;
        }
        .thumb li{
            list-style: none;
            display: inline-block;
            margin: 0 20px;
            cursor: pointer;
            transition: 0.5s;
        }
        /* Movimiento */
        .thumb li:hover{
            transform: translateY(-15px);
        }
        .thumb li img{
            max-width: 40px;
        }
        .sci{
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .sci li{
            list-style: none;
        }
        .sci li a{
            display: inline-block;
            filter: invert(1);
            margin: 5px 0;
            transform: scale(0.6);
        }
        
        /* Responsive */
        @media(max-width: 991px){
            section{
                padding: 40px;
                padding-bottom: 150px; /* 120px */
            }
            header{
                padding: 20px 40px;
            }
            header .logo{
                position: relative;
                max-width: 60px;
            }
            /* Menu Responsive */
            header ul{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #fff;
                z-index: 1;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: 0.2s;
                visibility: hidden;
                opacity: 0;
            }
            header ul.active{ /* Para que aparezca el menu */
                visibility: visible;
                opacity: 1;
            }
            header ul li a{
                display: inline-block;
                color: #111;
                font-weight: 400;
                margin-left: 0;
                text-decoration: none;
                font-size: 2em;
                margin: 10px 0;
            }
            header ul li a:hover{
                color: #ed0023;
            }
            .toggleMenu{
                position: relative;
                width: 40px;
                height: 40px;
                background: url(img/menu.png);
                background-position: center;
                background-size: 30px;
                background-repeat: no-repeat;
                z-index: 2;
                cursor: pointer;
            }
            .toggleMenu.active{
                background: url(img/close.png);
                background-position: center;
                background-size: 25px;
                background-repeat: no-repeat;
                filter: invert(1); /* Para que aparezca la 'x' */
            }
            /* fin del menu */
            .content{
                flex-direction: column;
                margin-top: 80px;
            }
            .content .textBox{
                position: relative;
                max-width: 100%;
                padding-right: 20px;
            }
            .content .textBox h2{
                font-size: 3em;
            }
            .content .textBox a{
                font-size: 14px;
                padding: 8px 15px;
            }
            .content .imgBox{
                width: 100%;
                display: flex;
                padding-right: 0;
                margin-top: 50px;
                justify-content: center;
            }
            .content .imgBox img{
                max-width: 150px;
            }
            .thumb li img{
                max-width: 37px; 
            }
            .sci{
                right: 0;
                width: 50px;
                background: rgba(0,0,0,0.2);
            }
        }
        
         
        
      
      
    JavaScript (script.js):
      
        
        function imgSlider(anything){
            document.querySelector('.pepsi').src = anything;
        }
        
        function changeBgColor(color){
            const sec = document.querySelector('.sec');
            sec.style.background = color;
        }
        
        function menuToggle(){
            const toggleMenu = document.querySelector('.toggleMenu');
            const navigation = document.querySelector('.navigation');
            toggleMenu.classList.toggle('active');
            navigation.classList.toggle('active');
        }
        
      
    
        
        

    Download the source code files for this project for free by clicking the Download button.

    Total projects



    Related Projects




  • ...

    your source for awesome coding projects! Let's dive into the world of code together! 🚀