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

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

0

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

Admin آسان 213/ دانلود 266 بازدید

با استفاده از html و css و جاوا اسکریپت صفحه ای مربوط به سوالات متداول طراحی کنید

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

1 جواب

نمیتونم این تمرین رو حل کنم!
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 دانلود HTML CSS

ارسال جواب

// کداتو توی این بخش بنویس
// فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
// البته قبلش این سه خط رو پاک کن

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

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

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