diff --git a/11-single-price-grid-component/index.html b/11-single-price-grid-component/index.html
deleted file mode 100644
index d166d16..0000000
--- a/11-single-price-grid-component/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-
-
-
-
-
-
- Frontend Mentor | Single Price Grid Component
-
-
-
-
-
- Join our community
-
- 30-day, hassle-free money back guarantee
-
- Gain access to our full library of tutorials along with expert code reviews.
- Perfect for any developers who are serious about honing their skills.
-
- Monthly Subscription
-
- $29 per month
-
- Full access for less than $1 a day
-
- Sign Up
-
- Why Us
-
- Tutorials by industry experts
- Peer & expert code review
- Coding exercises
- Access to our GitHub repos
- Community forum
- Flashcard decks
- New videos every week
-
-
-
-
\ No newline at end of file
diff --git a/11-single-price-grid-component/src/input.css b/11-single-price-grid-component/src/input.css
index b5c61c9..1c74a55 100644
--- a/11-single-price-grid-component/src/input.css
+++ b/11-single-price-grid-component/src/input.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+.attribution {
+ font-size: 11px;
+ text-align: center;
+}
+
+.attribution a {
+ color: hsl(228, 45% 44%);
+}
diff --git a/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala b/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala
index 959fed0..89858d7 100644
--- a/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala
+++ b/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala
@@ -4,25 +4,67 @@ import scalatags.Text.all._
import scalatags.Text.tags2
object Page {
- val markdown = doctype("html")(
+ lazy val markdown = doctype("html")(
html(
lang := "en",
head(
meta(charset := "UTF-8"),
meta(
name := "viewport",
- content := "width=device-width, initial-scale=1.0",
+ content := "width=device-width, initial-scale=1.0"
),
tags2.title("Frontend Mentor | Single Price Grid Component"),
- link(rel := "icon", `type` := "image/png", href := "/public/images/favicon-32x32.png" ),
+ link(
+ rel := "icon",
+ `type` := "image/png",
+ href := "/public/images/favicon-32x32.png"
+ ),
link(rel := "stylesheet", href := "/dist/output.css")
),
body(
cls := "bg-blue-100",
- h1(
- cls := "text-3xl",
- "Welcome to the future")
+ h1(cls := "text-3xl", "Welcome to the future"),
+ """
+ Join our community
+
+ 30-day, hassle-free money back guarantee
+
+ Gain access to our full library of tutorials along with expert code reviews.
+ Perfect for any developers who are serious about honing their skills.
+
+ Monthly Subscription
+
+ $29 per month
+
+ Full access for less than $1 a day
+
+ Sign Up
+
+ Why Us
+
+ Tutorials by industry experts
+ Peer & expert code review
+ Coding exercises
+ Access to our GitHub repos
+ Community forum
+ Flashcard decks
+ New videos every week
+
+""",
+ footerMarkup
)
)
)
+
+ lazy val footerMarkup = footer(
+ p(
+ cls := "attribution",
+ "Challenge by ",
+ a(
+ href := "https://www.frontendmentor.io?ref=challenge",
+ target := "_blank",
+ "Frontend Mentor. "
+ ),
+ "Coded by ", a(href := "#", "Your Name Here"))
+ )
}