diff --git a/src/BandForm.js b/src/BandForm.js
index 2c6528c..6f407c5 100644
--- a/src/BandForm.js
+++ b/src/BandForm.js
@@ -1,12 +1,29 @@
+function costToReadable(cost) {
+ const centsInADollar = 100;
+ return cost / centsInADollar;
+}
+
function BandForm({ band }) {
return (
-
- {band.ticketTypes.map((ticket) => (
-
- {ticket.name} - {ticket.description}
-
+
+
);
}
diff --git a/src/index.css b/src/index.css
index 3500437..83b9a12 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,35 @@ html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: var(--spacing-lg);
+ font-size: var(--font-base);
+}
+
+hr {
+ border-color: var(--color-text);
+ border-width: 1px;
+ width: 100%;
+}
+
+h1, h2 {
+ color: var(--color-text-darker);
+ font-weight: bold;
+}
+
+h1 {
+ font-size: var(--font-xl);
+}
+
+h2 {
+ font-size: var(--font-lg);
+}
+
+h3 {
+ font-size: var(--font-lg);
+ color: var(--color-text-dark);
+}
+
+h4 {
+ font-size: var(--font-lg);
}
.wrapper {
@@ -37,4 +66,22 @@ html {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
+
+ .ticketWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-lg);
+ }
+
+ .ticket {
+ display: flex;
+ flex-direction: row;
+ gap: var(--spacing-lg);
+ }
+
+ .ticketDetails {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ }
}
diff --git a/src/variables.css b/src/variables.css
index 4753626..9e632f2 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -6,4 +6,8 @@
--color-text-dark: #626262;
--color-text-darker: #3d4753;
--color-section: #f7f8fa;
+
+ --font-base: 16px;
+ --font-lg: 1.75rem;
+ --font-xl: 2.5rem;
}