<body>
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/d2/b4/a3/d2b4a3cc6c5e2322b2646c5d06ec197c.png" alt="Book" class="book">
</div>
<div class="column">
<form class="modal-content animate" action="">
<div class="header">
<h1>FREE VIDEO:</h1>
<h5>5 Steps to Say Yes</h5>
<h5>(A Step-by-Step Walk Through of</h5>
<h5>a Complementary Coaching Call)</h5>
</div>
<div class="modal-body">
<input type="modal-text" name="firstName" id="firstName" placeholder="First Name *" required="required">
<input type="email" placeholder="Email *" name="email" id="email" placeholder="Email" required="required">
<button type="submit">FREE INSTANT ACCESS</button>
</div>
</form>
<div class="copyright">
<p><strong> <a href="#">Terms & Conditions</a></strong></p>
<p>2019 <strong>The Coach Mindset</strong> All Rights Reserved</p>
</div>
</div>
</div>
</body>
</html>body {
background: url(https://i.pinimg.com/originals/04/34/29/0434292e2120ed0393b5821e80a4238f.png);
repeat: none;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-size: 25px;
font-weight: 900;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 20px;
text-align: center;
}
.book {
text-align: center;
width: 350px;
height:auto;
margin: 10px;
}
/* Modal Content Box */
.modal-content {
/* text-align: center; */
background-color: #fefefe;
margin: 10%;
border: 1px solid #888;
width: 70%;
padding: 5px;
border-radius: 10px;
}
.modal-body{
text-align: center;
}
/* Input fields */
input {
width: 90%;
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
font-size:12px;
border-radius: 10px;
}
/* Style button */
button {
background-color: #97e502;
color: white;
padding: 10px;
margin-top: 5px;
margin-bottom: 20px;
border: none;
cursor: pointer;
width: 90%;
font-size:18px;
font-weight: 900;
border-radius: 10px;
}
button:hover {
opacity: 0.8;
}
/* Center the text */
.header {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* Modal Footer */
.copyright {
color: fff;
}
.copyright p {
font-size: 12px;
color: #fff;
text-align: center;
line-height: .5;
}
.copyright a {
font-decoration: none;
color: #fff;
}
/* Add Zoom Animation */
.animate {
animation: zoom 0.6s
}
@keyframes zoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.