Commit 8340a570 authored by nursultan's avatar nursultan

support images for safari

parent 6f82b56a
......@@ -222,7 +222,7 @@ object {
.main-info::before {
content: '';
background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)), url("/assets/images/FP_landing_pic.webp");
background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)), url("/assets/images/FP_landing_pic.jpg");
background-repeat: no-repeat;
background-color: transparent;
background-size: cover;
......@@ -494,7 +494,7 @@ object {
.statistic-preview::before {
content: '';
background-image: url("/assets/images/static-bg.webp");
background-image: url("/assets/images/static-bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
......@@ -638,7 +638,7 @@ object {
/*** decision more styles start ***/
#decision {
background-image: url("/assets/images/decision-bg.webp");
background-image: url("/assets/images/decision-bg.jpg");
background-repeat: no-repeat;
background-color: transparent;
background-size: cover;
......@@ -854,7 +854,7 @@ object {
/*** usability more styles start ***/
#usability {
background-image: url("/assets/images/FP2_bg.webp");
background-image: url("/assets/images/FP2_bg.jpg");
background-repeat: no-repeat;
background-color: transparent;
background-size: cover;
......@@ -912,15 +912,19 @@ object {
background: rgba(255, 255, 255, 0.8);
}
.usability-card img {
.usability-card picture {
width: 100%;
height: 100%;
position: absolute;
/*filter: brightness(0.6);*/
filter: grayscale(100%);
transition: 0.5s;
}
.usability-card img{
width: 100%;
height: 100%;
}
.usability-card--tooltip {
visibility: hidden;
opacity: 0;
......@@ -1029,7 +1033,7 @@ object {
opacity: 1;
}
.usability-card:hover img {
.usability-card:hover picture {
filter: none;
}
......@@ -1045,7 +1049,7 @@ object {
#howItWorks::before {
content: '';
background-image: url("/assets/images/know-more---bg.webp");
background-image: url("/assets/images/know-more---bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
......
......@@ -77,7 +77,11 @@
<!------------- know more section start -------------------->
<section id="know-more">
<span></span>
<img src="../assets/images/know-more---bg.webp" loading="lazy" alt="bg">
<picture>
<source srcset="assets/images/know-more---bg.webp" type="image/webp"/>
<source srcset="assets/images/know-more---bg.jpg" type="image/jpg"/>
<img src="assets/images/know-more---bg.jpg" alt="bg"/>
</picture>
<div class="know-more--title">
<p>Current manufacturing challenges</p>
</div>
......@@ -219,7 +223,11 @@
<div class="usability-cards">
<div class="usability-card" data-direction="right">
<span class="usability-card--title">OIL AND GAS</span>
<img src="../assets/images/usability-img-1.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-1.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-1.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-1.jpg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>OIL AND GAS</span>
......@@ -236,7 +244,11 @@
</div>
<div class="usability-card" data-direction="bottom">
<span class="usability-card--title">FMCG</span>
<img src="../assets/images/usability-img-2.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-2.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-2.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-2.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>FMCG</span>
......@@ -254,7 +266,11 @@
</div>
<div class="usability-card" data-direction="left">
<span class="usability-card--title">DISCRETE MANUFACTURING</span>
<img src="../assets/images/usability-img-3.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-3.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-3.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-3.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>DISCRETE MANUFACTURING</span>
......@@ -272,7 +288,11 @@
</div>
<div class="usability-card" data-direction="right">
<span class="usability-card--title">MINING</span>
<img src="../assets/images/usability-img-4.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-4.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-4.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-4.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>MINING</span>
......@@ -289,7 +309,11 @@
</div>
<div class="usability-card" data-direction="top">
<span class="usability-card--title">ENERGY AND TRANSPORTATION</span>
<img src="../assets/images/usability-img-5.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-5.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-5.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-5.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>ENERGY AND TRANSPORTATION</span>
......@@ -306,7 +330,11 @@
</div>
<div class="usability-card" data-direction="left">
<span class="usability-card--title">SMART CITY</span>
<img src="../assets/images/usability-img-6.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-6.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-6.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-6.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>SMART CITY</span>
......
......@@ -79,7 +79,11 @@
<!------------- know more section start -------------------->
<section id="know-more">
<span></span>
<img src="assets/images/know-more---bg.webp" loading="lazy" alt="bg">
<picture>
<source srcset="assets/images/know-more---bg.webp" type="image/webp"/>
<source srcset="assets/images/know-more---bg.jpg" type="image/jpg"/>
<img src="assets/images/know-more---bg.jpg" alt="bg"/>
</picture>
<div class="know-more--title">
<p>Современные проблемы на производстве</p>
</div>
......@@ -221,7 +225,11 @@
<div class="usability-cards">
<div class="usability-card" data-direction="right">
<span class="usability-card--title">нефть и газ</span>
<img src="assets/images/usability-img-1.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-1.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-1.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-1.jpg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>нефть и газ</span>
......@@ -238,7 +246,11 @@
</div>
<div class="usability-card" data-direction="bottom">
<span class="usability-card--title">FMCG</span>
<img src="assets/images/usability-img-2.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-2.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-2.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-2.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>FMCG</span>
......@@ -258,7 +270,11 @@
</div>
<div class="usability-card" data-direction="left">
<span class="usability-card--title">Дискретное производство</span>
<img src="assets/images/usability-img-3.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-3.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-3.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-3.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Дискретное производство</span>
......@@ -276,7 +292,11 @@
</div>
<div class="usability-card" data-direction="right">
<span class="usability-card--title">Горнорудное</span>
<img src="assets/images/usability-img-4.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-4.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-4.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-4.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Горнорудное</span>
......@@ -295,7 +315,11 @@
</div>
<div class="usability-card" data-direction="top">
<span class="usability-card--title">Энергетика и транспорт</span>
<img src="assets/images/usability-img-5.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-5.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-5.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-5.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Энергетика и транспорт</span>
......@@ -311,7 +335,11 @@
</div>
<div class="usability-card" data-direction="left">
<span class="usability-card--title">Умный город</span>
<img src="assets/images/usability-img-6.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-6.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-6.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-6.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Умный город</span>
......
......@@ -78,7 +78,11 @@
<!------------- know more section start -------------------->
<section id="know-more">
<span></span>
<img src="../assets/images/know-more---bg.webp" loading="lazy" alt="bg">
<picture>
<source srcset="assets/images/know-more---bg.webp" type="image/webp"/>
<source srcset="assets/images/know-more---bg.jpg" type="image/jpg"/>
<img src="assets/images/know-more---bg.jpg" alt="bg"/>
</picture>
<div class="know-more--title">
<p>Óndiristiń zamanaýı máseleleri</p>
</div>
......@@ -219,7 +223,11 @@
<div class="usability-cards">
<div class="usability-card" data-direction="right" >
<span class="usability-card--title">Munaı jáne gaz óndirisi</span>
<img src="../assets/images/usability-img-1.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-1.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-1.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-1.jpg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Munaı jáne gaz óndirisi</span>
......@@ -236,7 +244,11 @@
</div>
<div class="usability-card" data-direction="bottom">
<span class="usability-card--title">Kúndelikti suranystaǵy taýarlar</span>
<img src="../assets/images/usability-img-2.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-2.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-2.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-2.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Kúndelikti suranystaǵy taýarlar</span>
......@@ -254,7 +266,11 @@
</div>
<div class="usability-card" data-direction="left">
<span class="usability-card--title">Dıskretti óndiris</span>
<img src="../assets/images/usability-img-3.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-3.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-3.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-3.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Dıskretti óndiris</span>
......@@ -271,7 +287,11 @@
</div>
<div class="usability-card" data-direction="right">
<span class="usability-card--title">Taý ken óndirisi</span>
<img src="../assets/images/usability-img-4.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-4.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-4.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-4.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Taý ken óndirisi</span>
......@@ -289,7 +309,11 @@
</div>
<div class="usability-card" data-direction="top">
<span class="usability-card--title">Energetıka jáne kólik</span>
<img src="../assets/images/usability-img-5.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-5.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-5.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-5.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Energetıka jáne kólik</span>
......@@ -306,7 +330,11 @@
</div>
<div class="usability-card" data-direction="left">
<span class="usability-card--title">Aqyldy qala</span>
<img src="../assets/images/usability-img-6.webp" loading="lazy" alt="bg" />
<picture>
<source srcset="assets/images/usability-img-6.webp" type="image/webp"/>
<source srcset="assets/images/usability-img-6.jpg" type="image/jpg"/>
<img src="assets/images/usability-img-6.jpg" alt="bg"/>
</picture>
<div class="usability-card--tooltip">
<div>
<span>Aqyldy qala</span>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment