Skip to content

Feature/add index product #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MortimerMarsyja wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feature/add index product #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
25e7d8f
creación de formulario a falta de js y css con navlinks : shop, colel…
Silvia014 Jul 23, 2026
8f3ccce
muevo todo a mi rama me equivoque
Silvia014 Jul 23, 2026
8a276c0
Muevo a mi rama estaba trabajando en main: output.css, indexformulari…
Silvia014 Jul 23, 2026
314b6b0
Delete a css file and update the commit message to reflect the change…
Silvia014 Jul 23, 2026
16d0baa
Merge pull request #1 from 4GeeksAcademy/Silvia014-formulario
Silvia014 Jul 23, 2026
52d6c88
feat: add product page to the project
MortimerMarsyja Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
9 changes: 9 additions & 0 deletions .learn/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"config": {
"editor": {
"agent": "vscode"
},
"autoPlay": true
},
"currentExercise": null
}
Binary file added Logo Onyx marca ropa.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ONYX sin fondo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ONYX_sin_fondo_en_blanco-removebg-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
373 changes: 373 additions & 0 deletions index-formulario.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,373 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ONYX | Checkout</title>

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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
</head>

<body>

<!-- ================= NAVBAR ================= -->

<header class="navbar">

<div class="container-page nav-content">

<a href="#" class="text-3xl font-semibold tracking-[0.3em]">
ONYX
</a>

<nav aria-label="Main Navigation">

<ul class="nav-links">

<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Account</a></li>

</ul>

</nav>

</div>

</header>

<!-- ================= MAIN ================= -->

<main class="container-page py-16">

<h1 class="mb-12 text-center">
Checkout
</h1>

<div class="grid-2">

<!-- ================= FORM ================= -->

<form class="card space-y-10">

<!-- PERSONAL INFORMATION -->

<section>

<h2 class="section-title">
Personal Information
</h2>

<div class="grid gap-6 md:grid-cols-2">

<div>

<label for="name">
Full Name
<span class="required">*</span>
</label>

<input
id="name"
name="name"
type="text"
placeholder="John Smith"
autocomplete="name"
required>

</div>

<div>

<label for="email">
Email
<span class="required">*</span>
</label>

<input
id="email"
name="email"
type="email"
placeholder="john@email.com"
autocomplete="email"
required>

</div>

<div class="md:col-span-2">

<label for="phone">
Phone Number
<span class="required">*</span>
</label>

<input
id="phone"
name="phone"
type="tel"
placeholder="+34 600 123 456"
autocomplete="tel"
required>

</div>

</div>

</section>

<!-- DELIVERY ADDRESS -->

<section>

<h2 class="section-title">
Delivery Address
</h2>

<div class="space-y-6">

<div>

<label for="street">
Street Address
<span class="required">*</span>
</label>

<input
id="street"
name="street"
type="text"
placeholder="123 Oxford Street"
autocomplete="street-address"
required>

</div>

<div class="grid gap-6 md:grid-cols-3">

<div>

<label for="city">
City
<span class="required">*</span>
</label>

<input
id="city"
name="city"
type="text"
placeholder="London"
autocomplete="address-level2"
required>

</div>

<div>

<label for="postcode">
Postal Code
</label>

<input
id="postcode"
name="postcode"
type="text"
placeholder="SW1A 1AA"
autocomplete="postal-code">

</div>

<div>

<label for="country">
Country
<span class="required">*</span>
</label>

<select
id="country"
name="country"
autocomplete="country"
required>

<option value="">
Select your country
</option>

<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Portugal</option>
<option>United Kingdom</option>

</select>

</div>

</div>

</div>

</section>

<!-- PAYMENT -->

<section>

<h2 class="section-title">
Card Payment
</h2>

<div class="space-y-6">

<div>

<label for="card">
Card Number
<span class="required">*</span>
</label>

<input
id="card"
name="card"
type="text"
placeholder="1234 5678 9012 3456"
autocomplete="cc-number"
required>

</div>

<div class="grid gap-6 md:grid-cols-2">

<div>

<label for="expiry">
Expiration Date
<span class="required">*</span>
</label>

<input
id="expiry"
name="expiry"
type="month"
autocomplete="cc-exp"
required>

</div>

<div>

<label for="cvv">
CVV
<span class="required">*</span>
</label>

<input
id="cvv"
name="cvv"
type="password"
placeholder="123"
maxlength="4"
autocomplete="cc-csc"
required>

</div>

</div>

<div>

<label for="holder">
Cardholder Name
<span class="required">*</span>
</label>

<input
id="holder"
name="holder"
type="text"
placeholder="John Smith"
autocomplete="cc-name"
required>

</div>

</div>

</section>

<p class="required-text">
* Required fields
</p>

<button
class="btn-primary"
type="submit">

Complete Order

</button>

</form>

<!-- ================= ORDER SUMMARY ================= -->

<aside class="summary">

<h2 class="section-title">
Order Summary
</h2>

<div class="space-y-5">

<div class="flex justify-between">
<span>Premium Necklace</span>
<span>€149</span>
</div>

<div class="flex justify-between">
<span>Bracelet</span>
<span>€70</span>
</div>

<div class="flex justify-between">
<span>Shipping</span>
<span>Free</span>
</div>

<hr class="border-gray-700">

<div class="flex justify-between text-lg font-semibold">

<span>Total</span>
<span>€219</span>

</div>

</div>

</aside>

</div>

</main>

<!-- ================= FOOTER ================= -->

<footer class="footer">

<div class="container-page footer-content">

<p>© 2026 ONYX · Luxury Brand Clothes</p>

</div>

</footer>

</body>

</html>
Loading