From 47367bf50963e63392cf7da50f16150739383b30 Mon Sep 17 00:00:00 2001 From: Joshua Killen <45966243+joshua-killen@users.noreply.github.com> Date: Thu, 2 Apr 2020 13:49:13 +0100 Subject: [PATCH] added div elements for interactive osi model --- about/About.html | 5 + main.css | 16 +- networking/osi_model/osi_model.html | 51 +++++- .../osi_model/osi_model_assets/osi_model.css | 155 ++++++++++++++++++ .../osi_model/osi_model_assets/osi_model.js | 0 5 files changed, 224 insertions(+), 3 deletions(-) create mode 100644 networking/osi_model/osi_model_assets/osi_model.css create mode 100644 networking/osi_model/osi_model_assets/osi_model.js diff --git a/about/About.html b/about/About.html index d80d9e1..7dbb52c 100644 --- a/about/About.html +++ b/about/About.html @@ -66,5 +66,10 @@

Me

+ +
+ About the Website
+ Contact Us +
\ No newline at end of file diff --git a/main.css b/main.css index 9f2fa9c..231e9a6 100644 --- a/main.css +++ b/main.css @@ -26,6 +26,20 @@ p { font-size: 18px; } -.uniLogo { +.footer { + background-color: #0d0d0d; + padding-top: 25px; + padding-bottom: 100px; + text-align: center; +} + +.footer a { + color: white; + text-decoration: none; + text-align: center; + + + + } \ No newline at end of file diff --git a/networking/osi_model/osi_model.html b/networking/osi_model/osi_model.html index 7d4d920..61df3c0 100644 --- a/networking/osi_model/osi_model.html +++ b/networking/osi_model/osi_model.html @@ -13,7 +13,7 @@ - + Networking-OSI Model: Z14IT-Internet Fundamentals JKLearns @@ -50,9 +50,56 @@ About + -

Internet Fundamentals

+

OSI Model

+
+
Layer 7
v
+
+

+
+

+
+
Layer 6
v
+
+

+
+

+
+
Layer 5
v
+
+

+
+

+
+
Layer 4
v
+
+

+
+

+
+
Layer 3
v
+
+

+
+

+
+
Layer 2
v
+
+

+
+

+
+
Layer 1
v
+
+

+
+

+
+ About the Website
+ Contact Us +
\ No newline at end of file diff --git a/networking/osi_model/osi_model_assets/osi_model.css b/networking/osi_model/osi_model_assets/osi_model.css new file mode 100644 index 0000000..894e38c --- /dev/null +++ b/networking/osi_model/osi_model_assets/osi_model.css @@ -0,0 +1,155 @@ +.osiDrop { + text-align: left; + overflow: hidden; +} + +.arrow { + text-align: right; +} + +.osiDrop .sevenDropBtn { + cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: #f2f2f2; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.osiDrop .sixDropBtn { + cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: #f2f2f2; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.osiDrop .fiveDropBtn { + cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: #f2f2f2; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.osiDrop .fourDropBtn { + background-color: black; + cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: #f2f2f2; + padding: 14px 16px; + font-family: inherit; + margin: 0; +} + +.osiDrop .threeDropBtn { + cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: #f2f2f2; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.osiDrop .twoDropBtn { + cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: #f2f2f2; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.osiDrop .oneDropBtn { + cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: #f2f2f2; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.7Drop-content { + display: none; + position: absolute; + background-color: #373737; + color: #ddd; + min-width: 160px; + z-index: 1; +} + +.6Drop-content { + display: none; + position: absolute; + background-color: #373737; + color: #ddd; + min-width: 160px; + z-index: 1; +} + +.5Drop-content { + display: none; + position: absolute; + background-color: #373737; + color: #ddd; + min-width: 160px; + z-index: 1; +} + +.4Drop-content { + display: none; + position: absolute; + background-color: #373737; + color: #ddd; + min-width: 160px; + z-index: 1; +} + +.3Drop-content { + display: none; + position: absolute; + background-color: #373737; + color: #ddd; + min-width: 160px; + z-index: 1; +} + +.2Drop-content { + display: none; + position: absolute; + background-color: #373737; + color: #ddd; + min-width: 160px; + z-index: 1; +} + +.1Drop-content { + display: none; + position: absolute; + background-color: #373737; + color: #ddd; + min-width: 160px; + z-index: 1; +} \ No newline at end of file diff --git a/networking/osi_model/osi_model_assets/osi_model.js b/networking/osi_model/osi_model_assets/osi_model.js new file mode 100644 index 0000000..e69de29