r0r-5chach
/
Z14IT-CW2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added div elements for interactive osi model

This commit is contained in:
Joshua Killen 2020-04-02 13:49:13 +01:00
parent 1f6f4d2dce
commit 47367bf509
5 changed files with 224 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
about/About.html
View File

@ -66,5 +66,10 @@
<div class="aboutMe">
<h2>Me</h2>
</div>
<div class="footer">
<a class="about" href="../about.html">About the Website</a><br>
<a class="contact" href="../../contact/contact.html">Contact Us</a>
</div>
</body>
</html>

16
main.css
View File

@ -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;
}

51
networking/osi_model/osi_model.html
View File

@ -13,7 +13,7 @@
<link rel="stylesheet" href="../../sitewide_assets/navbar/navbar.css" type="text/css">
<script type="text/javascript" src="../../sitewide_assets/navbar/navbar.js"></script>
<base href="dchp_assets/" target ="_self">
<base href="osi_model_assets/" target ="_self">
<title>Networking-OSI Model: Z14IT-Internet Fundamentals</title>
<img src="../../../sitewide_assets/logo.gif" alt="JKLearns">
@ -50,9 +50,56 @@
<a href="../../../about/about.html">About</a>
</div>
<link rel="stylesheet" href="osi_model.css" type="text/css">
</head>
<body>
<h1>Internet Fundamentals</h1>
<h1>OSI Model</h1>
<div class="osiDrop">
<div class="sevenDropBtn" onclick="7Drop()">Layer 7<div class="arrow">v</div></div>
<div class="7Drop-content" id="7Drop">
<p></p>
</div>
</div><br>
<div class="osiDrop">
<div class="sixDropBtn" onclick="6Drop()">Layer 6<div class="arrow">v</div></div>
<div class="6Drop-content" id="6Drop">
<p></p>
</div>
</div><br>
<div class="osiDrop">
<div class="fiveDropBtn" onclick="5Drop()">Layer 5<div class="arrow">v</div></div>
<div class="5Drop-content" id="5Drop">
<p></p>
</div>
</div><br>
<div class="osiDrop">
<div class="fourDropBtn" onclick="4Drop()">Layer 4<div class="arrow">v</div></div>
<div class="4Drop-content" id="4Drop">
<p></p>
</div>
</div><br>
<div class="osiDrop">
<div class="threeDropBtn" onclick="3Drop()">Layer 3<div class="arrow">v</div></div>
<div class="3Drop-content" id="3Drop">
<p></p>
</div>
</div><br>
<div class="osiDrop">
<div class="twoDropBtn" onclick="2Drop()">Layer 2<div class="arrow">v</div></div>
<div class="2Drop-content" id="2Drop">
<p></p>
</div>
</div><br>
<div class="osiDrop">
<div class="oneDropBtn" onclick="1Drop()">Layer 1<div class="arrow">v</div></div>
<div class="1Drop-content" id="1Drop">
<p></p>
</div>
</div><br>
<div class="footer">
<a class="about" href="../../../../about/about.html">About the Website</a><br>
<a class="contact" href="../../../../contact/contact.html">Contact Us</a>
</div>
</body>
</html>

155
networking/osi_model/osi_model_assets/osi_model.css Normal file
View File

@ -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;
}

0
networking/osi_model/osi_model_assets/osi_model.js Normal file
View File