Jquery 23.05

<!doctype html>
<html>
    <head   >
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
           <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
            <script src="js/js.js"></script>
            <link href="css/style.css" type="text/css" rel="stylesheet">

    </head>


    <body >


    <div class="container">

            <div id="myImg" >
                    <img alt="Image" src="res/image2.jpg" id="myImg2">
                    <img alt="Image" src="res/image.jpg" id="myImg1">
            </div>

        <br><br>

        <div class="januralClass" >
            <h2 id="Orange123">First block</h2>
            <ul>
                <li>Some text Some text Some text Some text Some text</li>
                <li>Some text Some text Some text Some text Some text</li>
                <li>Some text Some text Some text Some text Some text</li>
                <li>Some text Some text Some text Some text Some text</li>
            </ul>
        </div>


        </div>
   <br>


     <div id="someText" >
            <p id="textToChange1">Text Text Text Text Text Text Text Text Text </p>
            <p id="textToChange2">AAaa AAaa AAaa AAaa AAaa AAaa AAaa AAaa AAaa </p>

            </div>


   <br>

    <input type="button" id="FirstBtn" value="Orange button" class="btn"><br>   <br>
    <input type="button" id="SecondBtn" value="Click me" class="btn">
    </body>
</html>


js


$(document).ready(function(){

     $("#FirstBtn").click( function() {$("#Orange123").css({"color":"orange"}); });//Change text to orange

     $("#SecondBtn").click( function() {$("#SecondBtn").animate({  //Change size of button

                        left: '500px',
            opacity: '1',
            height: '150px',
            width: '150px'


         }); });

             $("#SecondBtn").click( function() {$("#SecondBtn").animate({  //Change size of button

                        left: '20px',
            opacity: '1',
            height: '50px',
            width: '80px'


         }); });


     $("#myImg").click( function() {  // picture change to picture alse

                    $(this).find("img","last").fadeToggle();

         });


         $("p").click(function(){   // hide paragraph and change him
        $(this).hide();
    });


        $("#someText").click( function() {

                    $(this).find("p","last").fadeToggle();

         });


});


css


.januralClass{
        border-style: solid;
    border-width: 2px;
        border-color:black;
        width:450px;
        height:300px;

}

h2{
    text-align:center;

}
#myImg1{

    top:0;
    left:0;
    width:50%;

}

#myImg2{

    top:0;
    left:0;
    width:50%;
    display:none;
}
body{
    position:absolute;
}

#textToChange1{
    display:none;
}