"UI/UX Designer"
Bootstrap 4.1.1 Snippet by Nemra1

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="section_all" id="education"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="section_title text-center"> <p class="mb-0">Education & Experiance</p> <h3 class="font-weight-bold text-capitalize mb-0">Education & Experiance </h3> </div> </div> </div> <div class="row mt-5"> <div class="col-lg-6"> <div class="edu_content edu_gradiant_1 text-white mt-3"> <div class="edu_detail"> <h5 class="text-white">Studied at Cambridge University</h5> <h6 class="text-white font-weight-bold">2010 - 2014</h6> <p class="edu_desc mb-0 text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> <div class="col-lg-6"> <div class="edu_content edu_gradiant_2 text-white mt-3"> <div class="edu_detail"> <h5>Master In Computer Science</h5> <h6 class=" font-weight-bold">2014 - 2016</h6> <p class="edu_desc mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-lg-6"> <div class="edu_content edu_gradiant_3 text-white mt-3"> <div class="edu_detail"> <h5>UI/UX Designer</h5> <h6 class="font-weight-bold">2016 - 2018</h6> <p class="edu_desc mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> <div class="col-lg-6"> <div class="edu_content edu_gradiant_4 text-white mt-3"> <div class="edu_detail"> <h5>Senior Graphic Designer</h5> <h6 class="font-weight-bold">2010 - 2014</h6> <p class="edu_desc mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> </div> </div> </section>
/*================ 0.8 EDU & EXP ==================*/ .edu_content{ border-radius: 7px; border: 1px solid #e7e7e7; padding: 50px; } .edu_detail h5{ font-size: 18px; font-weight: 600; margin-top: 0; text-transform: capitalize; } .edu_gradiant_1{ background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%); } .edu_gradiant_2{ background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%); } .edu_gradiant_3{ background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%); } .edu_gradiant_4{ background-image: linear-gradient(-225deg, #65379B 0%, #886AEA 53%, #6457C6 100%); }

Related: See More


Questions / Comments: