2024 Web Headers


<style>
	#title_container_stats1 {background:url("//auburn.edu/template/2024/_assets/images/demo/image-720x1280.jpg"); background-size: cover; background-position: center center;}
	@media (min-width:992px) and (orientation:landscape) {
	#title_container_stats1 {background:url("//auburn.edu/template/2024/_assets/images/demo/image-1920x800.jpg"); background-size: cover; background-position: center center;}
	}
</style>

<div aria-labelledby="page_title" class="pageheader dark pageheader-college-unit-stats row align-items-center title-feature" id="title_container_stats1" role="banner">
	<div class="content left col-sm-12 col-lg-7 col-xl-6 row align-items-center">
		<div class="text p-sm-5">
			<h1 class="title1">College / Unit Homepage (Stats)</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
			<a class="au-btn orange-solid" href="https://wire.auburn.edu/content/education/2024/07/110915-usa-wheelchair-handball.php">Button #1</a>
			<a class="au-btn orange-solid" href="https://pharmacy.auburn.edu/">Button #2</a>
		</div>
	</div>
	<div class="content right col-sm-12 col-lg-5 offset-xl-1 col-xl-4 offset-xxl-2 col-xxl-3 row justify-content-around align-items-center">
		<div class="carousel slide col-md-5 col-lg-12" data-bs-ride="carousel" id="carouselStats">
		  <div class="carousel-inner">
			<div class="carousel-item row align-items-center active">
				<div class="text-container row align-items-center">
					<div class="text px-5">
						<div class="text1">#1</div>
						<div class="text2">University in Alabama</div>
					</div>
				</div>
			  	<img alt="" class="d-block w-100" src="https://auburn.edu/template/2024/_assets/images/placeholder-600x600.jpg"/>
			</div>
			<div class="carousel-item row align-items-center ">
				<div class="text-container row align-items-center">
					<div class="text px-5">
						<div class="text1">Top 11%</div>
						<div class="text2">of Research Institutions</div>
					</div>
				</div>
			  	<img alt="" class="d-block w-100" src="https://auburn.edu/template/2024/_assets/images/placeholder-600x600.jpg"/>
			</div>
			<div class="carousel-item row align-items-center ">
				<div class="text-container row align-items-center">
					<div class="text px-5">
						<div class="text1">Top 50</div>
						<div class="text2">Public University in the Nation</div>
					</div>
				</div>
			  	<img alt="" class="d-block w-100" src="https://auburn.edu/template/2024/_assets/images/placeholder-600x600.jpg"/>
			</div>
						
			  
		  </div>
		  <button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselStats" type="button">
			<span aria-hidden="true" class="carousel-control-prev-icon"></span>
			<span class="visually-hidden">Previous</span>
		  </button>
		  <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselStats" type="button">
			<span aria-hidden="true" class="carousel-control-next-icon"></span>
			<span class="visually-hidden">Next</span>
		  </button>
		</div>
	</div>
	<div class="filter"></div>
</div>


    <style>
    .pageheader-subject-marketing-03 {background:url("//auburn.edu/template/2024/_assets/images/demo/image-1920x1080.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;}
    @media (min-width:768px) {.pageheader-subject-marketing-03 {background:url(//auburn.edu/template/2024/_assets/images/demo/image-1920x1080.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;}}
    </style>

    <div aria-labelledby="pagetitle" class="pageheader pageheader-subject-marketing-03 row dark" role="banner">
        <div class="au-content-module link-hero g-0">
            <div class="row align-items-center justify-content-around filter">
                <div class="content row col-10 col-xxl-9 justify-content-around">
                    <div class="pillars-container d-none d-lg-inline-flex row justify-content-around">
                        <div class="pillars col-1"></div>
                    </div>
                    <div class="text col-11 col-sm-10 my-sm-3 my-lg-5">
                        <h2 class="module-title1 mb-4 col-sm-12">Marketing / Subject Page 2</h2>
                        <div class="info col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </div>

                    <div class="content_row row align-items-center">
                        <div class="button-row-container row align-items-center">		
                            <div class="row row-cols-1 row-cols-sm-4 button-row col-md-12">
                                <div class="button col"><a class="au-btn orange-solid m-0" href="#">Button #1</a></div>
                                <div class="button col"><a class="au-btn orange-solid m-0" href="#">Button #2</a></div>
                                <div class="button col"><a class="au-btn orange-solid m-0" href="#">Button #3</a></div>
                                <div class="button col"><a class="au-btn orange-solid m-0" href="#">Button #4</a></div>
                            </div>
                        </div>	
                    </div>
                </div>
            </div>
        </div>
        <img alt="two girls taking a selfie" class="visually-hidden d-xxl-none" src=""/>
        <img alt="Two students taking a selfie" class="visually-hidden d-none d-xxl-block" src=""/> 
    </div>

1-2 Column Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

placeholder image