Skip to content
Snippets Groups Projects
Commit 806af2ee authored by Gibran Gonzalez's avatar Gibran Gonzalez
Browse files

Adds base for team page with dummy data

parent dc138222
No related branches found
No related tags found
2 merge requests!4Dev,!2Adds base for team page with dummy data
Hide whitespace changes
Inline Side-by-side
static/style.css
+ 50
− 0
View file @ 806af2ee
......@@ -85,3 +85,53 @@ footer a:hover { color: white; text-decoration: underline; }
list-style-type: none;
padding-left: 0;
}
/* team page */
.flex-container {
display: flex;
}
#team_body {
object-fit: contain;
}
#card_image {
width: 100%;
}
.team_row {
display: flex;
justify-content: space-between;
padding: 10px;
}
.member_image {
width: 18%;
height: 18%;
vertical-align: middle;
border-radius: 100%;
border: 1px solid black;
}
.member_image:hover {
opacity: 0.5;
}
.team-title {
display: flex;
align-items: center;
justify-content: center;
font-size: 10vh;
font-weight: bold;
padding: 10px 0 20px 0;
}
#member_name {
font-size: 6vh;
font-weight: bold;
margin-left: 5px;
}
#member_major {
font-size: 4vh;
}
\ No newline at end of file
static/team-script.js 0 → 100644
+ 42
− 0
View file @ 806af2ee
let TEAM_INFO = {
"1": {
"src": "https://m.media-amazon.com/images/I/71nbfl-JklS._AC_SL1024_.jpg",
"name": "Charizard",
"major": "Fire/Flying"
},
"2": {
"src": "https://m.media-amazon.com/images/I/81cV3O3wnwL._AC_SL1500_.jpg",
"name": "Blastoise",
"major": "Water"
},
"3": {
"src": "https://m.media-amazon.com/images/I/614Hi6DnUAL._AC_.jpg",
"name": "Butterfree",
"major": "Bug/Flying"
},
"4": {
"src": "https://cdn.shopify.com/s/files/1/0540/2663/3390/products/b8f4553f-5df9-49c1-9a01-66d775e534ed_800x.png?v=1639018012",
"name": "Beedrill",
"major": "Bug/Poison"
},
"5": {
"src": "https://cdn.shopify.com/s/files/1/1221/4256/products/2019-Pokemon-Trading-Card-Game-Team-Up-Set-124-F-Pidgeot-Pokemon-Trading-Card-Game-347-Recto.jpg?v=1548534917",
"name": "Pidgeot",
"major": "Flying"
}
}
$(document).ready(function() {
$(".member_image").hover(function() {
var card = $("#card_image")
var name = $("#member_name")
var major = $("#member_major")
var index = $(this).attr("id")
card.attr("src", TEAM_INFO[index]["src"])
name.text(TEAM_INFO[index]["name"])
major.text(TEAM_INFO[index]["major"])
});
});
wiki/layout.html
+ 6
− 0
View file @ 806af2ee
......@@ -16,6 +16,12 @@
<!-- Custom Open Source Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- Custon JS -->
<script type="text/javascript" src="{{ url_for('static', filename = 'team-script.js') }}"></script>
<title>{% block title %}{% endblock %} | Tec-Monterrey - iGEM 2022</title>
</head>
......
wiki/pages/team.html
+ 33
− 22
View file @ 806af2ee
......@@ -2,33 +2,44 @@
{% block title %}Team{% endblock %}
{% block lead %}On this page you can introduce your team members, instructors, and advisors.{% endblock %}
{% block img_url %}https://static.igem.wiki/teams/4506/wiki/lab.jpg{% endblock %}
{% block page_content %}
<div class="row">
<div class="col-8">
<h2>What should this page contain?</h2>
<hr>
<ul>
<li>Include pictures of your teammates, don't forget instructors and advisors!</li>
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
</ul>
<div class="bd-callout bd-callout-info"><strong>Important:</strong> Your wiki pages will be archived at the end of the iGEM season and this content will remain online. Please keep this in mind as you post photos and personal information on this page.</div>
<div class="container page-content mt-5">
<div>
<h2 class="blue-text team-title">Who we are</h2>
</div>
<div class="col-4">
<h2>Inspirations</h2>
<hr>
<ul>
<li><a href="https://2019.igem.org/Team:CU/Team">2019 CU</a></li>
<li><a href="https://2019.igem.org/Team:UANL/Team">2019 UANL</a></li>
<li><a href="https://2019.igem.org/Team:William_and_Mary/Team">2019 William and Mary</a></li>
<li><a href="https://2020.igem.org/Team:BOKU-Vienna/Team">2020 BOKU Vienna </a></li>
<li><a href="https://2020.igem.org/Team:CAU_China/Team_Member">2020 CAU China</a></li>
<li><a href="https://2020.igem.org/Team:Lethbridge/Members">2020 Lethbridge</a></li>
</ul>
<div class="flex-container row">
<div class="col-lg-4">
<div id="team_body">
<img id="card_image" src="https://m.media-amazon.com/images/I/71nbfl-JklS._AC_SL1024_.jpg">
</div>
</div>
<div class="col-lg-8">
<div id="team_div">
<div>
<h3 id="member_name">Charizard</h3>
<h4 id="member_major">Fire/Flying</h4>
</div>
<div class="team_row">
<img id="1" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png" alt="charizard">
<img id="2" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/009.png" alt="charizard">
<img id="3" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/012.png" alt="charizard">
<img id="4" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/015.png" alt="charizard">
<img id="5" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/018.png" alt="charizard">
</div>
<div class="team_row">
<img id="1" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png" alt="charizard">
<img id="2" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/009.png" alt="charizard">
<img id="3" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/012.png" alt="charizard">
<img id="4" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/015.png" alt="charizard">
<img id="5" class="member_image" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/018.png" alt="charizard">
</div>
</div>
</div>
</div>
</div>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment