<hr>    
<div style="text-align:center">Stretch to see the first banner with Photography<div>
<hr>


<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://images2.drct2u.com/content/stylesheets/JDW_style.css">


<section class="BR">
    
    <div class="BR__image1"><img src="https://i.ibb.co/9GLdB4F/190919-JDW-pw-Joe-Browns-image1.jpg"></div>
    
    <article class="BR__TextArea">
        
            <h2 class="BR__heading">
                <span class="BR__TextArea-innerbg"></span>
                <img class="BR__roundal DesktopOnly" src="https://i.ibb.co/ZVkTSrb/190919-JDW-pw-Joe-Browns-roundal.png">
                <img class="BR__TextArea-innerimg" src="https://i.ibb.co/YdBnd4S/200919-JDW-Joe-Browns-AW-Collection.png" class="BR__TextArea-innerimg">
            </h2> 
            <h5 class="dropDown dropDown1">Read more<span class="chevron chevron-down"></span></h5>
			<div class="hiddenContent">If you’re looking for a collection with real personality, full of unique styles designed to fit and flatter, then you’ve come to the right place. From quirky, vintage inspired plus size dresses to trendy biker jackets, stand-out ladies tops, statement sofas and more, Joe Browns really has it all.<br><br>
        <nav class="BR__links">
       <a class="BR__links--cta" href="#">Shop Womens</a>
       <a class="BR__links--cta" href="#">Shop Lingerie</a>
       <a class="BR__links--cta" href="#">Shop Mens</a>
       <a class="BR__links--cta" href="#">Shop Home</a>
        </nav>
        </div>
    </article>
    
    <div class="BR__image2"><img src="https://i.ibb.co/sq5Gwj3/190919-JDW-pw-Joe-Browns-image2.jpg"></div>
   

</section><!----END OF BR---->    


<section class="BR">

    
    <article class="BR__TextArea">
        
            <h2 class="BR__heading">
                <span class="BR__TextArea-innerbg"></span>
                <img class="BR__roundal DesktopOnly" src="https://i.ibb.co/ZVkTSrb/190919-JDW-pw-Joe-Browns-roundal.png">
                <img class="BR__TextArea-innerimg" src="https://i.ibb.co/YdBnd4S/200919-JDW-Joe-Browns-AW-Collection.png" class="BR__TextArea-innerimg">
            </h2> 
            <h5 class="dropDown dropDown2">Read more<span class="chevron chevron-down"></span></h5>
			<div class="hiddenContent">If you’re looking for a collection with real personality, full of unique styles designed to fit and flatter, then you’ve come to the right place. From quirky, vintage inspired plus size dresses to trendy biker jackets, stand-out ladies tops, statement sofas and more, Joe Browns really has it all.<br><br>
        <nav class="BR__links">
       <a class="BR__links--cta" href="#">Shop Womens</a>
       <a class="BR__links--cta" href="#">Shop Lingerie</a>
       <a class="BR__links--cta" href="#">Shop Mens</a>
       <a class="BR__links--cta" href="#">Shop Home</a>
        </nav>
        </div>
    </article>
    

   

</section><!----END OF BR---->    
body{margin:0; padding:0}

.BR{
    font-size: 62.5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 1300px;
    background: url(https://i.ibb.co/DwZ5wvk/m-200919-JDW-pw-Joe-Browns-AW-Collection.jpg) top center no-repeat #ebebeb;
    background-size: cover;
}
.BR__TextArea{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
position: relative;
    min-height: 225px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
}
.BR__TextArea-innerbg{
       background: url(https://i.ibb.co/qNWK4zq/m-190919-JDW-pw-Joe-Browns-TL.png),
        url(https://i.ibb.co/k9wnSHq/m-190919-JDW-pw-Joe-Browns-TR.png),
        url(https://i.ibb.co/K6JKvHB/m-190919-JDW-pw-Joe-Browns-BL.png),
        url(https://i.ibb.co/nzXjLSG/m-190919-JDW-pw-Joe-Browns-BR.png);
    background-size: contain;      
    background-repeat: no-repeat;
    background-position: top left, top right, bottom left, bottom right; 
    height: 60vw;
    width: 100%;
    pointer-events: none !important;
}
.BR__TextArea-innerimg{
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.BR__image1,.BR__image2{
    display: none;
}
.BR__image1{
    border-right: 5px solid #FFF;
}
.BR__image2{
    border-left: 5px solid #FFF;
}
.BR__heading{
    position: relative;
    border-right: 10px solid #bcd4eb;
    border-left: 10px solid #bcd4eb;
    border-top: 10px solid #bcd4eb;
    height: 215px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
    font: 7vw/1  GalanoGrotesque-SemiBold,Arial,'Helvetica Neue',Helvetica,sans-serif;
}
.BR__break{ display: block}


/*------------------------
dropdown FUNCTION
-------------------------*/

.dropDown { 
    text-align: center;
      display: block;
      background: #bcd4eb;
      padding: 1em;
      text-transform: uppercase;
      font: 4vw/1 "GalanoGrotesque-Regular", Arial, Helvetica, sans-serif;
    margin: 0;
}
.hiddenContent {
    border-top:2px solid #000;
    display: none;
    background: #bcd4eb;
    text-align: center;
    font: 3.5vw/1.5  GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
    padding: 4vw;
}



.chevron {
    display: inline-block;
    font: 5vw/1  GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 10vw;
}

.chevron::before {
    content: "\f078";
    font: 5vw/1  GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
	border-style: solid;
	border-width: 0.1em 0.1em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	right: 0;
	position: relative;
	top: 0;
	-webkit-transform: rotate(135deg);
	    -ms-transform: rotate(135deg);
	        transform: rotate(135deg);
	vertical-align: top;
	width: 0.45em;
}

.dropDown .chevron-down,.dropDown .chevron-down2,
.dropDown .chevron-down3,.dropDown .chevron-down4{
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.rtoate180--1,.rtoate180--2,
.rtoate180--3,.rtoate180--4{
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
.BR__links{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

a.BR__links--cta{
    width: 50%;
    text-decoration: underline !important;
    font: 3.5vw/2  GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
    color: #000
}
.DesktopOnly{ display: none}
/*-----------------------
QUERIES
--------------------------*/
@media all and (min-width: 768px) {

.DesktopOnly{ display: block}
    
.BR__TextArea{
    min-height: 300px;
}
.BR{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
    }
.dropDown,.BR__break { display: none;}
.BR__TextArea{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    width: 100%;
    }
a.BR__links--cta{ width: auto; margin-right: 10px;} 

.BR__heading,
.hiddenContent{
    display: inline !important;
    background: none;
    border: none;
    padding: 0;
    height: auto;
        text-align: center;
    
    } 
    .BR__heading{
        width: 100%;
    }
    .hiddenContent{max-width: 638px; margin: 0 auto; padding: 0 5%}
    .BR__TextArea-innerimg{
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
                transform: translate(0, 0);
    top: auto;
    left: auto;
    right: auto;
    margin: 0 auto;
    text-align: center;
    position: relative;
    } 
    .BR__TextArea-innerbg{
       background: url(https://i.ibb.co/qNWK4zq/m-190919-JDW-pw-Joe-Browns-TL.png),
        url(https://i.ibb.co/k9wnSHq/m-190919-JDW-pw-Joe-Browns-TR.png),
        url(https://i.ibb.co/K6JKvHB/m-190919-JDW-pw-Joe-Browns-BL.png),
        url(https://i.ibb.co/nzXjLSG/m-190919-JDW-pw-Joe-Browns-BR.png);
       background-size: contain;
       background-repeat: no-repeat;
       background-position: top left, top right, bottom left, bottom right;
       height: 300px;
       position: absolute;
       width: 100%;
       top: 0;
       left: 0;
}
        .BR__roundal{
        position: absolute;
            top: 40px;
            left: 15%;
    }
/*---------------
FONT SIZES
----------------*/
    
.BR__heading{font-size: 3em;}
.hiddenContent{font-size: 1.2em;}
a.BR__links--cta{font-size: 1em; }
    

}

@media all and (min-width: 1000px) {
.BR__TextArea{
            background: url(https://i.ibb.co/DwZ5wvk/m-200919-JDW-pw-Joe-Browns-AW-Collection.jpg) top center no-repeat #ebebeb;
    background-size: cover;
    }
.BR__image1, .BR__TextArea{display: -webkit-box;display: -ms-flexbox;display: flex; }
}
@media all and (min-width: 1200px) {
.BR__image2{display: -webkit-box;display: -ms-flexbox;display: flex; }
}

    $(document).ready(function() {
//drop downs
				$(document).ready(function() {
					$(".dropDown1").click(function(){
					$(this).next(".hiddenContent").slideToggle("slow");
                    $(".dropDown1 .chevron-down").toggleClass("rtoate180--1");
									
					});
				});

      //drop downs
				$(document).ready(function() {
					$(".dropDown2").click(function(){
					$(this).next(".hiddenContent").slideToggle("slow");
                    $(".dropDown2 .chevron-down").toggleClass("rtoate180--1");
									
					});
				});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.