Bootstrap 4.1.1 Landing Carousel HTML and CSS
Juli 06, 2022
Candil Kuya - Hallo Sobat Developers kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat Bootstrap 4.1.1 Landing Carousel sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, anda bisa menerapkan design ini untuk mempercantik tampilan website anda. Tidak usah berlama lama langsung saja saya share tutorial Bootstrap 4.1.1 Landing Carousel Silahkan di simak dan perhatikan baik-baik code di bawah ini.
How to Create Bootstrap 4.1.1 Landing Carousel
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Full Silider Bs.4.1.1 by Luckmoshy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtYVSF139MdDOcXRE5wtB_WJvxLncJw75z2qX88s-CWT2Gq2WNY-Yb8R1Z3y6JT56U7k4X796eMfWJjmUAeAFkCgBuSx-mvfpvD0fx5oUJ5se_DwaYay9NTJGDmU4LZ9AWRFw_xowdXP1/s1600/ux-design.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Ci_yZOS12b2xmEgSF9dmo9dl-rZbhCfJiA0H_iTTIOAoZddPkt2a1w324bzFKHO6f7kbjbzsVA9yVHbQwhDtiiut7bsSw80V4JgrXqnngyObg2Q7LxmF11AzPIMpdNSU5F2fZ2EaC3UJ/s1600/Businesswoman-working-at-a-computer-1280x720.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHkUcWYmWQ1LBTj0Al2kkgws4AgFusyrapslOA5gG9hjp2Rmido-kcXUei_LPIUD_NaBlXuT8aluGkAdQiSDjSL55vln6sq1eGSTMvc8MzaccM5SVSNYxxQ0FITEn4ezFfxi7dtuAzydW/s1600/t1larg.africa.cnn.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<section class="py-5 text-center">
<div class="container">
<h2 class="text-center">Luckmoshy`s Services</h2>
<p class="text-muted mb-5 text-center">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>
<div class="row">
<div class="col-sm-6 col-lg-4 mb-3">
<svg class="lnr text-primary services-icon">
<use xlink:href="#lnr-magic-wand"></use>
</svg>
<h6>Ex cupidatat eu</h6>
<p class="text-muted">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
</div>
<div class="col-sm-6 col-lg-4 mb-3">
<svg class="lnr text-primary services-icon">
<use xlink:href="#lnr-heart"></use>
</svg>
<h6>Tempor aute occaecat</h6>
<p class="text-muted">Tempor aute occaecat pariatur esse aute amet.</p>
</div>
<div class="col-sm-6 col-lg-4 mb-3">
<svg class="lnr text-primary services-icon">
<use xlink:href="#lnr-rocket"></use>
</svg>
<h6>Voluptate ex irure</h6>
<p class="text-muted">Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.</p>
</div>
<div class="col-sm-6 col-lg-4 mb-3">
<svg class="lnr text-primary services-icon">
<use xlink:href="#lnr-paperclip"></use>
</svg>
<h6>Tempor commodo</h6>
<p class="text-muted">Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p>
</div>
<div class="col-sm-6 col-lg-4 mb-3">
<svg class="lnr text-primary services-icon">
<use xlink:href="#lnr-screen"></use>
</svg>
<h6>Et fugiat sint occaecat</h6>
<p class="text-muted">Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.</p>
</div>
<div class="col-sm-6 col-lg-4 mb-3">
<svg class="lnr text-primary services-icon">
<use xlink:href="#lnr-inbox"></use>
</svg>
<h6>Et labore tempor et</h6>
<p class="text-muted">Et labore tempor et adipisicing dolor.</p>
</div>
</div>
</div>
</section>
<section class="main">
<div class="container mt-4">
<h1 class="text-center mb-4 p-4 text-secondary">From The Blog</h1>
<div class="row">
<div class="card-columns">
<div class="card shadow border-0">
<img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Ci_yZOS12b2xmEgSF9dmo9dl-rZbhCfJiA0H_iTTIOAoZddPkt2a1w324bzFKHO6f7kbjbzsVA9yVHbQwhDtiiut7bsSw80V4JgrXqnngyObg2Q7LxmF11AzPIMpdNSU5F2fZ2EaC3UJ/s1600/Businesswoman-working-at-a-computer-1280x720.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card shadow border-0 p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card shadow border-0">
<img class="card-img-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Ci_yZOS12b2xmEgSF9dmo9dl-rZbhCfJiA0H_iTTIOAoZddPkt2a1w324bzFKHO6f7kbjbzsVA9yVHbQwhDtiiut7bsSw80V4JgrXqnngyObg2Q7LxmF11AzPIMpdNSU5F2fZ2EaC3UJ/s1600/Businesswoman-working-at-a-computer-1280x720.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card shadow border-0 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card shadow border-0 text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card shadow border-0">
<img class="card-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Ci_yZOS12b2xmEgSF9dmo9dl-rZbhCfJiA0H_iTTIOAoZddPkt2a1w324bzFKHO6f7kbjbzsVA9yVHbQwhDtiiut7bsSw80V4JgrXqnngyObg2Q7LxmF11AzPIMpdNSU5F2fZ2EaC3UJ/s1600/Businesswoman-working-at-a-computer-1280x720.jpg" alt="Card image">
</div>
<div class="card shadow border-0 p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card shadow border-0">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Header -->
<header class="bg-primary text-center py-5 mb-4">
<div class="container">
<h1 class="font-weight-light text-white">Meet the Team</h1>
</div>
</header>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Team Member 1 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/TMgQMXoglsM/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/9UVmlIb0wJU/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/sNut2MqSmds/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- Team Member 4 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/ZI6p3i9SbVU/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<blockquote class="blockquote text-center mb-0">
<svg class="lnr text-muted quote-icon pull-left">
<use xlink:href="#lnr-heart">
</use></svg>
<p class="mb-0">Keep in touch with me for more Theme right here!</p>
<footer class="blockquote-footer">Luckmoshy Designing
<cite title="Source Title">Webublog @</cite>
</footer>
</blockquote>
</div>
<div class="col-md-4">
<a class="flot-right btn btn-white border-0 rounded shadow post-pager-link p-0 next ml-4" href="">
<span class="d-flex h-100">
<span class="p-3 d-flex flex-column justify-content-center w-100">
<div class="indicator mb-1 text-uppercase text-muted">webublog<i class="fa fa-bars ml-2"></i></div>
<p class="f-13">See next awesome themes</p>
</span>
<span class="bg-primary p-2 d-flex align-items-center text-white">
<i class="fa fa-arrow-circle-right"></i>
</span>
</span>
</a></div>
</div>
</div>
<!-- /.container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
</body>
</html>
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
section {
padding-top: 5rem;
padding-bottom: 5rem;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
stroke-width: 1;
}
.services-icon {
margin-bottom: 20px;
font-size: 30px;
}
bgc2, .vLine, .hLine {
background-color: #0F52BA;
}
.quote-icon {
font-size: 40px;
margin-bottom: 20px;
}
.services-icon {
font-size: 60px;
margin-left: 2rem;
}
***
Gunakan Live code editor online untuk mencoba tutorial diatas.
Tentang Cara Membuat Bootstrap 4.1.1 Landing Carousel
Bagaimana sobat Candil Code cukup mudah bukan? artikel ini sengaja saya sediakan khusus untuk anda yang masih pemula di dalam dunia pemrograman, Semoga dapat bermanfaat bagi sobat Candil yang ingin belajar dasar pemrograman seperti HTML, CSS dan Juga Javascript. Anda juga bisa menggunakan jasa candil kuya untuk anda yang sedang mencari layanan Jasa Pembuatan Website.
Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika anda mempunyai kritik dan saran Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak atau bisa berkomentar di kolom yang sudah saya sediakan dibawah.
Penutup
Semoga saja code Bootstrap 4.1.1 Landing Carousel bisa dijadikan refferensi pembelajaran untuk anda yang masih baru terjun ke dalam dunia web pemrograman jangan lupa di share ke teman atau kerabat anda, nantikan web design menarik lainnya hanya di blog ini, Semoga Bermanfaat and Hapy Ngoding.
