BrianaJHunter
3/11/2020 - 10:33 PM

Vertical Tabs

<!--HTML-->
<!-- <div class="container-fluid">
<div class="row">
  <div class="col-md-4">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    <li><a data-toggle="pill" href="#menu4">Menu 3</a></li>
    <li><a data-toggle="pill" href="#menu5">Menu 3</a></li>
    </ul></div>
  <div class="col-md-8">
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
    <div id="menu3" class="tab-pane fade">
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
    <div id="menu4" class="tab-pane fade">
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
    <div id="menu5" class="tab-pane fade">
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
    </div></div>
</div>
</div>templateNav -->
<div class="container-fluid">
<div class="row">
  <div class="col-md-2">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a data-toggle="pill" href="#home">Signature Vinyl Formula</a></li>
    <li><a data-toggle="pill" href="#menu1">Exterior Frame Colors</a></li>
    <li><a data-toggle="pill" href="#menu2">Even Sightlines</a></li>
    <li><a data-toggle="pill" href="#menu3">Durability & Energy Efficiency</a></li>
    <li><a data-toggle="pill" href="#menu4">SmartTouch Hardware</a></li>
    <li><a data-toggle="pill" href="#menu5">Full Lifetime Warranty</a></li>
    </ul></div>
  <div class="col-md-10">
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <div class="col-md-5">
        <img class="Tab-Image" alt="{BusinessName} Images" src="https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/tuscanytab1.jpg"/>
      </div>
      <div class="col-md-5">
        <div class="FeatureDescript">
<h3>Signature Vinyl Formula</h3>
<p>Quality materials and innovative engineering help create a high performance vinyl window. We begin by precisely controlling our vinyl compound formulation to withstand harsh climate conditions. Then, we extrude our own frame material, and fabricate all Tuscany Series windows ourselves.</p>
</div>
      </div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <div class="col-md-5">
        <img class="Tab-Image" alt="{BusinessName} Images" src="/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/tuscanytab2.jpg"/>
      </div>
      <div class="col-md-5"><div class="FeatureDescript">
<h3>Exterior Frame Colors</h3>
<p>Milgard vinyl windows are available in eleven exterior frame colors with premium exterior finishes like bronze and espresso. Our coating technology allows UV rays to pass through the paint and reflect off the vinyl frame, preserving the exterior finish for colors that last.</p>
</div></div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <div class="col-md-5"><img class="Tab-Image" alt="{BusinessName} Images" src="/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/tuscanytab3.jpg"/></div>
      <div class="col-md-5"><div class="FeatureDescript">
<h3>Even Sightlines</h3>
<p>Tuscany Series custom made windows offer equal sightlines and a wider frame shape that creates shadow lines for a more traditional look. Even sightlines are used in room design to create a calming and aesthetically pleasing effect. The result is pure elegance.</p>
</div></div>
    <div id="menu3" class="tab-pane fade">
      <div class="col-md-5"></div>
      <div class="col-md-5"></div>
    </div>
    </div></div>
</div>
</div>

/* CSS */
.Tuscany {  background-image: url("/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/tuscanytab2.jpg");}
.Trinsic {  background-image: url("/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/Trinsictab3.jpg");}
.StyleLine {  background-image: url("/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/StyleLinetab1.jpg");}
.Essence {  background-image: url("/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/Essencetab4.jpg");}
.Ultra {  background-image: url("/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/Ultratab1.jpg");}
.Aluminum {  background-image: url("/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/aluminumtab1.jpg");}
.QuietLine {  background-image: url("/imageserver/UserMedia/YWPGALLERY/Milgard/TabImages/Quiettab4.jpg");}
.MilgardStyles {
  height: 250px;
  padding: 4em 0;
}
.VerticalTabBox {
  display: flex;
}
.tab {
  float: left;
  padding: 3em;
  background-color: #f1f1f1;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.openTab {
}
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 1em;
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 1.125em;
}
.tab button:hover {
  background-color: #ddd;
}
.tab button.active {
  background-color: #ccc;
}
.tabcontent {
}
.FeatureImg {
  width: 100%;
}
.FeatureDescript {
  width: 100%;
  height: 100%;
}
.Tab-col {
  width: 50%;
  padding: 1em 2em;
  display: inline-block;
  float: left;
}
.HeroIMG {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .Tab-Image {
    width: 100%;
  }
  .FeatureImg {
    width: 100%;
    overflow-y: hidden;
    height: 300px;
  }
  .Tab-col {
    height: 50%;
  }
  .tab {
    float: left;
    padding: 2em;
    width: 50%;
  }
  .Tab-col {
    width: 85%;
    padding: 1 em;
    display: inline-block;
    float: right;
  }
  .HeroIMG {
    width: 175%;
  }
}
@media only screen and (max-width: 414px) {
  .VerticalTabBox {
    display: block;
  }
  .openTab {
    display: block;
    float: unset;
    width: 100%;
  }
  .tab {
    display: block;
    float: unset;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .tab button {
    display: inline-block;
    padding: 0.3em 0;
  }
  .Tab-col {
    width: 100%;
    padding: 1em;
  }
  .HeroIMG {
    width: 250%;
  }
  .maincontent {
    padding: 0;
  }
}
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
  font-size: 125px;
  padding-top: 8%;
}
.carousel,
.carousel-inner,
.carousel-inner .item {
  width: 100vw;
  margin: auto;
}
.item:nth-child(1) {
  height: 100%;
}
.item:nth-child(2) {
  height: 100%;
}
.item:nth-child(3) {
  height: 100%;
}
.item:nth-child(4) {
  height: 100%;
}
@media (max-width: 750px) {
  .carousel-fade .carousel-control {
    padding-top: 0% !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 500px) {
  .carousel-fade .carousel-control {
    padding-top: 0% !important;
  }
}