Membuat Hero Banner HTML

Gimana cara buat Hero Banner di HTML?

SD Ditanyakan on 11 December 2016 pada Blog.
Tambah Komentar
4 Jawaban

<h1>Responsive Hero</h1>

<div class=”hero-bg”>
<div class=”hero-content”>
<h2>kata kata kata</h2>
<a class=”btn”>nama panggilan</a>
</div>
</div>

SD Terjawab on 11 December 2016
Tambah Komentar

Ini gan kode HTML dan CSSnya

HTML Hero Banner


<h1>Responsive Hero</h1>

<div class="hero-bg">

<div class="hero-content">

<h2>Some sort of snazzy text here!</h2>

<a class="btn">Call to Action</a>

</div>

</div>

Kode CSSnya (bisa di custom sendiri)

@import "compass/css3";
html {font-size:16px;}
body { font-family:"Helvetica Neue", Helvetica, sans-serif; margin:0; text-align:center; }
h1 { line-height:100px; margin:0; }
.hero-bg {

background:#222;

height:100%;

max-height:468px;

width:100%;

clear:both;

position:absolute;

margin-bottom:200px;
background:url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-1.jpg) no-repeat center center;

background-size:cover;
@media (min-width:641px) and (max-width:1024px) {

background:url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-2.jpg) no-repeat center center;

background-size:cover;

}
@media (min-width:1025px) and (max-width:1500px) {

background:url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-3.jpg) no-repeat center center;

background-size:cover;

}
@media (min-width:1501px){

background:url(https://dl.dropboxusercontent.com/u/24098368/responsive-hero-bg-4.jpg) no-repeat center center;

background-size:cover;

}
}
.hero-content {

position: relative;

display: -webkit-box;

display: -moz-box;

display: -ms-box;

display: box;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

-ms-box-orient: vertical;

box-orient: vertical;

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-box-pack: center;

box-pack: center;

height: 100%;

}
h2 {

color:#fff;

font-size:3em;

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

margin:0 0 20px;

}
a.btn {

text-decoration:none;

color:#005c9e;

font-size:1.2em;

border:1px solid #fff;

padding:10px 20px;

background:rgba(255,255,255,0.9);

border-radius:5px;

}

DEMO Banner Heronya :

 

SMA Terjawab on 11 December 2016
Tambah Komentar

Penerapannya gmn? Disisipkan pada index.php atau buat php lagi

SD Terjawab on 11 December 2016
Tambah Komentar

Agan pakai frame apa CI, Laravel, atau apa gan ? soalnya beda2 caranya ­čśÇ

SMA Terjawab on 11 December 2016
Tambah Komentar
  • Jawaban Anda

    Dengan memposting jawaban, anda setuju dengan Kebijakan Privasi dan ketentuan layanan.