Team Popup

• Posted: March 23, 2016
• / By: Magda
• / In:

HTML markup

CSS

<div class="ct-team-ajax"> <div class="row"> <div class="col-md-5"> <img src="assets/images/demo-content/team-1.jpg" alt="John Smithers" /> </div> <div class="col-md-7"> <header> <h4>John Smithers<a href="11234567890">+1 (123) 456-7890</a><small>co-founder</small> </h4> <ul class="ct-socials list-inline list-unstyled"> <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a> </li> <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </li> <li class="ct-socials__item--linkedin"><a href="#"><i class="fa fa-linkedin"></i></a> </li> </ul> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit.</p> </div> </div> <div class="row"> <div class="col-md-5"> <h4>I can help you with</h4> <ul class="ct-team-ajax__list ct-list"> <li>general inquiries</li> <li>business partnerships</li> <li>wholesale</li> <li>endorsement</li> <li>event organisation</li> <li>warranty</li> <li>we can simply hang on</li> </ul> </div> <div class="col-md-7"> <form> <h4>Drop me a line</h4> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <input type="text" placeholder="Name" id="ajax-name" name="field[]" required="required" class="form-control" /> <label for="ajax-name" class="sr-only">Name</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="email" placeholder="Email" id="ajax-email" name="field[]" required="required" class="form-control" /> <label for="ajax-email" class="sr-only">Email</label> </div> </div> <div class="col-sm-12"> <div class="form-group"> <textarea placeholder="Message" id="ajax-message" rows="4" required="required" name="field[]" class="form-control"></textarea> <label for="ajax-message" class="sr-only">Message</label> </div> </div> </div> <button type="submit" class="btn btn-motive">Send Message </button> </form> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

<div class="ct-team-ajax">     <div class="row">         <div class="col-md-5">             <img src="assets/images/demo-content/team-1.jpg" alt="John Smithers" />         </div>         <div class="col-md-7">             <header>                 <h4>John Smithers<a href="11234567890">+1 (123) 456-7890</a><small>co-founder</small>         </h4>                 <ul class="ct-socials list-inline list-unstyled">                     <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a>                     </li>                     <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a>                     </li>                     <li class="ct-socials__item--linkedin"><a href="#"><i class="fa fa-linkedin"></i></a>                     </li>                 </ul>             </header>             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit.</p>         </div>     </div>     <div class="row">         <div class="col-md-5">             <h4>I can help you with</h4>             <ul class="ct-team-ajax__list ct-list">                 <li>general inquiries</li>                 <li>business partnerships</li>                 <li>wholesale</li>                 <li>endorsement</li>                 <li>event organisation</li>                 <li>warranty</li>                 <li>we can simply hang on</li>             </ul>         </div>         <div class="col-md-7">             <form>                 <h4>Drop me a line</h4>                 <div class="row">                     <div class="col-sm-6">                         <div class="form-group">                             <input type="text" placeholder="Name" id="ajax-name" name="field[]" required="required" class="form-control" />                             <label for="ajax-name" class="sr-only">Name</label>                         </div>                     </div>                     <div class="col-sm-6">                         <div class="form-group">                             <input type="email" placeholder="Email" id="ajax-email" name="field[]" required="required" class="form-control" />                             <label for="ajax-email" class="sr-only">Email</label>                         </div>                     </div>                     <div class="col-sm-12">                         <div class="form-group">                             <textarea placeholder="Message" id="ajax-message" rows="4" required="required" name="field[]" class="form-control"></textarea>                             <label for="ajax-message" class="sr-only">Message</label>                         </div>                     </div>                 </div>                 <button type="submit" class="btn btn-motive">Send Message                 </button>             </form>         </div>     </div> </div>

Screenshots

Team popup