font-size:36px;/* Adjust the font size as needed */
margin-top:100px;/* Add spacing from the top */
}
#heading{
font-family:'Nico Moji',sans-serif;/* Use the Nico Moji font */
font-size:60px;/* Adjust the font size as needed */
font-weight:400;/* Make the text bold */
color:#000000;/* Black color */
margin-top:20px;/* Add spacing from the top */
}
.dual-headings{
display:flex;/* Use flexbox to create side-by-side headings */
justify-content:center;/* Center the headings horizontally */
margin-top:20px;/* Add spacing from the top */
font-size:50px;
}
.dual-heading{
flex:1;/* Allow headings to share available space equally */
padding:20px;/* Add padding around each heading */
/*border: 1px solid #000000; /* Add a border for visual separation (optional) */
}
.team-member{
width:291px;/* Set the width */
height:291px;/* Set the height */
max-width:100%;/* Ensure images don't exceed their container */
height:auto;/* Maintain aspect ratio */
border-radius:50%;/* Make the image circular */
margin:20px;/* Add spacing around each image */
}
.team-member-container{
flex-basis:calc(50%-40px);/* Set width for 2 items per row, with spacing */
display:flex;/* Use flexbox to control image and caption layout */
flex-direction:column;/* Stack image and caption vertically */
align-items:center;/* Center-align image and caption */
margin:20px;/* Add spacing around each image container */
}
/* Media query for adjusting font size and position */
@mediascreenand(max-width:1440px){
#heading{
font-size:60px;/* Increase font size for wider screens */
left:378px;/* Adjust left position for wider screens */
}
.dual-heading{
font-size:50px;
left:299px;
}
.caption{
font-size:20px;/* Adjust caption font size for wider screens */
}
}
/* Media queries for responsiveness */
{% block title %}Team{% endblock %}
@mediascreenand(max-width:768px){
{% block lead %}On this page you can introduce your team members, instructors, and advisors.{% endblock %}
.team-member-container{
flex-basis:calc(100%-40px);/* Set width for 1 item per row, with spacing */
{% block page_content %}
}
}
<divclass="row">
.sub-h1{
<divclass="col-8">
background-color:#000000;/* Black strip background color */
<h2>What should this page contain?</h2>
color:#ffffff;/* White text color */
<hr>
padding:2px0;/* Add padding to top and bottom */
<ul>
font-size:45px;
<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>
.caption{
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
font-family:'Montserrat',sans-serif;
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
font-size:20px;/* Caption font size */
</ul>
margin-top:5px;/* Adjust the spacing between image and caption */
<divclass="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>
