E-Commerce-basic/carrito.html at main · eogomezf/E-Commerce-basic · GitHub

115 lines (112 loc) · 4.62 KB

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ReBorn</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<link rel="stylesheet" href="css/main.css">

</head>

<body>

<div class="wrapper">

<aside>

<header>

<h1 class="logo">ReBorn</h1>

</header>

<nav>

<ul class="menu">

<li>

<a class="boton-menu boton-volver" href="index.html">

<i class="bi bi-arrow-return-left"></i>

Seguir comprando

</a>

</li>

<li>

<a class="boton-menu boton-carrito active" href="carrito.html">

<i class="bi bi-cart-fill"></i>

Carrito

</a>

</li>

</ul>

</nav>

<footer>

<p class="textp-footer">© 2025 Be ReBorn</p>

</footer>

</aside>

<main>

<h2 class="titulo-principal">Carrito</h2>

<div class="contenedor-carrito">

<p class="carrito-vacio ">

Tu carrito esta vacío

<i class="bi bi-emoji-frown"></i>

</p>

<div class="carrito-productos disabled">

<div class="carrito-producto">

<img class="carrito-prducto-imagen" src="img/abrigos/01.jpg" alt="">

<div class="carrito-producto-titulo">

<small>Título </small>

<h3>Abrigo 01</h3>

</div>

<div class="carrito-producto-cantidad">

<small>Cantidad </small>

<p>1</p>

</div>

<div class="carrito-producto-precio">

<small>Precio </small>

<p>$1000</p>

</div>

<div class="carrito-producto-subtotal">

<small>subtotal </small>

<p>$1000</p>

</div>

<button class="carrito-producto-eliminar">

<i class="bi bi-trash-fill"></i>

</button>

</div>

<div class="carrito-producto">

<img class="carrito-prducto-imagen" src="img/abrigos/02.jpg" alt="">

<div class="carrito-producto-titulo">

<small>Título </small>

<h3>Abrigo 02</h3>

</div>

<div class="carrito-producto-cantidad">

<small>Cantidad </small>

<p>2</p>

</div>

<div class="carrito-producto-precio">

<small>Precio </small>

<p>$2000</p>

</div>

<div class="carrito-producto-subtotal">

<small>subtotal </small>

<p>$2000</p>

</div>

<button class="carrito-producto-eliminar">

<i class="bi bi-trash-fill"></i>

</button>

</div>

</div>

<div class="carrito-acciones disabled">

<div class="carrito-izquierda">

<button class="carrito-acciones-vaciar">Vaciar carrito</button>

</div>

<div class="carrito-acciones-derecha">

<div class="carrito-acciones-total">

<p>Total:</p>

<p id="total">$3000</p>

</div>

<button class="carrito-acciones-comprar">

Comprar ahora

</button>

</div>

</div>

<p class="carrito-comprado disabled">

Gracias por tu compra

<i class="bi bi-emoji-laughing"></i>

</p>

</div>

</main>

</div>

</body>

</html>