Line 7: | Line 7: | ||
} | } | ||
#landingwrapper { | #landingwrapper { | ||
+ | align-items: center; | ||
width: 900px; | width: 900px; | ||
height: 100%; | height: 100%; | ||
Line 13: | Line 14: | ||
padding-left: 10px; | padding-left: 10px; | ||
} | } | ||
− | + | #teammembers { | |
− | + | align-self: center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | # | + | |
− | + | ||
top: 100px; | top: 100px; | ||
− | |||
− | |||
− | |||
text-decoration: none; | text-decoration: none; | ||
− | + | align-items: center; | |
− | + | height: 400px; | |
+ | width: 400px; | ||
+ | background-color: white; | ||
+ | |||
} | } | ||
− | # | + | #teammembers img { |
− | display: inline | + | display:inline-block; |
− | + | ||
− | + | ||
text-align: center; | text-align: center; | ||
− | + | height: 100px !important; | |
− | + | width: 100px !important; | |
− | background-color: | + | background-color: black; |
− | + | padding: 15px; | |
} | } | ||
− | # | + | #teammembers img { |
border: none; | border: none; | ||
− | |||
margin: 0; | margin: 0; | ||
− | |||
− | |||
-webkit-transition:0.25s; | -webkit-transition:0.25s; | ||
align-items: center; | align-items: center; | ||
− | opacity: 0. | + | opacity: 0.5; |
} | } | ||
− | # | + | #teammembers img:hover { |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
opacity: 1; | opacity: 1; | ||
-webkit-transition:0.25s; | -webkit-transition:0.25s; | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | |||
</style> | </style> | ||
− | <script src=" | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(document).ready(function() { | $(document).ready(function() { | ||
Line 96: | Line 74: | ||
$('#desc').text("This could be a bio for Madeline! It is pretty long, because she has a lot to say about herself. I can make the text smaller, and add lots more words, such as I don't like that idea."); | $('#desc').text("This could be a bio for Madeline! It is pretty long, because she has a lot to say about herself. I can make the text smaller, and add lots more words, such as I don't like that idea."); | ||
}); | }); | ||
− | $('# | + | $('#teammembers div').mouseleave(function () { |
$('#desc').text("Mouse over a member of our team to learn about them!"); | $('#desc').text("Mouse over a member of our team to learn about them!"); | ||
}); | }); | ||
Line 103: | Line 81: | ||
</script> | </script> | ||
</head> | </head> | ||
+ | |||
<body> | <body> | ||
− | <div id= | + | <div id="landingwrapper"> |
− | + | <div id = "teammembers"> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/7/74/T--BostonU--abbeybio.jpg" id="ab"></img> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/f/fc/T--BostonU--thomasbio.jpg" id="th"></img> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/6/64/T--BostonU--saibio.jpg" id="sa"></img> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/f/f4/T--BostonU--stevebio.jpg" id="st"></img> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/4/47/T--BostonU--sophiabio.jpg" id="so"></img> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/2/2c/T--BostonU--madelinebio.jpg" id="md"></img> | |
− | + | <p id="desc">Mouse over a member of our team to learn about them! | |
− | + | </p> | |
− | + | </div> | |
− | + | ||
− | + | </div> | |
− | + | ||
− | </div> | + | |
</body> | </body> | ||
− |
Revision as of 20:34, 18 July 2017
Mouse over a member of our team to learn about them!