diff --git a/50-css-grid-irregular-layout/images/travel1.png b/50-css-grid-irregular-layout/images/travel1.png new file mode 100644 index 0000000..6a75a11 Binary files /dev/null and b/50-css-grid-irregular-layout/images/travel1.png differ diff --git a/50-css-grid-irregular-layout/images/travel2.png b/50-css-grid-irregular-layout/images/travel2.png new file mode 100644 index 0000000..92fedbc Binary files /dev/null and b/50-css-grid-irregular-layout/images/travel2.png differ diff --git a/50-css-grid-irregular-layout/images/travel3.png b/50-css-grid-irregular-layout/images/travel3.png new file mode 100644 index 0000000..b4a8a33 Binary files /dev/null and b/50-css-grid-irregular-layout/images/travel3.png differ diff --git a/50-css-grid-irregular-layout/index.html b/50-css-grid-irregular-layout/index.html new file mode 100644 index 0000000..63262b6 --- /dev/null +++ b/50-css-grid-irregular-layout/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + CSS Irregular Layout + + +
+
+

Give yourself a chance to see the world

+

+ Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet + porta sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque + platea velit volutpat magna sem. Elit eu sit facilisi nullam neque + tincidunt sed volutpat metus. Amet sed at sed ante senectus sit + bibendum tincidunt eu. +

+ travel + travel + travel +

+ Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet + porta sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque + platea velit volutpat magna sem. Elit eu sit facilisi nullam neque + tincidunt sed volutpat metus. Amet sed at sed ante senectus sit + bibendum tincidunt eu. +

+
+
+ + diff --git a/50-css-grid-irregular-layout/style.css b/50-css-grid-irregular-layout/style.css new file mode 100644 index 0000000..9a4fedd --- /dev/null +++ b/50-css-grid-irregular-layout/style.css @@ -0,0 +1,57 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Raleway", sans-serif; +} + +main { + width: 80vw; + margin: 0 auto; +} + +p { + font-size: 16px; + padding: 24px 0; + line-height: 1.5em; +} + +header { + display: grid; + grid-template-columns: 6fr 1fr 1fr 3fr 5fr 1fr; + grid-template-rows: 40px repeat(6, auto); +} + +h1 { + grid-column: 1 / span 3; + grid-row: 2 / 3; + font-size: 65px; + font-weight: 900; + z-index: 10; +} + +.description1 { + grid-column: 1 / 2; + grid-row: 3 / 4; +} + +.image1 { + grid-column: 1 / 2; + grid-row: 4 / span 2; +} + +.image2 { + grid-column: 3 / span 3; + grid-row: 1 / span 6; +} + +.image3 { + grid-column: 5 / span 2; + grid-row: 5 / span 3; +} + +.description2 { + grid-column: 1 / span 4; + grid-row: 7 / 8; + padding-right: 48px; +}