diff --git a/img/1.jpg b/img/1.jpg new file mode 100644 index 0000000..d8062b3 Binary files /dev/null and b/img/1.jpg differ diff --git a/img/10.jpg b/img/10.jpg new file mode 100644 index 0000000..4eb28de Binary files /dev/null and b/img/10.jpg differ diff --git a/img/11.jpg b/img/11.jpg new file mode 100644 index 0000000..d5fbdb4 Binary files /dev/null and b/img/11.jpg differ diff --git a/img/12.jpg b/img/12.jpg new file mode 100644 index 0000000..9b623cf Binary files /dev/null and b/img/12.jpg differ diff --git a/img/13.jpg b/img/13.jpg new file mode 100644 index 0000000..d8a0344 Binary files /dev/null and b/img/13.jpg differ diff --git a/img/14.jpg b/img/14.jpg new file mode 100644 index 0000000..6c3bbdd Binary files /dev/null and b/img/14.jpg differ diff --git a/img/15.jpg b/img/15.jpg new file mode 100644 index 0000000..8e68eef Binary files /dev/null and b/img/15.jpg differ diff --git a/img/16.jpg b/img/16.jpg new file mode 100644 index 0000000..e479a75 Binary files /dev/null and b/img/16.jpg differ diff --git a/img/2.jpg b/img/2.jpg new file mode 100644 index 0000000..a5963ff Binary files /dev/null and b/img/2.jpg differ diff --git a/img/3.jpg b/img/3.jpg new file mode 100644 index 0000000..df046eb Binary files /dev/null and b/img/3.jpg differ diff --git a/img/4.jpg b/img/4.jpg new file mode 100644 index 0000000..6ef8f9e Binary files /dev/null and b/img/4.jpg differ diff --git a/img/5.jpg b/img/5.jpg new file mode 100644 index 0000000..aa58236 Binary files /dev/null and b/img/5.jpg differ diff --git a/img/6.jpg b/img/6.jpg new file mode 100644 index 0000000..54ea96d Binary files /dev/null and b/img/6.jpg differ diff --git a/img/7.jpg b/img/7.jpg new file mode 100644 index 0000000..ae225df Binary files /dev/null and b/img/7.jpg differ diff --git a/img/8.jpg b/img/8.jpg new file mode 100644 index 0000000..57332a3 Binary files /dev/null and b/img/8.jpg differ diff --git a/img/9.jpg b/img/9.jpg new file mode 100644 index 0000000..041b0e6 Binary files /dev/null and b/img/9.jpg differ diff --git a/index.html b/index.html index 1a9effd..a9a5960 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,60 @@ + @@ -120,6 +173,41 @@

"Because the platypus both lays eggs and produces mi +
+
+

RESCUED PLATYPUS

+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+
+

WHAT IS A PLATYPUS?

+
+
diff --git a/style.css b/style.css index 3b99150..fcccfa5 100644 --- a/style.css +++ b/style.css @@ -346,6 +346,54 @@ a:hover { background-color: #189090; } +/* Rescued section style*/ + +.row { + display: flex; + flex-wrap: wrap; + padding: 0 4px; +} + +.column { + flex: 25%; + max-width: 25%; + padding: 0 4px; +} + +.column img { + margin-top: 8px; + vertical-align: middle; +} + +@media (min-width: 576px) and (max-width: 767.98px) { + #div-mobile { display: block; } + #div-tablet { display: none; } + #div-desktop { display: none; } + .column { + flex: 100%; + max-width: 100%; + } +} + +@media (min-width: 768px) and (max-width: 991.98px) { + #div-mobile { display: block; } + #div-tablet { display: block; } + #div-desktop { display: none; } + .column { + flex: 50%; + max-width: 100%; + } +} + +@media (min-width: 992px) { + #div-mobile { display: block; } + #div-tablet { display: block; } + #div-desktop { display: block; } + .column { + flex: 100%; + max-width: 33.33%; + } +} /* footer style */ @@ -422,4 +470,20 @@ s font-weight: 400; color: #D86000; border-color: #D86000; -} */ \ No newline at end of file +} */ + +@media (max-width: 767.98px) { + #div-mobile { display: block; } + #div-tablet { display: none; } + #div-desktop { display: none; } +} +@media (min-width: 768px) and (max-width: 991.98px) { + #div-mobile { display: block; } + #div-tablet { display: block; } + #div-desktop { display: none; } +} +@media (min-width: 992px) and (max-width: 1199.98px) { + #div-mobile { display: block; } + #div-tablet { display: block; } + #div-desktop { display: block; } +}