Seperti biasa, kamu harus membuat folder terlebih dahulu dengan nama Part 8 List Bootstrap 4 dan membuat file bernama latihan1.html
Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Popup Boostrap 4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<style>
.row {
background: #2980b9;
color: #fff;
}
h2 {
font-family: 'Times New Roman', Times, serif;
}
.btn {
border: 1px solid #fff;
}
</style>
</head>
<body>
<ul class="list-group">
<li class="list-group-item active">Makanan</li>
<li class="list-group-item">Nasi Uduk</li>
<li class="list-group-item">Mie Ayam</li>
<li class="list-group-item">Ayam sabana</li>
<li class="list-group-item">Pizza</li>
</ul>
<ul class="list-group mt-4">
<li class="list-group-item active">Minuman</li>
<li class="list-group-item list-group-item-primary">Jus Alpukat</li>
<li class="list-group-item list-group-item-secondary">Jus Orange</li>
<li class="list-group-item list-group-item-success">Jus Jambu/li>
<li class="list-group-item list-group-item-danger">Jus Mangga</li>
<li class="list-group-item list-group-item-warning">Jus Tomat</li>
<li class="list-group-item list-group-item-info">Teh Manis</li>
<li class="list-group-item list-group-item-light">Thai Tea Dum Dum</li>
<li class="list-group-item list-group-item-dark">Chatime</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>Hasilnya seperti dibawah ini ya
 |
| Gambar 1. Hasil dari latihan1.html |
Selanjutnya kita akan belajar list yang berbeda, buat file terlebih dahulu bernama latihan2.html
Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>List Bootstrap 4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<style>
.row {
background: #2980b9;
color: #fff;
}
h2 {
font-family: 'Times New Roman', Times, serif;
}
.btn {
border: 1px solid #fff;
}
ul.social-buttons {
color: gray;
}
</style>
</head>
<body>
<div class="col-sm-12">
<ul class="list-inline social-buttons text-center mt-5">
<li class="list-inline-item">Facebook</li>
<li class="list-inline-item">Twitter</li>
<li class="list-inline-item">Instagram</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html> |
| Gambar 2. Hasil dari latihan2.html tanpa icon |
Untuk latihan2.html biasanya kita ganti dengan icon. Agar teman - teman lebih mengerti fungsi dari list-inline-item seperti apa, oleh karena itu teman - teman buat file bernama latihan3.html
Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>List Bootstrap 4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<style>
.row {
background: #2980b9;
color: #fff;
}
h2 {
font-family: 'Times New Roman', Times, serif;
}
.btn {
border: 1px solid #fff;
}
ul.social-buttons {
color: gray;
}
ul.social-buttons li a {
font-size: 20px;
line-height: 50px;
display: block;
width: 50px;
height: 50px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: white;
border-radius: 100%;
outline: none;
background-color: #212529;
}
</style>
</head>
<body>
<div class="col-sm-12">
<ul class="list-inline social-buttons text-center mt-5">
<li class="list-inline-item">
<a href="https://www.facebook.com" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.instagram.com" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.twitter.com" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>Perhatikan pada bagian css dan link font awesome, karena untuk membuat icon, kita harus include font awesome, cek dibagian<head>cek di bagian sini</head>
untuk icon kita menggunakan font awesome
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">Warna icon berbeda, karena ada css-Nya,
ul.social-buttons {
color: gray;
}
ul.social-buttons li a {
font-size: 20px;
line-height: 50px;
display: block;
width: 50px;
height: 50px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: white;
border-radius: 100%;
outline: none;
background-color: #212529;
} |
| Gambar 3. Hasil dari latihan3.html + Add Icon From Font aweseome |
Nah untuk itu akan melanjutkan template bootstrap 4 yang sudah kita buat pada tutorial sebelumnya, yang belum tau bisa lihat dibawah ini
DAFTAR TUTORIAL BOOSTRAP 4
Jadi dari tutorial pertama sampai sekarang, kita sambil belajar dasar, kita juga sambil belajar membuat template menggunakan bootstrap 4. Mungkin om bewok juga bakal buat full-Nya biar ga di potong - potong tutorial-Nya, hmm menarik ya.
Oke mari kita lanjutkan template bootstrap yang kita buat pada tutorial sebelumnya dan kalian juga penasaran fungsi dari list-inline-item.
Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>List Bootstrap 4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">bewoksatukosong</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact us</a>
</li>
<li class="nav-item mr-2">
<a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#kampret">Signup</a>
</li>
<li class="nav-item mr-2">
<a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#free">Login</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid bg-dark">
<div class="container">
<h1 class="display-4 text-center text-light">Pencarian Artikel</h1>
<p class="lead text-center text-light">Kamu bisa mencari artikel apapun yang kamu mau.</p>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Cari Artikel" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark" id="search">Search</button>
</div>
</div>
</div>
</div>
<!-- Categories -->
<div class="container-fluid">
<h1 class="display-5 text-center mb-5">Categories</h1>
<div class="card-deck mb-5">
<div class="card">
<img class="card-img-top img-thumbnail" src="img/produk/codeigniter.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Codeigniter</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn btn-secondary">Readmore</a>
</div>
</div>
<div class="card">
<img class="card-img-top img-thumbnail" src="img/produk/images.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Laravel</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn btn-secondary">Readmore</a>
</div>
</div>
<div class="card">
<img class="card-img-top img-thumbnail" src="img/produk/express.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Express js</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn btn-secondary">Readmore</a>
</div>
</div>
</div>
</div>
<!-- End Categories -->
<!-- Article -->
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row p-5 bg-dark text-light">
<div class="col-md-12">
<h1 class="display-5 text-center mb-5">Article</h1>
</div>
<div class="col-md-4">
<h2>Cara Install Express js</h2>
<p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa
cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering
digunakan oleh para developer. Ada 2 cara untuk install boostrap 4.
Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Cara Install Laravel</h2>
<p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop
apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan emoji. om bewok tidak tau apakah ini
resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Cara Install Codeigniter 2018</h2>
<p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara
Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
Kamu kunjugi website https://www.codeigniter.com/download.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Crud Menggunakan Codeigniter</h2>
<p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa
cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering
digunakan oleh para developer. Ada 2 cara untuk install boostrap 4.
Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Crud Menggunakan Laravel</h2>
<p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop
apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan emoji. om bewok tidak tau apakah ini
resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Crud Menggunakan Express js</h2>
<p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara
Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
Kamu kunjugi website https://www.codeigniter.com/download.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
</div>
<!-- End Article -->
<!-- Top Author -->
<section class="bg-light" id="team">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Top Author</h2>
<h3 class="section-subheading text-muted">Penulis Yang Sering Mendapatkan Like, Comment Dan Share</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="img/author/gerald.jpg" alt="">
<h4>Gerald Prambudi</h4>
<p class="text-muted">Content Creator Tech</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="img/author/am.jpg" alt="">
<h4>Arief Muhammad</h4>
<p class="text-muted">Content Creator About Social Media</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="img/author/rd.jpg" alt="">
<h4>Raditya Dika</h4>
<p class="text-muted">Content Creator Review Film</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<p class="large text-muted">Top Author ini akan selalu update setiap minggu sekali, jika kamu ingin
berkontribusi seperti mereka, kamu bisa contact kami di bewoksatukosong@gmail.com</p>
</div>
</div>
</div>
</section>
<!-- End Top Author -->
<!-- Contact Us -->
<div class="container-fluid">
<div class="col-md-12 bg-dark text-light py-5 px-5">
<h1 class="display-h4 text-center">Contact Us</h1>
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Subject">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="3">Tulis Disini</textarea>
</div>
<button class="btn btn-dark">Send</button>
</form>
</div>
</div>
<!-- End Contact Us -->
<!-- Modal -->
<div class="modal fade" id="kampret" tabindex="-1" role="dialog" aria-labelledby="kampret123" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="kampret123">Daftar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Daftar</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="free" tabindex="-1" role="dialog" aria-labelledby="free123" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="free123">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>Ini css nya, sekarang css-Nya terpisah. kalau kamu bingung, please check my github.
.team-member {
margin-bottom: 50px;
text-align: center;
}
.team-member img {
width: 225px;
height: 225px;
border: 7px solid #fff;
}
.team-member h4 {
margin-top: 25px;
margin-bottom: 0;
text-transform: none;
}
.team-member p {
margin-top: 0;
}
h2 {
font-family: 'Times New Roman', Times, serif;
}
.btn {
border: 1px solid #fff;
}
ul.social-buttons {
margin-bottom: 0;
}
ul.social-buttons li a {
font-size: 20px;
line-height: 50px;
display: block;
width: 50px;
height: 50px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: white;
border-radius: 100%;
outline: none;
background-color: #212529;
}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
background-color: white;
color: #212529;
border: 1px color #212529;
} |
| Gambar 4. Lanjutan Tutorial Sebelumnya. |
Kalau kalian bingung bisa download source kode-Nya di github om bewok, nanti di akhir artikel om bewok kasih link-Nya ya
Oke Tutorial Selanjutnya kita akan mempelajari Tutorial Menggunakan Font Awesome Bootstrap 4. Sampai jumpa di tutorial selanjutnya ya
Kamu bisa lihat Daftar Tutorial Bootstrap 4 dan Source Kode Github dibawah ini.
DAFTAR TUTORIAL BOOTSTRAP 4
SOURCE KODE GITHUB
No comments:
Post a Comment