Skip to content

Anais #22

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
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Anais #22

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
facf2ef
fresh take
AlpOnCaffeine Sep 28, 2025
c399264
no idea
AlpOnCaffeine Sep 28, 2025
0c8e976
update html for the cart
AlpOnCaffeine Sep 28, 2025
15a8b53
background added to content.
AlpOnCaffeine Sep 28, 2025
583ef54
more html and css
AlpOnCaffeine Sep 28, 2025
17f1548
flexbox
AlpOnCaffeine Sep 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .vs/VSWorkspaceState.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"ExpandedNodes": [
""
],
"SelectedNode": "\\E:\\Website Zero Proof",
"PreviewInSolutionExplorer": false
}
Binary file added .vs/Website Zero Proof/v17/.wsuo
View file
Open in desktop
Binary file not shown.
23 changes: 23 additions & 0 deletions .vs/Website Zero Proof/v17/DocumentLayout.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"Version": 1,
"WorkspaceRootPath": "E:\\Website Zero Proof\\",
"Documents": [],
"DocumentGroupContainers": [
{
"Orientation": 0,
"VerticalTabListWidth": 256,
"DocumentGroups": [
{
"DockedWidth": 200,
"SelectedChildIndex": -1,
"Children": [
{
"$type": "Bookmark",
"Name": "ST:0:0:{cce594b6-0c39-4442-ba28-10c64ac7e89f}"
}
]
}
]
}
]
}
Binary file added Content/background.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.
204 changes: 133 additions & 71 deletions cart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,14 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- Stylesheet Link -->
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="cartStyles.css"/>

<!-- Fonts -->
<!-- Fonts: Metamorphous (headings) + Cinzel (body) -->
<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=Cinzel:wght@400;600;700&family=Metamorphous&display=swap" rel="stylesheet">

</head>

<body>
Expand Down Expand Up @@ -90,75 +97,130 @@
</div>
</header>

<!-- Main content -->
<main id="cart-page-main">
<div id="your-cart">
<h1 id="cart-heading">Your Cart</h1>
<div class="cart-item">
<div class="cart-left">
<img alt="" class="cart-img" src="https://images.unsplash.com/photo-1701541065297-06a8f455c721?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
<div class="cart-details">
<h3>Smooth Velvet</h3>
<p>Pack of 4</p>
<label for="itemQty"></label>
<input id="itemQty" type="number" />
</div>
</div>
<div class="cart-right">
<i class="fa-solid fa-trash"></i>
<p>$$$</p>
</div>
</div>
<hr />
<div class="cart-item">
<div class="cart-left">
<img alt="" src="https://images.unsplash.com/photo-1701541065297-06a8f455c721?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="cart-img"/>
<div class="cart-details">
<h3>Smooth Velvet</h3>
<p>Pack of 4</p>
<label for="itemQty2"></label>
<input id="itemQty2" type="number" />
</div>
</div>
<div class="cart-right">
<i class="fa-solid fa-trash"></i>
<p>$$$</p>
</div>
</div>
<hr />
<div class="cart-item">
<div class="cart-left">
<img alt="" class="cart-img" src="https://images.unsplash.com/photo-1701541065297-06a8f455c721?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
<div class="cart-details">
<h3>Smooth Velvet</h3>
<p>Pack of 4</p>
<label for="itemQty3"></label>
<input id="itemQty3" type="number" />
</div>
</div>
<div class="cart-right">
<i class="fa-solid fa-trash"></i>
<p>$$$</p>
</div>
</div>
</div>
</section>
<section id="order-summary">
<h2 id="cart-heading">Order Summary</h2>
<div id="summary-container">
<section id="detail">
<p>Subtotal:</p>
<p>Taxes & Fees:</p>
<p>Delivery Fee:</p>
</section>

<hr />
<section id="grand-total">
<h4>Total:</h4>
<button>Checkout</button>
</section>
</div>
</main>
<!-- Main content -->
<main id="cart-page-main" class="deck">
<div class="cart-inner">
<!-- Cart List -->
<section id="your-cart">
<h1 class="deck-title">🛒 Your Deck <span>(3)</span></h1>

<!-- Item 1 -->
<div class="cart-item">
<img src="Content/ContentTeam_Mocktails_v1-15.png" class="cart-img" alt="The Sun" />
<div class="cart-info">
<h3>The Sun</h3>
<p>Bottle size</p>
<div class="qty">
<button class="qty-btn">−</button>
<input type="number" class="qty-input" value="1" min="1" />
<button class="qty-btn">+</button>
</div>
</div>
<div class="cart-meta">
<button class="trash" aria-label="Remove The Sun">
<i class="fa-solid fa-trash"></i>
</button>
<p>$</p>
</div>
</div>

<!-- Item 2 -->
<div class="cart-item">
<img src="Content/ContentTeam_Mocktail_V1-1.jpg" class="cart-img" alt="The Siren" />
<div class="cart-info">
<h3>The Siren</h3>
<p>Bottle size</p>
<div class="qty">
<button class="qty-btn">−</button>
<input type="number" class="qty-input" value="2" min="1" />
<button class="qty-btn">+</button>
</div>
</div>
<div class="cart-meta">
<button class="trash" aria-label="Remove The Siren">
<i class="fa-solid fa-trash"></i>
</button>
<p>$</p>
</div>
</div>

<!-- Item 3 -->
<div class="cart-item">
<img src="Content/ContentTeam_Mocktail_V1-7.jpg" class="cart-img" alt="The Fool" />
<div class="cart-info">
<h3>The Fool</h3>
<p>Bottle size</p>
<div class="qty">
<button class="qty-btn">−</button>
<input type="number" class="qty-input" value="1" min="1" />
<button class="qty-btn">+</button>
</div>
</div>
<div class="cart-meta">
<button class="trash" aria-label="Remove The Sun">
<i class="fa-solid fa-trash"></i>
</button>
<p>$</p>
</div>
</div>

<!-- Item 4 -->
<div class="cart-item">
<img src="Content/ContentTeam_Mocktail_V1-2.jpg" class="cart-img" alt="The Magician" />
<div class="cart-info">
<h3>The Magician</h3>
<p>Bottle size</p>
<div class="qty">
<button class="qty-btn">−</button>
<input type="number" class="qty-input" value="1" min="1" />
<button class="qty-btn">+</button>
</div>
</div>
<div class="cart-meta">
<button class="trash" aria-label="Remove The Sun">
<i class="fa-solid fa-trash"></i>
</button>
<p>$</p>
</div>
</div>

<!-- Item 5 -->
<div class="cart-item">
<img src="Content/ContentTeam_Mocktail_V1-9.jpg" class="cart-img" alt="The Oracle" />
<div class="cart-info">
<h3>The Oracle</h3>
<p>Bottle size</p>
<div class="qty">
<button class="qty-btn">−</button>
<input type="number" class="qty-input" value="1" min="1" />
<button class="qty-btn">+</button>
</div>
</div>
<div class="cart-meta">
<button class="trash" aria-label="Remove The Sun">
<i class="fa-solid fa-trash"></i>
</button>
<p>$</p>
</div>
</div>

</section>

<!-- Order Summary -->
<aside id="order-summary">
<h2 class="deck-title">Order Summary</h2>
<div class="summary-row"><span>Subtotal</span><span>$</span></div>
<div class="summary-row"><span>Taxes &amp; Fees</span><span>$</span></div>
<div class="summary-row"><span>Delivery Fee</span><span>$</span></div>
<hr />
<div class="total-row">
<label>Total</label>
<input type="text" value="$" readonly class="total-input" />
</div>
<button class="checkout-btn">Checkout</button>
</aside>
</div>
</main>

<!-- Footer -->
<footer class="site-footer">
Expand Down Expand Up @@ -252,4 +314,4 @@ <h2>Social Media Links</h2>
<script src="https://kit.fontawesome.com/982a1daf20.js" crossorigin="anonymous"></script>
<script src="script.js" defer></script>
</body>
</html>
</html>
Loading