Difference between revisions of "Team:UNSW Australia/Public Engagement"

m
Line 3: Line 3:
  
 
<html>
 
<html>
 +
<div id="POE-content" class="to-load">
 +
<p>Insert overall overview here. Click on the buttons below to learn more about each aspect of our Public Education and Outreach.</p>
 +
<div id="POE-buttons">
 +
<div id="symposium-toggle" class="circular-button" onclick="showSymposium()">
 +
<h3>Symposium</h3>
 +
</div>
 +
<div id="education-toggle" class="circular-button" onclick="showEducation()">
 +
<h3>Education</h3>
 +
</div>
 +
<div id="blog-toggle" class="circular-button" onclick="showBlog()">
 +
<h3>PLOS Blog</h3>
 +
</div>
 +
<div id="presentations-toggle" class="circular-button" onclick="showPresentations()">
 +
<h3>Presentations</h3>
 +
</div>
 +
</div>
 +
 +
<div id="symposium-content" class="toggle-content">
 +
<h1 class="shadow-text">Symposium</h1>
 +
</div>
 +
<div id="education-content" class="toggle-content">
 +
<h1 class="shadow-text">Education</h1>
 +
</div>
 +
<div id="blog-content" class="toggle-content">
 +
<h1 class="shadow-text">PLOS Blog</h1>
 +
</div>
 +
<div id="presentations-content" class="toggle-content">
 +
<h1 class="shadow-text">Presentations</h1>
 +
</div>
 +
</div>
 +
</body>
  
 
<style>
 
<style>
Line 11: Line 42:
 
#publicEngagement-header h1 {
 
#publicEngagement-header h1 {
 
   top: 60px;
 
   top: 60px;
 +
}
 +
 +
#POE-content {
 +
margin: 0 10%;
 +
}
 +
 +
#POE-buttons {
 +
display: flex;
 +
justify-content: center;
 +
border-bottom: 1px solid #f0f0f0;
 +
padding-bottom: 50px;
 +
}
 +
 +
.circular-button {
 +
width: 140px;
 +
height: 140px;
 +
border-radius: 100px;
 +
background-color: grey;
 +
margin: 20px;
 +
color: #dbdbdb;
 +
opacity: 0.6;
 +
}
 +
 +
.circular-button h3 {
 +
padding-top: 140px;
 +
text-align: center;
 +
text-transform: uppercase;
 +
}
 +
 +
.circular-button:hover {
 +
color: black;
 +
opacity: 1;
 +
}
 +
 +
.toggle-content h1 {
 +
font-size: 2.5rem;
 
}
 
}
  
 
</style>
 
</style>
 +
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
$('.toggle-content').hide();
 +
$('#symposium-content').show();
 +
});
 +
 +
function showSymposium() {
 +
$('.toggle-content').hide();
 +
$('#symposium-content').show();
 +
}
 +
 +
function showEducation() {
 +
$('.toggle-content').hide();
 +
$('#education-content').show();
 +
}
 +
 +
function showBlog() {
 +
$('.toggle-content').hide();
 +
$('#blog-content').show();
 +
}
 +
 +
function showPresentations() {
 +
$('.toggle-content').hide();
 +
$('#presentations-content').show();
 +
}
 +
</script>
 
</html>
 
</html>

Revision as of 00:49, 10 October 2018

Insert overall overview here. Click on the buttons below to learn more about each aspect of our Public Education and Outreach.

Symposium

Education

PLOS Blog

Presentations

Symposium

Education

PLOS Blog

Presentations