Difference between revisions of "Team:UNSW Australia/Collaborations"

Line 3: Line 3:
  
 
<html>
 
<html>
 +
 +
<html>
 +
<head>
 +
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 +
</head>
 +
<div id="collab-content">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
<div id="collaborators">
 +
<div onclick="Athens()" class="athens-logo photo">
 +
</div>
 +
<div onclick="Bettencourt()" class="bettencourt-photo photo">
 +
</div>
 +
<div onclick="Macquarie()" class="macquarie-logo photo">
 +
</div>
 +
<div onclick="Pasteur()" class="pasteur-logo photo">
 +
</div>
 +
<div onclick="ZJU()" class="zju-logo photo">
 +
</div>
 +
</div>
 +
 +
<div id="collaboration-bio">
 +
<div id="Athens" class="tile">
 +
<span class="athens-photo photo"></span>
 +
<h2>Athens</h2>
 +
<h4>Team Visit</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
</div>
 +
<div id="Bettencourt" class="tile">
 +
<span class="bettencourt photo"></span>
 +
<h2>Bettencourt</h2>
 +
<h4>Skype Call</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
</div>
 +
<div id="Pasteur" class="tile">
 +
<span class="pasteur photo"></span>
 +
<h2>Pasteur</h2>
 +
<h4>Human Practices Collaboration</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
</div>
 +
<div id="Macquarie" class="tile">
 +
<span class="macquarie photo"></span>
 +
<h2>Macquarie</h2>
 +
<h4>Lab and Human Practices Collaboration</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
</div>
 +
<div id="ZJU" class="tile">
 +
<span class="zju photo"></span>
 +
<h2>ZJU</h2>
 +
<h4>Skype Call</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
</div>
 +
</div>
 +
</div>
  
 
<style>
 
<style>
 +
 +
#collaborators {
 +
text-align: center;
 +
display: flex;
 +
justify-content: center;
 +
}
 +
 +
#collaborators div {
 +
float: left;
 +
margin: 10px;
 +
min-width: 140px;
 +
min-height: 140px;
 +
border-radius: 200px;
 +
background-color: #888;
 +
}
 +
 +
#collaboration-bio {
 +
display: flex;
 +
justify-content: center;
 +
    padding-bottom: 50px;
 +
}
 +
 +
.tile {
 +
height: 300px;
 +
width: 700px;
 +
border: 1px solid #F0F0F0;
 +
margin: 50px 10px;
 +
padding: 5px 20px;
 +
box-shadow: 8px 8px 16px 0px rgba(0,0,0,0.2);
 +
background-color: #F0F0F0;
 +
font-family: 'Lato';
 +
}
 +
 +
.tile h2 {
 +
margin-bottom: 2px;
 +
    font-size: 1.5rem;
 +
}
 +
 +
.tile h4 {
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
    padding: 0px;
 +
}
 +
 +
.tile p {
 +
margin-top: 10px;
 +
}
 +
 +
.tile span {
 +
width: 200px;
 +
height: 200px;
 +
float: right;
 +
border-radius: 5px;
 +
margin: 15px 0 15px 20px;
 +
}
 +
 +
 +
.photo {
 +
background-size: cover;
 +
background-position: center;
 +
background-color: #dbdbdb;
 +
}
 +
 +
.athens {
 +
background-image: url();
 +
}
 +
 +
.athens-logo {
 +
background-image: url();
 +
}
 +
 +
.bettencourt {
 +
background-image: url();
 +
}
 +
 +
.bettencourt-logo {
 +
background-image: url();
 +
}
 +
 +
.macquarie {
 +
background-image: url();
 +
}
 +
 +
.macquarie-logo {
 +
background-image: url();
 +
}
 +
 +
.pasteur {
 +
background-image: url();
 +
}
 +
 +
.pasteur-logo {
 +
background-image: url();
 +
}
 +
 +
.zju {
 +
background-image: url();
 +
}
 +
 +
.zju-logo {
 +
background-image: url();
 +
}
 +
 
#collaborations-header {
 
#collaborations-header {
 
   display: block;
 
   display: block;
Line 11: Line 197:
 
#collaborations-header h1 {
 
#collaborations-header h1 {
 
   width: 700px;
 
   width: 700px;
 +
 
}
 
}
 
</style>
 
</style>
 +
 +
<script>
 +
 +
$(document).ready(function(){
 +
$("#team-buttons").hide();
 +
$(".sub-buttons").hide();
 +
Athens();
 +
});
 +
 +
var isEven = function(number) {
 +
return (number % 2 === 0) ? true : false;
 +
};
 +
 +
 +
function Athens() {
 +
$(".tile").hide();
 +
$("#Athens").show();
 +
}
 +
 +
function Pasteur() {
 +
$(".tile").hide();
 +
$("#Pasteur").show();
 +
}
 +
 +
function Macquarie() {
 +
$(".tile").hide();
 +
$("#Macquarie").show();
 +
}
 +
 +
function ZJU() {
 +
$(".tile").hide();
 +
$("#ZJU").show();
 +
}
 +
 +
function Bettencourt() {
 +
$(".tile").hide();
 +
$("#Bettencourt").show();
 +
}
 +
 +
</script>
 
</html>
 
</html>

Revision as of 05:00, 23 September 2018

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Athens

Team Visit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bettencourt

Skype Call

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pasteur

Human Practices Collaboration

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Macquarie

Lab and Human Practices Collaboration

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ZJU

Skype Call

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.