diff --git a/SPLATS/base.css b/SPLATS/base.css index 9d2afa0..c521048 100644 --- a/SPLATS/base.css +++ b/SPLATS/base.css @@ -459,4 +459,5 @@ main { } .content__inner { height: auto; - } \ No newline at end of file + } +} \ No newline at end of file diff --git a/SPLATS/main.js b/SPLATS/main.js index 20376b8..87115e1 100644 --- a/SPLATS/main.js +++ b/SPLATS/main.js @@ -273,6 +273,7 @@ + // Optional: click background to close window.addEventListener('click', function (event) { const modals = document.querySelectorAll('.modal'); diff --git a/imgs/cisco networking.png b/imgs/cisco networking.png new file mode 100644 index 0000000..bf7bb0b Binary files /dev/null and b/imgs/cisco networking.png differ diff --git a/index.html b/index.html index 5cc0a4c..9a93d8e 100644 --- a/index.html +++ b/index.html @@ -158,35 +158,69 @@

Portfolio

+

Certifications

-

The rapid handle injects into the bashful lift.

+

"We are what we repeatedly do. Excellence, then, is not an act, but a habit." — Aristotle

Oracle Badge

OCI Foundations

+
Oracle Badge -

CISCO Networking

+

CISCO Wireless Essentials

+ +
+ Oracle Badge +

CISCO Networking

+
+
diff --git a/styles.css b/styles.css index 36a636c..10b35fc 100644 --- a/styles.css +++ b/styles.css @@ -231,7 +231,7 @@ body.fade-out { margin-bottom: 10px; } -{/* Modal Styling */ +/* Modals */ .modal { display: none; position: fixed; @@ -246,8 +246,8 @@ body.fade-out { background: white; margin: 10% auto; padding: 2rem; - width: 80%; - max-width: 500px; + width: 100%; + max-width: 650px; border-radius: 10px; transform: scale(0.8); opacity: 0; @@ -261,7 +261,8 @@ body.fade-out { } .modal-content img { - width: 100%; + max-width: 100%; + height: auto; border-radius: 8px; margin-top: 1rem; } @@ -276,5 +277,34 @@ body.fade-out { .modal-content a:hover { text-decoration: underline; } -} +.overlay { + border-radius: 8px; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: auto; + height: auto; + position: absolute; + max-width: 100%; + height: auto; + margin-top: 9rem; + margin-bottom: 9rem; + opacity: 0; + transition: .5s ease; + backdrop-filter: blur(2px); +} +.container:hover .overlay { + opacity: 1; +} +.text { + font-weight: 700; + color: rgb(0, 0, 0); + font-size: 25px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); +} \ No newline at end of file