I am working on this tab-model and got some issue with it. I was just going through the tab-models and found this interesting. But what I found is only three tabs. So, as far as I know, I've added the code for the fourth tab but It is not being displayed. There is some miscalculation with the rotation.
.perspective {
perspective: 76em;
perspective-origin: 50% 50px;
width: 494px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: #fff;
text-align: center;
}
input {
display: none;
}
.tab {
position: absolute;
width: 60px;
height: 47px;
background: pink;
right: 10px;
line-height: 47px;
font-weight: 300;
}
.tab:nth-child(1) {
top: -5px;
background: #06d6a0;
}
.tab:nth-child(2) {
top: 53px;
background: #1b9aaa;
}
.tab:nth-child(3) {
top: 112px;
background: #ef476f;
}
.tab:nth-child(4) {
top: 170px;
background: GREEN;
}
.cube {
position: relative;
margin: 60px auto 0;
width: 300px;
height: 200px;
transform-origin: 0 100px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in;
}
.tab-content {
width: 300px;
height: 200px;
position: absolute;
}
.tab-content h1 {
font-size: 25px;
margin: 75px 0 10px;
font-weight: 300;
}
.tab-content p {
font-size: 12px;
}
.tab-content:nth-child(1) {
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top left;
background: #06d6a0;
}
.tab-content:nth-child(2) {
transform: translateZ(100px);
background: #1b9aaa;
}
.tab-content:nth-child(3) {
transform: rotateX(-90deg) translateY(100px);
transform-origin: bottom center;
background: #ef476f;
}
.tab-content:nth-child(4) {
transform: rotateX(25deg) translateY(-20px);
transform-origin: bottom center;
background: #9f476f;
}
#tab-top:checked~.cube {
transform: rotateX(-90deg);
}
#tab-front:checked~.cube {
transform: rotateX(0deg);
}
#tab-bottom:checked~.cube {
transform: rotateX(90deg);
}
#tab-back:checked~.cube {
transform: rotateX(45deg);
}
<h4>Standard Accordion with A little styling</h4>
<div class="perspective">
<label class="tab" for="tab-top">TOP</label>
<label class="tab" for="tab-front">FRONT</label>
<label class="tab" for="tab-bottom">BOTTOM</label>
<label class="tab" for="tab-bottom">BACK</label>
<input type="radio" name="tabs" id="tab-top">
<input type="radio" name="tabs" id="tab-front">
<input type="radio" name="tabs" id="tab-bottom">
<input type="radio" name="tabs" id="tab-back">
<div class="cube">
<div class="tab-content">
<h1>TOP CONTENT</h1>
<p>THIS IS AWESOME</p>
</div>
<div class="tab-content">
<h1>FRONT CONTENT</h1>
<p>THIS IS COOL</p>
</div>
<div class="tab-content">
<h1>BOTTOM CONTENT</h1>
<p>THIS IS SWEET</p>
</div>
<div class="tab-content">
<h1>BACK CONTENT</h1>
<p>THIS IS SPECTACULAR</p>
</div>
</div>
</div>
You missed to change the class for last item.
Now:
<label class="tab" for="tab-bottom">BACK</label>
And It should be:
<label class="tab" for="tab-back">BACK</label>
Looks like you just need to change
<label class="tab" for="tab-bottom">BACK</label>
to
<label class="tab" for="tab-back">BACK</label>
You have duplicated the tab-bottom label.
Please see this fiddle for a fully working example.
Related
I found this slider in JSFiddle on https://www.cssscript.com/demo/full-width-horizontal-page-slider-with-pure-html-css/ and I have changed it little bit.
I am trying to slide the sections automatically every 5 seconds in a loop. Currently, it slides down every 5 seconds but if you just visit the page and click Section Four on the header in 3rd second, after 2 seconds later it will bring you to 2nd slide but actually it should've brought you to 1st section.
I have tried to find something on thus but unfortunately, my knowledge on this very limited. Your help is much appreciated.
JSFiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
</style>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
var variableToCancelInterval = setInterval(function () {
$(".slide2").click();
}, 5000);
var variableToCancelInterval = setInterval(function () {
$(".slide3").click();
}, 10000);
var variableToCancelInterval = setInterval(function () {
$(".slide4").click();
}, 15000);
var variableToCancelInterval = setInterval(function () {
$(".slide1").click();
}, 20000);
</script>
</body>
</html>
You can use setInterval() like this
var i = 0;
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
i = $(this).index() + 1;
});
var Interval = setInterval(function(){
i = (i === $('.btn').length) ? 1 : i + 1;
$('.btn.slide'+i).click();
} , 5000);
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
.btn.active{
background : #62ce36;
color : #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider</title>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
</script>
</body>
</html>
I wanted to color those labels under <div class="navigation"> as black whenever is active on the image. I've tried writing #r1:checked~.navigation label:nth-child(1){ background: #000; } in CSS but it doesn't work. Any help would be appreciated, I am new to web development.
Thank you~
.slidershow {
width: 1000px;
height: 600px;
border: 10px solid #ccc;
overflow: hidden;
}
.middle {
position: relative;
}
.navigation {
position: relative;
justify-content: center;
align-items: center;
right: auto;
display: flex;
}
.bar {
width: 20px;
height: 20px;
border: 2px solid rgba(0, 0, 0, .3);
margin: 6px;
cursor: pointer;
transition: .4s;
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 500%;
height: 100%;
display: flex;
position: relative;
}
.slide {
width: 20%;
transition: .6s;
}
.slide img {
width: 100%;
height: 100%;
}
.bar:hover {
background: #E3DFFF;
}
.bar:active {
background: #000;
}
#r1:checked~.s1 {
margin: 0%;
}
#r2:checked~.s1 {
margin-left: -20%;
}
#r3:checked~.s1 {
margin-left: -40%;
}
<!-- ##Slider## -->
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<div class="slide s1">
<img src="https://dummyimage.com/600x400/000000/00bf16&text=First+Image" alt="">
</div>
<div class="slide">
<img src="https://dummyimage.com/600x400/000000/00bf16&text=Second+Image" alt="">
</div>
<div class="slide">
<img src="https://dummyimage.com/600x400/000000/00bf16&text=Third+Image" alt="">
</div>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
</div>
I'm trying to make a card that flipping on hover. To hide the back part of a card I use backface-visibility: hidden. But it only hides background of the back part while all the elements are still visible on the front side in rotated variant.
I use Google Chrome.
Here's my html code
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--1"></div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--1">
The sea explorer
</span>
</div>
<div class="card__details">
<ul class="card__list">
<li class="card__item">3 day tour</li>
<li class="card__item">Up to 30 people</li>
<li class="card__item">2 tour guides</li>
<li class="card__item">Sleep in cozy hotels</li>
<li class="card__item">Difficulty: easy</li>
</ul>
</div>
</div>
<div class="card__side card__side--back card__side--back-1">
<div class="card__cta">
<div class="card__price-box">
<p class="card__price--only">Only</p>
<p class="card__price--value">$297</p>
</div>
Book now
</div>
</div>
</div>
And here's my SASS code
.card {
position: relative;
height: 52rem;
perspective: 150rem;
&__side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 52rem;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .8s ease;
&--front {
background-color: $color-white;
}
&--back {
transform: rotateY(180deg);
&-1 {
background-image:
linear-gradient(to right bottom,$color-secondary-light,$color-secondary-dark);
}
&-2 {}
&-3 {}
}
}
&:hover &__side--front {
transform: rotateY(-180deg);
}
&:hover &__side--back {
transform: rotateY(0);
}
// Front side styles
&__picture {
&--1 {}
&--2 {}
&--3 {}
}
&__heading {
}
&__heading-span {
&--1 {}
&--2 {}
&--3 {}
}
&__details {
}
&__list {
width: 80%;
margin: 0 auto;
list-style-type: none;
}
&__item {
&:not(:last-child) {
border-bottom: 1px solid $color-gray-light-2;
}
}
//Back side styles
&__cta {
#include absoluteCenter();
width: 90%;
text-align: center;
}
&__price-box {
margin-bottom: 6rem;
color: $color-black;
text-align: center;
}
&__price--only {
font-size: 1.4rem;
text-transform: uppercase;
}
&__price--value {
font-size: 6rem;
font-weight: 300;
}
}
And this is how the problem actually looks like in Chrome.
Adding transform-style: preserve-3d to .card instead of .card__side fixed the bug for me.
I am coding a simple landing page. In theory, each div you code will show below the previous one and so forth.
I made a little navbar and then expected the slider to appear below it. Then, I wanted to add an image below the slider (the one with brands' logos). Problem is, the image appears below the navbar. I am guessing there is something with the position of the slider but I can't figure out what it is.
I'd rather not use position: absolute or position: relative to position all my elements, so I am here to understand what the problem might be.
html {
font-family: "Arial", Helvetica, sans-serif;
}
/*---navigation--*/
.top-nav {
height: 105px;
display: flex;
align-items: center;
}
ul.main-nav {
display: flex;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
height: 40px;
}
ul.main-nav li {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-weight: 700;
color: #FCAF17;
}
ul.main-nav li:hover {
cursor: pointer;
color: #FFFFFF;
}
/* main slider */
.slider {
width: 100%;
height: 100%;
left: 0;
top: 25%;
opacity: 1;
z-index: 0;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-flow: row wrap;
-webkit-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* image slider position */
.slide1 {
position: absolute;
left: 0;
}
.slide2 {
position: absolute;
left: 100%;
}
.slide3 {
position: absolute;
left: 200%;
}
/* slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255, 255, 255, 0.2);
margin: 0 2px;
border: solid 1px rgba(255, 255, 255, 0.4);
cursor: pointer;
}
/* slider control */
input {
visibility: hidden;
}
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
/*----------slider end----------------*/
.box {
background-color: blue;
}
<!--navigation-->
<div class="top-nav">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/logo.jpg"></img>
</div>
<ul class="main-nav">
<li>HOMBRE</li>
<li>MUJER</li>
<li>NIÑOS</li>
<li>Carrito</li>
</ul>
<!--image slider-->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
<div class="brands">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/marcas.jpg">
</div>
Live demo
first thing you can add Position : relative and second add height to div like i added <div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<div class="css-slider-wrapper">
<div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<input name="slider" class="slide-radio1" checked="" id="slider_1" type="radio">
<input name="slider" class="slide-radio2" id="slider_2" type="radio">
<input name="slider" class="slide-radio3" id="slider_3" type="radio">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
use style :
.css-slider-wrapper {
position: relative;
}
.slide1 {
left: 0;
}
try it i thing it's work other give me Demo line https://jsfiddle.net/
I am making a website with images, while hovering the image, text appears slowly in the image
but after the transition is complete, the text disappears and hides behind the image like in the snippet below (snippet caused HTML to derp):
.keukens, .badkamers, .toiletten{
position:relative;
overflow:hidden;
height:300px;
padding:0;
}
.keukens:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.badkamers:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toiletten:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.container > .links > .keukens:hover .keukensText{
opacity:1;
}
.container > .links > .badkamers:hover .badkamersText{
opacity:1;
}
.container > .links > .toiletten:hover .toilettenText{
opacity:1;
}
.keukensText, .badkamersText, .toilettenText{
opacity:0;
transition: all 0.5s;
}
.keukensText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.badkamersText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.toilettenText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
<!--container-->
<div id="container" class="container">
<div class="links">
<div class="col-sm-4 keukens">
<div class="keukensText">
<a href="keukens.html">
<h2>
<span>Keukens</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 badkamers">
<div class="badkamersText">
<a href="badkamers.html">
<h2>
<span>Badkamers</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 toiletten">
<div class="toilettenText">
<a href="toiletten.html">
<h2>
<span>Toiletten</span>
</h2>
</a>
</div>
</div>
</div>
</div>
Can anybody help me with this? I've been stuck on this for quite a while and googled this question in so many ways but I couldn't find any answers. And now I am afraid it's going to be such a simple solution that I look like an idiot
Thank you in advance!
you need to relatively position these 3 elements .keukensText, .badkamersText, .toilettenText and it should work
Fixed. You needed to have the Text classes set to "position: absolute"
.keukens, .badkamers, .toiletten{
position:relative;
overflow:hidden;
height:300px;
padding:0;
}
.keukens a {
z-index: 40;
}
.keukens:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.badkamers:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toiletten:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.keukens:hover .keukensText{
opacity:1;
z-index: 4;
}
.badkamers:hover .badkamersText{
opacity:1;
}
.toiletten:hover .toilettenText{
opacity:1;
}
.keukensText, .badkamersText, .toilettenText{
opacity:0;
transition: all .5s;
position: absolute;
}
.keukensText h2 span {
color: black;
z-index: 50;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.badkamersText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.toilettenText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
<!--container-->
<div id="container" class="container">
<div class="links">
<div class="col-sm-4 keukens">
<div class="keukensText">
<a href="keukens.html">
<h2>
<span>Keukens</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 badkamers">
<div class="badkamersText">
<a href="badkamers.html">
<h2>
<span>Badkamers</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 toiletten">
<div class="toilettenText">
<a href="toiletten.html">
<h2>
<span>Toiletten</span>
</h2>
</a>
</div>
</div>
</div>
</div>