yale banner

by ian_smithz

HTML

<link rel="stylesheet" href="https://mrchfix.sfd.net/assets/css/sfx.min.css">
<div class="yale-brand-cat">





  <main id="container-main" class="wrp">
    <div class="inner">
      <style>
        .bg-logo {
          position: absolute;
          height: 292px;
          width: 60%;
          background: #2e1a47;
          left: -15%;
          background-repeat: no-repeat;
          background-position: bottom;
          z-index: 3;
        }

      </style>

      <div class="full_width_banner main-header">
        <div class="row">
          <div class="sm-24">
            <div class="mn_head">
              <img src="//www.screwfix.com/images/general/assets/gfx/yale_logo.png" alt="Yale Logo" class="YaleLogo">
            </div>
            <div class="bg-logo"></div>
            <div class="full_width_wrp">
              <div class="dewalt_main banner-mg-wrap">

                <img data-src-small="//www.screwfix.com/images/general/assets/gfx/yale_header_sm.png" data-src-medium="//www.screwfix.com/images/general/assets/gfx/yale_header_lg.png" data-src-large="//www.screwfix.com/images/general/assets/gfx/yale_header_lg.png" class="swap"
                  data-alt="The smarter way to protect your home" src="//www.screwfix.com/images/general/assets/gfx/yale_header_lg.png">


              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="row seo">
        <div class="row-wrp--mod--h2fix">
          <span class="row-title">
          <div class="h1-styling">
          <h1>Yale</h1>
          </div>
     </span>
          <p>Yale are specialists in home security, trusted around the world for their comprehensive range of quality and innovative solutions to secure homes, belongings, and loved ones. With heritage dating back to 1840, Yale are using their experience
            and expertise to be a leading brand in smart home security. Allowing customers to connect devices around the home, and monitor these remotely from a...

CSS

.yale-brand-cat img.YaleLogo {
	  margin: 115px 35px;
	}

	.yale-brand-cat .bg-logo {
	  position: absolute;
	  height: 378px;
	  width: 60%;
	  background: #2e1a47;
	  left: -15%;
	  background-repeat: no-repeat;
	  background-position: bottom;
	  z-index: 3;
	}

	.yale-brand-cat .mn_head {
	  position: absolute;
	  z-index: 4;
	  height: 230px;
	  width: 350px;
	}

	.yale-brand-cat .h1-styling {
	  margin-bottom: 15px;
	}

	.yale-brand-cat .h1-styling h1 {
	  font-size: 26px;
	  font-family: archivo_narrowbold, sans-serif;
	  margin-bottom: 15px;
	  display: inline !important;
	}

	.yale-brand-cat .row-wrp--mod--h2fix {
	  margin: 0 -.3em;
	}

	.yale-brand-cat .h2 {
	  color: #5b5b5b;
	}

	.yale-brand-cat .certona-tile__container,
	.mt__item {
	  border: 1px solid #fff;
	}

	.yale-brand-cat .mt__item .cat-link {
	  color: #636363;
	}

	.yale-brand-cat .mt__item .mt__item-title .h3 {
	  color: #636363;
	}

	.yale-brand-cat .row-title {
	  width: 100%;
	  border-bottom: 1px solid #d1d1d1;
	  float: left;
	  margin: 26px 0 24px;
	  position: relative;
	}

	.yale-brand-cat .row-title h2 {
	  font-family: archivo_narrowbold, sans-serif;
	  font-size: 26px;
	  line-height: 26px;
	  position: relative;
	  left: 0;
	  bottom: 0;
	  margin-bottom: 15px;
	}

	.yale-brand-cat .full_width_wrp {
	  background-color: #FFF;
	  border-bottom: 15px solid #ffcc00;
	}

	/*sml-only*/

	@media only screen and (max-width: 40em) {
	  .yale-brand-cat .bg-logo {
	    display: none;
	  }
	  .yale-brand-cat .full_width_banner .banner_content .mn_head {
	    padding: 0;
	  }
	  .yale-brand-cat .mn_head {
	    display: none;
	  }
	  .yale-brand-cat .full_width_wrp {
	    background: none;
	    background-color: #2e1a47;
	  }
	  .yale-brand-cat .h1-styling h1 {
	    font-size: 22px;
	  }
	  .yale-brand-cat .mt__item {
	    min-height: 100px;
	  }
	  .yale-brand-cat .banner-mg-wrap {
	    height: 167px;
	    margin-bottom: 0px;
	    background-color: #2e1a47;
	  }
	  .yale-brand-cat...

JavaScript

var resizeTimer;

                var resizeFunction = function() {

                  var winWidth = window.innerWidth;;
                  var innerWidth = $(".wrp .inner").width();
                  var bannerWidth = $('.gtough').width();
                  var widthcalcA = ((winWidth - innerWidth) / 2);
                  var widthcalcB = ((innerWidth - bannerWidth) / 2);
                  var fullCalc = (widthcalcA + widthcalcB);

                  $(".full_width_wrp").css("width", winWidth);
                  $(".full_width_wrp").css("left", -(winWidth - innerWidth) / 2);
                  $(".gtough").css("left", fullCalc);


                }

                $(window).resize(function() {

                  clearTimeout(resizeTimer);
                  resizeTimer = setTimeout(resizeFunction, 250);
                  resizeFunction();
                });

                resizeFunction();