%PDF-1.4
Directory : /var/www/vhosts/lautnusantara.com/httpdocs/web/app/Views/theme/spirit/halaman/ |
<style> .jarak { padding-top: 20px; } @media screen and (max-width: 600px) { .jarak { padding-top: 40px; } } @media screen and (max-width: 600px) { .jarak { padding-top: 40px; } } #share-box { position: relative; float: left; } .btnShare { float: left; padding: 8px; margin-right: 15px; cursor: pointer; } .btnFacebook { background: #5A8CFF; } .btnTwitter { background: #00DEFF; } .btnTele { background: #007bb5; } .btnBagikan { background: #b5b5b5; } .txt-content { clear: both; padding-top: 5px; } .txt-share { color: #FFF; padding-left: 5px; } @media screen and (min-width: 845px) and (max-width: 1044px) { #share-box { position: absolute; top: 100px; float: left; } .btnShare { clear: both; padding: 15px; cursor: pointer; border-bottom-left-radius: 5px; border-top-left-radius: 5px; margin-bottom: 15px; } .txt-content { border-left: #F0F0F0 1px solid; padding-left: 20px; margin-left: 54px; } .txt-share { display: none; } } @media screen and (max-width: 844px) { .btnShare { float: left; padding: 12px; cursor: pointer; /* border-radius: 5px; */ } .txt-share { display: none; } } .img-hover:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; width: 125%; } /* tags css */ @import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap'); .tag { font-family: 'Lexend Deca', sans-serif; font-size: 15px; font-weight: 600; margin: 25px; } .tags li { float: left; list-style: none; } .tag { background: #0059b5; border-radius: 3px 0 0 3px; color: white; display: inline-block; height: 26px; line-height: 26px; padding: 0px 20px 21px 23px; position: relative; margin: 0 3px 10px 0; text-decoration: none; -webkit-transition: color 0.2s; } .tags a { text-decoration: none } .tags h5 { margin-bottom: 7px; font-size: 20px; } .tag::before { background: #fff; border-radius: 10px; content: ''; height: 6px; left: 10px; position: absolute; width: 6px; top: 10px; } .tag::after { background: #fff; /* border-bottom: 13px solid transparent; */ border-left: 10px solid black; border-top: 13px solid transparent; content: ''; position: absolute; right: 0; top: 0; } .tag:hover { background-color: red; color: white; } .tag:hover::after { border-left-color: red; border-left: 10px solid black; color: white; } /* /////// */ img { width: 100%; } .artikel ol { font-family: 'roboto', sans-serif; color: #848484; font-size: 14px; line-height: 24px; list-style-type: decimal; margin-left: 30px; } .artikel ul { font-family: 'roboto', sans-serif; color: #848484; font-size: 14px; line-height: 24px; list-style-type: square; margin-left: 30px; } .artikel p, .artikel ol, .artikel ul { font-family: 'Calibri', 'sans-serif'; /* font-style: bold; */ font-size: 20px; color: #000; line-height: 30px; font-weight: 400; } </style> <section> <div style="background:white;height: 60px;margin-bottom:10px;"> </div><br> <div class="container jarak"> <div class="row"> <div class="col-lg-9 col-md-9 col-sm-9"> <?php $data = $dtl_artikel; $date = date_create($data[0]['publish_up']); $tgl = date_format($date, "d M Y"); ?> <br> <h3 style="font-size: 30px;font-weight: 600;padding-bottom: 5px;"> <?= $data[0]['title'] ?> </h3> <small>By. <?= $data[0]['first_name'] . ' ' . $data[0]['last_name'] ?> - <i class="fa fa-calendar"></i> <?= $tgl ?> </small> <br><br> <div id="share-box"> <div class="btnShare btnBagikan" style="margin-right: 0px;">Bagikan: </div> <div class="btnShare btnFacebook" style="margin-right: 0px;"> <a href="http://www.facebook.com/sharer/sharer.php?u=<?= base_url() ?>/artikel/<?= $data[0]['id'] ?>" target="_blank"><span class="txt-share"></span><i class="fa fa-facebook" style="color:white"></i><span class="txt-share"></span></a> </div> <div class="btnShare btnTwitter" style="margin-right: 0px;"> <a href="http://twitter.com/share?url=<?= base_url() ?>/artikel/<?= $data[0]['id'] ?>" target="_blank"><span class="txt-share"></span><i class="fa fa-twitter" style="color:black"></i><span class="txt-share"></span></a> </div> <div class="btnShare btnTele" style="margin-right: 0px;"> <a href="https://telegram.me/share/url?url=<?= base_url() ?>/artikel/<?= $data[0]['id'] ?>" target="_blank"><span class="txt-share"></span><i class="fa fa-telegram" style="color:white"></i><span class="txt-share"></span></a> </div> </div> <div class="bottom-social"><a href="#"><i class="fa fa-facebook>"></i></a></div> <video width="100%" poster="<?= $data[0]['url_image'] ?>" controls> <source src="<?= $video; ?>" type="video/mp4"> </video> <br><br> <h5><b>Video Description : </b></h5> <br> <div class="artikel"> <?= $data[0]['fulltexts'] ?> </div><br> <ul class="tags"> <h5><em>Tags :</em> </h5> <?php foreach ($tags as $key => $dt) { ?> <li> <a href="<?= '/search/tags_video/' . $dt->name ?>" class="tag"> <?= ucwords(str_replace('-', ' ', $dt->name)) ?> </a> </li> <?php } ?> </ul> <br><br><br><br> </div><br> <div class="col-lg-3 col-md-3 col-sm-3"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 10px 10px 10px 10px;border: 1px solid #f8f8f8;border-top: 0;padding-top: 2px;"> <label style="font-size: 19px;">Latest Videos</label> </div> <?php foreach ($list_artikel as $dt_list): // $date= date_create($dt_list['publish_up']); // $tgl = date_format($dt_list,"d"); // $bln = date_format($dt_list,"M"); ?> <div style="padding: 10px 10px 10px 10px;border: 1px solid #f8f8f8;border-top: 0;"> <?php if ($dt_list['url_image'] == '') { ?> <img id="output_image" alt="100%x140" style="padding: 10px; display: block;" width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQ4IiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDI0OCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMjQ4IiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjkxLjg0OTk5ODQ3NDEyMTEiIHk9IjcwIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEycHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MjQ4eDE0MDwvdGV4dD48L2c+PC9zdmc+" data-holder-rendered="true"> <?php } else { ?> <a href="<?= '/detail/video/' . $dt_list['id'] . '/' . $dt_list['alias'] ?>"> <img class="img-hover" src="<?= $dt_list['url_image'] ?>" alt="img" width="100%" style="border-radius:2%;"> </a> <?php } ?> <br> <h4 style="padding-top: 10px;"> <a href="<?= '/detail/video/' . $dt_list['id'] . '/' . $dt_list['alias'] ?>" style="border: none;padding: 0px;font-size: 16px;line-height: 5px;font-weight: 500;"> <?= $dt_list['title'] ?> </a> </h4> <!--<p style="padding: 20px 0 18px;font-size: 14px;line-height: 24px;max-width: 300px;"> <?= ''; //$dt_list['introtext']?> </p>--> </div> <?php endforeach; ?> </div> </div> </div> <br> </section>