"new card style"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<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 ----------> <div class="container"> <div class="row"> <div id="DIV_1"> <div id="DIV_2"> <div id="DIV_3"> <div id="DIV_4"> jun 14, 2018 </div> <h3 id="H3_5"> TThe standard Lorem Ipsum passage, used since the 1500s </h3> <h4 id="H4_6"> Article on Medium - 7.3K+ Views - 5 min read </h4><a href="#" id="A_7"><span id="SPAN_8">Read article</span></a> </div> </div> </div> </div> </div>
#DIV_1 { box-sizing: border-box; color: rgb(127, 150, 185); display: flex; height: 868px; min-height: auto; min-width: auto; text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; width: 390px; column-rule-color: rgb(127, 150, 185); align-content: center; align-items: center; justify-content: flex-start; perspective-origin: 195px 434px; transform-origin: 195px 434px; caret-color: rgb(127, 150, 185); border: 0px none rgb(127, 150, 185); flex: 0 0 auto; flex-flow: row wrap; font: normal normal 400 normal 16px / 20px Lato, sans-serif; margin: 0px 40px 0px 0px; outline: rgb(127, 150, 185) none 0px; }/*#DIV_1*/ #DIV_1:after { color: rgb(127, 150, 185); min-height: auto; min-width: auto; text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; column-rule-color: rgb(127, 150, 185); caret-color: rgb(127, 150, 185); border: 0px none rgb(127, 150, 185); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(127, 150, 185) none 0px; }/*#DIV_1:after*/ #DIV_1:before { color: rgb(127, 150, 185); min-height: auto; min-width: auto; text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; column-rule-color: rgb(127, 150, 185); caret-color: rgb(127, 150, 185); border: 0px none rgb(127, 150, 185); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(127, 150, 185) none 0px; }/*#DIV_1:before*/ #DIV_2 { background-blend-mode: normal, normal; background-position: 0px 0px, 50% 0px; bottom: 0px; box-shadow: rgba(89, 111, 233, 0.2) 0px 5px 10px 0px; box-sizing: border-box; color: rgb(127, 150, 185); height: 670px; left: 0px; max-height: 670px; min-height: auto; min-width: auto; position: relative; right: 0px; text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; top: 0px; width: 390px; column-rule-color: rgb(127, 150, 185); perspective-origin: 195px 335px; transform-origin: 195px 335px; caret-color: rgb(127, 150, 185); background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)) repeat scroll 0px 0px / auto padding-box border-box, rgb(69, 85, 255) url("https://uploads-ssl.webflow.com/54ea3d4119500e4473ec5f4d/5a538a1b30cd7400011c006c_Assassins_Creed_origins_Panoramics_2.jpeg") repeat scroll 50% 0px / 400px padding-box border-box; border: 0px none rgb(127, 150, 185); border-radius: 6px 6px 6px 6px; font: normal normal 400 normal 16px / 20px Lato, sans-serif; margin: 20px 0px; outline: rgb(127, 150, 185) none 0px; overflow: hidden; }/*#DIV_2*/ #DIV_2:after { color: rgb(127, 150, 185); min-height: auto; min-width: auto; text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; column-rule-color: rgb(127, 150, 185); caret-color: rgb(127, 150, 185); border: 0px none rgb(127, 150, 185); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(127, 150, 185) none 0px; }/*#DIV_2:after*/ #DIV_2:before { color: rgb(127, 150, 185); min-height: auto; min-width: auto; text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; column-rule-color: rgb(127, 150, 185); caret-color: rgb(127, 150, 185); border: 0px none rgb(127, 150, 185); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(127, 150, 185) none 0px; }/*#DIV_2:before*/ #DIV_3 { bottom: 0px; box-sizing: border-box; color: rgb(127, 150, 185); height: 229px; left: 0px; position: absolute; right: 0px; text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; top: 441px; width: 390px; column-rule-color: rgb(127, 150, 185); perspective-origin: 195px 114.5px; transform-origin: 195px 114.5px; caret-color: rgb(127, 150, 185); background: rgba(16, 76, 64, 0.8) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(127, 150, 185); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(127, 150, 185) none 0px; padding: 30px; }/*#DIV_3*/ #DIV_3:after { color: rgb(127, 150, 185); text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; column-rule-color: rgb(127, 150, 185); caret-color: rgb(127, 150, 185); border: 0px none rgb(127, 150, 185); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(127, 150, 185) none 0px; }/*#DIV_3:after*/ #DIV_3:before { color: rgb(127, 150, 185); text-decoration: none solid rgb(127, 150, 185); text-size-adjust: 100%; column-rule-color: rgb(127, 150, 185); caret-color: rgb(127, 150, 185); border: 0px none rgb(127, 150, 185); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(127, 150, 185) none 0px; }/*#DIV_3:before*/ #DIV_4 { box-sizing: border-box; color: rgb(255, 255, 255); height: 14px; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; width: 330px; column-rule-color: rgb(255, 255, 255); perspective-origin: 165px 7px; transform-origin: 165px 7px; caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 14px / 14px "Moon bold", sans-serif; margin: 0px 0px 12px; outline: rgb(255, 255, 255) none 0px; }/*#DIV_4*/ #DIV_4:after { color: rgb(255, 255, 255); text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 14px / 14px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#DIV_4:after*/ #DIV_4:before { color: rgb(255, 255, 255); text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 14px / 14px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#DIV_4:before*/ #H3_5 { box-sizing: border-box; color: rgb(255, 255, 255); height: 56px; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; width: 330px; column-rule-color: rgb(255, 255, 255); perspective-origin: 165px 28px; transform-origin: 165px 28px; caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 700 normal 22px / 28px Lato, sans-serif; margin: 0px 0px 15px; outline: rgb(255, 255, 255) none 0px; }/*#H3_5*/ #H3_5:after { color: rgb(255, 255, 255); text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 700 normal 22px / 28px Lato, sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#H3_5:after*/ #H3_5:before { color: rgb(255, 255, 255); text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 700 normal 22px / 28px Lato, sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#H3_5:before*/ #H4_6 { box-sizing: border-box; color: rgb(255, 255, 255); height: 20px; letter-spacing: -0.2px; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; width: 330px; column-rule-color: rgb(255, 255, 255); perspective-origin: 165px 10px; transform-origin: 165px 10px; caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 16px / 20px Lato, sans-serif; margin: 6px 0px 16px; outline: rgb(255, 255, 255) none 0px; }/*#H4_6*/ #H4_6:after { color: rgb(255, 255, 255); letter-spacing: -0.2px; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#H4_6:after*/ #H4_6:before { color: rgb(255, 255, 255); letter-spacing: -0.2px; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 16px / 20px Lato, sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#H4_6:before*/ #A_7 { box-sizing: border-box; color: rgb(255, 255, 255); display: inline-block; height: 32px; max-height: 32px; text-align: center; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; width: 114.234px; column-rule-color: rgb(255, 255, 255); perspective-origin: 57.1094px 16px; transform-origin: 57.1094px 16px; caret-color: rgb(255, 255, 255); background: rgb(0, 172, 98) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(255, 255, 255); border-radius: 70px 70px 70px 70px; font: normal normal 400 normal 12px / 20px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; overflow: hidden; padding: 7px 15px; transition: opacity 0.3s ease 0s; }/*#A_7*/ #A_7:after { color: rgb(255, 255, 255); text-align: center; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 12px / 20px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#A_7:after*/ #A_7:before { color: rgb(255, 255, 255); text-align: center; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 12px / 20px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#A_7:before*/ #SPAN_8 { box-sizing: border-box; color: rgb(255, 255, 255); cursor: pointer; text-align: center; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); perspective-origin: 0px 0px; transform-origin: 0px 0px; caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 12px / 16px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#SPAN_8*/ #SPAN_8:after { color: rgb(255, 255, 255); cursor: pointer; text-align: center; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 12px / 16px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#SPAN_8:after*/ #SPAN_8:before { color: rgb(255, 255, 255); cursor: pointer; text-align: center; text-decoration: none solid rgb(255, 255, 255); text-size-adjust: 100%; column-rule-color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255); font: normal normal 400 normal 12px / 16px "Moon bold", sans-serif; outline: rgb(255, 255, 255) none 0px; }/*#SPAN_8:before*/

Related: See More


Questions / Comments: