Footer
Secondary navigation items
Rendered Component
HTML
<footer>
<div class="footer_nav">
<div class="footer_nav_block">
<p class="nav_block_name">Brown University</p>
<p class="nav_block_contact">
<a href="https://www.google.com/maps/place/Brown+University/@41.8267718,-71.4047422,17z/data=!3m1!4b1!4m5!3m4!1s0x89e4452490b38e29:0xb7e69fcf7a220cb!8m2!3d41.8267718!4d-71.4025482" class="nav_block_contact_link">
<svg viewBox="0 0 17 24" data-testid="Marker" fill="#A79A94" width="15" style="margin: 3px 10px -3px 0px;">
<title>location</title>
<path d="M15.642 6.253c-.083-.309-.25-.637-.373-.925C13.789 1.774 10.559.5 7.949.5 4.456.5.609 2.842.095 7.67v.986c0 .041.014.411.035.596.288 2.301 2.103 4.746 3.459 7.047 1.459 2.465 2.972 4.89 4.472 7.314.925-1.582 1.846-3.184 2.75-4.725.246-.452.532-.904.778-1.336.165-.287.479-.575.622-.842 1.459-2.67 3.807-5.362 3.807-8.013V7.61c0-.288-.356-1.294-.376-1.356zm-7.63 4.951c-1.026 0-2.15-.513-2.704-1.931-.083-.226-.076-.678-.076-.72v-.637c0-1.807 1.534-2.629 2.87-2.629 1.643 0 2.914 1.315 2.914 2.959 0 1.643-1.36 2.958-3.003 2.958z"></path>
</svg>
Providence, RI 02912
</a>
<span class="nav_block_contact_space"></span>
<a href="tel:4018631000" class="nav_block_contact_link" style="margin-left: 2rem;">
<svg viewBox="0 0 17 17" data-testid="Phone" fill="#A79A94" width="20" style="margin: 3px 10px -3px 0px;">
<title>call</title>
<path d="M12.998 11.213c-.559-.551-1.256-.551-1.811 0-.424.42-.847.84-1.263 1.267-.114.117-.21.142-.349.064-.274-.15-.565-.27-.829-.434-1.227-.772-2.255-1.765-3.166-2.882-.452-.555-.854-1.149-1.135-1.818-.057-.135-.046-.224.064-.334.424-.41.836-.829 1.252-1.249.58-.583.58-1.266-.003-1.853-.331-.335-.662-.662-.993-.996-.341-.342-.68-.687-1.024-1.025-.559-.544-1.256-.544-1.811.004-.427.42-.836.85-1.27 1.263-.402.38-.605.846-.648 1.39-.067.886.15 1.723.456 2.537.626 1.686 1.58 3.184 2.736 4.557a16.93 16.93 0 005.606 4.387c.982.476 2 .843 3.106.903.761.043 1.423-.15 1.953-.743.363-.406.772-.776 1.156-1.164.57-.576.573-1.273.008-1.842-.676-.68-1.356-1.356-2.035-2.032zm-.463-3.486l1.374-.205c-.216-1.105-.811-2.106-1.716-2.902-.957-.838-2.167-1.366-3.5-1.53L8.5 4.3c1.031.128 1.97.535 2.71 1.184.7.613 1.158 1.389 1.325 2.243z"></path>
<path d="M14.262 2.853C12.739 1.29 10.812.304 8.686 0L8.5 1.36a8.356 8.356 0 014.818 2.465A8.722 8.722 0 0115.681 8.5L17 8.269a10.14 10.14 0 00-2.738-5.416z"></path>
</svg>
401-863-1000
</a>
</p>
<div class="nav_block_top">
<a href="https://www.brown.edu/about/visit" class="nav_block_link">
<span>Visit Brown</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
<a href="https://maps.brown.edu" class="nav_block_link">
<span>Campus Map</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
<a href="https://www.brown.edu/a-z" class="nav_block_link">
<span>A to Z</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
<a href="https://www.brown.edu/about/contact-us" class="nav_block_link">
<span>Contact Us</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
</div>
<div class="nav_block_bottom">
<a href="https://www.brown.edu/news" class="nav_block_link">
<span>News</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
<a href="https://events.brown.edu/" class="nav_block_link">
<span>Events</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
<a href="https://www.brown.edu/about/administration/public-safety/" class="nav_block_link">
<span>Campus Safety</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
<a href="https://www.brown.edu/website-accessibility" class="nav_block_link">
<span>Accessibility</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
<a href="https://www.brown.edu/about/administration/human-resources/recruitment-staffing/jobsbrown" class="nav_block_link">
<span>Careers at Brown</span>
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
</div>
</div>
<div class="give_container">
<a href="http://alumni-friends.brown.edu/giving/" class="give_link">
Give To Brown
<svg aria-hidden="true" viewBox="0 0 14 9" fill="#FFC72C" width="14" style="align-self: center; margin-left: 5px; margin-top: -2px; height: 14px;">
<title>arrow pointing right</title>
<path d="M9.427.135a.527.527 0 00-.705 0 .428.428 0 000 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 000 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 000-.638L9.427.135z"></path>
</svg>
</a>
</div>
</div>
<div class="footer_bottom">
<p class="footer_copyright">© Brown University</p>
<div class="social_wrap">
<div>
<a href="https://www.facebook.com/BrownUniversity" aria-label="facebook" >
<svg viewBox="0 0 18 18" data-testid="Facebook" fill="white" width="22">
<title>facebook</title>
<path d="M18 9.055C18 4.055 13.97 0 9 0S0 4.054 0 9.055C0 13.574 3.29 17.32 7.594 18v-6.327H5.308V9.055h2.286V7.059c0-2.269 1.344-3.523 3.4-3.523.984 0 2.014.177 2.014.177v2.228h-1.135c-1.118 0-1.467.698-1.467 1.415v1.699h2.496l-.399 2.618h-2.097V18C14.71 17.321 18 13.575 18 9.055z"></path>
</svg>
</a>
</div>
<div>
<a href="https://www.instagram.com/brownu/" aria-label="instagram" >
<svg viewBox="0 0 18 18" data-testid="Instagram" fill="white" width="22">
<title>instagram</title>
<path d="M12.96 0H4.94A4.946 4.946 0 000 4.94v8.02a4.945 4.945 0 004.94 4.94h8.02a4.946 4.946 0 004.94-4.94V4.94A4.946 4.946 0 0012.96 0zm3.353 12.96a3.356 3.356 0 01-3.352 3.352H4.94a3.355 3.355 0 01-3.352-3.351V4.94A3.355 3.355 0 014.94 1.588h8.02a3.356 3.356 0 013.352 3.352v8.02z"></path>
<path d="M8.95 4.338a4.618 4.618 0 00-4.612 4.613 4.618 4.618 0 004.612 4.612 4.618 4.618 0 004.613-4.612A4.618 4.618 0 008.95 4.338zm0 7.637A3.028 3.028 0 015.926 8.95 3.028 3.028 0 018.95 5.926a3.028 3.028 0 013.025 3.024 3.028 3.028 0 01-3.025 3.025zm4.806-8.984a1.17 1.17 0 00-1.164 1.165c0 .306.125.607.342.824.216.216.516.34.822.34.307 0 .607-.124.824-.34a1.17 1.17 0 000-1.648 1.17 1.17 0 00-.824-.34z"></path>
</svg>
</a>
</div>
<div>
<a href="https://twitter.com/BrownUniversity" aria-label="twitter" >
<svg viewBox="0 0 23.38 23.89" data-testid="Twitter" fill="white" width="22" style="margin-bottom: -6px;">
<title>twitter</title>
<path d="M13.91 10.12 22.61 0h-2.06l-7.56 8.78L6.96 0H0l9.13 13.28L0 23.89h2.06l7.98-9.28 6.37 9.28h6.96l-9.46-13.77Zm-2.82 3.28-.92-1.32L2.81 1.55h3.17l5.94 8.49.92 1.32 7.72 11.04h-3.17l-6.3-9.01Z"></path>
</svg>
</a>
</div>
<div>
<a href="https://www.linkedin.com/school/brown-university/" aria-label="linkedin" >
<svg viewBox="0 0 18 18" data-testid="LinkedIn" fill="white" width="22">
<title>linked in</title>
<path d="M14.886 9.16a3.107 3.107 0 00-.627-1.104 2.46 2.46 0 00-.942-.647 3.276 3.276 0 00-1.19-.209c-.342 0-.64.041-.894.124a2.35 2.35 0 00-.656.323c-.184.133-.34.276-.466.428a6.378 6.378 0 00-.324.419V7.39H7.2c.013.216.019.634.019 1.256v2.36L7.2 15.21h2.587v-4.376c0-.114.007-.225.02-.333.012-.108.038-.206.076-.295a2.09 2.09 0 01.466-.647c.209-.203.498-.304.865-.304.47 0 .806.162 1.009.485.203.323.304.751.304 1.284v4.186h2.588v-4.49c0-.596-.076-1.116-.229-1.56zM5.23 5.902a1.23 1.23 0 00.381-.951c0-.38-.13-.7-.39-.961-.26-.26-.612-.39-1.056-.39-.444 0-.8.13-1.065.39-.267.26-.4.58-.4.96 0 .369.127.686.38.952.254.266.603.4 1.047.4h.019c.457 0 .818-.134 1.084-.4zM5.288 7.2H2.7v7.82h2.588V7.2zM17.713.124a.41.41 0 01.133.314V17.56a.41.41 0 01-.133.314.458.458 0 01-.323.124H.457a.458.458 0 01-.324-.124A.41.41 0 010 17.56V.438A.41.41 0 01.133.124.458.458 0 01.457 0H17.39c.126 0 .234.041.323.124z"></path>
</svg>
</a>
</div>
<div>
<a href="https://www.snapchat.com/add/brown-u" aria-label="snapchat" >
<svg viewBox="0 0 22 20" data-testid="Snapchat" fill="white" width="22">
<title>snapchat</title>
<path d="M21.503 14.994c-2.772-.444-4.035-3.175-4.17-3.485l-.016-.034c-.139-.275-.173-.498-.1-.663.145-.335.761-.525 1.156-.647.111-.035.216-.067.298-.1.8-.306 1.2-.699 1.191-1.166-.007-.371-.306-.712-.749-.865a1.386 1.386 0 00-.51-.096c-.123 0-.304.017-.478.096-.338.154-.638.237-.866.246a.85.85 0 01-.233-.038l.023-.36.004-.062c.094-1.456.211-3.269-.287-4.355C15.294.25 12.17 0 11.246 0l-.43.004c-.922 0-4.04.25-5.512 3.463-.499 1.089-.38 2.9-.286 4.356.01.144.018.283.026.42a.877.877 0 01-.277.039c-.265 0-.582-.084-.943-.248-.52-.238-1.473.08-1.602.739-.07.356.078.87 1.177 1.293.085.033.193.066.325.107.368.114.985.304 1.13.639.073.165.038.388-.114.69-.054.124-1.36 3.019-4.243 3.481a.58.58 0 00-.496.6.722.722 0 00.06.247c.242.552 1.165.936 2.902 1.204.039.096.083.293.108.408.037.163.075.331.128.506.053.177.21.473.664.473.153 0 .331-.034.524-.07a5.724 5.724 0 011.13-.126c.26 0 .533.023.808.067.52.084.975.398 1.504.762.778.536 1.486.946 2.901.946.038 0 .075-.001.111-.004.053.003.105.004.159.004 1.24 0 2.33-.319 3.244-.947.504-.348.98-.676 1.5-.76.277-.045.55-.068.81-.068.452 0 .813.057 1.134.118.218.042.388.062.545.062.317 0 .55-.17.639-.466a7.28 7.28 0 00.127-.502c.02-.09.068-.302.108-.405 1.712-.265 2.587-.633 2.829-1.184a.712.712 0 00.063-.252.581.581 0 00-.496-.602z"></path>
</svg>
</a>
</div>
<div>
<a href="https://www.youtube.com/brownuniversity" aria-label="youtube" >
<svg viewBox="0 0 21 15" data-testid="YouTube" fill="white" width="22" style="margin-bottom: -5px;">
<title>youtube</title>
<path d="M19.945 2.112c-.538-.956-1.12-1.131-2.307-1.198C16.452.834 13.47.8 10.888.8c-2.587 0-5.57.033-6.754.113-1.184.068-1.768.242-2.31 1.199-.553.954-.838 2.597-.838 5.49v.01c0 2.881.285 4.537.838 5.481.542.956 1.125 1.129 2.309 1.21 1.186.069 4.168.11 6.756.11 2.582 0 5.563-.041 6.75-.11 1.187-.08 1.77-.253 2.307-1.208.558-.945.84-2.6.84-5.481v-.01c0-2.895-.282-4.538-.841-5.492zM8.41 11.319V3.894l6.19 3.712-6.19 3.714z"></path>
</svg>
</a>
</div>
</div>
</div>
</footer>
CSS
.footer_nav {
background-color: rgb(78, 54, 41);
box-shadow: rgb(78, 54, 41) 0px 0px 0px 100vmax;
clip-path: inset(0px -100vmax);
color: rgb(152, 164, 174);
display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
max-width: 1200px;
padding: 4rem 0px 1.25rem;
}
.footer_nav_block {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 2rem;
}
.footer_bottom {
background-color: rgb(66, 45, 34);
box-shadow: rgb(66, 45, 34) 0px 0px 0px 100vmax;
clip-path: inset(0px -100vmax);
display: flex;
justify-content: space-between;
margin: auto;
max-width: 1200px;
width: 100%;
padding: 1rem;
width: 100%;
}
.footer_copyright {
color: rgb(183, 176, 156);
font-family: "Minion Pro", Georgia, serif;
font-size: 1.25rem;
margin: 0px;
}
.social_wrap {
display: flex;
gap: 2rem;
height: 22px;
justify-content: space-around;
margin: auto 0;
}
.social_wrap,svg {
height: 22px;
}
.social_wrap,svg:hover {
fill: rgb(255, 199, 44);
}
.nav_block_name {
color: rgb(183, 176, 156);
font-family: CircularStd, Arial, Helvetica, sans-serif;
font-size: 0.85rem;
text-transform: uppercase;
}
.nav_block_contact {
color: white;
font-size: 1.2rem;
font-weight: 700;
}
.nav_block_contact_space {
display: none;
}
.nav_block_contact_link {
color: rgb(255, 255, 255);
font-family: "Minion Pro", Georgia, serif;
font-weight: 400;
text-decoration: none;
}
.nav_block_top {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 2.5rem 0px;
}
.nav_block_link {
text-transform: uppercase;
color: rgb(255, 199, 44);
font-family: CircularStd, Arial, Helvetica, sans-serif;
font-size: 14px;
display: flex;
justify-content: flex-start;
align-items: center;
text-decoration: none;
letter-spacing: 1.2px;
}
.nav_block_link:hover {
color: white;
}
.nav_block_bottom {
border-top: 1px solid rgba(183, 176, 156, 0.2);
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding-top: 2.5rem;
}
.give_container {
align-self: center;
margin-top: 3rem;
}
.give_link {
background-color: transparent;
border: 1px solid rgb(255, 199, 44);
border-radius: 2px;
color: rgb(255, 255, 255);
display: flex;
font-family: CircularStd, Arial, Helvetica, sans-serif;
font-size: 0.8125rem;
letter-spacing: 0.09375rem;
padding: 1rem 2rem;
text-decoration: none;
text-transform: uppercase;
}
.give_link:hover {
background-color: rgb(255, 199, 44);
color: rgb(66, 45, 34);
}
@media (max-width: 768px) {
.footer_nav_block {
display: block;
}
.nav_block_contact_space {
display: block;
height: 1rem;
}
.nav_block_contact_link {
margin: 0 !important;
}
.nav_block_top, nav_block_bottom {
flex-direction: column;
}
.nav_block_top, nav_block_bottom, a {
width: 100%;
}
.give_container {
align-self: flex-start;
}
.footer_bottom {
flex-direction: column-reverse;
padding: 2rem 1rem;
}
.social_wrap {
align-self: flex-start;
border-bottom: 1px solid rgba(183, 176, 156, 0.2);
gap: 1.5rem;
padding-bottom: 1rem;
}
.footer_copyright {
padding-top: 1rem;
width: 100%;
}
.footer_nav {
margin: 0;
padding: 1rem;
display: block;
box-sizing: border-box;
}
}