Html Banner Code (New & Stylish) With 100% Responsive - Do Tech Blog

Html Banner Code (New & Stylish) With 100% Responsive

; ,

Whenever it comes to promotion or advertisement. Then the banner is used. By using the banner, we can easily advertise our website or any product.


When it comes to how do we add banners to the website? So it seems a little difficult.


Because Html Banner Code is required to add banner, and if there is no knowledge of Html Code, then it is difficult to add this code to the website.


But in this article, you will be taught how to use HTML banner code as well as how to use it.


And you will be provided these types of banners, you can use the Html banner code of the type of banner you like.


If you also want to know how to add banners to the website, then you continued with us in this article.


Html-Banner-Code

 

In which you will be given complete information related to how the banner is added to the website.


So let's start this interesting article without wasting time.


Best HTML Banner With (Html Banner Code)


#1 Html Code For Banner With Button


new-banner

<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.banner-image-style {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.pixabay.com/photo/2016/03/09/09/17/computer-1245714_960_720.jpg");
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.banner-text-code {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.banner-text-code button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.banner-text-code button:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<div class="banner-image-style">
<div class="banner-text-code">
<h1 style="font-size:50px">I am Developer</h1>
<p><b>I am a Web Developer and I am a student of computer science</b></p>
<button>Hire me</button>
</div>
</div>
</body>
</html>

#2 Html Code For Banner 


new-banner

<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.banner-image-style {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg");
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.banner-text-code {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.banner-text-code button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.banner-text-code button:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<div class="banner-image-style">
<div class="banner-text-code">
<h1 style="font-size:50px">I am Developer</h1>
<p><b>I am a Web Developer and I am a student of computer science</b></p>
</div>
</div>
</body>
</html>

#3 Html Code For  Slide Banner With Button

new-banner

<html>
<head>
<style type="text/css">.w3-content {
position: relative;
margin-top: 0em;
}
.btn,
.banner-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.btn,
.banner-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.w3-disabled,
.btn:disabled,
.banner-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.w3-disabled *,
:disabled * {
pointer-events: none
}
.w3-bar-block .w3-dropdown-hover .banner-button,
.w3-bar-block .w3-dropdown-click .banner-button {
width: 100%;
text-align: left;
padding: 8px 16px
}
.banner-button:hover {
color: #000!important;
background-color: #ccc!important
}
.w3-content button {
position: absolute;
top: 32%;
}
.mySlides {
height: 100%;
width: 100%;
}

.display-right {
right: 0
}
.display-left {
left: 0
}
</style>
</head>
<body>
<div class="w3-content">
<img class="mySlides" src="Enter-Image-URL"  style="height:40%">
<img class="mySlides" src="Enter-Image-URL"  style="height:40%">
<img class="mySlides" src="Enter-Image-URL"  style="height:40%">
<img class="mySlides" src="Enter-Image-URL"  style="height:40%">
<button class="banner-button w3-black display-left" onclick="plusDivs(-1)">&#10094;</button>
<button class="banner-button w3-black display-right" onclick="plusDivs(1)">&#10095;</button>
</div>
<script>
 var slideIndex = 1;
 showDivs(slideIndex);
 function plusDivs(n) {
 showDivs(slideIndex += n);
  }
 function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
 if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length}for
 (i = 0; i < x.length; i++) {x[i].style.display = "none";}
 x[slideIndex-1].style.display = "block"; }
</script>
 </body>
</html>

 

Also Read: How to Make Html Picture Slideshow 

Also Read: Techniques To Reduce Bounce Rate For Website

Read more

By - ;
Tags: ,

No comments :

Post a Comment

;

Subscribe to: Post Comments ( Atom )