<div class="container">
    <div class="leftbar">
        <a href=""> <img src="https://images.unsplash.com/photo-1533794318766-897f4d50cb39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" class="logo" alt="Logo"></a>
        <h1>Start Saving </br> Your Money</h1>
        <p>Choose plan that works best for you, feel free to contact us if you need more details</p>


        <div class="testimonial">
            <p>"Fantastic, totally blown away with my savings"</p>
            <div class="profile">
           <div class="image-cropper"> <img src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" ></div>
            <div class="name"> <h2>Roland Stevens</h2>            <h3>Freelancer</h3>
           </div>
        </div>
        </div>

    </div>
    <div class="rightbar">
        <h1>Start 14day free Trial</h1>
        <p>Get Started, no credit card required.</p>

        <div class="pricing">

            <div class="card">
                <img src="" alt="">
                <h1 class="card-header"> Basic </h1>
                <h1 class="card-price"> $18<span>/month</span></h1>
                <h3>
                    <i class="fas fa-check-square fa-lg"></i>
                        secure your account</h3>
                <h3>
                    <i class="fas fa-check-square fa-lg"></i>
                         Up to 2 credi cards</h3>
                <h3>
                    <i class="fas fa-check-square fa-lg"></i>
                        Customer Support</h3>
                <button> Start trial  <i class="fa fa-arrow-circle-o-right fa-fw" ></i></button>
            </div>


            <div class="card">
                <img src="" alt="">
                <h1 class="card-header"> Pro </h1>
                <h1 class="card-price"> $32 <span>/month</span></h1>

                <h3><i class="fas fa-check-square fa-lg"></i> Unlimited  credit cards</h3>

                <h3><i class="fas fa-check-square fa-lg"></i>
                Virtual credit </h3>

                <h3> <i class="fas fa-check-square fa-lg"></i>
                Personal fin-explor</h3>

                <button> Start trial  <i class="fa fa-arrow-circle-o-right" ></i>
                </button>
            </div>
        </div>

    </div>
</div>


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500&display=swap');

body{
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    background-color: #c3c3cd;
    display: flex;
    height: 100vh;
    justify-content: center;
   align-items: center;

}
h1{
 color: #1d3557;
}
.container{
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    height: 90vh;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    border-radius: 6px;

}
.leftbar{
    position: inherit;
    background-color: #a8dadc ;
    border-radius: 10px;
    margin: 20px;
    padding: 20px;
height: 80%;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);

    border-radius: 7px;
}
.leftbar>h1{
    margin-top: 20px;
    line-height: 40px;
}


.rightbar{

    background-color: white;
    margin: 10px;
    padding: 20px;
height: 80%;

}
.profile{
    display: flex;

}
.name{
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    line-height: 10px;
}
.name h3{
    margin-top: 0;
    color: white;
}
.testimonial{
    margin-top: 120px;
    background-color: #1d3557;
    border-radius: 10px;
    border: 5px solid white;
    padding: 15px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}
.testimonial p{
    color: white;

}
.profile > h3,p,h2{
    color: white;
}

.image-cropper {
    width: 75px;
    height: 75px;
    position: relative;
    overflow: hidden;
    border-radius: 10%;
}

.image-cropper img {
    display: inline;
    margin: auto;
    height: 150%;
    width: auto;

}
.pricing{

   display: grid;;
     align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 1fr ;

}
.card{
    border-radius: 15px;
    margin: 100px 20px 20px 20px  ;
padding: 50px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    transition:  2s;

}
.logo{
    border-radius: 50%;
    width: 50px;
  height:50px
  
}


span{
    font-size: 12px;
    margin-left: 10px;
    color: 457b9d;
}

.icon {
    position: relative;
    width: 20px;
    /* Adjust these values accordingly */
    top: 5px;
    left: 0px;
    padding-right: 5px;
}

.card h1{
    color: : #457b9d;
    margin-top: 0;
    padding: 0;
}
h3{
    font-weight: normal;
    line-height: 20px;
    font-size: 16px;
}
p{
    color: #1d3557;
}
button{
    margin-top: 20px;
    padding: 0;
    font-size: 17px;
    color: white;
    width: 200px;
    height: 60px;
    background: #e63946;
    border: 0px ;
    border-radius: 8px;
}


.card:hover{
    background-color: #e63946;
    border-radius: 15px;
    margin: 100px 20px 20px 20px  ;
    padding: 50px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);

}
.card:hover *{
    color: white;
    }
.card-header{
    margin: 0;
    padding: 0;
    text-align: center;
}
.card-price{
    color: #457b9d;
    margin: 0;
    padding: 0;
    text-align: center;
}

.card:hover button{
    background-color: #FFFFFF;
    color: #08090D;

}
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.