Line 1,224: | Line 1,224: | ||
} | } | ||
</style> | </style> | ||
+ | <style> | ||
+ | .overlay5 { | ||
+ | height: 0%; | ||
+ | width: 100%; | ||
+ | position: fixed; | ||
+ | z-index: 1; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | background-color: rgb(0,0,0); | ||
+ | background-color: rgba(0,0,0, 0.9); | ||
+ | overflow-y: hidden; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | .overlay5-content { | ||
+ | position: relative; | ||
+ | top: 25%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | margin-top: 30px; | ||
+ | } | ||
+ | |||
+ | .overlay5 a { | ||
+ | padding: 8px; | ||
+ | text-decoration: none; | ||
+ | font-size: 36px; | ||
+ | color: #818181; | ||
+ | display: block; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .overlay5 a:hover, .overlay5 a:focus { | ||
+ | color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | .overlay5 .closebtn5 { | ||
+ | position: absolute; | ||
+ | top: 100px; | ||
+ | right: 45px; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-height: 450px) { | ||
+ | .overlay5 {overflow-y: auto;} | ||
+ | .overlay5 a {font-size: 20px} | ||
+ | .overlay5 .closebtn5 { | ||
+ | font-size: 40px; | ||
+ | top: 600px; | ||
+ | right: 35px; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
<style> | <style> | ||
/* ADJUSTS DEFAULT iGEM CONTENT */ | /* ADJUSTS DEFAULT iGEM CONTENT */ | ||
Line 1,476: | Line 1,528: | ||
top: 15px; | top: 15px; | ||
border-radius: 50%; | border-radius: 50%; | ||
− | z-index: | + | z-index: 0; |
} | } | ||
Line 1,496: | Line 1,548: | ||
top: 22px; | top: 22px; | ||
width: 0; | width: 0; | ||
− | z-index: | + | z-index: 0; |
right: 30px; | right: 30px; | ||
border: medium solid white; | border: medium solid white; | ||
Line 1,510: | Line 1,562: | ||
top: 22px; | top: 22px; | ||
width: 0; | width: 0; | ||
− | z-index: | + | z-index: 0; |
left: 30px; | left: 30px; | ||
border: medium solid white; | border: medium solid white; | ||
Line 1,524: | Line 1,576: | ||
/* The actual content */ | /* The actual content */ | ||
.content1 { | .content1 { | ||
− | padding: | + | padding: 5px 5px; |
background-color: white; | background-color: white; | ||
position: relative; | position: relative; | ||
border-radius: 6px; | border-radius: 6px; | ||
− | font-family: | + | font-family: Boogaloo; |
} | } | ||
Line 1,789: | Line 1,841: | ||
<div class="container1 left1"> | <div class="container1 left1"> | ||
<div class="content1"> | <div class="content1"> | ||
− | <h2 class="boogaloo_font "> | + | |
+ | <div id="myNav" class="overlay5"> | ||
+ | <a href="javascript:void(0)" class="closebtn5" onclick="closeNav()">×</a> | ||
+ | <div class="overlay5-content"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <h2 class="boogaloo_font "><span style="font-size:30px;cursor:pointer" onclick="openNav()">april</span></h2> | ||
+ | <script> | ||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | |||
<p>Lorem ipsum..</p> | <p>Lorem ipsum..</p> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="container1 right1"> | <div class="container1 right1"> | ||
<div class="content1 boogaloo_font " style="overflow:scroll; "> | <div class="content1 boogaloo_font " style="overflow:scroll; "> | ||
− | <h2 class="boogaloo_font "> | + | |
+ | <div id="myNav" class="overlay5"> | ||
+ | <a href="javascript:void(0)" class="closebtn5" onclick="closeNav()">×</a> | ||
+ | <div class="overlay5-content"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <h2 class="boogaloo_font "><span style="font-size:30px;cursor:pointer" onclick="openNav()">may</span></h2> | ||
+ | |||
+ | <script> | ||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | </script> | ||
<p>Lorem ipsum..</p> | <p>Lorem ipsum..</p> | ||
</div> | </div> | ||
Line 1,804: | Line 1,901: | ||
<div class="container1 left1"> | <div class="container1 left1"> | ||
− | <div class="content1 boogaloo_font"> | + | |
− | + | ||
+ | <div id="myNav" class="overlay5"> | ||
+ | <a href="javascript:void(0)" class="closebtn5" onclick="closeNav()">×</a> | ||
+ | <div class="overlay5-content"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="content1 boogaloo_font"><h2 class="boogaloo_font "><span style="font-size:30px;cursor:pointer" onclick="openNav()">june</span></h2> | ||
+ | |||
+ | <script> | ||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | </script> | ||
<p>Lorem ipsum..</p> | <p>Lorem ipsum..</p> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
<div class="container1 right1"> | <div class="container1 right1"> | ||
− | + | <div class="content1 boogaloo_font " style="overflow:scroll; "> | |
− | <h2 class="boogaloo_font "> | + | |
+ | <div id="myNav" class="overlay5"> | ||
+ | <a href="javascript:void(0)" class="closebtn5" onclick="closeNav()">×</a> | ||
+ | <div class="overlay5-content"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <h2 class="boogaloo_font "><span style="font-size:30px;cursor:pointer" onclick="openNav()">july</span></h2> | ||
+ | |||
+ | <script> | ||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | </script> | ||
<p>Lorem ipsum..</p> | <p>Lorem ipsum..</p> | ||
</div> | </div> | ||
− | </div><div class="container1 left1"> | + | </div> |
− | <div class="content1 | + | <div class="container1 left1"> |
− | <h2 class="boogaloo_font "> | + | <div class="content1 boogaloo_font " style="overflow:scroll; "> |
+ | |||
+ | <div id="myNav" class="overlay5"> | ||
+ | <a href="javascript:void(0)" class="closebtn5" onclick="closeNav()">×</a> | ||
+ | <div class="overlay5-content"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <h2 class="boogaloo_font "><span style="font-size:30px;cursor:pointer" onclick="openNav()">august</span></h2> | ||
+ | |||
+ | <script> | ||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | </script> | ||
<p>Lorem ipsum..</p> | <p>Lorem ipsum..</p> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="container1 right1"> | <div class="container1 right1"> | ||
− | + | <div class="content1 boogaloo_font " style="overflow:scroll; "> | |
− | <h2 class="boogaloo_font "> | + | |
+ | <div id="myNav" class="overlay5"> | ||
+ | <a href="javascript:void(0)" class="closebtn5" onclick="closeNav()">×</a> | ||
+ | <div class="overlay5-content"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <h2 class="boogaloo_font "><span style="font-size:30px;cursor:pointer" onclick="openNav()">september</span></h2> | ||
+ | |||
+ | <script> | ||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | </script> | ||
<p>Lorem ipsum..</p> | <p>Lorem ipsum..</p> | ||
</div> | </div> | ||
</div><div class="container1 left1"> | </div><div class="container1 left1"> | ||
− | + | <div class="content1 boogaloo_font " style="overflow:scroll; "> | |
− | + | ||
− | + | <div id="myNav" class="overlay5"> | |
− | + | <a href="javascript:void(0)" class="closebtn5" onclick="closeNav()">×</a> | |
+ | <div class="overlay5-content"> | ||
+ | |||
</div> | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
+ | |||
+ | <h2 class="boogaloo_font "><span style="font-size:30px;cursor:pointer" onclick="openNav()">October</span></h2> | ||
+ | |||
+ | <script> | ||
+ | function openNav() { | ||
+ | document.getElementById("myNav").style.height = "100%"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("myNav").style.height = "0%"; | ||
+ | } | ||
+ | </script> | ||
<p>Lorem ipsum..</p> | <p>Lorem ipsum..</p> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
Revision as of 11:28, 1 November 2017
april
Lorem ipsum..
may
Lorem ipsum..
june
Lorem ipsum..
july
Lorem ipsum..
august
Lorem ipsum..
september
Lorem ipsum..
October
Lorem ipsum..