index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="menu container">
            <a href="#" class="logo">logo</a>
            <input type="checkbox" id="menu"/>
            <label for="menu">
                <img src="images/menu.png" class="menu-icono" alt="menu">
                </label>
            <nav class="navbar">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Servicios</a></li>
                    <li><a href="#">Productos</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav>
            <!--Parte del carrito-->
            <div class="">
                <ul>
                    <li class="submenu">
                        <img src="images/car.svg" id="img-carrito" alt="carrito">

                        <div id="carrito">
                            <table id="lista-carrito">
                                <thead>
                                    <tr>
                                        <th>Imagen</th>
                                        <th>Nombre</th>
                                        <th>Precio</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                                <a href="#" id="vaciar-carrito" class="btn-2">Vaciar Carrito</a>

                            </table>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="header-content container">
            <div class="header-img">
                <img src="images/right.png" alt="">
            </div>
            <div class="header-txt">
                <h1>Ofertas especiales</h1>
                <p>estrena las mejores prendas</p>
                <a href="#" class="btn-1">Información</a>
            </div>
        </div>
    </header>


    <section class="ofert container">
        <div class="ofert-1">
            <div class="ofert-img">
                <img src="images/f1.png" alt="">
            </div>
            <div class="ofert-txt">
                <h3>Producto 1</h3>
                <a href="#" class="btn-2">Información</a>
            </div>
        </div>

        <div class="ofert-1">
            <div class="ofert-img">
                <img src="images/f2.png" alt="">
            </div>
            <div class="ofert-txt">
                <h3>Producto 2</h3>
                <a href="#" class="btn-2">Información</a>
            </div>
        </div>

        <div class="ofert-1">
            <div class="ofert-img">
                <img src="images/f3.png" alt="">
            </div>
            <div class="ofert-txt">
                <h3>Producto 3</h3>
                <a href="#" class="btn-2">Información</a>
            </div>
        </div>

    </section>
<!--seccion de los productos-->
<main class="products container" id="lista-1">
    <h1>Productos</h1>

    <div class="product-content">

        <div class="product">
            <img src="images/1.png" alt="">
            <div class="product-txt">
                <h3>Elisyum</h3>
                <p>calidad premium</p>
                <p class="precio">$ 200</p>
                <a href="#" class="agregar-carrito btn-2" data-id="1">Agregar al carrito</a>
            </div>
        </div>

        <div class="product">
            <img src="images/2.png" alt="">
            <div class="product-txt">
                <h3>Elisyum</h3>
                <p>calidad premium</p>
                <p class="precio">$ 200</p>
                <a href="#" class="agregar-carrito btn-2" data-id="2">Agregar al carrito</a>
            </div>
        </div>

        <div class="product">
            <img src="images/3.png" alt="">
            <div class="product-txt">
                <h3>Elisyum</h3>
                <p>calidad premium</p>
                <p class="precio">$ 200</p>
                <a href="#" class="agregar-carrito btn-2" data-id="3">Agregar al carrito</a>
            </div>
        </div>

        <div class="product">
            <img src="images/4.png" alt="">
            <div class="product-txt">
                <h3>Elisyum</h3>
                <p>calidad premium</p>
                <p class="precio">$ 200</p>
                <a href="#" class="agregar-carrito btn-2" data-id="4">Agregar al carrito</a>
            </div>
        </div>

        <div class="product">
            <img src="images/5.png" alt="">
            <div class="product-txt">
                <h3>Elisyum</h3>
                <p>calidad premium</p>
                <p class="precio">$ 200</p>
                <a href="#" class="agregar-carrito btn-2" data-id="5">Agregar al carrito</a>
            </div>
        </div>

        <div class="product">
            <img src="images/6.png" alt="">
            <div class="producto-txt">
                <h3>Elisyum</h3>
                <p>calidad premium</p>
                <p class="precio">$ 200</p>
                <a href="#" class="agregar-carrito btn-2" data-id="6">Agregar al carrito</a>
            </div>
        </div>


    </div>
</main>

<section class="icons container">
    <div class="icon-1">
        <div class="icon-img">
            <img src="images/i1.svg" alt="">
        </div>
        <div class="icon-txt">
            <h3>Lorem ipsum sit. </h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
            
        </div>
    </div>

    <div class="icon-1">
        <div class="icon-img">
            <img src="images/i2.svg" alt="">
        </div>
        <div class="icon-txt">
            <h3>Lorem ipsum sit. </h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
            
        </div>
    </div>

    <div class="icon-1">
        <div class="icon-img">
            <img src="images/i3.svg" alt="">
        </div>
        <div class="icon-txt">
            <h3>Lorem ipsum dolor sit. </h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
            
        </div>
    </div>
</section>

<section class="blog container">
    <div class="blog-1">
        <img src="images/b1.jpg" alt="">
        <h3>Blog 1</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
             Ad magnam, dolore atque eum ipsam corrupti eveniet quod ducimus autem tempora vero id.
              Modi sit nihil voluptatem delectus dolorum rerum sint.</p>

    </div>

    <div class="blog-1">
        <img src="images/b2.jpg" alt="">
        <h3>Blog 2</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
             Ad magnam, dolore atque eum ipsam corrupti eveniet quod ducimus autem tempora vero id.
              Modi sit nihil voluptatem delectus dolorum rerum sint.</p>

    </div>

    <div class="blog-1">
        <img src="images/b3.jpg" alt="">
        <h3>Blog 2</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
             Ad magnam, dolore atque eum ipsam corrupti eveniet quod ducimus autem tempora vero id.
              Modi sit nihil voluptatem delectus dolorum rerum sint.</p>

    </div>
</section>

<footer class="footer">
    <div class="footer-content container">
        <div class="link">
            <h3>Lorem </h3>
            <ul>
                <li>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                </li>
            </ul>
        </div>

        <div class="link">
            <h3>Lorem </h3>
            <ul>
                <li>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                </li>
            </ul>
        </div>

        <div class="link">
            <h3>Lorem </h3>
            <ul>
                <li>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                </li>
            </ul>
        </div>

        <div class="link">
            <h3>Lorem </h3>
            <ul>
                <li>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                    <a href="#"> lorem</a>
                </li>
            </ul>
        </div>
    </div>
</footer>
    <script src="scrip.js"></script>
</body>
</html>