Untitled

<html>
    <head>
        <title>Daniel Gedz</title>

        <script>
            var randomNum = Math.floor(Math.random() * 100) + 1;
            alert(`Your random number is ${randomNum}`);
        </script>

        <style>
            body {
                background: rgb(2,0,36);
                background: linear-gradient(120deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 33%, rgba(0,212,255,1) 100%);
                color: white;
                padding: 10px;
            }

            .color {
                color: #ff0000;
                font-size: 20px;
            }

            .rotate-text {
                position: absolute;
                transform: rotate(15deg);
            }

            div {
                padding: 20px;
                margin: 20px;
                width: 120px;
                background: limegreen;
                color: white;
                font-family: sans-serif;
            }

            .rotation {
                transform: rotate(15deg);
                padding: 20px;
            }

        </style>
    </head>

    <body>
        <img style="position: absolute; margin-left: 600px" src="https://image.flaticon.com/icons/svg/124/124010.svg" width="100px">
        <p style="padding-bottom: 100px; font-size: 50px;">Facebook</p>
        <hr>
        <h2><a href="https://google.com" style="color: #e0882f;">Hello World!!</a></h2>
        <hr>
        <b class="color rotate-text">Bold Text</b><br>
        <i class="color rotate-text">Italic</i><br>
        <u class="color rotate-text">Underlined</u><br>
        <del class="color rotate-text">Deleted text</del><br>
        <hr>
        <ul type="circle">
            <li>1</li>
            <li>2</li>
        </ul>
        <ol>
            <li>Text 1</li>
            <li>Text 2</li>
        </ol>
        <hr>
        <a href="https://google.com">
            <img style="margin-left: 250px" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="300px">
        </a>
        <b><p style="margin-left: 370px">МЯУ</p></b>
        <img style="margin-left: 200px; transform: rotate(-180deg); position: absolute; padding-top: 10px;" src="image.jpg" width="400px">

        <div class="rotation">
            <p>Rotated</p>
        </div>

        <div>
            <p>Not Rotated</p>
        </div>
    </body>
</html>