diff --git a/challenge5/img/hero-img.jpg b/challenge5/img/hero-img.jpg new file mode 100644 index 0000000..7e5d3d7 Binary files /dev/null and b/challenge5/img/hero-img.jpg differ diff --git a/challenge5/index.html b/challenge5/index.html new file mode 100644 index 0000000..177733e --- /dev/null +++ b/challenge5/index.html @@ -0,0 +1,79 @@ + + + + + + Conquering Rsponsive Layouts + + + + +
+
+
+

Responsive layouts don’t have to be a struggle

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam. +

+ I want to learn +
+
+ +
+
+
+
+
+

+ Quality designs made custom, on demand, just for you +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempora + ipsa consequatur nisi nemo mollitia dignissimos, commodi maiores + aperiam beatae sed esse? Tempora, voluptas magni! Repudiandae sapiente + maxime minima dignissimos. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempora + ipsa consequatur nisi nemo mollitia dignissimos, commodi maiores + aperiam beatae sed esse? Tempora, voluptas magni! Repudiandae sapiente + maxime minima dignissimos. +

+
+
+
+

Quality

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo + enim nemo voluptatibus quas, ab cumque iste! Officia dolores fugit + vel! Doloribus labore facilis ea omnis id rerum amet repellendus. +

+
+ +
+

Quirky

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo + enim nemo voluptatibus quas, ab cumque iste! Officia dolores fugit + vel! Doloribus labore facilis ea omnis id rerum amet repellendus. +

+
+ +
+

Quick

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo + enim nemo voluptatibus quas, ab cumque iste! Officia dolores fugit + vel! Doloribus labore facilis ea omnis id rerum amet repellendus. +

+
+
+
+ + + diff --git a/challenge5/style.css b/challenge5/style.css new file mode 100644 index 0000000..6050da4 --- /dev/null +++ b/challenge5/style.css @@ -0,0 +1,123 @@ +/* +////// For this challenge /////// + +- All text is in the text.md file + +// Requirements +1. Refer to the design specs for the + overall layout +2. The image should line up with + the sidebar in the section + below + +*/ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Roboto", sans-serif; + font-size: 1.3rem; +} + +img { + max-width: 100%; +} + +h1 { + font-size: 3rem; + margin-top: 0; +} + +.container { + width: 80%; + max-width: 1100px; + margin: 0 auto; +} + +.row { + /* display: flex => flex container */ + display: flex; + justify-content: space-between; + + /* can't use yet */ + /* gap: 100px; */ +} + +.col { + /* these are now flex items */ + width: 100%; +} + +.col + .col { + margin-left: 30px; +} + +.hero { + padding: 100px 0; + background-color: #23424a; + color: #fff; +} + +.hero__text { + width: 62%; +} + +.hero__img { + width: 32%; + align-self: flex-start; +} + +.hero p { + margin-bottom: 3em; +} + +.btn { + display: inline-block; + text-decoration: none; + text-transform: uppercase; + color: #23424a; + font-weight: 900; + background-color: #38cfd9; + padding: 0.75em 2em; + border-radius: 100px; +} + +.btn:hover, +.btn:focus { + opacity: 0.75; +} + +.content.container.row { + margin-top: 2em; +} + +.content_text { + padding: 1em; +} + +.content__subheading { + color: #136c72; +} + +.container.cards { + margin-left: 1em; + background: #136c72; + padding: 1em; + text-align: center; +} + +.card { + color: white; +} + +@media only screen and (max-width: 550px) { + .content.container.row { + flex-wrap: wrap; + } +} + diff --git a/challenge5/text.md b/challenge5/text.md new file mode 100644 index 0000000..098e341 --- /dev/null +++ b/challenge5/text.md @@ -0,0 +1,14 @@ +## Quality designs made custom, on demand, just for you + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. + +## Cheap +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. + +## Quick +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. + +## Quality +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.