Shopify Html Coding
Budget: €30 – €250 EUR
Hi, im looking for someone who can fix the frame issue with an iframe.
<center>
<div class="ImageHero__Image Image--zoomOut Image--lazyLoaded" style="background-image: url('https://cdn.shopify.com/s/files/1/0336/3202/6760/files/bg_orange_v7.jpg?v=1641464664');" width:="100%" src="https://cdn.shopify.com/s/files/1/0336/3202/6760/files/Gebauer_Gebauer_Logo_White.png?v=1641396402" alt="Gebauer&GebauerLogo" width="128" height="128" padding-top:10px="">
<h1 id="headline"></h1>
</div>
<noschript>
<div class="ImageHero__ContentOverlay">
<header class="SectionHeader SectionHeader--center" div="">
<center>
<div> <p>
<img src="https://cdn.shopify.com/s/files/1/0336/3202/6760/files/Gebauer_Gebauer_Logo_White.png?v=1641396402" alt="Girl in a jacket" width="128" height="128"></p>
</div>
<p>
<span class="clock">
</span></p>
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="separator"></div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="separator"></div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
</center></header>
</div>
<span class="scroll-down">
<style>
.scroll-down {
position: absolute;
left: 150%;
bottom: -50px;
display: block;
text-align: left;
font-size: 20px;
z-index: 100;
text-decoration: none;
text-shadow: 0;
width: 13px;
height: 13px;
border-bottom: 2px solid white;
border-right: 2px solid white;
z-index: 9;
left: 49%;
-webkit-transform: translate(-50%, 0%) rotate(45deg);
-moz-transform: translate(-50%, 0%) rotate(45deg);
transform: translate(-50%, 0%) rotate(45deg);
-webkit-animation: fade_move_down 4s ease-in-out infinite;
-moz-animation: fade_move_down 4s ease-in-out infinite;
animation: fade_move_down 4s ease-in-out infinite;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>
</span></noschript>
</center>
<center>
<div class="ImageHero__Image Image--zoomOut Image--lazyLoaded" style="background-image: url('https://cdn.shopify.com/s/files/1/0336/3202/6760/files/bg_orange_v7.jpg?v=1641464664');" width:="100%" src="https://cdn.shopify.com/s/files/1/0336/3202/6760/files/Gebauer_Gebauer_Logo_White.png?v=1641396402" alt="Gebauer&GebauerLogo" width="128" height="128" padding-top:10px="">
<h1 id="headline"></h1>
</div>
<noschript>
<div class="ImageHero__ContentOverlay">
<header class="SectionHeader SectionHeader--center" div="">
<center>
<div> <p>
<img src="https://cdn.shopify.com/s/files/1/0336/3202/6760/files/Gebauer_Gebauer_Logo_White.png?v=1641396402" alt="Girl in a jacket" width="128" height="128"></p>
</div>
<p>
<span class="clock">
</span></p>
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit hours">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="separator"></div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit minutes">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="separator"></div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="digit seconds">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
</center></header>
</div>
<span class="scroll-down">
<style>
.scroll-down {
position: absolute;
left: 150%;
bottom: -50px;
display: block;
text-align: left;
font-size: 20px;
z-index: 100;
text-decoration: none;
text-shadow: 0;
width: 13px;
height: 13px;
border-bottom: 2px solid white;
border-right: 2px solid white;
z-index: 9;
left: 49%;
-webkit-transform: translate(-50%, 0%) rotate(45deg);
-moz-transform: translate(-50%, 0%) rotate(45deg);
transform: translate(-50%, 0%) rotate(45deg);
-webkit-animation: fade_move_down 4s ease-in-out infinite;
-moz-animation: fade_move_down 4s ease-in-out infinite;
animation: fade_move_down 4s ease-in-out infinite;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>
</span></noschript>
</center>