xtra.html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none">
    <circle fill="white" cx="0" cy="100" r="100" />
    <circle fill="white" cx="200" cy="100" r="100" />
 

    <div class="container message jumbotron">
        <div class="row">
            <div class="col-5 vertical">
                <p>WHO</p>
                <p>ARE</p>
                <p>WE?</p>
            </div>

            <div class="col-7">
 
            </div>
        </div>
    </div>

    </div>
</div>
</div>

<div class="container portfolio ">
   

    <p class="lead">WHAT WE OFFER</p>

    <p>We live for the stories that connect us all
        and believe in offering our clients an expert level of service and creative craftsmanship   
    </p>

  

</div>    background-image:linear-gradient(180deg, transparent, rgb(192, 169, 169), transparent) ;
opacity: 0.7;

background-image: linear-gradient(180deg, rgb(201, 195, 195), transparent)

/*.up,
.down {
    position: absolute;
    left: 100%;
    top: 0;
    content: '';
    width: 0;
    height: 2px;
    background-color: blue;
    transform-origin: 0 100%;
    transform: rotate(-45deg);
    animation: draw 2s linear;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.down {
    transform: rotate(45deg);
}

@keyframes draw {
    0%{
        width: 0px;
    }
    100% {
        width: 145px;
    }
}*/


@keyframes fun {
    0%{
        background-color: pink;
        background-image: url(acen.png);

    }

    25%{
        background: url(craft_5120x3840.jpg);
        border-right: 100px;
    }

    50%{
        background-image: url(balls_3000x2250.jpg);
    }

    75%{
        background-image: url(art_3000x3000.jpg);
    }

    100%{
        background-image: url(acenn.png);
    }
}