<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.