diff --git a/css/main.css b/css/main.css index cec4a27..174a27c 100644 --- a/css/main.css +++ b/css/main.css @@ -154,6 +154,54 @@ textarea { justify-self: center; } + #section-3 { + text-align: center; + padding: 50px; + } + + #section-3-flex-container img { + width: calc(30px + 1vw); + margin: auto; + } + + .section-3-col { + margin: 10px; + } + + #section-4 { + display: grid; + grid-template-columns: 1fr 80vw 1fr; + grid-template-rows: auto auto auto; + } + + #section-4-title { + grid-row: 1/2; + grid-column: 2/3; + } + + #section-4-text { + grid-row: 3/4; + grid-column: 2/3; + text-align: center; + } + + #section-4-img { + grid-row: 2/3; + grid-column: 2/3; + justify-self: center; + } + + #section-5 { + background-image: url(/img/bg-2_sm.jpeg); + background-size: cover; + text-align: center; + padding: 50px; + } + + .jon { + margin: 15px; + } + @media (min-width: 484px) { #section-1 { background-image: url(/img/bg-1_md.jpeg); @@ -165,9 +213,13 @@ textarea { #section-1 h1 { font-size: 50pt; } + + #section-5 { + background-image: url(/img/bg-2_md.jpeg); + } } - @media (min-width: 1025px) { + @media (min-width: 950px) { #section-1 { background-image: url(/img/bg-1_lg.jpeg); min-height: 800px; @@ -199,6 +251,46 @@ textarea { #section-2-img img { max-width: 100%; } + + #section-3-flex-container { + display: flex; + justify-content: space-around; + } + + #section-4 { + grid-template-columns: max(40%) 1fr; + grid-template-rows: auto auto auto auto; + } + #section-4-title { + grid-column: 2/3; + grid-row: 2/3; + padding-left: 10vw; + padding-right: 10vw; + } + #section-4-text { + grid-column: 2/3; + grid-row: 3/4; + text-align: left; + padding-left: 10vw; + padding-right: 10vw; + } + #section-4-img { + grid-column: 1/2; + grid-row:1/5; + justify-self: left; + padding: 10px; + } + #section-4-img img { + max-width: 100%; + } + #section-5 { + background-image: url(/img/bg-2_lg.jpg); + } + #section-5-jons { + display: flex; + justify-content: space-around; + } + } @media (min-width: 1921px) { diff --git a/img/dog-2_md.jpg b/img/dog-2_md.jpg index 727b1da..8a92c90 100644 Binary files a/img/dog-2_md.jpg and b/img/dog-2_md.jpg differ diff --git a/img/dog-2_sm.jpeg b/img/dog-2_sm.jpeg index 1faba4f..5fc5727 100644 Binary files a/img/dog-2_sm.jpeg and b/img/dog-2_sm.jpeg differ diff --git a/img/placeholder-square.png b/img/placeholder-square.png new file mode 100644 index 0000000..b346d75 Binary files /dev/null and b/img/placeholder-square.png differ diff --git a/index.html b/index.html index 0b6a7cd..4444413 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,7 @@
- + Random Dog
@@ -49,56 +49,63 @@

NEW FEATURES

Some Awesome Columns

-
- -

Some awesome features

-

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

-
-
- -

Some awesome features

-

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

-
-
- -

Some awesome features

-

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

+
+
+ +

Some awesome features

+

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

+
+
+ +

Some awesome features

+

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

+
+
+ +

Some awesome features

+

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

+
-
- +
+ + + Different Random Dog +
-
+

Start ASAP

This is a pretty big project, you know ....

+
+

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.

-
-
- +
+
+

Jonathon Doe

Co-Founder

“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”

-
- +
+

Jonathon Doe

Co-Founder

“Pellentesque ornare sem lacinia quam. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”

-
- +
+

Jonathon Doe

Co-Founder

“Aenean eu leo quam. Pellentesque ornare sem lacinia qua emere wancerid elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”

-
+