/*-- Bagian Bar --*/ body{margin:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif} #page-events{background:#171717;color:#fff} a{color:#fff;text-decoration:none} .text-center{text-align:center} /* Bagian kolom */ .fullwidth{display:table;width:100%;table-layout:fixed;border-collapse:collapse;padding:0!important;margin:0!important;overflow:hidden} .one-fourth{width:24.9%;display:table-cell;vertical-align:middle} .one-third{width:33.3%;float:left} .three-fourth{width:74.9%;height:100%;display:table-cell} .poster{display:block;position:relative;color:#fff;margin-bottom:-5px;overflow:hidden} .poster img{box-shadow:0 0 0 #fff;width:100%} .poster-caption{transition:.5s ease;font-size:17px;line-height:27px;position:absolute;display:block;top:100%;left:0;right:0;bottom:0;padding:21px 55px 30px 34px;background:rgba(0,0,0,0.51)} .poster:hover .poster-caption{top:0} .poster:hover p{height:auto} .poster-title{font-size:56px;line-height:56px;font-weight:700;margin-bottom:3px} .poster-title:first-letter{color:#607D8B} .poster p{overflow:hidden;line-height:1.1;margin-bottom:24px} .poster .btn{padding:10px 20px 16px;margin-top:0;text-decoration:none;background-color:#607D8B} /* Modifikasi kolom */ .col-md-6{padding:0px}
<!-- Bagian: HTML Body --> <div class='image-risch'> <section class='no-padding' id='page-events'> <div class='fullwidth'> <div class='one-fourth text-center'> <div class='title-area wow slideInLeft'> <span>Allbum</span> <h2>Events</h2> </div> </div> <div> <div class='col-md-6'> <div class='poster'> <img alt='Text' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbShTlF04nHki4-FkxrqWdB2lvpb37DsveiFHO0FoFrabdamdVSin0-leeiI6b8qc4ObZNQQu9VNdIIV_Nu_QDrIPbQWQm4ZBgmooZj5SNZi4ovpquYrwWqedIJg-zTeKQZwsX3pf16KdP/s0/example-img-ujicode.jpg' /> <div class='poster-caption'> <div class='poster-title'>Demo 2</div> <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class='btn' href='#'>See all collections</a> </div> </div> </div> <div class='col-md-6'> <div class='poster'> <img alt='Text' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbShTlF04nHki4-FkxrqWdB2lvpb37DsveiFHO0FoFrabdamdVSin0-leeiI6b8qc4ObZNQQu9VNdIIV_Nu_QDrIPbQWQm4ZBgmooZj5SNZi4ovpquYrwWqedIJg-zTeKQZwsX3pf16KdP/s0/example-img-ujicode.jpg' /> <div class='poster-caption'> <div class='poster-title'>Demo 3</div> <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class='btn' href='#'>See all collections</a> </div> </div> </div> </div> </div> </section> </div> <!-- Akhir dari bagian HTML -->
Semoga Bermanfaat, Terimakasih.
0 Comments
Post a Comment