It supposed to show two different images by moving the slider to the left or right.
enter image description here
However, i got this error.
enter image description here
Seems like the setProperty isnt working properly as I wished and I tried to use plain CSS they complained about
enter image description here
So probably the javascript isnt working properly?
Does anyone know what's the problem is? thanks
HTML
<main>
<div class="container">
<div class="image-container">
<img class="image-before slider-image"
src="/img/before.png" alt="before image">
<img class="image-after slider-image"
src="/img/after.png" alt="before image">
</div>
<input type="range" min="0" step="10" max="100" value="50" class="slider" aria-label="Percentage of before photo shown" />
<div class="slider-line">
<div class="slider-button" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="96" y1="128" x2="16" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="48 160 16 128 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="160" y1="128" x2="240" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="208 96 240 128 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
</div>
</div>
</div>
</main>
SCSS
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
$white : #dddddd;
$position: 50%;
$box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
img {
display: block;
max-width: 100%;
}
main {
display: grid;
place-items: center;
min-height: 100vh;
}
.container {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
position: $position;
}
.image-container {
max-width: 800px;
max-height: 90vh;
aspect-ratio: 1/1;
}
.slider-image{
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before {
position: absolute;
inset: 0;
width: $position;
}
.slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
// for firefox
width: 100%;
height: 100%;
&:focus-visible ~ .slider-button{
outline: 5px solid black;
outline-offset: 3px;
}
}
// .slider:focus-visible ~ .slider-button {
// outline: 5px solid black;
// outline-offset: 3px;
// }
.slider-line {
position: absolute;
inset: 0;
width: 0.2rem;
height: 100%;
background-color: $white;
z-index: 10;
left: $position;
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: $white;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: $position;
transform: translateX(-50%);
pointer-events: none;
z-index: 100;
box-shadow: $box-shadow;
}
JS
const container = document.querySelector(".container");
document.querySelector(".slider").addEventListener("input", (e) => {
container.style.setProperty(`$position`), `${e.target.value}%`;
});
I think you're closing the parenthesis pair of setProperty early. ${e.target.value}% is the second argument of this function call.
Also, the property set, is position (just as it is in CSS), not $position
document.querySelector(".slider").addEventListener("input", (e) => {
container.style.setProperty(`position`, `${e.target.value}%`);
});
The answer was already solved :
It seems like due to the (What runs) chrome extension, this issue is occurring.
Error handling response: TypeError: self.processResponse is not a function
If it didn't help you, just tell me.
I figured out two problems in here. First is the parenthesis closed wrongly. Second is SASS is a CSS preprocessor, which means that all SASS specific information disapears when you compile it to CSS. How to control Sass Variable with javascript
hence, here is my solution
scss
$position: 50%;
.container {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: var(--position, $position);}
.image-before {
position: absolute;
inset: 0;
width: var(--position, $position);
}
.slider-line {
position: absolute;
inset: 0;
width: 0.2rem;
height: 100%;
background-color: $white;
z-index: 10;
left: var(--position, $position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: $white;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position, $position);
transform: translateX(-50%);
pointer-events: none;
z-index: 100;
box-shadow: $box-shadow;
}
app.js
const container = document.querySelector(".container");
document.querySelector(".slider").addEventListener("input", (e) => {
container.style.setProperty(`--position`, `${e.target.value}%`);
});```
hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND
replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">
I'm having trouble with positioning of my design. The idea was to create a circle flow with a text-box on hover in the middle. I've made it works on my website but whenever I decrease the screen resolution, it's messed up. I'm new with css, and wondering if there's any simple way to create this design?
.circle {
width: 170px;
height: 170px;
border-radius: 85px;
background: rgba(76, 175, 80, 0.1);
border-style: solid;
border-color: #00fcff;
}
.hoverWrapper1:hover #hoverShow1 {
display: block;
}
.hoverWrapper1 #hoverShow1 {
display: none;
}
.hoverWrapper2:hover #hoverShow2 {
display: block;
}
.hoverWrapper2 #hoverShow2 {
display: none;
}
.hoverWrapper3:hover #hoverShow3 {
display: block;
}
.hoverWrapper3 #hoverShow3 {
display: none;
}
.hoverWrapper4:hover #hoverShow4 {
display: block;
}
.hoverWrapper4 #hoverShow4 {
display: none;
}
.hoverWrapper5:hover #hoverShow5 {
display: block;
}
.hoverWrapper5 #hoverShow5 {
display: none;
}
.hoverWrapper6:hover #hoverShow6 {
display: block;
}
.hoverWrapper6 #hoverShow6 {
display: none;
}
.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #00fcff;
}
.absolute {
position: absolute;
top: 29%;
width: 400px;
height: 300px;
right: 50%;
border: 1px solid #00fcff;
padding: 7px;
font-size: 80%;
background: rgba(76, 175, 80, 0.1);
}
<div class="hoverWrapper1">
<button class="circle" style="position:absolute; top: 3%; right: 63%; color:#00fcff; font-size: 120%;">Strategy</button>
<div id="hoverShow1" class="absolute" style="color: white;">Even strategy is no longer what it used to be. We all live in a VUCA World. (volatile, uncertain, complex and ambiguous) and the 20th Century style business plans will be obsolete before implementation begins. We will help you prepare, act and respond to this new order – we can even fast track your team’s learning just when they need it.<</div></div>
<div class="hoverWrapper2">
<button class="circle" style="position:absolute; top: 27%;right: 30%; color:#00fcff;font-size: 120%;">Employees</button>
<div id="hoverShow2" class="absolute">block B</div></div>
<div class="hoverWrapper3">
<button class="circle" style="position:absolute; top:27%;right: 95%; color:#00fcff;font-size: 120%;">Customers</button>
<div id="hoverShow3" class="absolute">block C</div></div>
<div class="hoverWrapper4">
<button class="circle" style="position:absolute; top: 55%;right: 30%; color:#00fcff;font-size: 120%;">Business Model</button>
<div id="hoverShow4" class="absolute">block D</div></div>
<div class="hoverWrapper5">
<button class="circle" style="position:absolute; top: 55%;right: 95%; color:#00fcff;font-size: 120%;">Markets</button>
<div id="hoverShow5" class="absolute">block E</div></div>
<div class="hoverWrapper6">
<button class="circle" style="position:absolute; top: 75%;right: 63%; color:#00fcff;font-size: 120%;">Change</button>
<div id="hoverShow6" class="absolute">block F</div></div>
https://jsfiddle.net/luxs_/axshfe1z/3/
I am have trouble on making two buttons to stick to both sides.
Here is the css file
#projects h2{
color:#374054;
margin-bottom:10px;
}
#projects{
background-color:#f9f8fd;
padding:10px 10px;
border-bottom:1px solid #dcd9d9;
text-align:center;
}
.projects {
position: relative;
}
.slider {
max-width: 100%;
height: 500px;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-type: x mandatory;
position: relative;
}
[aria-label="projects"]:focus {
outline: 4px solid DodgerBlue;
outline-offset: -3px;
}
[aria-label="projects"] ul {
display: flex;
}
[aria-label="projects"] li {
list-style: none;
flex: 0 0 100%;
padding: 2rem;
height: 60vh;
scroll-snap-align: center;
scroll-snap-stop: always;
}
[aria-label="projects"] figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
[aria-label="projects"] img {
max-height: calc(100% - 2rem);
max-width: 100%;
margin-top: 2rem;
}
#instructions {
position: relative;
}
#instructions p {
padding: 1rem;
text-align: center;
color: #fefefe;
background-color: #111;
}
#focus, #hover, #hover-and-focus, #touch {
display: none;
}
[aria-label="projects"]:hover:focus + #instructions #hover-and-focus {
display: block;
}
#instructions svg {
height: 1.5rem;
width: 1.5rem;
fill: #fff;
vertical-align: -0.5rem;
}
.touch #instructions p {
display: none !important;
}
.touch #instructions #touch {
display: block !important;
}
[aria-label="projects controls"] li {
list-style: none;
}
[aria-label="projects controls"] button {
/* position:absolute; */
top: 0;
background: #111;
color: #fff;
border: 2px solid #111;
border-radius: 0;
width: 3rem;
height: calc(60vh + 4px);
}
#previous {
left: 0;
}
#next {
right: 0;
}
button svg {
width: 2rem;
height: 2rem;
}
here is html file
<div id="projects">
<h2 class="heading">Projects</h2>
<svg style="display:none">
<symbol id="arrow-left" viewBox="0 0 10 10">
<path fill="currentColor" d="m9 4h-4v-2l-4 3 4 3v-2h4z"/>
</symbol>
<symbol id="arrow-right" viewBox="0 0 10 10">
<path fill="currentColor" d="m1 4h4v-2l4 3-4 3v-2h-4z"/>
</symbol>
</svg>
<div class="projects">
<div class="slider" aria-describedby="instructions" role="region" aria-label="projects">
<ul>
<li>
<figure>
<img src="images/1.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/2.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/3.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/4.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/5.jpg">
</figure>
</li>
</ul>
</div>
<div id="instructions">
<p id="hover-and-focus">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</p>
</div>
</div>
</div>
Here is the js file
const projects = document.querySelector('[aria-label="projects"]')
const slides = projects.querySelectorAll('li')
const instructions = document.getElementById('instructions')
const observerSettings = {
root: projects,
rootMargin: '-10px'
}
if ('IntersectionObserver' in window) {
const callback = (slides, observer) => {
Array.prototype.forEach.call(slides, function(entry) {
entry.target.classList.remove('visible')
if (!entry.intersectionRatio > 0) {
return
}
let img = entry.target.querySelector('img')
if (img.dataset.src) {
img.setAttribute('src', img.dataset.src)
img.removeAttribute('data-src')
}
entry.target.classList.add('visible')
})
}
const observer = new IntersectionObserver(callback, observerSettings)
Array.prototype.forEach.call(slides, t => observer.observe(t))
const controls = document.createElement('ul')
controls.setAttribute('aria-label', 'projects controls')
controls.innerHTML = `
<li>
<button id="previous" aria-label="previous">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
</button>
</li>
<li>
<button id="next" aria-label="next">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</button>
</li>
`
instructions.parentNode.insertBefore(controls, instructions.nextElementSibling)
instructions.parentNode.style.padding = '0 3rem'
function scrollIt (slideToShow) {
let scrollPos = Array.prototype.indexOf.call(slides, slideToShow) * (projects.scrollWidth / slides.length)
projects.scrollLeft = scrollPos
}
function showSlide (dir, slides) {
let visible = document.querySelectorAll('[aria-label="projects"] .visible')
let i = dir === 'previous' ? 0 : 1
if (visible.length > 1) {
scrollIt(visible[i])
} else {
let newSlide = i === 0 ? visible[0].previousElementSibling : visible[0].nextElementSibling
if (newSlide) {
scrollIt(newSlide)
}
}
}
controls.addEventListener('click', function (e) {
showSlide(e.target.closest('button').id, slides)
})
} else {
Array.prototype.forEach.call(slides, function (s) {
let img = s.querySelector('img')
img.setAttribute('src', img.getAttribute('data-src'))
})
}
I want to make a slide picture show with control buttons to control left and right. However, both buttons were put right below the image and align at the center with left button at the top and right button at bottom. I don't know how to solve this.
you place the buttons inside the slider wrapper the left before the ul of images and right after and you use position absolute
#projects h2{
color:#374054;
margin-bottom:10px;
}
#projects{
background-color:#f9f8fd;
padding:10px 10px;
border-bottom:1px solid #dcd9d9;
text-align:center;
}
.projects {
position: relative;
}
.slider {
max-width: 100%;
height: 500px;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-type: x mandatory;
position: relative;
}
[aria-label="projects"]:focus {
outline: 4px solid DodgerBlue;
outline-offset: -3px;
}
[aria-label="projects"] ul {
display: flex;
}
[aria-label="projects"] li {
list-style: none;
flex: 0 0 100%;
padding: 2rem;
height: 60vh;
scroll-snap-align: center;
scroll-snap-stop: always;
}
[aria-label="projects"] figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
[aria-label="projects"] img {
max-height: calc(100% - 2rem);
max-width: 100%;
margin-top: 2rem;
}
#instructions {
position: relative;
}
#instructions p {
padding: 1rem;
text-align: center;
color: #fefefe;
background-color: #111;
}
#focus, #hover, #hover-and-focus, #touch {
display: none;
}
[aria-label="projects"]:hover:focus + #instructions #hover-and-focus {
display: block;
}
#instructions svg {
height: 1.5rem;
width: 1.5rem;
fill: #fff;
vertical-align: -0.5rem;
}
.touch #instructions p {
display: none !important;
}
.touch #instructions #touch {
display: block !important;
}
[aria-label="projects controls"] li {
list-style: none;
}
[aria-label="projects controls"] button {
/* position:absolute; */
top: 0;
background: #111;
color: #fff;
border: 2px solid #111;
border-radius: 0;
width: 3rem;
height: calc(60vh + 4px);
}
#previous {
position:absolute;
left: 0;
}
#next {
position:absolute;
right: 0;
}
button svg {
width: 2rem;
height: 2rem;
}
here is html file
<div id="projects">
<h2 class="heading">Projects</h2>
<svg style="display:none">
<symbol id="arrow-left" viewBox="0 0 10 10">
<path fill="currentColor" d="m9 4h-4v-2l-4 3 4 3v-2h4z"/>
</symbol>
<symbol id="arrow-right" viewBox="0 0 10 10">
<path fill="currentColor" d="m1 4h4v-2l4 3-4 3v-2h-4z"/>
</symbol>
</svg>
<div class="projects">
<div class="slider" aria-describedby="instructions" role="region" aria-label="projects">
<li>
<button id="previous" aria-label="previous">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
</button>
</li>
<ul>
<li>
<figure>
<img src="images/1.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/2.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/3.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/4.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/5.jpg">
</figure>
</li>
</ul>
<li>
<button id="next" aria-label="next">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</button>
</li>
</div>
<div id="instructions">
<p id="hover-and-focus">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</p>
</div>
</div>
</div>
`
I have been trying to figure out how to place an SVG play button instead of a png, but I can't seem to figure it out. That's basically all I'm trying to do here. I've been trying different things but nothing has been working.
All help would be greatly appreciated.
https://jsfiddle.net/f6gvesLx/
Play SVG
<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg>
Below is the code format I'm using:
<style>
html, body {
height: 100%;
background: #000;
color: #fff;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.wrap {
max-width: 400px;
position: relative;
margin: auto;
border: 0px solid #5CB378;
}
.inner {
position: relative;
height: 0;
padding-bottom: 100%;
cursor: pointer;
background-color: black;
}
#thevideo, .image {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
background-color: #000000;
cursor: pointer;
overflow: hidden;
}
#thevideo iframe {
width: 100%;
height: 100%;
border: 0px;
}
.image {
background: url('http://via.placeholder.com/400x400');
background-size: cover;
border-radius: 50px;
}
.image:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(https://i.imgur.com/WSlJUPf.png);
background-repeat: no-repeat;
background-size: 24.5% Auto;
background-position: 50% 50%;
}
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> </div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0'id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe></div>
</div>
</div>
</div>
</div>
You are on the right path:
Remove the background image code from your css.
Then place your svg into your div that has the image class.
Then give the svg the image class as well.
Please refer to this JSFiddle that I forked: https://jsfiddle.net/0xehdwe7/
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<svg class="image" width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
</svg>
</div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0' id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe>
</div>
</div>
</div>
</div>
</div>