Great landing page template for an ebook opt-in!
Utilized ReactJS and Bootstrap to create this landing page template.
Ebook cover designed by myself. See on Behance: https://www.behance.net/gallery/45033595/Ebook-Landing-Page
Feel free to invite to dribbble: https://dribbble.com/mikemang
Design and Development available at mikemangialardi.de
A Pen by Mike Mangialardi on CodePen.
| <div id="app"></div> |
| var Toggle = React.createClass({ | |
| render: function () { | |
| return ( | |
| <div className="start"> | |
| <body> | |
| <div className="intro-header"> | |
| <div className="container"> | |
| <div className="row"> | |
| <div className="col-lg-4"> | |
| <img className="landImg img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Wordpress%20SEO%20Ebook.png" alt=""/> | |
| </div> | |
| <div className="col-lg-8"> | |
| <div className="intro-message"> | |
| <h1 className="title animated slideInLeft">Wordpress SEO <br/>in <span className="five">5 </span> Steps</h1> | |
| <h3 className="animated slideInRight">Get this exclusive ebook</h3> | |
| <form className="animated slideInLeft"> | |
| <input className="optin" type="text" placeholder="name" /> | |
| <input className="optin" type="text" placeholder="email" /> </form> | |
| <ul className="list-inline intro-social-buttons"> | |
| <li> | |
| <a href="#" target="_blank"><button className="button animated slideInRight btn btn-info btn-lg"> <span className="network-name">Get Ebook Now</span></button></a> | |
| </li> | |
| </ul> | |
| <h4 className="learn animated bounceInUp">Learn More</h4> | |
| <i className="arrow animated infinite pulse fa fa-angle-down icon fa-5x"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </div> | |
| ); | |
| } | |
| }); | |
| ReactDOM.render( | |
| <Toggle />, | |
| document.getElementById('app') | |
| ); |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> |
| body, | |
| html { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-weight: 100; | |
| letter-spacing: 3px; | |
| } | |
| .brand{ | |
| color: #ffffff; | |
| font-weight: 200; | |
| letter-spacing: 1; | |
| } | |
| .title{ | |
| text-transform: uppercase; | |
| } | |
| .learn:hover{ | |
| cursor: pointer; | |
| } | |
| .arrow:hover{ | |
| cursor: pointer; | |
| } | |
| .intro-header { | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| text-align: center; | |
| color: #f8f8f8; | |
| background:linear-gradient( | |
| rgba(55, 186, 229, 0.60), | |
| rgba(23, 149, 191, 0.7) | |
| ), url("https://static.pexels.com/photos/82256/pexels-photo-82256-large.jpeg"); | |
| background-size: cover; | |
| } | |
| .intro-message { | |
| position: relative; | |
| padding-top: 0%; | |
| padding-bottom: 20%; | |
| } | |
| .intro-message > h1 { | |
| margin-top: -500; | |
| font-size: 4.5em; | |
| font-weight: 800; | |
| } | |
| .intro-message > h3 { | |
| margin-top: 50; | |
| font-size: 2.5em; | |
| font-weight: 150; | |
| letter-spacing: 4; | |
| } | |
| .intro-message > h4 { | |
| margin-top: 200; | |
| font-size: 1.25em; | |
| font-weight: 400; | |
| letter-spacing: 2; | |
| } | |
| .landImg{ | |
| margin-left: 15%; | |
| margin-top: 5%; | |
| } | |
| form{ | |
| padding: 20px 0; | |
| position: relative; | |
| } | |
| .optin{ | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| outline: 0; | |
| border: 1px solid rgba(255, 255, 255, 0.8); | |
| background-color: rgba(255, 255, 255, 0.8); | |
| width: 50%; | |
| display: block; | |
| margin: 0 auto; | |
| margin-bottom: 10px; | |
| border-radius: 3px; | |
| padding: 10px 15px; | |
| text-align: left; | |
| font-size: 18px; | |
| color: black; | |
| -webkit-transition-duration: 0.25s; | |
| transition-duration: 0.25s; | |
| font-weight: 300; | |
| } | |
| .optin:hover{ | |
| background-color: rgba(255, 255, 255, 0.4); | |
| } | |
| .optin:focus { | |
| background-color: white; | |
| width: 300px; | |
| color: rgba(37, 169, 252, 1.0); | |
| } | |
| @media(max-width:767px) { | |
| .intro-message { | |
| padding-bottom: 15%; | |
| } | |
| .intro-message > h1 { | |
| font-size: 3em; | |
| } | |
| ul.intro-social-buttons > li { | |
| display: block; | |
| margin-bottom: 20px; | |
| padding: 0; | |
| } | |
| ul.intro-social-buttons > li:last-child { | |
| margin-bottom: 0; | |
| } | |
| } | |
| .button{ | |
| margin-top: 10px; | |
| margin-bottom: 20px; | |
| background: #FEDA77; | |
| border: none; | |
| border-radius: 0%; | |
| border-bottom: 6px solid #F9C427; | |
| padding: 15px 15px 15px 15px; | |
| } | |
| .button:hover{ | |
| margin-top: 10px; | |
| background: #F9C427; | |
| border-bottom: 6px solid #FEDA77; | |
| border-radius: 0%; | |
| padding: 15px 15px 15px 15px; | |
| } | |
| .five{ | |
| color: #FEDA77; | |
| } | |
| .network-name { | |
| text-transform: uppercase; | |
| font-size: 22px; | |
| font-weight: 800; | |
| font-family: 'lato'; | |
| } |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> |