7-homepage-rows edit

homepage-admission  edit

Start Your William & Mary Admission Journey Here

Choose from 115 majors, minors and pre-professional programs with 65% of students majoring in STEM and computational-related fields. W&M is known for its undergraduate teaching, career services, internship connections, science lab facilities, study abroad and more.

Life at William & Mary Life at William & Mary Life at William & Mary Life at William & Mary Life at William & Mary
Copy
Edit
<!-- components/7-homepage-rows/homepage-admission.php --> <link rel="stylesheet" type="text/css" href="/atomic-docs/wm/prod/main.css"> <section class="HomeAdmission wm-row"> <div class="wm-row__mainWrapper HomeAdmission__wrapper"> <h3 class="HomeAdmission__title wm-row__title ">Start Your William & Mary Admission Journey Here</h3> <p class="HomeAdmission__intro-text wm-row__intro-text">Choose from 115 majors, minors and pre-professional programs with 65% of students majoring in STEM and computational-related fields. W&M is known for its undergraduate teaching, career services, internship connections, science lab facilities, study abroad and more.</p> <div class="wm-row__mainWrapper wm-split__container HomeAdmission__split-wrapper"> <div class="wm-split__side -image"> <img class="HomeAdmission__image active" data-category="default" alt="Life at William &amp; Mary" src="/atomic-docs/wm/images/default.jpg"> <img class="HomeAdmission__image" data-category="admission" alt="Life at William &amp; Mary" src="/atomic-docs/wm/images/admission.jpg"> <img class="HomeAdmission__image" data-category="visits" alt="Life at William &amp; Mary" src="/atomic-docs/wm/images/visits.jpg"> <img class="HomeAdmission__image" data-category="campuslife" alt="Life at William &amp; Mary" src="/atomic-docs/wm/images/campuslife.jpg"> <img class="HomeAdmission__image" data-category="research" alt="Life at William &amp; Mary" src="/atomic-docs/wm/images/research.jpg"> </div> <div class="wm-split__side wm-text -text"> <ul class="HomeAdmission__list"> <li class="HomeAdmission__list-item" data-category="admission"><a class="HomeAdmission__list-link" href="/admission/index.php"><span class="HomeAdmission__list-linktext"> <div>Admission &amp; Aid</div> </span> <i class="HomeAdmission__list-linkbutton fa-solid fa-chevron-right"></i></a></li> <li class="HomeAdmission__list-item" data-category="visits"><a class="HomeAdmission__list-link" href="/visit/index.php"><span class="HomeAdmission__list-linktext"> <div>Visits &amp; tours</div> </span> <i class="HomeAdmission__list-linkbutton fa-solid fa-chevron-right"></i></a></li> <li class="HomeAdmission__list-item" data-category="campuslife"><a class="HomeAdmission__list-link" href="/campuslife/index.php"><span class="HomeAdmission__list-linktext"> <div>Campus Life</div> </span> <i class="HomeAdmission__list-linkbutton fa-solid fa-chevron-right"></i></a></li> <li class="HomeAdmission__list-item" data-category="research"><a class="HomeAdmission__list-link" href="/research/index.php"><span class="HomeAdmission__list-linktext"> <div>Research &amp; Applied Learning</div> </span> <i class="HomeAdmission__list-linkbutton fa-solid fa-chevron-right"></i></a></li> </div> </div> </div> </section> <script> const linkItems = document.querySelectorAll('.HomeAdmission__list-item'); const images = document.querySelectorAll('.HomeAdmission__image'); for (let i = 0; i < linkItems.length; i++) { linkItems[i].addEventListener('mouseover', function(e) { linkItems[i].classList.add('active'); showActiveImage(linkItems[i].dataset.category); }) linkItems[i].addEventListener('mouseout', function(e) { linkItems[i].classList.remove('active'); showActiveImage("default"); }) } function showActiveImage(category) { for (let j = 0; j < images.length; j++) { images[j].classList.remove('active'); if (images[j].dataset.category == category) { images[j].classList.add('active'); } } } </script>
Cancel
Copy
Copy
Edit
/* scss/7-homepage-rows/_homepage-admission.scss */ $homeadmission-tablet-breakpoint: 500px; $homeadmission-desktop-breakpoint: 986px; @mixin hoverstyles { .HomeAdmission__list-link { transition: all 150ms ease-out; background-color: var(--hovertextcolor); border-bottom-color: var(--hoverbuttoncolor); text-decoration: none; } .HomeAdmission__list-linktext { color: white; } // border-bottom: none; .HomeAdmission__list-linkbutton { transition: all 150ms ease-out; color: white; background-color: var(--hoverbuttoncolor); border-bottom-color: var(--hoverbuttoncolor); } } @mixin nonhoverstyles { .HomeAdmission__list-link { transition: all 150ms ease-out; background-color: white; border-bottom-color: var(--mdsilver); @container admissionsplit (min-width: #{$homeadmission-tablet-breakpoint}) { border-bottom-color: var(--dksilver); border-right-color: var(--dksilver); } } .HomeAdmission__list-linktext { transition: all 150ms ease-out; color: var(--dksilver); } .HomeAdmission__list-linkbutton { transition: all 150ms ease-out; color: var(--ltsilver); background-color: var(--dksilver); border-bottom-color: var(--mdsilver); } // set last item to not change border & ~ .HomeAdmission__list-item:last-child { .HomeAdmission__list-link { border-bottom-color: white; } .HomeAdmission__list-linkbutton { border-bottom-color: var(--dksilver); } } } .HomeAdmission { & .wm-row__title:not(.sr-only) + * { margin-top: var(--spacing-sm); } &__title { color: var(--wmgreen-600); text-align: center; font-family: var(--serif-font); font-size: 38px; font-style: normal; font-weight: 400; line-height: 1.31579; } &__intro-text { color: var(--text-body); text-align: center; font-family: var(--sans-font); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0.32px; } &__split-wrapper { display: flex; overflow: hidden; flex-wrap: wrap; flex-direction: column; border-radius: 4px; border: 1px solid var(--wmsilver-600); @include breakpoint(#{$homeadmission-desktop-breakpoint}) { // switches to side by side flex-direction: row; width: 100%; } } .wm-split__side { width: 100%; flex: 0 0 50%; display: flex; flex-direction: column; position: relative; justify-content: stretch; align-items: stretch; overflow: hidden; } &__image { display: none; object-fit: cover; width: 100%; aspect-ratio: 3 / 2; @include breakpoint(#{$homeadmission-tablet-breakpoint}) { &.active { display: block; } } } .wm-split__side.-text { container-type: inline-size; container-name: admissionsplit; } &__list { display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; margin: 0; padding: 0; width: 100%; height: auto; list-style: none; text-align: left; @container admissionsplit (min-width: #{$homeadmission-tablet-breakpoint}) { flex-direction: row; flex-wrap: wrap; } @include breakpoint(#{$homeadmission-desktop-breakpoint}) { // height: 100%; flex: 1; } // -item sibling hover styles &:has(> .HomeAdmission__list-item:hover) { --ltsilver: var(--wmsilver-100); --mdsilver: var(--wmsilver-300); --dksilver: var(--wmsilver-600); @include nonhoverstyles(); } // item elements serve as the base for the hover state of the links &-item { // horizontal list display: flex; flex: 1 1 auto; transition: all 150ms ease-out; @container admissionsplit (min-width: #{$homeadmission-tablet-breakpoint}) { // quad list layout flex: 1 0 50%; min-height: 120px; // quad list layout hover styles are below } .HomeAdmission__list-link { border-bottom: 1px solid var(--wmsilver-600); } &:last-child .HomeAdmission__list-link, &:last-child .HomeAdmission__list-linkbutton { border-bottom: none; } & > * { transition: all 150ms ease-out; } // MOBILE ADMISSION HOVER &:first-child:hover { // first item hover: backgrounds and bottom borders: moss --hovertextcolor: var(--moss-700); --hoverbuttoncolor: var(--moss-600); @include hoverstyles(); } // MOBILE VISITS AND TOURS HOVER &:nth-child(2):hover { // second item hover: backgrounds and bottom borders: gold --hovertextcolor: var(--webgold); --hoverbuttoncolor: var(--webgold-600); @include hoverstyles(); } // first item: bottom borders: gray // previous sibling "selector" - if the first item's next sibling is being hovered, change stuff :) &:first-child:has(+ .HomeAdmission__list-item:is(:hover, :focus-visible)) { .HomeAdmission__list-link, .HomeAdmission__list-linkbutton { border-bottom-color: var(--wmsilver-600); } } // MOBILE CAMPUS LIFE HOVER &:nth-child(3):hover { // third item hover: backgrounds and bottom borders: patina --hovertextcolor: var(--patina-700); --hoverbuttoncolor: var(--patina-600); @include hoverstyles(); } // second item: bottom borders: gray &:nth-child(2):has(+ .HomeAdmission__list-item:is(:hover, :focus-visible)) { .HomeAdmission__list-link, .HomeAdmission__list-linkbutton { border-bottom-color: var(--wmsilver-600); } } // MOBILE RESEARCH HOVER &:last-child:hover { // fourth item hover: backgrounds and (bottom border of list?): brick --hovertextcolor: var(--weatheredbrick-700); --hoverbuttoncolor: var(--weatheredbrick-600); @include hoverstyles(); } // third item: bottom borders gray &:nth-child(3):has(+ .HomeAdmission__list-item:is(:hover, :focus-visible)) { .HomeAdmission__list-link, .HomeAdmission__list-linkbutton { border-bottom-color: var(--wmsilver-600); } } // QUAD LAYOUT BORDERS @container admissionsplit (min-width: #{$homeadmission-tablet-breakpoint}) { &:first-child .HomeAdmission__list-link, &:nth-child(3) .HomeAdmission__list-link { border-right: 1px solid var(--wmsilver-600); } &:nth-child(3) .HomeAdmission__list-link { border-bottom: white; } &:last-child .HomeAdmission__list-link { border-color: white; } // ADMISSION HOVER override for desktop &:first-child:hover + .HomeAdmission__list-item + .HomeAdmission__list-item { .HomeAdmission__list-link, .HomeAdmission__list-linkbutton { border-right-color: var(--wmsilver-600); } } } } &-link { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex: 1; &:hover { text-decoration: none; } &text { display: flex; justify-content: flex-start; align-items: center; width: 100%; padding: var(--spacing-sm); color: var(--wmgreen-600); font-size: clamp(18px, 1.5vw, 22px); font-style: normal; font-weight: 700; line-height: 1; @container admissionsplit (min-width: #{$homeadmission-tablet-breakpoint}) { div { align-self: flex-start; } } } .HomeAdmission__list-linkbutton { display: flex; align-items: center; justify-content: center; width: var(--spacing-md); height: 100%; padding: var(--spacing-sm) 14px; background-color: var(--wmgreen-600); color: var(--wmgreen-200); text-align: center; font-family: "Font Awesome 6 Pro"; font-size: 28px; font-style: normal; font-weight: 400; line-height: 1.07143; @include breakpoint(#{$homeadmission-desktop-breakpoint}) { height: 100%; width: 107px; } @container admissionsplit (min-width: #{$homeadmission-tablet-breakpoint}) { width: var(--spacing-lg); height: var(--spacing-lg); align-self: flex-end; border-top-left-radius: 4px; } } } } }
Cancel