Membuat landig page Blogger- Mas Dicky

 taruh kode ini di mana saja:

  

  

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"></link>

<!-- My Font -->

<link href="https://fonts.Googleapis.com/css?family=Viga" rel="stylesheet"></link>

<!-- My CSS -->

<link rel="stylesheet" href="style.css"></link>

    <title>MASTDICKY.COM</title>

 

  

  <style type="text/css">

  /* Navbar */

.navbar{

position:relative;

z-index:1;

}

.navbar-brand {

Font-family: Viga;

font-size: 32px;

}

/* utilities */

.tombol {

text-transform:uppercase;

border-radius:40px;

}

/* 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:80%;

background-image:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));

position: absolute;

bottom:0;

}

.jumbotron .display-4 {

color:white;

margin-top:150px;

font-weight:200;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);

font-size:40px;

margin-bottom:30px;

}

.jumbotron .display-4 span {

font-weight:500;

}

/* Destop 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;

height:640px;

}

.jumbotron .display-4 {

font-size:62px;

}

}

</style>

      

      

      

      

      

      

      <!-- Navbar -->

  <nav class="navbar navbar-expand-lg navbar-light">

  <div class="container">

   <a class="navbar-brand" href="#">MASTDICKY</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

      <a class="nav-item nav-link" href="#">Pricing</a>

      <a class="nav-item nav-link" href="#">Features</a>

  <a class="nav-item nav-link" href="#">About</a>

  <a class="nav-item 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">Get work done <span>faster</span>  <br> and <span>better</span> whith us</br></h1>

<a href="" class="btn btn-primary tombol"> Our Work </a>

  </div>

      </div>

<!-- akhir Jumbotron -->

      

      

      

      

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

      sumber:http://www.mediafire.com/file/311iasttzfs22gl/Landingpage-mastdicky.rar/file