<div class="wrapper">
         <div class="cardcircle cardcircle1"></div>
            <div class="cardcircle cardcircle2"></div>
         <div class="card"></div>
         <div class="cardShadow">
            <header class="d-flex justify-content-between align-items-center">
               <div class="logo">DOM</div>
               <ul  class="d-flex justify-content-between align-items-center list-unstyled menuitems">
                  <li><a href="">About us</a></li>
                  <li><a href="">Products</a></li>
                  <li><a href="">Connect us</a></li>
               </ul>
               <ul  class="d-flex justify-content-between align-items-center  list-unstyled iconslist">
                  <li><a href=""><ion-icon name="search"></ion-icon></a></li>
                  <li><a href=""><ion-icon name="cart"></ion-icon></a></li>
               </ul>
            </header>
           <div class="content">
              <h2>Western outfits</h2>
              <h1 class="display-1"><span>GEM</span>INI</h1>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos vero deserunt</p>
              <button type="button" class="btn btn1 btn-primary"><ion-icon name="cart"></ion-icon> Add to cart</button>
              <button type="button" class="btn btn2 btn-primary">More Info</button>

              <div class="discound d-flex  flex-column justify-content-center align-items-center">
                 <h3>$110</h3>
                 <small>20% discound</small>
              </div>

              <div class="socialMedia">
                 <ul class="d-flex justify-content-start align-items-center  list-unstyled m-0">
                    <li><a href=""><ion-icon name="logo-googleplus"></ion-icon></a></li>
                    <li><a href=""><ion-icon name="logo-twitter"></ion-icon></a></li>
                    <li><a href=""><ion-icon name="logo-instagram"></ion-icon></a></li>
                 </ul>
              </div>
            </div>
         </div> 
   </div>

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap'); //font-family: 'Roboto', sans-serif;
@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900&display=swap');

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    font-size: 16px !important;

}

@mixin centerView {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;

    .cardcircle {
        content: "";
        position: absolute;
        border-radius: 50%;
        background-image: linear-gradient(45deg, #FE8660, #e20074);
        z-index: 1;
        box-shadow: 0px 0px 0px 22px rgba(255, 255, 255, 0.3);
    }

    .cardcircle1 {
        width: 900px;
        height: 900px;
        bottom: -27%;
        left: -14%;

    }

    .cardcircle2 {
        width: 500px;
        height: 500px;
        top: -24%;
        right: -10%;
    }


    .card {
        width: 1080px;
        height: 600px;
        top: 50%;
        left: 50%;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-image: url('https://i.ibb.co/NWdPpKy/bg2.jpg');
        background-size: cover;
        background-position: 50% 50%;
    }


    .cardShadow {
        -webkit-box-shadow: 0px 10px 18px 11px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 10px 18px 11px rgba(0, 0, 0, 0.2);
        width: 1080px;
        height: 600px;
        top: 50%;
        left: 50%;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 1;

        header {

            padding: 15px;

            .logo {
                color: #fff;
                font-weight: 600;
            }

            .menuitems {
                li {
                    margin: 0px 10px;

                    a {
                        color: #fff;
                        text-decoration: none;
                        font-weight: 600;

                        &:hover {
                            color: #e20074;
                        }
                    }
                }
            }

            .iconslist {
                li {
                    margin: 0px 10px;

                    a {
                        color: #fff;
                        text-decoration: none;
                        font-weight: 600;
                    }
                }
            }
        }

        .content {
            width: 80%;
            position: absolute;
            left: 10%;
            top: 50%;
            transform: translatey(-50%);

            h2 {
                font-family: 'Anton', sans-serif;
                position: relative;
                font-size: 20px;
                font-weight: 600;
                display: inline-block;

                &::before {
                    content: "02";
                    position: absolute;
                    font-size: 130px;
                    color: #000;
                    opacity: 0.2;
                    top: 50%;
                    left: 60%;
                    transform: translate(-50%, -50%);
                }

            }

            h1 {
                font-family: 'Cinzel', serif;
                color: #fff;
                font-weight: 600;
                letter-spacing: 30px;
                margin: 50px 0 10px 0;

                span {
                    color: #000;
                }
            }

            p {
                width: 30%;
                margin-left: 65px;
                color: #000;
                font-weight: 600;
                margin-bottom: 40px;
            }

            button {
                background: #fff;
                color: #000;
                border: 0 none;
                border-radius: 25px;
                padding: 8px 20px;
                font-weight: 600;
                box-shadow: 0px 7px 10px 1px rgba(0, 0, 0, 0.2);
                margin-right: 15px;

                ion-icon {
                    padding-right: 8px;
                }
            }

            .btn2 {
                background: transparent;
            }


            .discound {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                box-shadow: 0px 0px 0 23px #ffffff3d;
                position: absolute;
                top: -6%;
                right: -4%;
                background: #fff;

                h3 {
                    font-family: 'Cinzel', serif;
                    font-weight: 900;
                }

            }

            .socialMedia {
                position: absolute;
                right: -9%;
                bottom: -25%;

                ul {
                    li {
                        margin: 0px 5px;

                        a {
                            color: #fff;
                            width: 35px;
                            height: 35px;
                            border-radius: 35px;
                            text-align: center;
                            line-height: 38px;
                            background-color: rgba(255, 255, 255, 0.2);
                            display: block;
                            font-size: 18px;

                            &:hover {
                                background-image: linear-gradient(45deg, #FE8660, #e20074);
                            }
                        }
                    }
                }
            }


        }
    }








}

TweenMax.staggerFrom(".wrapper .cardShadow header .menuitems li", 1, {
   x: 50,
   y:-15,
   opacity: 0,
   ease: Expo.easeInOut
},0.2);


TweenMax.from(".wrapper .cardShadow .content .discound", 1, {
    scale:0,
    opacity: 0,
    ease: Elastic.easeInOut
 });

 TweenMax.from(".wrapper .cardShadow .content h2",1, {
   scale:0,
   opacity: 0,
   ease: Elastic.easeInOut
});
TweenMax.from(".wrapper .cardShadow .content h1", 1, {
   x: 50,
   opacity: 0,
   delay:0.2,
   ease: Elastic.easeInOut
});
TweenMax.from(".wrapper .cardShadow .content p", 1, {
   scale:0,
   opacity: 0,
   delay:0.4,
   ease: Elastic.easeInOut
});
TweenMax.from(".wrapper .cardShadow .content button", 1, {
   scale:0,
   opacity: 0,
   delay:0.6,
   ease: Elastic.easeInOut
});