mirror of
https://github.com/gabehf/CostInCoffee.git
synced 2026-03-17 19:26:28 -07:00
57 lines
No EOL
1.9 KiB
HTML
57 lines
No EOL
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;1,300&family=Orelega+One&display=swap');
|
|
</style>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cost in Coffee</title>
|
|
<link rel="stylesheet" href="index.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Cost in Coffee</h1>
|
|
<h2>See the true cost of your subscriptions in terms of cups of coffee a day.</h2>
|
|
</div>
|
|
<div class="result">
|
|
<p>Your subscriptions are equivalent to</p>
|
|
<div id="coffee-count">5.21</div>
|
|
<p>cups of coffee a day.</p>
|
|
<p>That's <span class="cost-display">$11.54</span> of coffee.</p>
|
|
</div>
|
|
<div class="subscriptions">
|
|
<div class="subscription-header">
|
|
<p>Your Subscriptions</p>
|
|
<button type="button">Add</button>
|
|
</div>
|
|
<div class="sub-item-container">
|
|
<div class="sub-item">
|
|
<p>LinkedIn</p>
|
|
<p>$40.00</p>
|
|
</div>
|
|
</div>
|
|
<div class="sub-item-container">
|
|
<div class="sub-item">
|
|
<p>Youtube Premium</p>
|
|
<p>$12.00</p>
|
|
</div>
|
|
</div>
|
|
<div class="sub-item-container">
|
|
<div class="sub-item">
|
|
<p>Netflix</p>
|
|
<p>$15.00</p>
|
|
</div>
|
|
</div>
|
|
<div class="sub-item-container">
|
|
<div class="sub-item">
|
|
<p>Crunchyroll</p>
|
|
<p>$10.00</p>
|
|
</div>
|
|
</div>
|
|
<!-- <p>Start adding subscriptions and see the costs rise.</p> -->
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |