add: styles

css/font.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Karla';
+  src: url('../assets/fonts/Karla.woff2') format('woff2');
+  font-display: swap;
+  font-style: normal;
+  font-weight: 200 800;
+}

css/index.css

@@ -0,0 +1,199 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+p,
+ul {
+  margin: 0;
+}
+
+body {
+  min-block-size: 100vh;
+  min-block-size: 100dvh;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  justify-items: center;
+  align-items: center;
+  font-family: var(--ff-karla);
+  background-color: var(--light-gray);
+}
+
+:root {
+  --cyan: hsl(179, 62%, 43%);
+  --bright-yellow: hsl(71, 73%, 54%);
+  --light-gray: hsl(204, 43%, 93%);
+  --grayish-blue: hsl(217, 22%, 67%);
+  --white: hsl(0, 0%, 100%);
+  --ff-karla: 'Karla';
+  --radius: 5px;
+  --txt-shadow: 0 0 2px #000;
+}
+
+/* Layout */
+.main {
+  margin: 4em .5em;
+  inline-size: clamp(19.4375rem, 83vw, 39.65rem);
+  max-inline-size: 22rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: start;
+  border-radius: var(--radius);
+  box-shadow: 0 15px 30px hsl(212, 100%, 34%, .15);
+  overflow: hidden;
+}
+
+.footer {
+  margin-top: -4.54em;
+  padding-block: 1em;
+}
+
+.community,
+.subscription,
+.benefits {
+  padding: 1.75em 1.5em;
+  padding: 2.5em;
+}
+
+.community {
+  background-color: var(--white);
+}
+
+.subscription,
+.benefits {
+  color: var(--white);
+  text-shadow: var(--txt-shadow);
+}
+
+.subscription {
+  background-color: var(--cyan);
+}
+
+.benefits {
+  background-color: hsl(from var(--cyan) h s l/.8);
+}
+
+
+/* Typography */
+.community-title {
+  font-size: clamp(1.25rem, 1rem + 1.06vw, 1.5rem);
+  color: var(--cyan);
+  letter-spacing: -.25px;
+}
+
+.community-subtitle {
+  margin-top: 1.25em;
+  font-size: clamp(.9375rem, .5rem + 1.85vw, 1.125rem);
+  color: var(--bright-yellow);
+  letter-spacing: -.2px;
+  line-height: 1.34;
+}
+
+.community-description {
+  margin-top: .55em;
+  font-size: clamp(.875rem, .4rem + 2vw, 1rem);
+  color: var(--grayish-blue);
+  letter-spacing: -.15px;
+  line-height: 1.65;
+}
+
+.subscription-title,
+.benefits-title {
+  font-size: 1.125rem;
+  letter-spacing: -.18px;
+}
+
+.subscription-price {
+  margin-top: .51em;
+  display: flex;
+  align-items: center;
+  gap: .35em;
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.subscription-price-text {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.subscription-description {
+  margin-top: .45em;
+  font-size: 1rem;
+  letter-spacing: -.15px;
+}
+
+.attribution {
+  font-size: .8rem;
+  text-align: center;
+  color: var(--cyan);
+}
+
+.attribution-link {
+  margin-inline: .2em;
+  font-weight: 700;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  color: inherit;
+  outline-offset: 3px;
+}
+
+
+/* Button */
+.subscription-btn {
+  inline-size: 100%;
+  margin-top: 1.9em;
+  padding-block: .85em;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  text-shadow: var(--txt-shadow);
+  background-color: var(--bright-yellow);
+  color: inherit;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  box-shadow: 0 10px 10px hsl(0, 0%, 0%, .09);
+  cursor: pointer;
+  transition: transform .2s ease;
+}
+
+
+/* List */
+.benefits-list {
+  margin-top: 1.25em;
+  padding-left: 0;
+  font-size: .875rem;
+  list-style-type: none;
+  line-height: 1.43;
+}
+
+
+/* Media Query */
+@media (width >=48rem) {
+  .main {
+    max-inline-size: unset;
+    margin: unset;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .community {
+    grid-column: span 2;
+  }
+}
+
+
+/* State */
+@media (hover:hover) {
+  .subscription-btn:hover {
+    transform: scale(1.05);
+  }
+}