Skip to content

Commit ab00efb

Browse files
emslmaremslmar
authored
Commit web template
Initial commit with web template
1 parent c7af7f5 commit ab00efb

21 files changed

+1438
-0
lines changed

‎Youdemy/assets/brand/bootstrap-logo-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Youdemy/assets/brand/bootstrap-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Youdemy/assets/dist/css/bootstrap.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Youdemy/assets/dist/css/bootstrap.min.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Youdemy/assets/dist/css/bootstrap.rtl.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Youdemy/assets/dist/css/bootstrap.rtl.min.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Youdemy/assets/dist/js/bootstrap.bundle.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Youdemy/assets/dist/js/bootstrap.bundle.min.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Youdemy/web/checkout.html‎

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
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 name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
8+
<meta name="generator" content="Hugo 0.88.1">
9+
<title>YOUDEMMY</title>
10+
11+
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/carousel/">
12+
13+
<!-- Bootstrap core CSS -->
14+
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
15+
16+
<!-- Custom styles for this template -->
17+
<link href="css/form-validation.css" rel="stylesheet">
18+
<link href="css/custom.css" rel="stylesheet">
19+
</head>
20+
21+
<body>
22+
23+
<header>
24+
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
25+
<div class="container-fluid">
26+
<a class="navbar-brand" href="index.html">YOUDEMMY</a>
27+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
28+
<span class="navbar-toggler-icon"></span>
29+
</button>
30+
<div class="collapse navbar-collapse" id="navbarCollapse">
31+
<ul class="navbar-nav me-auto mb-2 mb-md-0">
32+
<li class="nav-item">
33+
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
34+
</li>
35+
<li class="nav-item">
36+
<a class="nav-link" href="itemList.html">Cursos</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link disabled">Disabled</a>
40+
</li>
41+
</ul>
42+
<form class="d-flex">
43+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
44+
<button class="btn btn-outline-success" type="submit">Buscar</button>
45+
</form>
46+
</div>
47+
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDarkDropdown">
48+
<ul class="navbar-nav">
49+
<li class="nav-item dropdown">
50+
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
51+
Mi Cuenta
52+
</a>
53+
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
54+
<li class="nav-item">
55+
<a class="nav-link" href="login.html">Login</a>
56+
</li>
57+
<!--Codigo para el caso de usuario logado -->
58+
<!--<li><a class="dropdown-item" href="#">Cursos activos</a></li>
59+
<li><a class="dropdown-item" href="#">Mis datos</a></li>-->
60+
<li><a class="dropdown-item" href="#">Something else here</a></li>
61+
</ul>
62+
</li>
63+
</ul>
64+
</div>
65+
</div>
66+
</nav>
67+
</header>
68+
<div class="container">
69+
<main>
70+
<div class="py-5 text-center">
71+
<img class="d-block mx-auto mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
72+
<h2>Resumen y datos</h2>
73+
<p class="lead">A continuación se muestra un formulario de ejemplo construido completamente con los controles de formulario de Bootstrap. Cada grupo de formulario requerido tiene un estado de validación que se puede activar al intentar enviar el formulario sin completarlo.</p>
74+
</div>
75+
76+
<div class="row g-5">
77+
<div class="col-md-5 col-lg-4 order-md-last">
78+
<h4 class="d-flex justify-content-between align-items-center mb-3">
79+
<span class="text-primary">MI CARRITO</span>
80+
<span class="badge bg-primary rounded-pill">3</span>
81+
</h4>
82+
<ul class="list-group mb-3">
83+
<li class="list-group-item d-flex justify-content-between lh-sm">
84+
<div>
85+
<h6 class="my-0">Nombre de curso</h6>
86+
<small class="text-muted">Brief description</small>
87+
</div>
88+
<span class="text-muted">12€</span>
89+
</li>
90+
<li class="list-group-item d-flex justify-content-between lh-sm">
91+
<div>
92+
<h6 class="my-0">Segundo producto</h6>
93+
<small class="text-muted">Brief description</small>
94+
</div>
95+
<span class="text-muted">8€</span>
96+
</li>
97+
<li class="list-group-item d-flex justify-content-between lh-sm">
98+
<div>
99+
<h6 class="my-0">Tercer producto</h6>
100+
<small class="text-muted">Brief description</small>
101+
</div>
102+
<span class="text-muted">5€</span>
103+
</li>
104+
<li class="list-group-item d-flex justify-content-between bg-light">
105+
<div class="text-success">
106+
<h6 class="my-0">Código promocional</h6>
107+
<small>EXAMPLECODE</small>
108+
</div>
109+
<span class="text-success">−5€</span>
110+
</li>
111+
<li class="list-group-item d-flex justify-content-between">
112+
<span>Total (Euros)</span>
113+
<strong>20€</strong>
114+
</li>
115+
</ul>
116+
117+
<form class="card p-2">
118+
<div class="input-group">
119+
<input type="text" class="form-control" placeholder="Promo code">
120+
<button type="submit" class="btn btn-secondary">Canjear</button>
121+
</div>
122+
</form>
123+
</div>
124+
<div class="col-md-7 col-lg-8">
125+
<h4 class="mb-3">Dirección de facturación</h4>
126+
<form class="needs-validation" novalidate>
127+
<div class="row g-3">
128+
<div class="col-sm-6">
129+
<label for="firstName" class="form-label">Nombre</label>
130+
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
131+
<div class="invalid-feedback">
132+
Valid first name is required.
133+
</div>
134+
</div>
135+
136+
<div class="col-sm-6">
137+
<label for="lastName" class="form-label">Apellido</label>
138+
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
139+
<div class="invalid-feedback">
140+
Valid last name is required.
141+
</div>
142+
</div>
143+
144+
<div class="col-12">
145+
<label for="username" class="form-label">Nombre de usuario</label>
146+
<div class="input-group has-validation">
147+
<span class="input-group-text">@</span>
148+
<input type="text" class="form-control" id="username" placeholder="Username" required>
149+
<div class="invalid-feedback">
150+
Your username is required.
151+
</div>
152+
</div>
153+
</div>
154+
155+
<div class="col-12">
156+
<label for="email" class="form-label">email <span class="text-muted">(Opcional)</span></label>
157+
<input type="email" class="form-control" id="email" placeholder="[email protected]">
158+
<div class="invalid-feedback">
159+
Please enter a valid email address for shipping updates.
160+
</div>
161+
</div>
162+
163+
<div class="col-12">
164+
<label for="address" class="form-label">Dirección</label>
165+
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
166+
<div class="invalid-feedback">
167+
Please enter your shipping address.
168+
</div>
169+
</div>
170+
171+
<div class="col-12">
172+
<label for="address2" class="form-label">Dirección 2 <span class="text-muted">(Opcional)</span></label>
173+
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
174+
</div>
175+
176+
<div class="col-md-5">
177+
<label for="country" class="form-label">País</label>
178+
<select class="form-select" id="country" required>
179+
<option value="">Elegir...</option>
180+
<option>España</option>
181+
</select>
182+
<div class="invalid-feedback">
183+
Please select a valid country.
184+
</div>
185+
</div>
186+
187+
<div class="col-md-4">
188+
<label for="state" class="form-label">Región</label>
189+
<select class="form-select" id="state" required>
190+
<option value="">Elegir...</option>
191+
<option>Madrid</option>
192+
</select>
193+
<div class="invalid-feedback">
194+
Please provide a valid state.
195+
</div>
196+
</div>
197+
198+
<div class="col-md-3">
199+
<label for="zip" class="form-label">Código postal</label>
200+
<input type="text" class="form-control" id="zip" placeholder="" required>
201+
<div class="invalid-feedback">
202+
Zip code required.
203+
</div>
204+
</div>
205+
</div>
206+
207+
<hr class="my-4">
208+
209+
<div class="form-check">
210+
<input type="checkbox" class="form-check-input" id="same-address">
211+
<label class="form-check-label" for="same-address">Dirección de envio es igual a la de facturación</label>
212+
</div>
213+
214+
<div class="form-check">
215+
<input type="checkbox" class="form-check-input" id="save-info">
216+
<label class="form-check-label" for="save-info">Guardar datos para próxima compra</label>
217+
</div>
218+
219+
<hr class="my-4">
220+
221+
<h4 class="mb-3">Pago</h4>
222+
223+
<div class="my-3">
224+
<div class="form-check">
225+
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
226+
<label class="form-check-label" for="credit">Tarjeta de crédito</label>
227+
</div>
228+
<div class="form-check">
229+
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
230+
<label class="form-check-label" for="debit">Tarjeta de débito</label>
231+
</div>
232+
<div class="form-check">
233+
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
234+
<label class="form-check-label" for="paypal">PayPal</label>
235+
</div>
236+
</div>
237+
238+
<div class="row gy-3">
239+
<div class="col-md-6">
240+
<label for="cc-name" class="form-label">Nombre en tarjeta</label>
241+
<input type="text" class="form-control" id="cc-name" placeholder="" required>
242+
<small class="text-muted">Full name as displayed on card</small>
243+
<div class="invalid-feedback">
244+
Name on card is required
245+
</div>
246+
</div>
247+
248+
<div class="col-md-6">
249+
<label for="cc-number" class="form-label">Número de tarjeta</label>
250+
<input type="text" class="form-control" id="cc-number" placeholder="" required>
251+
<div class="invalid-feedback">
252+
Credit card number is required
253+
</div>
254+
</div>
255+
256+
<div class="col-md-3">
257+
<label for="cc-expiration" class="form-label">Caducidad</label>
258+
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
259+
<div class="invalid-feedback">
260+
Expiration date required
261+
</div>
262+
</div>
263+
264+
<div class="col-md-3">
265+
<label for="cc-cvv" class="form-label">CVV</label>
266+
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
267+
<div class="invalid-feedback">
268+
Security code required
269+
</div>
270+
</div>
271+
</div>
272+
273+
<hr class="my-4">
274+
275+
<button class="w-100 btn btn-primary btn-lg" type="submit"> <a href="success.html">Finalizar compra</a></button>
276+
</form>
277+
</div>
278+
</div>
279+
</div>
280+
281+
282+
<!-- FOOTER -->
283+
<footer class="container">
284+
<p class="float-end"><a href="#">Subir</a></p>
285+
<p>&copy; 2022 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
286+
</footer>
287+
</main>
288+
289+
290+
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
291+
<script src="js/form-validation.js"></script>
292+
293+
294+
</body>
295+
</html>

‎Youdemy/web/css/carousel.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* GLOBAL STYLES
2+
-------------------------------------------------- */
3+
/* Padding below the footer and lighter body text */
4+
5+
body {
6+
padding-top: 3rem;
7+
padding-bottom: 3rem;
8+
color: #5a5a5a;
9+
}
10+
11+
12+
/* CUSTOMIZE THE CAROUSEL
13+
-------------------------------------------------- */
14+
15+
/* Carousel base class */
16+
.carousel {
17+
margin-bottom: 4rem;
18+
}
19+
/* Since positioning the image, we need to help out the caption */
20+
.carousel-caption {
21+
bottom: 3rem;
22+
z-index: 10;
23+
}
24+
25+
/* Declare heights because of positioning of img element */
26+
.carousel-item {
27+
height: 32rem;
28+
}
29+
.carousel-item > img {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
min-width: 100%;
34+
height: 32rem;
35+
}
36+
37+
38+
/* MARKETING CONTENT
39+
-------------------------------------------------- */
40+
41+
/* Center align the text within the three columns below the carousel */
42+
.marketing .col-lg-4 {
43+
margin-bottom: 1.5rem;
44+
text-align: center;
45+
}
46+
.marketing h2 {
47+
font-weight: 400;
48+
}
49+
/* rtl:begin:ignore */
50+
.marketing .col-lg-4 p {
51+
margin-right: .75rem;
52+
margin-left: .75rem;
53+
}
54+
/* rtl:end:ignore */
55+
56+
57+
/* Featurettes
58+
------------------------- */
59+
60+
.featurette-divider {
61+
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
62+
}
63+
64+
/* Thin out the marketing headings */
65+
.featurette-heading {
66+
font-weight: 300;
67+
line-height: 1;
68+
/* rtl:remove */
69+
letter-spacing: -.05rem;
70+
}
71+
72+
73+
/* RESPONSIVE CSS
74+
-------------------------------------------------- */
75+
76+
@media (min-width: 40em) {
77+
/* Bump up size of carousel content */
78+
.carousel-caption p {
79+
margin-bottom: 1.25rem;
80+
font-size: 1.25rem;
81+
line-height: 1.4;
82+
}
83+
84+
.featurette-heading {
85+
font-size: 50px;
86+
}
87+
}
88+
89+
@media (min-width: 62em) {
90+
.featurette-heading {
91+
margin-top: 7rem;
92+
}
93+
}

0 commit comments

Comments
 (0)