<!Doctype html>

<head>
    <title>About</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    .animazione{
        position: absolute;
        left:0;
        right:0;
        animation: bubble 2s infinite;
    }

    .circle2{
        width:300px;
        height:300px;
        background:lightskyblue; /* was black*/
        clip-path: circle(30%);
        z-index:-1;
        position:absolute;
    }

    .pos-1{
        bottom:-100px;
        animation-delay:1s;
        clip-path: circle(30%);
    }

    .pos-2{
        bottom:-100px;
        left:150px;
        animation-delay:3s;
        clip-path: circle(8%);
    }

    .pos-3{
        bottom:-100px;
        left:300px;
        animation-delay:7s;
        clip-path: circle(35%);
    }

    .pos-4{
        bottom:-100px;
        left:450px;
        animation-delay:2.6s;
        clip-path: circle(17%);
    }

    .pos-5{
        bottom:-100px;
        left:600px;
        animation-delay:3.2s;
        clip-path: circle(40%);
    }

    .pos-6{
        bottom:-100px;
        left:750px;
        animation-delay:1.9s;
        clip-path: circle(40%);
    }

    .pos-7{
        bottom:-100px;
        left:900px;
        animation-delay:3.6s;
        clip-path: circle(42%);
    }

    .pos-8{
        bottom:-100px;
        left:1050px;
        animation-delay:7s;
        clip-path: circle(33%);
    }

    .pos-9{
        bottom:-100px;
        left:1200px;
        animation-delay:2.8s;
        clip-path: circle(5%);
    }

    .pos-10{
        bottom:-100px;
        left:1350px;
        animation-delay:3.7s;
        clip-path: circle(26%);
    }

    .pos-15{
        bottom:-100px;
        left:50px;
        animation-delay:3.3s;
        clip-path: circle(30%);
    }
    .pos-11{
        bottom:-100px;
        left:70px;
        animation-delay:3.6s;
        clip-path: circle(22%);
    }
    .pos-12{
        bottom:-100px;
        left:160px;
        animation-delay:4s;
        clip-path: circle(17%);
    }
    .pos-13{
        bottom:-100px;
        left:370px;
        animation-delay:7s;
        clip-path: circle(7%);
    }
    .pos-14{
        bottom:-100px;
        left:590px;
        animation-delay:3s;
        clip-path: circle(49%);
    }
    .pos-16{
        bottom:-100px;
        left:1400px;
        animation-delay:3.6s;
        clip-path: circle(22%);
    }
    .pos-17{
        bottom:-100px;
        left:1500px;
        animation-delay:4s;
        clip-path: circle(17%);
    }
    .pos-18{
        bottom:-100px;
        left:1580px;
        animation-delay:7s;
        clip-path: circle(7%);
    }
    .pos-19{
        bottom:-100px;
        left:1700px;
        animation-delay:3s;
        clip-path: circle(49%);
    }

    footer{
        background:deepskyblue;/*was black*/
        height:200px;
        position: fixed;
        bottom:0;
        left:0;
        right:0;
    }

    footer > a{
        color: white;
    }

    @keyframes bubble{
        from {}
        to{ clip-path: circle(0%); bottom:150px;}
    }


</style>
<!--sign in form style-->
<style>
    /*sign in form style*/
    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

    * {
        box-sizing: border-box;
    }

    body {
        background: #f6f5f7;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: 'Montserrat', sans-serif;
        height: 100vh;
        margin: 5px 0 5px;
    }

    h1 {
        font-weight: bold;
        margin: 0;
    }

    h2 {
        text-align: center;
    }

    p {
        font-size: 14px;
        font-weight: 100;
        line-height: 20px;
        letter-spacing: 0.5px;
        margin: 20px 0 30px;
    }

    span {
        font-size: 12px;
    }

    a {
        color: #333;
        font-size: 14px;
        text-decoration: none;
        margin: 15px 0;
    }

    button {
        border-radius: 20px;
        border: 1px solid #FF4B2B;
        background-color: #FF4B2B;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: bold;
        padding: 12px 45px;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: transform 80ms ease-in;
    }

    button:active {
        transform: scale(0.95);
    }

    button:focus {
        outline: none;
    }

    button.ghost {
        background-color: transparent;
        border-color: #FFFFFF;
    }

    form {
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 50px;
        height: 100%;
        text-align: center;
    }

    input {
        background-color: #eee;
        border: none;
        padding: 12px 15px;
        margin: 8px 0;
        width: 100%;
    }

    .container {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 14px 28px rgba(0,0,0,0.25),
        0 10px 10px rgba(0,0,0,0.22);
        position: relative;
        overflow: hidden;
        width: auto;/*was 768px*/
        max-width: 100%;
        min-height: 480px;
    }

    .form-container {
        position: absolute;
        top: 0;
        height: 100%;
        transition: all 0.6s ease-in-out;
    }

    .sign-in-container {
        left: 0;
        width: 50%;
        z-index: 2;
    }

    .container.right-panel-active .sign-in-container {
        transform: translateX(100%);
    }

    .sign-up-container {
        left: 0;
        width: 50%;
        opacity: 0;
        z-index: 1;
    }

    .container.right-panel-active .sign-up-container {
        transform: translateX(100%);
        opacity: 1;
        z-index: 5;
        animation: show 0.6s;
    }

    @keyframes show {
        0%, 49.99% {
            opacity: 0;
            z-index: 1;
        }

        50%, 100% {
            opacity: 1;
            z-index: 5;
        }
    }

    .overlay-container {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
        transition: transform 0.6s ease-in-out;
        z-index: 100;
    }

    .container.right-panel-active .overlay-container{
        transform: translateX(-100%);
    }

    .overlay {
        background: #FF416C;
        background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
        background: linear-gradient(to right, #FF4B2B, #FF416C);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 0;
        color: #FFFFFF;
        position: relative;
        left: -100%;
        height: 100%;
        width: 200%;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
    }

    .container.right-panel-active .overlay {
        transform: translateX(50%);
    }

    .overlay-panel {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 40px;
        text-align: center;
        top: 0;
        height: 100%;
        width: 50%;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
    }

    .overlay-left {
        transform: translateX(-20%);
    }

    .container.right-panel-active .overlay-left {
        transform: translateX(0);
    }

    .overlay-right {
        right: 0;
        transform: translateX(0);
    }

    .container.right-panel-active .overlay-right {
        transform: translateX(20%);
    }

    .social-container {
        margin: 20px 0;
    }

    .social-container a {
        border: 1px solid #DDDDDD;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        height: 40px;
        width: 40px;
    }

    footer {
        background-color: #222;
        color: #fff;
        font-size: 14px;
        bottom: 0;
        position: fixed;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 999;
    }

    footer p {
        margin: 10px 0;
    }

    footer i {
        color: red;
    }

    footer a {
        color: #3c97bf;
        text-decoration: none;
    }


    .column1 {
        float: left;
        width: 50%;
    }

    /* Clear floats after the columns */
    .row1:after {
        content: "";
        display: table;
        clear: both;
    }
</style>
<!--sign in form style ends-->
<body>
<!--form starts here-->
<div class="column1">
    <div class="container" id="container" >
        <div class="form-container sign-up-container">
            <form action="#">
                <h1>Create Account</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your email for registration</span>
                <input type="text" placeholder="Name" />
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <button>Sign Up</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>Sign in</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your account</span>
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <a href="#">Forgot your password?</a>
                <button>Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To keep connected with us please login with your personal info</p>
                    <button class="ghost" id="signIn">Sign In</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Hello, Friend!</h1>
                    <p>Enter your personal details and start journey with us</p>
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>

            </div>

        </div>

    </div>
<!--form ends here-->
    <!--signin form script-->
    <script>
        const signUpButton = document.getElementById('signUp');
        const signInButton = document.getElementById('signIn');
        const container = document.getElementById('container');

        signUpButton.addEventListener('click', () => {
            container.classList.add("right-panel-active");
        });

        signInButton.addEventListener('click', () => {
            container.classList.remove("right-panel-active");
        });
    </script>
    <!--signin form script-->
<p> this is an about us page</p>

<div class="circle2 pos-1"></div>
<div class="circle2 pos-2"></div>
<div class="circle2 pos-3"></div>
<div class="circle2 pos-4"></div>
<div class="circle2 pos-5"></div>
<div class="circle2 pos-7"></div>
<div class="circle2 pos-6"></div>
<div class="circle2 pos-8"></div>
<div class="circle2 pos-10"></div>
<div class="circle2 pos-9"></div>
<div class="circle2 pos-15"></div>
<div class="circle2 pos-11"></div>
<div class="circle2 pos-12"></div>
<div class="circle2 pos-13"></div>
<div class="circle2 pos-14"></div>
<div class="circle2 pos-16"></div>
<div class="circle2 pos-17"></div>
<div class="circle2 pos-18"></div>
<div class="circle2 pos-19"></div>
<footer>
    <a> Ciao, questo è il footer del mio sito </a>
</footer>


<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        document.querySelectorAll('.circle2').forEach((el)=>{
            el.classList.add('animazione');
        })
    });
</script>

</body>
</html>