Landing Page Starbuck avec Elementor
Cercle en CSS
selector{
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
background: #017143;
clip-path: circle(550px at right 600px);
}
Thumbnails Centered CSS
selector{
position: absolute;
left: 0;
bottom:4vh;
width: 200px;
transform: translateX(-50%);
}
Thumbnails hover animation CSS
selector img{
cursor: pointer;
transition: 0.5s;
}
selector img:hover{
transform: translateY(-15px)
}
JavaScript snippet for thumbnails
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
$('[data-jim]').on('click', function(){
var jim = $(this).attr('data-jim')
$('.starbucks img').attr('src', jim ).attr('srcset', '')
})
})
</script>
Thumbnail Custom Attribute
data-jim|https://elementor.jimfahad.com/elementor0132/wp-content/uploads/2021/06/img1.png
Circle Media Query
@media (max-width:1024px){
selector{
clip-path: circle(380px at right 530px);
}
}
Thumbnail Media Query
@media (max-width:767px){
selector{
left: 50%;
}
}
