در این آموزش از سری آموزش المنتور میخواهیم یک لندینگ پیج زیبا و جذاب را باهم طراحی کنیم، دقت کنید که در این ویدیو نحوه طراحی لندینگ پیج استارباکس آموزش داده شده است.
راهنمای مطالعه:
قطعه کدهای مورد استفاده در این آموزش
قطعه کد مربوط به المان فاصله گذار
selector{
position: absolute;
left: -20%;
top: 10%;
width: 100%;
height: 100%;
background: #017143;
clip-path: circle(596px at left 600px);
}
@media (max-width:1024px){
selector{
clip-path: circle(380px at left 530px);
}
}
@media (max-width:768px){
selector{
left: 0;
clip-path: circle(420px at left 530px);
}
}
قطعه کد مربوط به سکشن تصاویر Thumbnail
selector{
position: absolute;
right: -10px;
bottom:0;
width: 200px;
transform: translateX(-50%);
}
selector img{
cursor: pointer;
transition: 0.5s;
}
selector img:hover{
transform: translateY(-15px)
}
@media (max-width:1024px){
selector{
right: -30%;
} }
@media (max-width:767px){
selector{
right: -10%;
bottom:-4vh
}
}
قطعه کد مربوط به خود تصاویر Thumbnail
دقت کنید که این کد را باید در بخش Attibutes قرار دهید همچنین لینک این قطعه کد را باید مرتبط با لینک تصاویر سایت خود قرار دهید
data-jim|http://elementor.nabiabdi.ir/wp-content/uploads/2022/02/img1.png
قطعه کد مربوط به المان HTML
<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>