CINXE.COM
SAE Presidents Display
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SAE Presidents Display</title> <link rel="stylesheet" href="assets/css/app.css"> </head> <body> <div class="screen"> <div class="grid-container"> <div class="screensaver"> <section id="screensaver3"> <div class="presidents_grid"> <div class="grid-x grid-padding-x small-up-3 medium-up-6 large-up-6"> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president118.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president116.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president4.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president5.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president6.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president7.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president8.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president9.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president10.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president11.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president12.jpg);"></div> </div> </div> <div class="cell image swiper-container show-for-medium"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president13.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president14.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president15.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president16.jpg);"></div> </div> </div> <div class="cell image swiper-container show-for-medium"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president17.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president18.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president19.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president20.jpg);"></div> </div> </div> <div class="cell image swiper-container show-for-medium"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president21.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president22.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president23.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president24.jpg);"></div> </div> </div> </div> <div class="grid-x grid-padding-x align-middle"> <div class="cell medium-6 large-6 grid-title"> <h2>SAE International<sup>®</sup></h2> <h1>Virtual Hall <br />of Presidents</h1> <p><a href="timeline.html" class="button explore">Explore Now</a></p> </div> <div class="cell medium-6 large-6"> <div class="grid-x grid-padding-x small-up-3 medium-up-3 large-up-3"> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president26.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president27.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president28.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president29.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president30.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president31.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president32.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president33.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president34.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president35.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president36.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president37.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president38.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president39.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president40.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president41.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president42.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president43.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president44.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president45.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president46.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president47.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president48.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president49.jpg);"></div> </div> </div> </div> </div> </div> <div class="grid-x grid-padding-x small-up-3 medium-up-6 large-up-6"> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president50.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president51.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president52.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president53.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president54.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president55.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president56.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president57.jpg);"></div> </div> </div> <div class="cell image swiper-container"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president58.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president59.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president60.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president61.jpg);"></div> </div> </div> <div class="cell image swiper-container show-for-medium"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president62.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president63.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president64.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president65.jpg);"></div> </div> </div> <div class="cell image swiper-container show-for-medium"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president66.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president67.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president68.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president69.jpg);"></div> </div> </div> <div class="cell image swiper-container show-for-medium"> <div class="swiper-wrapper"> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president70.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president71.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president72.jpg);"></div> <div class="photo swiper-slide" style="background-image: url(assets/img/presidents_images/400x400/president73.jpg);"></div> </div> </div> </div> </div> </section> </div> </div> </div> <script src="assets/js/app.js"></script> </body> </html>