- از کجا شروع کنم؟
- میخوام طراح سایت بشم.studi_podcast_slider { width: 95%; position: relative; max-width: 800px; margin: auto; background: #fff; box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); padding: 25px; border-radius: 25px; height: 400px; transition: all 0.3s; } @media screen and (max-width: 992px) { .studi_podcast_slider { max-width: 680px; height: 400px; } } @media screen and (max-width: 768px) { .studi_podcast_slider { min-height: 500px; height: auto; margin: 180px auto; } } @media screen and (max-height: 500px) and (min-width: 992px) { .studi_podcast_slider { height: 350px; } } .studi_podcast_slider__item { display: flex; align-items: center; } @media screen and (max-width: 768px) { .studi_podcast_slider__item { flex-direction: column; } } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__img img { opacity: 1; transition-delay: 0.3s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > * { opacity: 1; transform: none; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(1) { transition-delay: 0.3s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(2) { transition-delay: 0.4s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(3) { transition-delay: 0.5s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(4) { transition-delay: 0.6s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(5) { transition-delay: 0.7s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(6) { transition-delay: 0.8s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(7) { transition-delay: 0.9s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(8) { transition-delay: 1s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(9) { transition-delay: 1.1s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(10) { transition-delay: 1.2s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(11) { transition-delay: 1.3s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(12) { transition-delay: 1.4s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(13) { transition-delay: 1.5s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(14) { transition-delay: 1.6s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(15) { transition-delay: 1.7s; } .studi_podcast_slider__img { width: 300px; flex-shrink: 0; height: 300px; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);box-shadow: 4px 13px 30px 1px rgba(253, 56, 56 , 0.2); border-radius: 20px; transform: translateX(80px); overflow: hidden; } .studi_podcast_slider__img:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); border-radius: 20px; opacity: 0.8; } .studi_podcast_slider__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all 0.3s; } @media screen and (max-width: 768px) { .studi_podcast_slider__img { transform: translateY(-50%); width: 90%; } } @media screen and (max-width: 576px) { .studi_podcast_slider__img { width: 95%; } } @media screen and (max-height: 500px) and (min-width: 992px) { .studi_podcast_slider__img { height: 270px; } } .studi_podcast_slider__content { padding-left: 25px; } @media screen and (max-width: 768px) { .studi_podcast_slider__content { margin-top: -80px; text-align: center; padding: 0 30px; } } @media screen and (max-width: 576px) { .studi_podcast_slider__content { padding: 0; } } .studi_podcast_slider__content > * { opacity: 0; transform: translateY(25px); transition: all 0.4s; } .studi_podcast_slider__code { color: #7b7992; margin-bottom: 15px; display: block; font-weight: 500; } .studi_podcast_slider__title { font-size: 24px; font-weight: 700; color: #0d0925; margin-bottom: 20px; } .studi_podcast_slider__text { color: #4e4a67; margin-bottom: 30px; line-height: 1.5em; } .studi_podcast_slider__button { display: inline-flex; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); padding: 15px 35px; border-radius: 50px; color: #fff; box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4); text-decoration: none; font-weight: 500; justify-content: center; text-align: center; letter-spacing: 1px; } @media screen and (max-width: 576px) { .studi_podcast_slider__button { width: 100%; } } .studi_podcast_slider .swiper-container-horizontal > .swiper-pagination-bullets, .studi_podcast_slider .swiper-pagination-custom, .studi_podcast_slider .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .studi_podcast_slider__pagination { position: absolute; z-index: 21; left: 20px !important; width: 11px !important; text-align: center; right: auto !important; top: 50%; bottom: auto !important; transform: translateY(-50%); } @media screen and (max-width: 768px) { .studi_podcast_slider__pagination { transform: translateX(-50%); left: 50% !important; top: 205px; width: 100% !important; display: flex; justify-content: center; align-items: center; } } .studi_podcast_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 8px 0; } @media screen and (max-width: 768px) { .studi_podcast_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } } .studi_podcast_slider__pagination .swiper-pagination-bullet { width: 11px; height: 11px; display: block; border-radius: 10px; background: #062744; opacity: 0.2; transition: all 0.3s; } .studi_podcast_slider__pagination .swiper-pagination-bullet-active { opacity: 1; background: #fd3838; height: 30px; box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);background: #fd3838; height: 30px; box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);box-shadow: 0px 0px 20px rgba(253, 56, 56 , 0.3); } @media screen and (max-width: 768px) { .studi_podcast_slider__pagination .swiper-pagination-bullet-active { height: 11px; width: 30px; } } .studi_podcast_slider__item.swiper-slide { overflow: visible; } jQuery(document).ready(function(){ var swiper = new Swiper('.studi_podcast_slider', { spaceBetween: 30, effect: 'fade', loop: true, mousewheel: { invert: false, }, // autoHeight: true, pagination: { el: '.studi_podcast_slider__pagination', clickable: true, } }); });
- میخوام طراح سایت بشم
- دانلودها
- دانلود رایگان اسکرچ جونیور.studi_podcast_slider { width: 95%; position: relative; max-width: 800px; margin: auto; background: #fff; box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); padding: 25px; border-radius: 25px; height: 400px; transition: all 0.3s; } @media screen and (max-width: 992px) { .studi_podcast_slider { max-width: 680px; height: 400px; } } @media screen and (max-width: 768px) { .studi_podcast_slider { min-height: 500px; height: auto; margin: 180px auto; } } @media screen and (max-height: 500px) and (min-width: 992px) { .studi_podcast_slider { height: 350px; } } .studi_podcast_slider__item { display: flex; align-items: center; } @media screen and (max-width: 768px) { .studi_podcast_slider__item { flex-direction: column; } } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__img img { opacity: 1; transition-delay: 0.3s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > * { opacity: 1; transform: none; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(1) { transition-delay: 0.3s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(2) { transition-delay: 0.4s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(3) { transition-delay: 0.5s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(4) { transition-delay: 0.6s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(5) { transition-delay: 0.7s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(6) { transition-delay: 0.8s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(7) { transition-delay: 0.9s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(8) { transition-delay: 1s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(9) { transition-delay: 1.1s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(10) { transition-delay: 1.2s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(11) { transition-delay: 1.3s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(12) { transition-delay: 1.4s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(13) { transition-delay: 1.5s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(14) { transition-delay: 1.6s; } .studi_podcast_slider__item.swiper-slide-active .studi_podcast_slider__content > *:nth-child(15) { transition-delay: 1.7s; } .studi_podcast_slider__img { width: 300px; flex-shrink: 0; height: 300px; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);box-shadow: 4px 13px 30px 1px rgba(253, 56, 56 , 0.2); border-radius: 20px; transform: translateX(80px); overflow: hidden; } .studi_podcast_slider__img:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); border-radius: 20px; opacity: 0.8; } .studi_podcast_slider__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all 0.3s; } @media screen and (max-width: 768px) { .studi_podcast_slider__img { transform: translateY(-50%); width: 90%; } } @media screen and (max-width: 576px) { .studi_podcast_slider__img { width: 95%; } } @media screen and (max-height: 500px) and (min-width: 992px) { .studi_podcast_slider__img { height: 270px; } } .studi_podcast_slider__content { padding-left: 25px; } @media screen and (max-width: 768px) { .studi_podcast_slider__content { margin-top: -80px; text-align: center; padding: 0 30px; } } @media screen and (max-width: 576px) { .studi_podcast_slider__content { padding: 0; } } .studi_podcast_slider__content > * { opacity: 0; transform: translateY(25px); transition: all 0.4s; } .studi_podcast_slider__code { color: #7b7992; margin-bottom: 15px; display: block; font-weight: 500; } .studi_podcast_slider__title { font-size: 24px; font-weight: 700; color: #0d0925; margin-bottom: 20px; } .studi_podcast_slider__text { color: #4e4a67; margin-bottom: 30px; line-height: 1.5em; } .studi_podcast_slider__button { display: inline-flex; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); padding: 15px 35px; border-radius: 50px; color: #fff; box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4); text-decoration: none; font-weight: 500; justify-content: center; text-align: center; letter-spacing: 1px; } @media screen and (max-width: 576px) { .studi_podcast_slider__button { width: 100%; } } .studi_podcast_slider .swiper-container-horizontal > .swiper-pagination-bullets, .studi_podcast_slider .swiper-pagination-custom, .studi_podcast_slider .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .studi_podcast_slider__pagination { position: absolute; z-index: 21; left: 20px !important; width: 11px !important; text-align: center; right: auto !important; top: 50%; bottom: auto !important; transform: translateY(-50%); } @media screen and (max-width: 768px) { .studi_podcast_slider__pagination { transform: translateX(-50%); left: 50% !important; top: 205px; width: 100% !important; display: flex; justify-content: center; align-items: center; } } .studi_podcast_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 8px 0; } @media screen and (max-width: 768px) { .studi_podcast_slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } } .studi_podcast_slider__pagination .swiper-pagination-bullet { width: 11px; height: 11px; display: block; border-radius: 10px; background: #062744; opacity: 0.2; transition: all 0.3s; } .studi_podcast_slider__pagination .swiper-pagination-bullet-active { opacity: 1; background: #fd3838; height: 30px; box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);background: #fd3838; height: 30px; box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);box-shadow: 0px 0px 20px rgba(253, 56, 56 , 0.3); } @media screen and (max-width: 768px) { .studi_podcast_slider__pagination .swiper-pagination-bullet-active { height: 11px; width: 30px; } } .studi_podcast_slider__item.swiper-slide { overflow: visible; } jQuery(document).ready(function(){ var swiper = new Swiper('.studi_podcast_slider', { spaceBetween: 30, effect: 'fade', loop: true, mousewheel: { invert: false, }, // autoHeight: true, pagination: { el: '.studi_podcast_slider__pagination', clickable: true, } }); });
- دانلود رایگان اسکرچ جونیور
