i changed the value of class in css…but it doesnt change when viewing it on browser. the content i changed one that shows trending below. Here is the css.
home_title.islive::after
{
display: block;
position: absolute;
top: 0;
right: -72px;
width: 90px;
height: 90px;
border-radius: 50%;
background: #e830fe;
content: 'Trending';
line-height: 95px;
font-size: 16px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
Hi there @djboziah. We would need to see your relevant HTML as well.
here you go
<!DOCTYPE html>
<html lang="en">
<head>
<title>Music</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Music template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.3.4/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.3.4/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.3.4/animate.css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-center">
<!-- Logo -->
<div class="logo">
<a href="#" class="d-flex flex-row align-items-end justify-content-start">
<span class="logo_bars d-flex flex-row align-items-end justify-content-between"><span></span><span></span><span></span><span></span><span></span></span>
<span class="logo_text">music</span>
</a>
</div>
<!-- Main Navigation -->
<nav class="main_nav">
<ul class="d-flex flex-row align-items-center justify-content-start">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="#">Download Music</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- User area -->
<div class="log_reg d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
<!-- Hamburger -->
<div class="hamburger d-flex flex-column align-items-end justify-content-between"><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Menu -->
<div class="menu">
<div class="menu_container">
<div class="menu_background"></div>
<div class="menu_close"><i class="fa fa-times" aria-hidden="true"></i></div>
<div class="menu_content d-flex flex-column align-items-center justify-content-start">
<nav class="menu_nav">
<ul class="d-flex flex-column align-items-center justify-content-start">
<li><a href="index.html">Home</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="#">Download Music</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Home Slider -->
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/index.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="home_title islive text-center"><h1>Sauti Sol - <span>Suzanna.</span></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/index.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="home_title islive text-center"><h1>Nadia Mukami - <span>Jipe</span></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/index.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="home_title islive text-center"><h1>NaiBoi Ft Kemunto - <span>Ready.</span></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Home Slider Navigation -->
<div class="home_slider_nav"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
<!-- Home Social -->
<div class="home_social">
<div class="d-flex flex-row align-items-center justify-content-start">
<div class="home_social_text">follow</div>
<div class="home_social_list">
<ul class="d-flex flex-row align-items-center justify-content-start">
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- Scroll Down -->
<div class="scroll_down scroll_down_link" data-scroll-to=".tours">
<a href="#"></a>
<div class="d-flex flex-row align-items-center justify-content-start">
<div>scroll down</div>
<div class="scroll_arrows d-flex flex-column align-items-start justify-content-start">
<img src="images/arrow_down.png" alt="">
<img src="images/arrow_down.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- Song -->
<div class="song">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/song.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="song_content">
<!-- Player -->
<div class="single_player_container">
<div class="single_player d-flex flex-row align-items-center justify-content-start">
<div id="jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-gui jp-interface d-flex flex-lg-row flex-column align-items-start justify-content-start">
<!-- Player Controls -->
<div class="player_controls_box d-flex flex-row align-items-start justify-content-start">
<div class="order-lg-1 order-2">
<div class="player_title">song of the week</div>
<div class="jp-controls-holder player_controls ml-auto d-flex flex-row align-items-start justify-content-start">
<button class="jp-play player_button" tabindex="0"></button>
<button class="jp-stop player_button" tabindex="0"></button>
</div>
</div>
<div class="song_image ml-lg-auto order-lg-2 order-1"><img src="images/song_1.jpg" alt=""></div>
</div>
<!-- Progress Bar -->
<div class="player_bars d-flex flex-row align-items-start justify-content-start">
<div class="player_progress_box">
<div class="jp-current-time" role="timer" aria-label="time">00:00</div>
<div class="song_info">
<div class="jp-artist" aria-label="title">Michael Smith</div>
<div class="jp-title" aria-label="title"></div>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div>
<div class="jp-play-bar"><span></span></div>
</div>
</div>
</div>
<div class="jp-duration ml-auto" role="timer" aria-label="duration">02:33</div>
</div>
<!-- Volume Controls -->
<div class="jp-volume-controls ml-lg-auto">
<div class="mute_button">
<button class="jp-mute" tabindex="0"></button>
</div>
<div class="d-flex flex-row align-items-center justify-content-start">
<div class="jp-volume-bar">
<div>
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tours -->
<div class="tours">
<div class="container">
<div class="row row-lg-eq-height">
<!-- Add -->
<div class="col-lg-4 order-lg-1 order-2 tours_col">
<div class="extra d-flex flex-column align-items-center justify-content-between">
<div class="background_image" style="background-image:url(images/extra_1.jpg)"></div>
<div class="extra_frame"></div>
<div class="extra_text">it's awesome</div>
<div class="extra_title_container">
<div class="extra_year">2019</div>
<div class="extra_title">world tour</div>
<div class="extra_subtitle">november 2018</div>
</div>
<div class="button extra_button"><a href="#">get your tickets</a></div>
</div>
</div>
<!-- Tours Content -->
<div class="col-lg-8 order-lg-2 order-1">
<div class="tours_content">
<div class="section_title"><h1>Tour Dates</h1></div>
<div class="tours_list_container">
<ul class="tours_list">
<!-- Tour -->
<li class="d-flex flex-row align-items-start justify-content-start">
<div class="tour_info">
<div class="tour_date">Sun, 21 Oct 2018</div>
<div class="tour_name"><a href="#">The O2</a></div>
<div class="tour_location">London, United Kingdom</div>
</div>
<div class="button tour_button ml-auto"><a href="#">get your tickets</a></div>
</li>
<!-- Tour -->
<li class="d-flex flex-row align-items-start justify-content-start">
<div class="tour_info">
<div class="tour_date">Mon, 22 Oct 2018</div>
<div class="tour_name"><a href="#">The O2</a></div>
<div class="tour_location">London, United Kingdom</div>
</div>
<div class="button tour_button ml-auto"><a href="#">get your tickets</a></div>
</li>
<!-- Tour -->
<li class="d-flex flex-row align-items-start justify-content-start">
<div class="tour_info">
<div class="tour_date">Tue, 23 Oct 2018</div>
<div class="tour_name"><a href="#">The O2</a></div>
<div class="tour_location">London, United Kingdom</div>
</div>
<div class="button tour_button ml-auto"><a href="#">get your tickets</a></div>
</li>
<!-- Tour -->
<li class="d-flex flex-row align-items-start justify-content-start">
<div class="tour_info">
<div class="tour_date">Wed, 24 Oct 2018</div>
<div class="tour_name"><a href="#">The O2</a></div>
<div class="tour_location">London, United Kingdom</div>
</div>
<div class="button tour_button ml-auto"><a href="#">get your tickets</a></div>
</li>
</ul>
</div>
<div class="tours_link"><a href="#">See All Tour Dates</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- App -->
<div class="app">
<div class="container">
<div class="row row-lg-eq-height">
<!-- App Image -->
<div class="col-lg-6 order-lg-1 order-2 app_col">
<div class="app_image">
<img src="images/app.jpg" alt="">
</div>
</div>
<!-- App Content -->
<div class="col-lg-6 order-lg-2 order-1">
<div class="app_content d-flex flex-column align-items-start justify-content-center">
<div class="section_title"><h1>Get Your Music Right Now!</h1></div>
<div class="app_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque, nisi nisl tincidunt enim, non aliquet diam neque sed urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse nec faucibus velit. Quisque eleifend orci ipsum, a bibendum lacus suscipit sit amet</p>
</div>
<div class="stores d-flex flex-row align-items-start justify-content-start flex-wrap">
<div class="store"><a href="#"><img src="images/appstore.png" alt=""></a></div>
<div class="store"><a href="#"><img src="images/googleplay.png" alt=""></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured -->
<div class="featured">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center"><h1>Featured Albums</h1></div>
<div class="featured_list">
<div id="jplayer_2" class="jp-jplayer"></div>
<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-playlist">
<ul class="d-flex flex-row align-items-start justify-content-start flex-wrap">
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- News -->
<div class="news">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title"><h1>Latest News</h1></div>
</div>
</div>
<div class="row news_row">
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_top">
<div class="news_post_image"><img src="images/news_1.jpg" alt=""></div>
<div class="news_post_content">
<div class="news_post_date"><a href="#">Oct 19, 2018</a></div>
<div class="news_post_title"><a href="#">Music Seminary at Festival</a></div>
<div class="news_post_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque, nisi nisl tincidunt enim, non aliquet diam neque sed urna.</p>
</div>
</div>
</div>
</div>
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_bottom d-flex flex-column align-items-start justify-content-start">
<div class="news_post_content order-md-1 order-2">
<div class="news_post_date"><a href="#">Oct 19, 2018</a></div>
<div class="news_post_title"><a href="#">Festival list for 2019</a></div>
<div class="news_post_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque, nisi nisl tincidunt enim, non aliquet diam neque sed urna.</p>
</div>
</div>
<div class="news_post_image order-md-2 order-1"><img src="images/news_2.jpg" alt=""></div>
</div>
</div>
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_top">
<div class="news_post_image"><img src="images/news_3.jpg" alt=""></div>
<div class="news_post_content">
<div class="news_post_date"><a href="#">Oct 19, 2018</a></div>
<div class="news_post_title"><a href="#">New album release in 2019</a></div>
<div class="news_post_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque, nisi nisl tincidunt enim, non aliquet diam neque sed urna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<div class="container">
<div class="row">
<!-- Newsletter Content -->
<div class="col-xl-6">
<div class="newsletter_content">
<div class="section_title"><h1>Subscribe & Follow</h1></div>
<div class="newsletter_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque.</p>
</div>
</div>
</div>
<!-- Newsletter Form -->
<div class="col-xl-6 nl_col">
<div class="newsletter_form_container d-flex flex-column align-items-start justify-content-end">
<form action="#" class="newsletter_form" id="newsletter_form">
<div class="d-flex flex-row align-items-start justify-content-between">
<input type="email" class="newsletter_input" placeholder="Your E-mail" required="required">
<button class="button newsletter_button"><span>subscribe</span></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="background_image" style="background-image:url(images/footer.jpg)"></div>
<div class="footer_content">
<div class="container">
<div class="row">
<div class="col text-center">
<!-- Logo -->
<div class="logo">
<a href="#" class="d-flex flex-row align-items-end justify-content-start">
<span class="logo_bars d-flex flex-row align-items-end justify-content-between"><span></span><span></span><span></span><span></span><span></span></span>
<span class="logo_text">music</span>
</a>
</div>
<!-- Footer Social -->
<div class="footer_social">
<ul class="d-flex flex-row align-items-center justify-content-center">
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer_bar">
<div class="container">
<div class="row">
<div class="col">
<div class="copyright text-center"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></div>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="styles/bootstrap-4.1.2/popper.js"></script>
<script src="styles/bootstrap-4.1.2/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/OwlCarousel2-2.3.4/owl.carousel.js"></script>
<script src="plugins/jPlayer/jquery.jplayer.min.js"></script>
<script src="plugins/jPlayer/jplayer.playlist.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/progressbar/progressbar.min.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="plugins/scrollTo/jquery.scrollTo.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Solved.
You solved it, great, what was the solution?
i changed the value of the content In the main_styles.css under home_title is live container.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.