bubble/belazi-landing
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/belazi-landing.git synced 2026-10-11 10:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Изменение по верстке и JS

Browse Source
This commit is contained in:
Sergey Yarkov 2019-09-01 01:57:33 +03:00
parent 2f8b231066
commit ce07066f6c
4 changed files with 133 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -372,28 +372,88 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="wrap-questions__item"> <div class="wrap-questions__item">
<p> <p>
1.<a href="#">Как заказать деталь правильно?</a> 1.<a>Как заказать деталь правильно?</a>
</p> </p>
<div class="question-content">
<span class="tooltip-close">
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
</span>
<p>
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. <br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
</div>
</div> </div>
<div class="wrap-questions__item"> <div class="wrap-questions__item">
<p> <p>
<span>2.</span><a href="#">Что делать, если запчасть не понадобилась?</a> <span>2.</span><a>Что делать, если запчасть не понадобилась?</a>
</p> </p>
<div class="question-content">
<span class="tooltip-close">
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
</span>
<p>
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. <br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
</div>
</div> </div>
<div class="wrap-questions__item"> <div class="wrap-questions__item">
<p> <p>
3.<a href="#">Можете ли Вы установить деталь?</a> 3.<a>Можете ли Вы установить деталь?</a>
</p> </p>
<div class="question-content">
<span class="tooltip-close">
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
</span>
<p>
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. <br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
</div>
</div> </div>
<div class="wrap-questions__item"> <div class="wrap-questions__item">
<p> <p>
4.<a href="#">В чем преимущества оригинальных деталей?</a> 4.<a>В чем преимущества оригинальных деталей?</a>
</p> </p>
<div class="question-content">
<span class="tooltip-close">
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
</span>
<p>
4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. <br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
</div>
</div> </div>
<div class="wrap-questions__item"> <div class="wrap-questions__item">
<p> <p>
5.<a href="#">В чем преимущества оригинальных деталей?</a> 5.<a>В чем преимущества оригинальных деталей?</a>
</p> </p>
<div class="question-content">
<span class="tooltip-close">
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
</span>
<p>
5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. <br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
</div>
</div> </div>
<div class="more-questions"> <div class="more-questions">
<p> <p>

BIN
src/img/main-questions/tooltip-close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 B

16
src/js/index.js
View File

@ -23,4 +23,18 @@ $('.owl-carousel').owlCarousel({
nav: true nav: true
} }
} }
}) });
// Questions Tooltip
const links = document.querySelectorAll('.wrap-questions__item a');
links.forEach((link) => {
link.addEventListener('click', () => {
const contentTollTip = link.parentNode.parentNode.querySelector('.question-content');
const contentTollTipClose = link.parentNode.parentNode.querySelector('.tooltip-close');
contentTollTipClose.addEventListener('click', () => {
contentTollTip.style.display = 'none';
contentTollTip.classList.remove('fade');
});
contentTollTip.classList.add('fade');
contentTollTip.style.display = 'block';
});
});

68
src/styles/style.css
View File

@ -78,7 +78,35 @@ input {
font-family: 'ProximaNovaRegular'; font-family: 'ProximaNovaRegular';
text-transform: uppercase; text-transform: uppercase;
} }
/* Fade Animation */
.fade {
-webkit-animation-name: fade;
animation-name: fade;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: fade;
-webkit-animation-duration: 0.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.1;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0.1;
}
to {
opacity: 1;
}
}
.container { .container {
max-width: 1170px; max-width: 1170px;
} }
@ -579,7 +607,30 @@ header {
height: 20px; height: 20px;
position: absolute; position: absolute;
} }
.question-content {
background-color: #fff;
color: #000;
font-family: 'ProximaNovaRegular';
padding: 15px 15px 20px 15px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
width: 330px;
font-size: 14px;
position: absolute;
margin-left: 30px;
margin-top: 35px;
display: none;
}
.question-content::before {
border: 20px solid transparent;
border-bottom: 20px solid #fff;
content: '';
position: absolute;
top: -40px;
}
.tooltip-close {
float: right;
cursor: pointer;
}
/* Section Working */ /* Section Working */
#working { #working {
padding-top: 100px; padding-top: 100px;
@ -781,18 +832,3 @@ footer {
font-family: 'ProximaNovaBlack'; font-family: 'ProximaNovaBlack';
font-size: 21px; font-size: 21px;
} }
/* #info,
#price,
#advantages,
#detail,
#guarantees,
#discount,
#working,
#stock,
#team,
#advice,
#come,
#map,
footer {
display: none;
} */