<div class="ban1">
<h1>Some rpoduct
<s>5.00$</s> <i><b>$3.00</b></i></h1>
<h3>🎉30 money back guarantee🎉</h3>
<br />
<br />
<br />
<button>Buy Now</button>
<br />
<br />
<br />
<br />
<br />
<p style="font-size: 10px; text-align: center;">Our Terms of use and Privicy Policy all apply.</p>
</div>
.ban1 {
width: 100%;
height: 500px;
background-image: url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=752&q=80");
/*
original link is /jwcodeme/assets/Ban_1_bg.jpg
*/
}
.ban1 h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
padding-top: 10%;
}
.ban1 h3 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
}
.ban1 button {
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: Transparent;
cursor: pointer;
overflow: hidden;
border: solid 1px;
padding: 10px 15px 10px;
border-radius: 5px;
font-weight: bold;
}
.ban1 button:hover {
background-color: black;
transition: 1s;
color: white;
border: none;
}
::selection {
background-color: yellow;
color: black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.