HTML Code
<section data-bootstrap-contains="containers" class="product">
<div data-bootstrap-contains="containers" class="container">
<div class="row align-items-center">
<div class="col-lg-2">
<ul role="tablist" class="nav nav-tabs flex-column">
<li role="presentation" class="nav-item"><a aria-selected="true" data-bs-target="#tab-1"
data-bs-toggle="tab" href="#tab-1" role="tab" class="nav-link scrollto active show"
data-uw-rm-brl="false">Double Hung</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-2"
data-bs-toggle="tab" href="#tab-2" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">Casement Windows</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-3"
data-bs-toggle="tab" href="#tab-3" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">3 Light Sliders</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-4"
data-bs-toggle="tab" href="#tab-4" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">2 Light Sliders</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-5"
data-bs-toggle="tab" href="#tab-5" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">Picture Windows</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-6"
data-bs-toggle="tab" href="#tab-6" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">Awning Windows</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-7"
data-bs-toggle="tab" href="#tab-7" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">Bow and Bay Windows</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-8"
data-bs-toggle="tab" href="#tab-8" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">European Tilt/Turn Oknoplast Windows</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-9"
data-bs-toggle="tab" href="#tab-9" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">Black Trim Windows</a></li>
<li role="presentation" class="nav-item"><a aria-selected="false" data-bs-target="#tab-10"
data-bs-toggle="tab" href="#tab-10" role="tab" tabindex="-1" class="nav-link scrollto"
data-uw-rm-brl="false">Sierra Pacific Windows</a></li>
</ul>
</div>
<div class="col-lg-10 mt-4 mt-lg-0">
<div class="tab-content">
<div id="tab-1" role="tabpanel" class="tab-pane active show">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/double-hung" data-uw-rm-brl="false">Double Hung</a></h2>
<p>Double-hung windows provide the ideal combination of value, durability and beauty,
and are available in an array of colors, materials and price ranges. They're ideal
for practically every type of home, and no other Rochester or Buffalo, NY window
company can match Wonder Windows™, when it comes to affordable double-hung window
installation.</p> <a href="/windows/double-hung" class="btn btn-primary"
data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a living room filled with furniture and a fire place"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/double-hung-bg.jpg"
class="img-fluid" data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-2" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/casement" data-uw-rm-brl="false">Casement Windows</a></h2>
<p>Wildly-popular among owners of older, vintage and custom homes, Casement windows are
perfect for those wanting style, convenience and years of weather-resistant
performance. Wonder Windows™ guarantees the best price and selection on Casement
windows in Rochester and Buffalo, NY.</p> <a href="/windows/casement"
class="btn btn-primary" data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a living room filled with furniture and a large window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/casement-bg.jpg"
class="img-fluid rounded" data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-3" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/sliding-windows" data-uw-rm-brl="false">3 Light Sliders</a></h2>
<p>Perfect for homes, buildings, apartments and commercial properties, sliding windows
are extremely-durable, easy to clean and require little to no maintenance. They can
substantially open wide the natural light and ventilation of any room, and also
double as an emergency exit or escape option.</p> <a href="/windows/sliding-windows"
class="btn btn-primary" data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a living room filled with furniture and a large window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/3slide-bg.jpg" class="img-fluid"
data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-4" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/sliding-windows" data-uw-rm-brl="false">2 Light Sliders</a></h2>
<p>Perfect for homes, buildings, apartments and commercial properties, sliding windows
are extremely-durable, easy to clean and require little to no maintenance. They can
substantially open wide the natural light and ventilation of any room, and also
double as an emergency exit or escape option.</p> <a href="/windows/sliding-windows"
class="btn btn-primary" data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a living room filled with furniture and a large window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/casement-bg.jpg"
class="img-fluid" data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-5" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/picture" data-uw-rm-brl="false">Picture Windows</a></h2>
<p>Does your Rochester or Buffalo, NY home still have its original picture windows? If
so, you're likely wasting a good deal of energy each month. Wonder Windows™ can
replace your old picture window, with an innovative UV & solar-reflecting model
that will pay for itself, as it gradually helps in lowering heat & cooling
bills. Best of all, it will look incredible on your home!</p> <a
href="/windows/picture" class="btn btn-primary" data-uw-rm-brl="false">Picture
Windows</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a living room filled with furniture and a large window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/3slide-bg.jpg" class="img-fluid"
data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-6" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/awning" data-uw-rm-brl="false">Awning Windows</a></h2>
<p>If you like to leave the windows open during rainy days, you'll love Wonder Windows™
diverse selection of Awning windows. Choose from energy-efficient awning windows, or
models designed specifically with the purpose of withstanding harsh weather
conditions over many years.</p> <a href="/windows/awning" class="btn btn-primary"
data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a living room filled with furniture and a large window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/casement-bg.jpg"
class="img-fluid" data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-7" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/bay-bow" data-uw-rm-brl="false">Bow and Bay Windows</a></h2>
<p>Not only can these windows improve the value of your home, but they are also
configured to increase the amount of natural light and ventilation that gets
through. Expanded views are also a big benefit. Wonder Windows™ has a wide selection
of bay or bow windows to suit any budget and our experts can help you select the
style that is perfect for your space.</p> <a href="/windows/bay-bow"
class="btn btn-primary" data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a bedroom with a bed and a large window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/bow-bay-bg.jpg"
class="img-fluid" data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-8" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/oknoplast-pixel" data-uw-rm-brl="false">European Tilt/Turn
Oknoplast Windows</a></h2>
<p>OKNOPLAST, With their remarkably innovative European tilt & turn design, rugged
durability and the freedom to choose from over 60 colors and limitless customization
options, OKNOPLAST Windows have been the leading brand of windows in Europe for
years. Wonder Windows™ is an authorized OKNOPLAST Window dealer and here to help you
find the perfect look for your home.</p> <a href="/windows/oknoplast-pixel"
class="btn btn-primary" data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a living room filled with furniture and a large window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/oknoplast-bg.jpg"
class="img-fluid" data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-9" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/black-trim-windows" data-uw-rm-brl="false">Black Trim Windows</a>
</h2>
<p>If the increase in black window frames has you thinking that your eyes might be
playing tricks on you, they’re not. Black vinyl windows are one of the industry’s
hottest trends right now, and more and more homeowners are fast discovering what a
beautiful impact they can have on the appearance and appeal of their home.</p> <a
href="/windows/black-trim-windows" class="btn btn-primary"
data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a kitchen with a sink and a window"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/black-trim-bg.jpeg"
class="img-fluid" data-uw-rm-ima="ai"></div>
</div>
</div>
<div id="tab-10" role="tabpanel" class="tab-pane">
<div class="row">
<div class="col-lg-7 product__details order-2 order-lg-1">
<h2><a href="/windows/sierra-pacific-windows" data-uw-rm-brl="false">Sierra Pacific
Windows</a></h2>
<p>For those seeking windows uniting the highest levels of durability, energy efficiency
and timeless beauty, Sierra Pacific remains unsurpassed among homeowners and
contractors, alike. We are a distributor of Sierra Pacific Windows in Rochester NY,
Wonder Windows is proud to be a part of their official Northeast launch.</p> <a
href="/windows/sierra-pacific-windows" class="btn btn-primary"
data-uw-rm-brl="false">View More</a>
</div>
<div class="col-lg-5 text-center order-1 order-lg-2 mt-1 mb-1"><img
alt="a house with a sign in front"
src="https://media.cmsmax.com/d3xadgynuglafnjbqq2la/sierrapacific-bg.jpg"
class="img-fluid" data-uw-rm-ima="ai"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.products-page {
.product {
overflow: hidden;
padding: 40px 0;
.nav-tabs {
border: 0;
}
.nav-link {
border: 0;
padding: 12px 15px;
transition: 0.3s;
color: #000;
border-radius: 0;
border-right: 2px solid $primary;
font-weight: 600;
font-size: 15px;
}
.nav-link:hover {
color: $secondary;
}
.nav-link.active {
color: #fff;
background: $primary;
border-color: $primary;
}
.nav-link:hover {
border-color: $secondary;
}
.tab-pane.active {
-webkit-animation: fadeIn 0.5s ease-out;
animation: fadeIn 0.5s ease-out;
}
&__details h3 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
color: #000;
}
&__details p {
color: #000;
}
&__details p:last-child {
margin-bottom: 0;
}
@media (max-width: 992px) {
.nav-link {
border: 0;
padding: 15px;
}
}
.bottom-btn {
.btn {
white-space: break-spaces;
}
}
}
}
Java Script for mobile scroll
function myFunction(x) {
if (x.matches) {
$(document).ready(function () {
$("a.scrollto").click(function (event) {
event.preventDefault();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 100);
});
});
}
}
var x = window.matchMedia("(max-width: 760px)")
myFunction(x)
x.addListener(myFunction)
