Accessible and Responsive Web Banners With Call-to-Action Buttons
Full-Width Banner With Logo
Health and Wellness
Celebrating Women Conference
September 18 | Virtual Statewide Event
Learn More About the ConferenceSteal This Code:
<div class="jumbotron-fluid jumbotron-full jumbotron-full-image" style="background-image: url('Background Image Dependency Tag'); background-position: center right;" data-height="60vh">
<div class="jumbotron-content container">
<div class="row">
<div class="col-auto">
<div class="px-4 pb-4 pt-3 shadow bg-t-white">
<div class="row">
<div class="col-md-auto pr-md-2 text-center"> <img class="mr-2 mb-2" src="Logo Dependency Tag" alt="logo" width="150" /> </div>
<div class="col-md ml-md-0 pl-md-0 text-md-left text-center ">
<p class="h3 text-blue">Preheading</p>
<p class="display-5 text-blue h1 mt-2 mb-0 text-bold">Heading</p>
<p class="h3 mt-0 text-blue my-0">Subheading</p>
<a class="btn btn-info btn-lg mt-2 mr-2 text-white" href="#">Button Text</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Eight-Column Banner
Marriage Celebration 2022
Virtual Event • February 11, 2022
Steal This Code:
<div class="row h-bold">
<div class="col-lg-6 d-flex">
<div class="bg-4h p-3 w-100">
<div class="row d-flex">
<div class="col-md-3 col-3 align-self-center">
<img src="Image Dependency Tag" alt="Alt Text" class="mx-2" />
</div>
<div class="col-md-5 col-9 align-self-center">
<h2 class="text-white h3">Looking for 4-H?</h2>
<p class="lead text-white line-height-base">
Visit the Washington County 4-H Home Page </p>
<a href="#" class="btn btn-white" title="Visit Washington County 4-H Home"
>Let's Go!
</a>
</div>
<div class="col-md-4 d-none d-md-block align-self-center">
<a href="#"><img src="Image Dependency Tag" alt="Alt Text" /></a>
</div>
</div>
</div>
</div>
</div>
Horizontal Card With Paragraph Text
Decisions Downstream
February 2022
The choices we make about how to develop water resources have big impacts on river habitats. In Decisions Downstream, watershed scientist Dr. Sarah Null teams up with artists Carsten Meierand Chris Petersonto explore new ways of seeing river habitats. Immerse yourself in beautiful large-scale images created from scientific data, original paintings that capture the transcendent experience of encountering wild fish, and 3D map projections that visualize our water development choices. Decisions Downstream highlights the water development tools and tradeoffs that guide our choices.
View Exhibit InfoSteal This Code:
<div class="mb-4 mb-md-0 border pr-lg-4">
<div class="row">
<div class="col-lg-8">
<a href="#">
<img src="Image Dependency Tag" alt="Alt Text" width="1574" /></a>
</div>
<div class="col-lg-4 align-self-center">
<div class="p-lg-0 p-3">
<h3 class="text-bold mt-0">Heading</h3>
<p class="lead">Subheading</p>
<p>
Paragraph Text
</p>
<a class="btn btn-bright-light btn-block" href="#">Button Text</a>
</div>
</div>
</div>
</div></div>Small Banner with Logo and Photo
Steal This Code:
<div class="row h-bold">
<div class="col-lg-6 d-flex">
<div class="bg-4h p-3 w-100">
<div class="row d-flex">
<div class="col-md-3 col-3 align-self-center"><img src="Image Dependency Tag" alt="Alt Text" class="mx-2" /></div>
<div class="col-md-5 col-9 pl-3 align-self-center">
<h2 class="text-white h3">Looking for 4-H?</h2>
<p class="lead text-white line-height-base">Visit the Washington County 4-H Home Page</p><a href="#" class="btn btn-white" title="Visit Washington County 4-H Home">Let's Go!</a></div>
<div class="col-md-4 d-none d-md-block align-self-center">
<a href="#"><img src="Image Dependency Tag" alt="Alt Text"/></a>
</div>
</div>
</div>
</div>
</div>