<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://images2.drct2u.com/content/images/FGN/190819_JDW_testimage1.jpg"></div>
<article class="BR__TextArea">
<h2 class="BR__heading">Occasion <span class="BR__break"></span>shop</h2>
<h5 class="dropDown dropDown1">Read more<span class="chevron chevron-down"></span></h5>
<div class="hiddenContent">Dress it up or dress it down this season with our endlessly inspiring range of classics and stylishly modern occasionwear. Browse and shop online today for our bestselling collection of Wedding Dresses and Mother of the Bride Outfits<br><br>
<nav class="BR__links">
<a class="BR__links--cta" href="#">Mother of the Bride</a>
<a class="BR__links--cta" href="#">Wedding Guest</a>
<a class="BR__links--cta" href="#">Dresses With a Jacket</a>
<a class="BR__links--cta" href="#">Lingerie</a>
</nav>
<nav class="BR__links">
<a class="BR__links--cta" href="#">Footwear</a>
<a class="BR__links--cta" href="#">Accessories</a>
<a class="BR__links--cta" href="#">Mens</a>
<a class="BR__links--cta" href="#">Wedding Gifts</a>
<a class="BR__links--cta" href="#">Shop All</a>
</nav>
</div>
</article>
<div class="BR__image2"><img src="https://images2.drct2u.com/content/images/FGN/190819_JDW_testimage3.jpg"></div>
</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;
}
.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;
background: url(https://images2.drct2u.com/content/images/FGN/190819_JDW_testimage2.jpg) top right no-repeat #ebebeb;
min-height: 225px;
}
.BR__image1,.BR__image2{
display: none;
}
.BR__image1{
border-right: 5px solid #FFF;
}
.BR__image2{
border-left: 5px solid #FFF;
}
.BR__heading{
border-right: 10px solid #ccc;
border-left: 10px solid #ccc;
border-top: 10px solid #ccc;
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;
padding-left: 4vw;
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: #ccc;
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: #eee;
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;
}
a.BR__links--cta{
width: 50%;
text-decoration: underline !important;
font: 3.5vw/2 GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
color: #000
}
/*-----------------------
QUERIES
--------------------------*/
@media all and (min-width: 768px) {
.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;
justify-content: center;
width: 100%
}
.BR__heading{margin-bottom: 0.5em;}
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: left;
margin-left: 30px;
max-width: 420px;
}
/*---------------
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__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");
});
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.