با استفاده از html و css و جاوا اسکریپت صفحه ای مربوط به سوالات متداول طراحی کنید در این صفحه باید سوالات متداول نمایش داده شود و وقتی کاربر روی هر سوال کلیک کرد، پاسخ مربوط به آن سوال دقیقا زیر سوال با یک انیمیشن (کشویی) نمایش داده شود

تمرین برنامه نویسی سوالات متداول

1 جواب

1

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body{
                background: linear-gradient(-43deg, green, lime);
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-size: cover;
                color: white;
            }

            .Container{
                direction: rtl;
                display: flex;
                flex-direction: column;
                justify-content: right;
            }
            
            .Container h1{
                color: black;
            }


            .Question{
                display: inline-block;
            }

            .Arrow{
                font-weight: 900;
                transition: 0.4s all;
                cursor: pointer;
                display: inline-block;
                margin-right: 5px;
                background: rgba(0, 0, 0, 0.6);
                padding: 3px 5px;
                text-align: center;
                border-radius: 10px;
            }

            .Arrow:hover {
                transform: rotate(180deg);
                color: black;
                box-shadow: 0px 0px 10px white;
                background: transparent;
            }

            .Answer{
                opacity: 0;
                transition: 0.4s all;
                margin-bottom: 15px;
            }

            .Arrow:hover + .Answer{
                opacity: 1;
                transform: translateY(10px);
            }
        </style>
    </head>
    <body>
        <div class="Container">
            <h1>سوالات متداول</h1>
            <div class="Questions">
                <div class="Question"> اچ تی ام ال چیست؟ </div><div class="Arrow"> ^ </div>
                <div class="Answer">
                    اچ تی ام ال زبان برنامه نویسی برای وب سایت است
                </div>
            </div>
            <div class="Questions">
                <div class="Question"> اچ تی ام ال چیست؟ </div><div class="Arrow"> ^ </div>
                <div class="Answer">
                    اچ تی ام ال زبان برنامه نویسی برای وب سایت است
                </div>
            </div>
            <div class="Questions">
                <div class="Question"> اچ تی ام ال چیست؟ </div><div class="Arrow"> ^ </div>
                <div class="Answer">
                    اچ تی ام ال زبان برنامه نویسی برای وب سایت است
                </div>
            </div>
            <div class="Questions">
                <div class="Question"> اچ تی ام ال چیست؟ </div><div class="Arrow"> ^ </div>
                <div class="Answer">
                    اچ تی ام ال زبان برنامه نویسی برای وب سایت است
                </div>
            </div>
        </div>
    </body>
</html>

Mahditoxic

M

دانلود

HTML CSS

نظرتو راجب این جواب بنویس...

ارسال جواب

تو جوابت میتونی از تصویر، کد، لینک به سایر صفحات و... استفاده کنی
لطفا جواب های تکراری ارسال نکن
جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

سوالات متداول

1 جواب

ارسال جواب

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی

محاسبه مساحت مستطیل

سیستم حضور غیاب کارمندان

محاسبه تخفیف

مصرف سوخت ماشین

سوالات متداول

1 جواب

ارسال جواب

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی

محاسبه مساحت مستطیل

سیستم حضور غیاب کارمندان

محاسبه تخفیف

مصرف سوخت ماشین

حساب کاربری

نمیتونم این تمرین رو حل کنم 😞