x
x
x
x
Only portrait mode is currently supported - please rotate your device.
...
HTML | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<style> div#main { /*background-image: -webkit-linear-gradient(top, var(--primary-color), var(--primary-color) 500px, transparent 500px, transparent 100%) !important;*/ /* padding-top: 50px; */ } .back-btn-container { width: 90%; margin: auto; } .back-btn-container .back-btn { color: black; font-family: var(--main-font-family); font-size: 14px; font-weight: bold; line-height: 1.07; } .page-banner { width: 100%; margin: auto; background-image: url(https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/EIT/eit-banner.jpeg); display: flex; height: 450px; background-repeat: no-repeat; background-size: cover; /*margin-top: 20px;*/ } .banner-content { display: flex; flex-direction: column; margin: auto auto auto 125px; } .tabs { display: flex; } .tabs p { margin: unset; text-decoration: none; } .tabs a { color: white!important; } .banner-content .title p { font-size: 57px; font-weight: bold; font-stretch: normal; color: var(--secondary-font-color); font-style: normal; line-height: 0.7; letter-spacing: 0.32px; text-align: center; } div#maincontainer .page-banner .page-banner-overlay { display: unset; width: 100%; display: flex; /*background: black; opacity: 0.8;*/ } .banner-content { align-items: centerflex-start; } .banner-content .tabs .tab { font-family: Poppins; font-size: 14px; font-weight: bold; color: var(--secondary-font-color); border-bottom-width: 3px; border-radius: 5%; cursor: pointer; line-height: 1.71; letter-spacing: 1.39px; text-align: center; text-transform: uppercase; margin-right: 40px; } #startups#all-tab{ border-bottom-style: solid; } .tabs { justify-content: space-between; width: 100%; margin-top: 50px; } div.filter-row { width: 90%; margin: 50px auto; } div.filter-row .left { opacity: 0.5; font-family: Arimo; font-size: 15.3px; line-height: 1.57; letter-spacing: 0.5px; color: #555555; width: 8%; } .filter-row .right input { display: none; } .filter-row .right label { /*background: rgba(251, 189, 40, 0.2);*/ background: white; border-radius: 2px; border: solid 1px #fbbd28; margin-right: 10px; padding: 0 25px; font-family: Arimo; font-size: 15.3px; line-height: 1.57; letter-spacing: 0.5px; cursor: pointer; } .filter-row .right label:hover{ background: rgba(251, 189, 40, 0.2); } .filter-row .right input[type="radio"]:checked+label{ background: #fbbd28; } div.filter-row .right button:focus { outline: none; } div.cardSectionStyle { flex-direction: column; } div.cardSection1{ display: none; } div.cardSection2{ display: none; } div.cardSection3{ display: none; } div.cardSection4{ display: none; } .cardSectionStyle .largeimagewithtextbelow-listmempag img { width: 50%; height: auto !important; } .cardSectionStyle .largeimagewithtextbelow-listmempag { background: unset !important; } .cardSectionStyle .largeimagewithtextbelow-listmempag .image-container { border: solid 1px rgba(51, 51, 51, 0.5); } .cardSectionStyle .largeimagewithtextbelow-listmempag .card-text-container .card-title { padding: unset; font-size: 16px; font-weight: bold; line-height: 1.5; } .cardSectionStyle .largeimagewithtextbelow-listmempag .card-text-container .card-subtitle { padding: unset; font-size: 15.3px; line-height: 1.31; letter-spacing: 0.5px; } .cardSectionStyle .largeimagewithtextbelow-listmempag .card-text-container { margin-top: 25px; } </style> | ||||||||||||||||
Custom section | ||||||||||||||||
| ||||||||||||||||
Custom section | | |||||||||||||||
| ||||||||||||||||
Custom section | ||||||||||||||||
|
Custom section | ||
---|---|---|
| ||
Filter By |
Class | right |
---|
<style> .iconcard { margin: 20px 50px !important; } .create-resource-button { align-self: flex-end; color: white!important; text-decoration: none; background: var(--primary-color-2); font-size: 16px; font-weight: 700; padding: 10px 20px; border-radius: 0; margin: 0px 10px 10px 0px; } </style> <!-- resource card styling --> <style> #myCards-eitallresourcecards { padding-top: 20px; } .cardstyle:hover { transform: none !important;padding-inline-start: 0px;
} .largeimagewithtextbelow-autocards {margin
background-top: 0; display: flex;
color: var(--primary-color); }
.
filterlargeimagewithtextbelow-button
autocards:hover {margin-right: 20px; border: 1px solid
background-color: var(--primary-color-2
); opacity: 0.9; } .custom-card-container.cardstyle.largeimagewithtextbelow-autocardsborder-radius
{ height:5px;
300px !important; } .largeimagewithtextbelow-autocards .card-title { color: var(--primary
secondary-font-color-2
) !important;font
text-weight
align:700
center; } .largeimagewithtextbelow-autocardspadding: 10px 15px; cursor: pointer; } .filter-button-selected {
.card-text-container, .largeimagewithtextbelow-autocards .card-text-container:hover { position: absolute; z-index: 2; background: var(--primary-color-2
);
color: var(--secondary-font-color)opacity: 0.8;} </style> <ul class="filters-container"> <li id="filter-all" class="filter-button filter-button-selected">All</li> <li id="filter-vertical" class="filter-button">Vertical</li> <li id="filter-funding" class="filter-button">Funding</li> <li id="filter-founded" class="filter-button">Founded</li> </ul> <script> $("#filter-all").click(() => { $("#filter-all").addClass("filter-button-selected"); $("#filter-vertical").removeClass("filter-button-selected"); $("#filter-funding").removeClass("filter-button-selected"); $("#filter-founded").removeClass("filter-button-selected"); }); $("#filter-vertical").click(() => { $("#filter-all").removeClass("filter-button-selected"); $("#filter-vertical").addClass("filter-button-selected"); $("#filter-funding").removeClass("filter-button-selected"); $("#filter-founded").removeClass("filter-button-selected"); }) $("#filter-funding").click(() => { $("#filter-all").removeClass("filter-button-selected"); $("#filter-vertical").removeClass("filter-button-selected"); $("#filter-funding").addClass("filter-button-selected"); $("#filter-founded").removeClass("filter-button-selected"); }) $("#filter-founded").click(() => { $("#filter-all").removeClass("filter-button-selected"); $("#filter-vertical").removeClass("filter-button-selected"); $("#filter-funding").removeClass("filter-button-selected"); $("#filter-founded").addClass("filter-button-selected"); }) </script> <!-- <div class="custom-select" style="width:200px;"> <select> <option value="0">Location:</option> <option value="1">San Francisco</option> <option value="2">New York</option> <option value="3">Chicago</option> </select> </div> <div class="custom-select" style="width:200px;"> <select> <option value="0">Cohort:</option> <option value="1">2017</option> <option value="2">2018</option> <option value="3">2019</option> <option value="4">2020</option> <option value="5">2021</option> </select> </div> -->
List members pagination | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Class | cardSection3 cardSectionStyle |
---|
Class | filter-row |
---|
Custom section | ||
---|---|---|
| ||
Filter By |
Class | right |
---|
HTML |
---|
<style>
/* The container must be positioned relative: */
.custom-select {
position: relative;
margin-right: 20px;
}
.custom-select select {
display: none; /*hide original SELECT element: */
}
.select-selected {
/*background-color: DodgerBlue;*/
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: black transparent transparent transparent;
content: '';
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent black transparent;
top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
div.filter-row .left {
display: flex;
flex-direction: column;
justify-content: center;
}
.select-selected {
background: var(--primary-color-2);
color: var(--secondary-font-color);
font-family: var(--main-font-family);
font-size: 15.3px;
line-height: 1.57;
letter-spacing: 0.5px;
}
.select-items {
background: var(--primary-color-2);
}
.select-items div, .select-selected {
color: var(--secondary-font-color);
font-family: var(--main-font-family);
font-size: 15.3px;
line-height: 1.57;
letter-spacing: 0.5px;
}
.select-items div:hover, .same-as-selected {background: unset;}
</style>
<div class="custom-select" style="width:200px;">
<select>
<option value="0">Location:</option>
<option value="1">All</option>
<option value="2">San Francisco</option>
<option value="3">New York</option>
<option value="4">Chicago</option>
</select>
</div> |
List members pagination | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
width: 298px !important;
height: 50px !important;
top: 250px;
}
.largeimagewithtextbelow-autocards .card-subtitle {
display: none;
}
</style>
Custom section | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
|
HTML |
---|
<!-- Scripts that run the custom selects -->
<script>
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and |
HTML |
<!-- Scripts that run the custom selects --> <script> var x, i, j, l, ll, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, var y, i, k, s, h, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; and the selected item:*/ y = this.parentNode.getElementsByClassName("same-as-selected"); var y, i, k, s, h, sl, yl = y.length; s for (k = this.parentNode.parentNode.getElementsByTagName("select")[0]; k < yl; k++) { sl = s.length; h = this.parentNode.previousSiblingy[k].removeAttribute("class"); for (i = 0; i < sl; i++) {} if (s.options[i].innerHTML == this.innerHTML) {this.setAttribute("class", "same-as-selected"); s.selectedIndex = ibreak; } h.innerHTML = this.innerHTML; } y = this.parentNode.getElementsByClassName("same-as-selected"h.click(); }); b.appendChild(c); } yl = y.lengthx[i].appendChild(b); a.addEventListener("click", function(e) { /*when the forselect (kbox =is 0;clicked, kclose <any yl; k++) { other select boxes, y[k].removeAttribute("class"); and open/close the current select box:*/ }e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.setAttributetoggle("class", "same-as-selectedselect-hide"); this.classList.toggle("select-arrow-active"); }); } function break;closeAllSelect(elmnt) { /*a function that will close all select boxes in the }document, except the current select box:*/ } var x, y, i, xl, yl, arrNo h.click()= []; x }= document.getElementsByClassName("select-items"); y = bdocument.appendChild(cgetElementsByClassName("select-selected"); } xl = x[i].appendChild(b).length; a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes,yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { and open/close the current select box:*/ arrNo.push(i) } else { e.stopPropagation(y[i].classList.remove("select-arrow-active"); } } for closeAllSelect(this); (i = 0; i < xl; i++) { if this.nextSibling.classList.toggle("select-hide");(arrNo.indexOf(i)) { thisx[i].classList.toggleadd("select-arrow-activehide"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); </script> } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); </script> |
HTML |
---|
<script>
$('#all-tab').click(function() {
$('#all-tab').css('border-bottom-style', 'solid');
$('#bootcamp-tab').css('border-bottom-style', 'unset');
$('#startup-manual-tab').css('border-bottom-style', 'unset');
});
$('#bootcamp-tab').click(function() {
$('#all-tab').css('border-bottom-style', 'unset');
$('#bootcamp-tab').css('border-bottom-style', 'solid');
$('#startup-manual-tab').css('border-bottom-style', 'unset');
});
$('#startup-manual-tab').click(function() {
$('#all-tab').css('border-bottom-style', 'unset');
$('#bootcamp-tab').css('border-bottom-style', 'unset');
$('#startup-manual-tab').css('border-bottom-style', 'solid');
});
</script> |
HTML |
---|
<style>
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.page-banner-overlay {
position: unset !important;
background: unset !important;
top: unset !important;
left: unset !important;
height: 100%;
opacity: 1;
visibility: visible;
width: 85% !important;
margin: auto;
}
.banner-content {
justify-content: center;
margin: auto;
}
.tabs {
flex-wrap: wrap;
justify-content: unset !important;
}
.banner-content .tabs .tab {
margin-bottom: 25px;
}
}
</style> |
HTML |
<script>
$('#startups-tab').click(function() {
$('#startups-tab').css('border-bottom-style', 'solid');
$('#members-tab').css('border-bottom-style', 'unset');
// Hide all except div 0
$('div.cardSection').css('display', 'flex');
$('div.cardSection3').css('display', 'none');
});
$('#members-tab').click(function() {
$('#startups-tab').css('border-bottom-style', 'unset');
$('#members-tab').css('border-bottom-style', 'solid');
// Hide all except div 3
$('div.cardSection').css('display', 'none');
$('div.cardSection3').css('display', 'flex');
});
</script> |
OneValley