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%;
}
}