From 3754f5336669039c24df0aaa998161197ed09761 Mon Sep 17 00:00:00 2001
From: Ismael <ismael@vercel.com>
Date: Mon, 17 Oct 2022 13:24:44 -0600
Subject: [PATCH] added styles folder for assets css example (#87)

---
 .../styles/Home.module.css                    | 109 ++++++++++++++++++
 .../styles/globals.css                        |  38 ++++++
 2 files changed, 147 insertions(+)
 create mode 100644 basics/assets-metadata-css-starter/styles/Home.module.css
 create mode 100644 basics/assets-metadata-css-starter/styles/globals.css

diff --git a/basics/assets-metadata-css-starter/styles/Home.module.css b/basics/assets-metadata-css-starter/styles/Home.module.css
new file mode 100644
index 0000000..1be53ac
--- /dev/null
+++ b/basics/assets-metadata-css-starter/styles/Home.module.css
@@ -0,0 +1,109 @@
+.container {
+  min-height: 100vh;
+  padding: 1rem 0.5rem 0;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0 0 1rem;
+  line-height: 1.15;
+  font-size: 3.6rem;
+}
+
+.title {
+  text-align: center;
+}
+
+.heroImage {
+  margin-bottom: 1rem;
+}
+
+.secondaryHeading {
+  margin: 0 0 1rem;
+}
+
+.input {
+  padding: 0.5rem;
+  width: 300px;
+  margin-bottom: 1rem;
+}
+
+.countries {
+  display: grid;
+  grid-gap: 1rem;
+}
+
+.country {
+  border: 1px solid #000;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.codeSampleBlock {
+  padding: 3rem 0;
+}
+
+.codeSampleBlock p {
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+}
+
+.footer {
+  width: 100%;
+  height: 100px;
+  border-top: 1px solid #eaeaea;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo {
+  margin-left: 0.5rem;
+  max-width: 72px;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (min-width: 800px) {
+  .countries {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 1024px) {
+  .heroImage {
+    margin: 0 auto 1rem;
+    max-width: 50vw;
+  }
+
+  .secondaryHeading {
+    text-align: center;
+  }
+
+  .input {
+    margin: 0 auto 1rem;
+    display: block;
+  }
+
+  .countries {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .codeSampleBlock {
+    text-align: center;
+  }
+}
diff --git a/basics/assets-metadata-css-starter/styles/globals.css b/basics/assets-metadata-css-starter/styles/globals.css
new file mode 100644
index 0000000..95bfb35
--- /dev/null
+++ b/basics/assets-metadata-css-starter/styles/globals.css
@@ -0,0 +1,38 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+p,
+ul {
+  margin: 0;
+}
+
+ul {
+  padding: 0;
+  list-style: none;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  font-weight: bold;
+}