HTML del proyecto del carrito de compra

  • Código: HTML
  • Curso: JavaScript Moderno Guía Definitiva Construye +15 Proyectos
  • Módulo: 15
  • Proyecto: Carrito de Compras
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carrito</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>
<header id="header" class="header">
    <div class="container">
        <div class="row">
            <div class="four columns">
                <img src="img/logo.jpg" id="logo">
            </div>
            <div class="two columns u-pull-right">
                <ul>
                    <li class="submenu">
                            <img src="img/cart.png" id="img-carrito">
                            <div id="carrito">
                                    
                                    <table id="lista-carrito" class="u-full-width">
                                        <thead>
                                            <tr>
                                                <th>Imagen</th>
                                                <th>Nombre</th>
                                                <th>Precio</th>
                                                <th>Cantidad</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    <a href="#" id="vaciar-carrito" class="button u-full-width">Vaciar Carrito</a>
                            </div>
                    </li>
                </ul>
            </div>
        </div> 
    </div>
    </header>

    <div id="hero">
        <div class="container">
            <div class="row">
                    <div class="six columns">
                        <div class="contenido-hero">
                                <h2>Aprende algo nuevo</h2>
                                <p>Todos los cursos a $15</p>
                                <form action="#" id="busqueda" method="post" class="formulario">
                                    <input class="u-full-width" type="text" placeholder="¿Que te gustaría Aprender?" id="buscador">
                                    <input type="submit" id="submit-buscador" class="submit-buscador">
                                </form>
                        </div>
                    </div>
            </div> 
        </div>
    </div>
    <div class="barra">
        <div class="container">
            <div class="row">
                    <div class="four columns icono icono1">
                        <p>20,000 Cursos en línea <br>
                        Explora  los temas más recientes</p>
                    </div>
                    <div class="four columns icono icono2">
                        <p>Instructores Expertos <br>
                        Aprende con distintos estilos</p>
                    </div>
                    <div class="four columns icono icono3">
                        <p>Acceso de por vida <br>
                        Aprende a tu ritmo</p>
                    </div>
            </div>
        </div>
    </div>
    <div id="lista-cursos" class="container">
        <h1 id="encabezado" class="encabezado">Cursos En Línea</h1>
        <div class="row">
            <div class="four columns">
                <div class="card">
                    <img src="img/curso1.jpg" class="imagen-curso u-full-width">
                    <div class="info-card">
                        <h4>HTML5, CSS3, JavaScript para Principiantes</h4>
                        <p>Juan Pedro</p>
                        <img src="img/estrellas.png">
                        <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                        <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="1">Agregar Al Carrito</a>
                    </div>
                </div> <!--.card-->
            </div>
            <div class="four columns">
                    <div class="card">
                        <img src="img/curso2.jpg" class="imagen-curso u-full-width">
                        <div class="info-card">
                            <h4>Curso de Comida Vegetariana</h4>
                            <p>Juan Pedro</p>
                            <img src="img/estrellas.png">
                            <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                            <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="2">Agregar Al Carrito</a>
                        </div>
                    </div>
            </div>
            <div class="four columns">
                    <div class="card">
                        <img src="img/curso3.jpg" class="imagen-curso u-full-width">
                        <div class="info-card">
                            <h4>Guitarra para Principiantes</h4>
                            <p>Juan Pedro</p>
                            <img src="img/estrellas.png">
                            <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                            <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="3">Agregar Al Carrito</a>
                        </div>
                    </div> <!--.card-->
            </div>
        </div> <!--.row-->
        <div class="row">
            <div class="four columns">
                <div class="card">
                    <img src="img/curso4.jpg" class="imagen-curso u-full-width">
                    <div class="info-card">
                        <h4>Huerto en tu casa</h4>
                        <p>Juan Pedro</p>
                        <img src="img/estrellas.png">
                        <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                        <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="4">Agregar Al Carrito</a>
                    </div>
                </div> <!--.card-->
            </div>
            <div class="four columns">
                    <div class="card">
                        <img src="img/curso5.jpg" class="imagen-curso u-full-width">
                        <div class="info-card">
                            <h4>Decoración con productos de tu hogar</h4>
                            <p>Juan Pedro</p>
                            <img src="img/estrellas.png">
                            <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                            <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="5">Agregar Al Carrito</a>
                        </div>
                    </div> <!--.card-->
            </div>
            <div class="four columns">
                    <div class="card">
                        <img src="img/curso1.jpg" class="imagen-curso u-full-width">
                        <div class="info-card">
                            <h4>Diseño Web para Principiantes</h4>
                            <p>Juan Pedro</p>
                            <img src="img/estrellas.png">
                            <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                            <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="6">Agregar Al Carrito</a>
                        </div>
                    </div> <!--.card-->
            </div>
        </div> <!--.row-->
        <div class="row">
            <div class="four columns">
                <div class="card">
                    <img src="img/curso2.jpg" class="imagen-curso u-full-width">
                    <div class="info-card">
                        <h4>Comida Mexicana para principiantes</h4>
                        <p>Juan Pedro</p>
                        <img src="img/estrellas.png">
                        <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                        <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="7">Agregar Al Carrito</a>
                    </div>
                </div> <!--.card-->
            </div>
            <div class="four columns">
                    <div class="card">
                        <img src="img/curso3.jpg" class="imagen-curso u-full-width">
                        <div class="info-card">
                            <h4>Estudio Musical en tu casa</h4>
                            <p>Juan Pedro</p>
                            <img src="img/estrellas.png">
                            <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                            <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="8">Agregar Al Carrito</a>
                        </div>
                    </div> <!--.card-->
            </div>
            <div class="four columns">
                    <div class="card">
                        <img src="img/curso4.jpg" class="imagen-curso u-full-width">
                        <div class="info-card">
                            <h4>Cosecha tus propias frutas y verduras</h4>
                            <p>Juan Pedro</p>
                            <img src="img/estrellas.png">
                            <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                            <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="9">Agregar Al Carrito</a>
                        </div>
                    </div> <!--.card-->
            </div>
        </div> <!--.row-->
        <div class="row">
                <div class="four columns">
                    <div class="card">
                        <img src="img/curso5.jpg" class="imagen-curso u-full-width">
                        <div class="info-card">
                            <h4>Prepara galletas caseras</h4>
                            <p>Juan Pedro</p>
                            <img src="img/estrellas.png">
                            <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                            <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="10">Agregar Al Carrito</a>
                        </div>
                    </div> <!--.card-->
                </div>
                <div class="four columns">
                        <div class="card">
                            <img src="img/curso1.jpg" class="imagen-curso u-full-width">
                            <div class="info-card">
                                <h4>JavaScript Moderno con ES6</h4>
                                <p>Juan Pedro</p>
                                <img src="img/estrellas.png">
                                <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                                <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="11">Agregar Al Carrito</a>
                            </div>
                        </div> <!--.card-->
                </div>
                <div class="four columns">
                        <div class="card">
                            <img src="img/curso2.jpg" class="imagen-curso u-full-width">
                            <div class="info-card">
                                <h4>100 Recetas de Comida Natural</h4>
                                <p>Juan Pedro</p>
                                <img src="img/estrellas.png">
                                <p class="precio">$200  <span class="u-pull-right ">$15</span></p>
                                <a href="#" class="u-full-width button-primary button input agregar-carrito" data-id="12">Agregar Al Carrito</a>
                            </div>
                        </div> <!--.card-->
                </div>
            </div> <!--.row-->
    </div>  
    <footer id="footer" class="footer">
        <div class="container">
            <div class="row">
                    <div class="four columns">
                            <nav id="principal" class="menu">
                                <a class="enlace" href="#">Para tu Negocio</a>
                                <a class="enlace" href="#">Conviertete en Instructor</a>
                                <a class="enlace" href="#">Aplicaciones Móviles</a>
                                <a class="enlace" href="#">Soporte</a>
                                <a class="enlace" href="#">Temas</a>
                            </nav>
                    </div>
                    <div class="four columns">
                            <nav id="secundaria" class="menu">
                                <a class="enlace" href="#">¿Quienes Somos?</a>
                                <a class="enlace" href="#">Empleo</a>
                                <a class="enlace" href="#">Blog</a>
                            </nav>
                    </div>
            </div>
        </div>
    </footer>
    <script src="js/app.js"></script>
</body>
</html>