تخفیف به مدت محدود

صفحه اصلیپرسش و پاسختمرین قسمت 35 امیدوارم خوب شده باشه

تمرین قسمت 35 امیدوارم خوب شده باشه

ryhane fatahy
8 شهريور ۱۴۰۱
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تمرین قسمت 35</title>
    <style>
    .box{
        z-index: 1;
        position: relative;
        transition: all ease 0.5s;
        top: 50px;
        left: 50px;
        width: 250px;
        height: 300px;
        background-color: #fff;
        font-family: 'lalezar';
        border-radius: 3px;
        box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.2);
    }
    .box:hover .h {
        opacity: 1;
        width: 100px;
        font-size: 15px;
    }
    .box:hover{
        transform: translateY(-2px);
    }
    img{
        z-index: 3;
        position: absolute;
        width: 250px;
        height: 150px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .lin1{ 
        position: absolute;
        width: calc(250px - 2px);
        top: 230px;
        border: 1px solid rgba(0, 0, 0, 0.2);
    }
    .lin2{
        position: absolute;
        height: 69px;
        left: 130px;
        top: calc(231px - 1px);
        border: 1px solid rgba(0, 0, 0, 0.2);
    }
    .m{
        position: absolute;
        top: 140px;
        left: 60px;
        font-size: 20px; 
    }
    a{
        text-decoration: none;
        color: rgb(0, 11, 131);
    }
    .tarahy{
        position: absolute;
        top: 180px;
        left: 90px;
        font-size: 15px;
        opacity: 0.7;
    }
    .h{
        position: absolute;
        top: 110px;
        right:0; 
        z-index: 4;
        width: 20px;
        height: 40px;
        overflow: hidden;
        opacity: 0;
        color: rgb(202, 227, 255);
        border-top-left-radius:3px ;
        border-bottom-left-radius: 3px;
        background-color: rgb(41, 41, 255);
        transition:all ease 0.5s;
        box-shadow:2px 2px 0px rgb(113, 120, 255);
    }
    p{
        position: absolute;
        text-align: center; 
        top: -6px;
        left: 10px;    
    }
    #b{
        transform: translateX(50px);
        transition: all ease 1s;
    }
    .box:hover #b{
        transform: translateX(-5px);
     }
   
    </style>
</head>
<body>
    <div class="box">
        <div class="h"><p id="b">بیشتر بخوانید</p></div>
    <div >
        <img src="https://codeyad.com/assets/images/Courses/dc5f13ae-b768-4ce3-bd4a-bd91e4bf72ca1320221793456.jpg" alt="موجود نیست">
    </div>
    <div class="lin1"></div>
    <div class="lin2"></div>
    <p class="m amozesh" dir="rtl"><a href="#"> اموزش html-css</a></p>
    <p class="m tarahy">طراحی سایت</p>
    </div>  
</body>
</html>
دریافت فایل ضمیمه
377
0 پاسخ