Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Selector css tidak berfungsi pada bootstrap
saya membuat html dengan bootstrap seperti ini
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- font -->
<link href="https://fonts.googleapis.com/css2?family=Viga&display=swap" rel="stylesheet">
<!-- My css -->
<link rel="stylesheet" href="style.css">
<title>Toko Murah</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container">
<a class="navbar-brand" href="#">Toko Murah</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">About</a>
<a class=" btn btn-primary tombol" href="#">Join Us</a>
</div>
</div>
</div>
</nav>
<!-- Akhir Navbar -->
<!-- Jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4 judul">Get work done <span>faster</span> and <span>better</span> with us</h1>
<a href="" class="btn btn-primary tombol1">Our Work</a>
</div>
</div>
<!-- AKhir Jumbotron -->
<div class="container">
<!-- info panel -->
<div class="row justify-content-center">
<div class="col-lg-10 info-panel">
<div class="row">
<div class="col-lg">
<img src="img/employee.png" alt="employee" class="float-left">
<h4>24 Hours</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-lg">
<img src="img/hires.png" alt="hires" class="float-left">
<h4>24 Hours</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-lg">
<img src="img/security.png" alt="security" class="float-left">
<h4>24 Hours</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<!-- akhir info panel -->
</div>
<!-- Container -->
<!-- akhir Container -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
dan css seperti ini
/* Navbar */
.navbar{
position: relative;
z-index: 1;
}
.ml-auto{
margin-left: auto;
}
.navbar-brand{
font-family: 'Viga', sans-serif;
font-size: 32px;
}
/* Jumbotron */
.jumbotron{
background-image: url(img/jumbotron-bg.jpg);
background-size: cover;
height: 540px;
text-align: center;
position: relative;
}
.jumbotron .container{
position: relative;
z-index: 1;
}
.jumbotron::after{
content: '';
display: block;
width: 100%;
height: 100%;
background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
position: absolute;
bottom: 0;
}
h1, .judul{
color: white;
/* margin-top: 150px; */
padding: 30vmin;
font-weight: 200;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
font-size: 35px;
}
.jumbotron .display-4 span{
font-weight: 500;
}
.display-4{
margin-bottom: -140px;
}
/* info panel */
.info-panel{
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
border-radius: 12px;
margin-top: -50px;
background-color: white;
position: relative;
z-index: 2;
padding: 30px;
}
.info-panel img{
width: 80px;
height: 80px;
margin-right: 20px !important;
margin-bottom: 20px;
}
/* Utility */
.tombol{
text-transform: uppercase;
border-radius: 40px;
}
/* DEKSTOP VERSION */
@media (min-width: 992px) {
.navbar-brand, .nav-link{
color: white !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
.nav-link{
text-transform: uppercase;
margin-right: 30px;
}
.nav-link:hover::after{
content: "";
display: block;
border-bottom: 3px solid #0b63dc;
width: 50%;
margin: auto;
padding-bottom: 5px;
margin-bottom: -8px;
}
.jumbotron{
margin-top: -75px !important;
height: 640px;
}
h1, .judul{
font-size: 62px;
}
}
tetapi selector css yang saya gunakan seperti ini tidak berfungsi, mohon pencerahanya
.info-panel img{
width: 80px;
height: 80px;
margin-right: 20px !important;
margin-bottom: 20px;
}
3 Jawaban:
<div>Coba di kasih tanda "!important" semua di setiap property-nya, agar style yang sudah ada sebelumnya diabaikan, jadi "dipaksa" untuk menggunakan style yg diberi tanda "!important", ubah kodenya jadi seperti ini :<br><br></div><pre>.info-panel img{ width: 80px !important; height: 80px !important; margin-right: 20px !important; margin-bottom: 20px !important; }</pre><div><br>Semoga membantu!</div>
Tanggapan
Masih tidak bisa
<div>sepertinya tidak ada masalah.<br>Browser menjalankan CSS-nya sesuai yang diharapkan.<br><figure data-trix-attachment="{"contentType":"image/png","filename":"sk_yudayuda_8080.png","filesize":242549,"height":603,"url":"https://i.ibb.co/800Swrm/sk-yudayuda-8080.png","width":1920}" data-trix-content-type="image/png" data-trix-attributes="{"caption":"80px * 80px","presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/800Swrm/sk-yudayuda-8080.png" width="1920" height="603"><figcaption class="attachment__caption attachment__caption--edited">80px * 80px</figcaption></figure><br><figure data-trix-attachment="{"contentType":"image/png","filename":"sk_yudayuda_12080.png","filesize":302423,"height":693,"url":"https://i.ibb.co/crm2Zc8/sk-yudayuda-12080.png","width":1920}" data-trix-content-type="image/png" data-trix-attributes="{"caption":"120px * 80px","presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/crm2Zc8/sk-yudayuda-12080.png" width="1920" height="693"><figcaption class="attachment__caption attachment__caption--edited">120px * 80px</figcaption></figure><br><br><br></div>
Jawaban Terpilih
<div>atau bisa aja di ganti dari</div><pre>.info-panel img</pre><div>jadi</div><pre>.col-lg img</pre><div>kalau gak mau kyk gitu di element</div><pre><div class="col-lg"></pre><div>dikasih lagi class buat nge style img di dalemnya CONTOH</div><pre><div class="col-lg img-style"></pre><div>Jadi nanti di CSS nya</div><pre>.img-style img </pre>
