rmc_website/_includes/navdsi.html

<style>
body {
  background-image: url('/assets/dsi/background.jpg');
}
.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-left: 3.5%;
/*  overflow: hidden; */
}
.navstd {
  float: left;
}
.navalt {
  float: right;
}
.container {
    position: relative;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}
.imageThree {
  z-index: 2;
}
.imageFour {
  z-index: 3;
}
.image {
    position: absolute;
    width: 100px;
    height: 100px;
}
.navimgoverlay {
  opacity: 0.0;
  text-align: center;
  float: left;
  padding-top: .6vw;
  width: 6vw;
  height: auto;
}
.navimgoverlay:hover {
  opacity: 1.0;
  width: 6vw;
}
.navimg {
  text-align: center;
  float: left;
  padding-top: .6vw;
  width: 6vw;
  height: auto;
}
.navicon {
  text-align: center;
  float: left;
  padding-top: 2.1vw;
  padding-left: 1.38vw;
  width: 3.2vw;
  height: auto;
}
.navedge {
  text-align: center;
  float: left;
  margin: 1%;
  width: 1.5vw;
  height: auto;
}
.navpadding li {
  padding-top: 1.5%;
}
.image2 {
    position: absolute;
    border-color: #FFFFFF
    width: auto;
    height: auto;
}
.image3 {
  position: relative;
    border-color: #FFFFFF
    width: auto;
    height: auto;
}
.text {
    position: absolute;
    text-align: left;
    border-color: #FFFFFF;
    font-size: 30px;
    font-size: 1vw;
    padding-top: 2.2vw;
    padding-left: 6.2vw;
}
.text2-electricboogaloo {
    position: absolute;
    text-align: left;
    border-color: #FFFFFF;
    font-size: 30px;
    font-size: 1vw;
    padding-top: 6.5vw;
    padding-left: 1.6vw;
}
.icon {
    padding-top:2.2vw;
    margin-left: -9.3vw;
    z-index: 2;
}
.titleimgoverlay {
  margin: 0% 2% 0%;
  opacity: 0.0;
  text-align: center;
  float: left;
  width: 16vw;
  height: auto;
}
.titleimgoverlay:hover {
  opacity: 1.0;
}
.titleimg {
  margin: 0% 2% 0%;
  text-align: center;
  float: left;
  width: 16vw;
  height: auto;
  margin-bottom: 10vw;
}
.titleedge {
  text-align: center;
  float: left;
  margin: 1%;
  width: 18vw;
  height: auto;
}
.titlepadding li {
  padding-top: 1.5%;
  margin: 0% 2% 0%
}
.homeimg {
  margin: 6% 5% 0%;
  text-align: center;
  float: right;
  width: 16vw;
  height: auto;
  margin-bottom: 5vw;
}
.hometext {
    position: absolute;
    text-align: center;
    border-color: #FFFFFF;
    font-size: 40px;
    font-size: 1.1vw;
}
.homeicon {
    padding-top: 6.99vw;
    margin-left: -1.59vw;
    z-index: 2;
}
.othertext {
    position: absolute;
    text-align: left;
    border-color: #FFFFFF;
    font-size: 40px;
    font-size: 1.2vw;
    padding-top: 1vw;
    padding-left: 1.2vw;
}
</style>
<div class="nav">
    <nav>
        <ul>
            <li class="navedge"><img src="/assets/dsi/leftbracket.png" style="width:1.5vw;height:auto;margin:auto;"/></li>
            <div class="navpadding">
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/back.png" class="navicon"></div>
                <div class="imageThree image"><a href="/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>
                <!--<li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/home.png" class="navicon"></div>
                <div class="imageThree image"><a href="/dsi.html"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>-->
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/twldevapps.png" class="navicon"></div>
                <div class="imageThree image"><a href="/dsidev/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/devshop.png" class="navicon"></div>
                <div class="imageThree image"><a href="/dsidev/dsishop/startup.html"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/blog.png" class="navicon"></div>
                <div class="imageThree image"><a href="/dsi.html"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/guide-fw.png" class="navicon"></div>
                <div class="imageThree image"><a href="/dsidev/guide/ds-prototype-firmware.html"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
                <div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
                <div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
                <div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
                <div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
                <div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
                <div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
                <div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/discord.png" class="navicon"></div>
                <div class="imageThree image"><a href="https://discord.gg/XZxxZngwDQ"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>
                <li class="navimg">
                <div class="container">
                <div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
                <div class="imageTwo image"><img src="/assets/dsi/icon/github.png" class="navicon"></div>
                <div class="imageThree image"><a href="https://github.com/IanSkinner1982/ianskinner1982.github.io/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
                </div>
                </li>
                </div>
            <li class="navedge"><img src="/assets/dsi/rightbracket.png" style="width:1.5vw;height:auto;margin:auto;"/></li>
        </ul>
    </nav>
</div>