Skip to content

Commit 0d504c6

Browse files
OscarArranzOscarArranz
committed
Create cart page
1 parent 3a0f325 commit 0d504c6

File tree

3 files changed

+225
-7
lines changed

3 files changed

+225
-7
lines changed

‎Youdemy/web/cart.html‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="description" content="" />
7+
<meta
8+
name="author"
9+
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
10+
/>
11+
<meta name="generator" content="Hugo 0.88.1" />
12+
<title>YOUDEMMY</title>
13+
14+
<link
15+
rel="canonical"
16+
href="https://getbootstrap.com/docs/5.1/examples/carousel/"
17+
/>
18+
19+
<!-- Cart CSS -->
20+
<link rel="stylesheet" href="./css/cart.css" />
21+
22+
<!-- Bootstrap core CSS -->
23+
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
24+
25+
<!-- Custom styles for this template -->
26+
<link href="css/custom.css" rel="stylesheet" />
27+
28+
<!-- Remix Icon -->
29+
<link
30+
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
31+
rel="stylesheet"
32+
/>
33+
</head>
34+
35+
<body>
36+
<header>
37+
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
38+
<div class="container-fluid">
39+
<a class="navbar-brand" href="index.html">YOUDEMMY</a>
40+
<button
41+
class="navbar-toggler"
42+
type="button"
43+
data-bs-toggle="collapse"
44+
data-bs-target="#navbarCollapse"
45+
aria-controls="navbarCollapse"
46+
aria-expanded="false"
47+
aria-label="Toggle navigation"
48+
>
49+
<span class="navbar-toggler-icon"></span>
50+
</button>
51+
<div class="collapse navbar-collapse" id="navbarCollapse">
52+
<ul class="navbar-nav me-auto mb-2 mb-md-0">
53+
<li class="nav-item">
54+
<a class="nav-link active" aria-current="page" href="index.html"
55+
>Home</a
56+
>
57+
</li>
58+
<li class="nav-item">
59+
<a class="nav-link" href="#">Link</a>
60+
</li>
61+
<li class="nav-item">
62+
<a class="nav-link disabled">Disabled</a>
63+
</li>
64+
</ul>
65+
<form class="d-flex">
66+
<input
67+
class="form-control me-2"
68+
type="search"
69+
placeholder="Search"
70+
aria-label="Search"
71+
/>
72+
<button class="btn btn-outline-success" type="submit">
73+
Buscar
74+
</button>
75+
</form>
76+
</div>
77+
<div
78+
class="collapse navbar-collapse justify-content-end"
79+
id="navbarNavDarkDropdown"
80+
>
81+
<ul class="navbar-nav">
82+
<li class="nav-item dropdown">
83+
<a
84+
class="nav-link dropdown-toggle"
85+
href="#"
86+
id="navbarDarkDropdownMenuLink"
87+
role="button"
88+
data-bs-toggle="dropdown"
89+
aria-expanded="false"
90+
>
91+
Mi Cuenta
92+
</a>
93+
<ul
94+
class="dropdown-menu dropdown-menu-end dropdown-menu-dark"
95+
aria-labelledby="navbarDarkDropdownMenuLink"
96+
>
97+
<li class="nav-item">
98+
<a class="nav-link" href="login.html">Login</a>
99+
</li>
100+
<!--Codigo para el caso de usuario logado -->
101+
<!--<li><a class="dropdown-item" href="#">Cursos activos</a></li>
102+
<li><a class="dropdown-item" href="#">Mis datos</a></li>-->
103+
<li>
104+
<a class="dropdown-item" href="#">Something else here</a>
105+
</li>
106+
</ul>
107+
</li>
108+
</ul>
109+
</div>
110+
</div>
111+
</nav>
112+
</header>
113+
114+
<main>
115+
<div class="container">
116+
<div class="row my-5">
117+
<div class="col-8">
118+
<h1>Shopping Cart</h1>
119+
<p>0 Courses in Cart</p>
120+
<div class="mt-5">
121+
<div class="card me-5">
122+
<div class="row">
123+
<div class="col-md-2">
124+
<img
125+
src="https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
126+
alt="Curso 1"
127+
class="img-fluid rounded-start cart-img"
128+
/>
129+
</div>
130+
<div class="col-md-6">
131+
<div class="card-body">
132+
<div class="container">
133+
<div class="row">
134+
<h5 class="card-title">Curso de React</h5>
135+
<h6 class="card-subtitle mb-2 text-muted">
136+
By Proffesor Smith
137+
</h6>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
<div class="col-md-2 d-flex align-items-center">
143+
<h5>59.99$</h5>
144+
</div>
145+
<div
146+
class="col-md-2 d-flex align-items-center justify-content-end"
147+
>
148+
<button class="btn btn-danger me-3">
149+
<i class="ri-delete-bin-fill"></i>
150+
</button>
151+
</div>
152+
</div>
153+
</div>
154+
<div class="card mt-4 me-5">
155+
<div class="row">
156+
<div class="col-md-2">
157+
<img
158+
src="https://images.pexels.com/photos/574071/pexels-photo-574071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
159+
alt="Curso 1"
160+
class="img-fluid rounded-start cart-img"
161+
/>
162+
</div>
163+
<div class="col-md-6">
164+
<div class="card-body">
165+
<div class="container">
166+
<div class="row">
167+
<h5 class="card-title">Curso de Typescript</h5>
168+
<h6 class="card-subtitle mb-2 text-muted">
169+
By Proffesor Adam
170+
</h6>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
<div class="col-md-2 d-flex align-items-center">
176+
<h5>59.99$</h5>
177+
</div>
178+
<div
179+
class="col-md-2 d-flex align-items-center justify-content-end"
180+
>
181+
<button class="btn btn-danger me-3">
182+
<i class="ri-delete-bin-fill"></i>
183+
</button>
184+
</div>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
<div class="col-4">
190+
<div class="card">
191+
<div class="card-body">
192+
<h6 class="card-title text-muted">Total:</h4>
193+
<h2 class="card-subtitle">119.98$</h2>
194+
<div class="d-grid gap-2">
195+
<button class="btn btn-primary btn-lg mt-4"> Checkout</button>
196+
</div>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
</main>
203+
204+
<footer class="container">
205+
<p class="float-end"><a href="#">Top</a></p>
206+
<p>
207+
&copy; 2022 Company, Inc. &middot; <a href="#">Privacy</a> &middot;
208+
<a href="#">Terms</a>
209+
</p>
210+
</footer>
211+
212+
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
213+
</body>
214+
</html>

‎Youdemy/web/css/cart.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cart-img {
2+
height: 100% !important;
3+
object-fit: cover;
4+
}

‎Youdemy/web/css/custom.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
body {
2-
padding-top: 3rem;
3-
padding-bottom: 3rem;
2+
padding-top: 3rem;
3+
padding-bottom: 3rem;
44
}
55

6-
h5 {
6+
/* h5 {
77
min-height: 4.4rem;
8-
}
8+
} */
99

1010
span.spanmin {
11-
display: inline-block;
12-
min-height: 4.5rem;
13-
}
11+
display: inline-block;
12+
min-height: 4.5rem;
13+
}

0 commit comments

Comments
 (0)