challenge 3 complete

2025-01-06 21:53:59 -05:00 · 2025-01-06 21:53:59 -05:00 · 55c08a75f4
commit 55c08a75f4
parent bf026f903e
3 changed files with 136 additions and 1 deletions
--- a/challenge2/style.css
+++ b/challenge2/style.css
@ -33,7 +33,7 @@ body {
 }

 .intro-content {
-  width: 50%;
+  width: 100%;
 }

 .section {
--- a/challenge3/index.html
+++ b/challenge3/index.html
@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Responsive Layouts Challenge</title>
+    <link href="style.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="container">
+      <div class="hero">
+        <h1 class="tagline">Responsive layouts don't have to be a struggle</h1>
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat
+          culpa vitae rerum laboriosam hic ipsam, distinctio blanditiis rem
+          deserunt voluptatibus non obcaecati unde explicabo quod saepe
+          voluptates magnam aut accusantium.
+        </p>
+        <button type="">I WANT TO LEARN</button>
+      </div>
+    </div>
+  </body>
+</html>
--- a/challenge3/style.css
+++ b/challenge3/style.css
@ -0,0 +1,106 @@
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+body {
+  /* 3. Add accessible line-height */
+  line-height: 1.5;
+  /* 4. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+  height: 100vh;
+  color: white;
+}
+
+/* 5. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 6. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/* 8. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/*
+  9. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}
+
+.container {
+  min-height: 55vh;
+  background: #23424a;
+  padding: 8em;
+}
+
+.hero {
+  width: 55%;
+}
+
+.hero h1 {
+  font-family: "Roboto", serif;
+  font-weight: 900;
+  font-style: normal;
+  font-size: 48px;
+}
+
+.hero p {
+  margin-top: 2em;
+  font-family: "Roboto", serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 21px;
+}
+
+.hero button {
+  font-family: "Roboto", serif;
+  font-weight: 500;
+  font-size: 21px;
+  margin-top: 2em;
+  padding: 0.75em 2em;
+  border: none;
+  border-radius: 2em;
+  background: #38cfd9;
+}