|
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 {
border-radius: 3%;
}
.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;">Share:
</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>
<?php if ($data[0]['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 { ?>
<img src="<?= $data[0]['url_image'] ?>" alt="img" width="100%">
<?php } ?>
<br><br>
<div class="artikel">
<?= $data[0]['fulltexts'] ?>
</div>
<ul class="tags">
<h5><em>Tags :</em> </h5>
<?php foreach ($tags as $key => $dt) { ?>
<li>
<a href="<?= '/search/tags_artikel/' . $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 Tips</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/artikel/' . $dt_list['id'] . '/' . $dt_list['alias'] ?>">
<img class="img-hover" src="<?= $dt_list['url_image'] ?>" alt="img" width="100%">
</a>
<?php } ?>
<br>
<h4 style="padding-top: 10px;">
<a href="<?= '/detail/artikel/' . $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>