RE: Membuat Hero Banner HTML

Gimana cara buat Hero Banner di HTML?

darylfarahi SD Ditanyakan on 11 December 2016 pada Blog.
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

Jawaban Anda

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