diff --git a/challenge4/index.html b/challenge4/index.html new file mode 100644 index 0000000..02e54a3 --- /dev/null +++ b/challenge4/index.html @@ -0,0 +1,79 @@ + + + + + + Responsive Layouts Challenge + + + + + + +
+
+

Responsive layouts don't have to be a struggle

+

+ 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. +

+ +
+
+
+
+

Good

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae + pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis + provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem + aliquam quas officiis alias iste? +

+
+ +
+

Better

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae + pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis + provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem + aliquam quas officiis alias iste? +

+
+
+

Best

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae + pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis + provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem + aliquam quas officiis alias iste? +

+
+
+
+
+

Better

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae + pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis + provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem + aliquam quas officiis alias iste? +

+
+
+

Best

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae + pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis + provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem + aliquam quas officiis alias iste? +

+
+
+ + diff --git a/challenge4/style.css b/challenge4/style.css new file mode 100644 index 0000000..6109e24 --- /dev/null +++ b/challenge4/style.css @@ -0,0 +1,136 @@ +/* 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; + font-family: "Roboto", serif; +} + +/* 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; + padding: 8em; +} + +.container-color { + background: #23424a; + color: white; +} + +.hero { + color: white; +} + +.hero h1 { + font-family: "Roboto", serif; + font-weight: 900; + font-style: normal; + font-size: 48px; + width: 55%; +} + +.hero p { + width: 55%; + margin-top: 2em; + font-family: "Roboto", serif; + font-weight: 400; + font-style: normal; + font-size: 21px; +} + +.hero button { + font-weight: 500; + font-size: 21px; + margin-top: 2em; + padding: 0.75em 2em; + border: none; + border-radius: 2em; + background: #38cfd9; +} + +.cards { + padding: 5em; + display: flex; + gap: 1em; +} + +.card { + text-align: center; + padding: 1em; +} + +.card h2 { + margin: 1em; + font-size: 36px; + color: #87629a; +} + +.footer { + background: #136c72; + color: white; +} +.footer > .card > h2 { + color: white; +}