Line 19: | Line 19: | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;} | #bodyContent a[href ^="https://"], .link-https { padding-right:0px;} | ||
+ | |||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | /* Icon 1 */ | ||
+ | |||
+ | #nav-icon3 { | ||
+ | width: 60px; | ||
+ | height: 45px; | ||
+ | position: relative; | ||
+ | margin: 50px auto; | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -moz-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | -webkit-transition: .5s ease-in-out; | ||
+ | -moz-transition: .5s ease-in-out; | ||
+ | -o-transition: .5s ease-in-out; | ||
+ | transition: .5s ease-in-out; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #nav-icon3 span { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | height: 9px; | ||
+ | width: 100%; | ||
+ | background: #d3531a; | ||
+ | border-radius: 9px; | ||
+ | opacity: 1; | ||
+ | left: 0; | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -moz-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | -webkit-transition: .25s ease-in-out; | ||
+ | -moz-transition: .25s ease-in-out; | ||
+ | -o-transition: .25s ease-in-out; | ||
+ | transition: .25s ease-in-out; | ||
+ | } | ||
+ | |||
+ | /* Icon 3 */ | ||
+ | |||
+ | #nav-icon3 span:nth-child(1) { | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { | ||
+ | top: 18px; | ||
+ | } | ||
+ | |||
+ | #nav-icon3 span:nth-child(4) { | ||
+ | top: 36px; | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(1) { | ||
+ | top: 18px; | ||
+ | width: 0%; | ||
+ | left: 50%; | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(2) { | ||
+ | -webkit-transform: rotate(45deg); | ||
+ | -moz-transform: rotate(45deg); | ||
+ | -o-transform: rotate(45deg); | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(3) { | ||
+ | -webkit-transform: rotate(-45deg); | ||
+ | -moz-transform: rotate(-45deg); | ||
+ | -o-transform: rotate(-45deg); | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(4) { | ||
+ | top: 18px; | ||
+ | width: 0%; | ||
+ | left: 50%; | ||
+ | } | ||
</style> | </style> | ||
+ | |||
+ | <div id="2021DD_TopBar"> | ||
+ | |||
+ | <button id="2021DD_NavButton" onclick="this.getElementById('nav-icon3').classList.toggle('open')"> | ||
+ | Menu | ||
+ | <div id="nav-icon3"> | ||
+ | <span></span> | ||
+ | <span></span> | ||
+ | <span></span> | ||
+ | <span></span> | ||
+ | </div> | ||
+ | </button> | ||
+ | |||
<nav> | <nav> | ||
Line 32: | Line 127: | ||
</nav> | </nav> | ||
+ | |||
+ | </div> | ||
</html> | </html> |
Revision as of 14:56, 19 September 2021