Responsive Banner 16:9 - Bait & Call to action button

index.html

<!-- Responsive Banner 16:9 - Bait & Call to action button -->
<!-- Hire me:  [email protected] -->

<center>
Any previous contentent here!<br>
Any previous contentent here!<br>
Any previous contentent here!<br>
Any previous contentent here!<br>
Any previous contentent here!<br>
Any previous contentent here!<br>
</center>

<link href="https://fonts.googleapis.com/css?family=Roboto:900&amp;subset=cyrillic-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<div class="sfondo">
  
 <div class="promo">
BLACK FRIDAY<br>
SALE<br>
15<span style="color:#d6a845">%</span> OFF<br>
<button class="buttonx">CALL TO ACTION</button>
</div>
  
</div>
<center>
Any following contentent here!<br>
Any following contentent here!<br>
Any following contentent here!<br>
Any following contentent here!<br>
Any following contentent here!<br>
Any following contentent here!<br>
</center>

responsive-banner-16-9-bait-call-to-action-button.markdown

Responsive Banner 16:9 - Bait & Call to action button

This is an example from the blog article The complete guide to centering a div at http://www.tipue.com/blog/center-a-div/

A Pen by Captain Anonymous on CodePen.

License.

style.css

.sfondo {
  display: inline;
	float: left;
	margin: 0; 
	text-align: left;
	width: 100vw;
	height: 0px;
	padding-top: 56.25%;
	background-image: url('http://test.originalmuranoglass.com/images/blackfryday.jpg');
	background-position:50% 50%;
	background-size:cover;
  font-family: 'Roboto', sans-serif;
  font-size: 7vw;
  line-height: 8vw;
	}

.promo {position: relative; float: left; bottom: 46.25vw; left: 2vw;}
	
.buttonx { 
  margin-top: 4vw;
	padding-top: 2vw;
	padding-bottom: 2vw;
	padding-left: 2vw;
	padding-right: 2vw;
  font-family: 'Nunito';
	font-size: 3vw;
	font-weight: bold;
	background-color: #000000 !important;
	border: 1px solid;
	border-color: #000000;
	border-radius:100px;
	color: #ffffff !important;
	transition: all 0s;
	
}

.buttonx:hover {
	background-color: #ffffff !important;
	border: 1px solid;
	border-color: #000000;
	border-radius:100px;
	color: #000000 !important;
	transition: all 0s;
}

.buttonx:active {
	background-color: #9c9c9c !important;
	border: 1px solid;
	border-color: #9c9c9c;
	border-radius:100px;
	color: #ffffff !important;
	transition: all 0s;
}

.buttonx:focus {
	outline: none;
}