"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title>Psd2Html</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/normalize.css"> </head> <body> <!--Ssart Header--> <header> <slider> <h5>DEAL<span>|/X\|</span>PARTNER</h5> <div class="high"> <a href="#">HOW IT WORKS</a> <a href="#">REFERRALS</a> </div> <div class="plus"> <div class="dropdown"> <h4>START BROWSING</h4> <div class="links"> <p>link</p> <p>link</p> <p>link</p> </div> </div> <a href="#">LOGIN</a> <button>SIGN UP</button> </div> <h1>industry executive on demand</h1> <p>an exclusive marketplace for industry executive and private investment films</p> <button>GET STARTED NOW</button> </slider> </header> <!--End Header--> <!--Start Navbar--> <nav> <div class="container"> <span>1</span><hr> <span>2</span><hr> <span>3</span><hr> <span>4</span><hr> <span>5</span> <ul> <li>TELL US YOUR NEEDS</li> <li>RECEIVE EXPRESSIONS OF INTEREST</li> <li>INTER VIEW SELECTED CANDIDATES</li> <li>AGREE ON TERMS</li> <li>HIRE</li> </ul> </div> </nav> <!--End Navbar--> <!--Start Executive--> <div class="container"> <div class="excutive"> <h1>executive on demand-not an expert network</h1><hr><br> <p>Access better talent,faster for each stage of your deal.let us help you hire your competitive advantage.</p> <div class="work"> <img src="http://www5.0zz0.com/2017/06/24/23/741149477.png"> <div class="info"> <h4>proactive sourcing</h4> <ul> <li><span>✔</span>proprietary deals</li> <li><span>✔</span>white papers</li> <li><span>✔</span>target lists</li> <li><span>✔</span>industry relationships</li> </ul> </div> </div> <div class="work"> <img src="http://www5.0zz0.com/2017/06/24/23/739121184.png"> <div class="info"> <h4>investmen evaluation</h4> <ul> <li><span>✔</span>company assessment</li> <li><span>✔</span>industry and competition</li> <li><span>✔</span>thesis development</li> <li><span>✔</span>roll-up strategy</li> </ul> </div> </div> <div class="work"> <img src="http://www5.0zz0.com/2017/06/24/23/210107372.png"> <div class="info"> <h4>portfolio management</h4> <ul> <li><span>✔</span>interim cxo roles</li> <li><span>✔</span>growth initiatives</li> <li><span>✔</span>operational &process improvement</li> <li><span>✔</span>m&a strategy</li> </ul> </div> </div> </div> </div> <!--End Executive--> <!--Start Advantage--> <div class="advantage"> <div class="container"> <h1>your competitive advantage</h1><hr><br> <p>Select from a global pool of executive that have been pre-vitted specificaily to meet the standards of private investment firms.Each of our executive are leaders within their respective industries and have been selected based on demonstrable industry and functional expertise.</p> <div class="icon"> <img src="http://www6.0zz0.com/2017/06/24/23/655932088.png"> <span>ENERGY</span> </div> <div class="icon"> <img src="http://www11.0zz0.com/2017/06/24/23/789042559.png"> <span>INDUSTRIAL</span> </div> <div class="images"> <img src="http://www12.0zz0.com/2017/06/24/23/767078970.jpeg"> <img src="http://www12.0zz0.com/2017/06/24/23/725394495.png"> <img src="http://www12.0zz0.com/2017/06/24/23/769540934.png"> <img src="http://www12.0zz0.com/2017/06/24/23/712815077.png"> </div> <button>learn more about our experts</button> </div> </div> <!--End Advantage--> <!--Start Role--> <div class="role"> <div class="container"> <p>Deal partneris reinventing how private investment firms source and retain executive-level talent for their project-based and full-time roles.</p> </div> </div> <!--End Role--> <!--Start Work--> <div class="container"> <div class="works"> <h1>why work with us</h1><hr><br> <p>Our plat form was develped specifcially to provide all private investment firms with a more efficient and cost effective method of accessing world class executive talent.</p> </div> <div class="exampels"> <div class="exampel"> <img src="http://www6.0zz0.com/2017/06/24/23/267786966.png" width="275px"> <h4>exclusive focus on private investments</h4> <p>Our plat form was develped specifcially to provide all private investment firms with a more efficient specifcially</p> </div> <div class="exampel"> <img src="http://www6.0zz0.com/2017/06/24/23/595184803.png" width="220px"> <h4>no risk</h4> <p>Our plat form was develped specifcially to provide all private investment firms with a more efficient Our plat form was develped specifcially</p> </div> <div class="exampel"> <img src="http://www6.0zz0.com/2017/06/24/23/211553757.png" width="220px"> <h4>highest caliber executive</h4> <p>Our plat form was develped specifcially Our plat form was develped specifcially to provide all private investment firms with a more efficient</p> </div> <div class="exampel"> <img src="http://www6.0zz0.com/2017/06/24/23/412386037.png" width="200px"> <h4>flexibility</h4> <p>Our plat form was develped specifcially Our plat form was develped specifcially to provide all private investment firms with a more efficient</p> </div> <div class="exampel"> <img src="http://www6.0zz0.com/2017/06/24/23/873149684.png" width="220px"> <h4>confidentiality</h4> <p>Our plat form was develped specifcially Our plat form was develped specifcially to provide all private investment firms with a more efficient</p> </div> <div class="exampel"> <img src="http://www6.0zz0.com/2017/06/24/23/624718725.png" width="220px" > <h4>save time</h4> <p>Our plat form was develped specifcially Our plat form was develped specifcially to provide all private investment firms with a more efficient</p> </div> </div> </div> <!--End Work--> <!--Start Investment--> <div class="clearfix"></div> <div class="invest"> </div> <!--End Investment--> <!--Start Hire--> <div class="hire"> <div class="container"> <h1>flexible hiring</h1><hr><br> <p>Engage executives with flexible hourly contracts or hire them full-time.</p> <div class="info"> <img src="http://www7.0zz0.com/2017/06/24/23/765687399.png"> <h3>contract</h3> <p>Rates from <span> $150 to $500/hour</span></p><br> <p>Rates from <span> $4,000</span></p><br> <p>East,secure payments with any credit card or bank account.</p><br> <p>convert to full-time anytime.</p> <button>post a contract rule</button> </div> <div class="info"> <img src="http://www7.0zz0.com/2017/06/24/23/444367233.png"> <h3>full-time</h3> <p>Executives available for Board,Operating and CXO.</p><br> <p>Vet Executives on part-time engagements prior to making a full-time commitment.</p><br><br><br><br> <button>post a full-time rule</button> </div> <div class="clearfix"></div> <h1>dealpartner fee</h1> <div class="deal"> <h5>contract roles</h5> <span>25%</span> <h6>Out of payment to contract professionals</h6> <p>AUTOMATICALLY DEDUCTED FROM GROSS PAYMENT</p> </div> <div class="deal"> <h5>full-time roles</h5> <span>20%</span> <h6>of-first year salary for full-time hires</h6> <p>fully refundable up to 90 days</p> </div> </div> </div> <!--End Hire--> <!--Start Firm--> <div class="firm"> <div class="container"> <h1>let us find the right match for your investment firm</h1> <p>Reinventing the way private investment firms connect with industry executive.</p> <button>get started now</button> </div> </div> <!--End Firm--> <!--Start Footer--> <div class="footer"> <div class="container"> <div class="info"> <h5>using deallpartner</h5> <p>browse roles</p> <p>browse talent</p> <p>how it works</p> <p>our pros</p> <p>best practices</p> </div> <div class="info"> <h5>company</h5> <p>success stories</p> <p>pricing</p> <p>about us</p> <p>referral program</p> </div> <div class="info"> <h5>reference</h5> <p>terms of us</p> <p>privacy policy</p> <p>resources</p> <p>index</p> <p>best practices</p> </div> <div class="contact"> <h5>contact us</h5> <ul> <li><img src="http://www6.0zz0.com/2017/06/24/23/914195648.png"></li> <li><img src="http://www6.0zz0.com/2017/06/24/23/888655310.png"></li> <li><img src="http://www6.0zz0.com/2017/06/24/23/190744695.png"></li> <li><img src="http://www6.0zz0.com/2017/06/24/23/124639356.png"></li> </ul> <img src="http://www6.0zz0.com/2017/06/24/23/537127737.png"><span>questions? call 0100-138-7241</span><br> <img src=" http://www6.0zz0.com/2017/06/24/23/126997058.png "><span>help@dealpartner.com</span> </div> </div> </div> <!--End Footer--> </body> </html>
.clearfix{ clear: both } p{ margin: 0; color: #727c88; font-family: sans-serif; line-height: 1.4 } hr{ width: 70px; border: 1.5px solid #ed862c; margin-bottom: 0 } *{ box-sizing: border-box; } body{ margin:0; height: 4793px; } .container{ width: 1020px; margin: auto; padding-left: 67px; } /*Start Header*/ header{ margin: 0; height: 520px; background-image: url('http://www7.0zz0.com/2017/06/24/23/762198260.jpeg'); background-size: cover; color: #FFF; text-align: center; } header slider h5{ float: left; padding: 10px 0 0 25px; font-family: sans-serif; font-size: 12px; letter-spacing: 2px; } header slider h5 span{color: #ed862c} header slider .high { float: left; padding: 31px 0 0 94px; font-family: sans-serif; font-size: 10px; font-weight: bold; } header slider .high a{ text-decoration: none; color: #FFF; } header slider .high a:hover{ color: #ed862c; } header slider .high a:last-of-type{ margin-left: 40px; } header slider .plus{ float: right; margin-top: -4px; font-size: 10px; font-weight: bold; margin-right: 20px; font-family: sans-serif } header slider .plus .dropdown{ border: none; position: relative; display: inline-block; margin-right: 27px; background: none; color: #ed862c; cursor: pointer; font-family: sans-serif; font-size: 10px; font-weight: bold; } header slider .plus .dropdown .links{ display: none; position: absolute; background-color: #693902; } header slider .plus .dropdown .links p{ padding:10px 32px; border-bottom:1px solid #fff } header slider .plus .dropdown .links p:last-child {border-bottom:none} header slider .plus .dropdown .links p:hover{ color:#ED862C; } header slider .plus .dropdown:hover .links{ display: block; } header slider .plus a{ text-decoration: none; color: #FFF; padding-right: 30px; } header slider .plus a:hover{color: #ed862c} header slider .plus button{ margin-top: 25px; background-color: #ed862c; height: 30px; width: 80px; border-radius: 3px; font-weight: bold; font-size: 11px; color: #FFF; border: none; line-height: 20px; cursor: pointer; } header slider .plus button:hover{ background-color: #FFF; color: #ed862c; } header slider h1{ margin: 0px ; padding-top: 245px; font-size: 49px; text-transform: uppercase; font-family: sans-serif; text-align: center; } header slider p{ margin: 0; text-transform: capitalize; font-size: 15px; text-align: center; color: #FFF; } header slider button{ margin-top: 25px; background-color: #ed862c; height: 39px; width: 180px; border-radius: 4px; font-weight: bold; font-size: 12px; color: #FFF; border: none; line-height: 20px; cursor: pointer; } header slider button:hover{ background-color: #FFF; color: #ed862c; } /*End Header*/ /*Start Navbar*/ nav{ background-color: #18436e; overflow: hidden; } nav .container ul{ list-style: none; padding-left: 0; display: block; margin-top: 15px; } nav .container ul li{ float: left; margin-top: 6px; margin-right: 45px; line-height: 20px; color: #FFF; font-size: 10px; font-weight: bold; font-family: sans-serif; width: 15%; text-align: center; padding-bottom: 15px } nav .container span{ float: left; color: #FFF; border: 1px solid #FFF; border-radius: 50%; font-weight: bold; font-family: sans-serif; padding: 10px 14px 10px 14px; display: inline-block; margin-left: 38px; margin-right: 31px; margin-top: 10px; } nav .container hr{ width: 83px; margin-left:px; display: block; float: left; margin-top: 25px; border-style: dashed; border-color: #FFF; } /*End Navbar*/ /*Start Excutive*/ .excutive{ text-align: center; margin-left:-67px; overflow: hidden; padding: 15px 0 20px 0; } .excutive h1{ padding-top: 50px; font-size: 35px; text-transform: capitalize; font-family: sans-serif; margin-bottom: 12px; color: #1c3751; } .excutive .work{ margin-top: 60px; float: left; width: 33.3333% } .excutive .work img{ width: 25%; } .excutive .work .info h4{ color: #1c3751; text-transform: uppercase; font-weight: bold; font-family: sans-serif; } .excutive .work .info ul{ list-style:none; padding: 0; margin-left: 85px; text-align: left; font-size: 13px } .excutive .work .info ul li{ color: #727c88; text-transform: capitalize; font-family: sans-serif; line-height: 1.4; } .excutive .work .info ul li span{ color: #2ea168; margin-right: 5px; } /*End Excutive*/ /*Start Advantage*/ .advantage{ margin-left:-67px; margin-top: 60px; padding: 20px 0 30px 0; background-color: #f7f7f7; overflow: hidden; text-align: center; height: 750px; } .advantage h1{ padding-top: 50px; font-size: 35px; text-transform: capitalize; font-family: sans-serif; margin-bottom: 12px; color: #1c3751; } .advantage .container .icon{ float: left; width: 50%; margin-top: 40px; padding-bottom: 15px; border-bottom: 1px solid #727c88; } .advantage .container .icon img{ width: 15%; } .advantage .container .icon span{ font-family: sans-serif; font-size: 10px; font-weight: bold; padding-left: 145px; margin-top: -25px; display: block; color: #727c88; } .advantage .container .images img{ margin-top: 40px; margin-right: 16px; margin-left: 12px; width: 22%; float: left } .advantage .container button{ margin-top: 30px; background: none; height: 39px; width: 290px; border-radius: 4px; font-weight: bolder; font-size: 13px; text-transform: uppercase; color: #ed862c; border: none; line-height: 20px; border: 1px solid #ed862c; cursor: pointer; } .advantage .container button:hover{ background-color: #ed862c; color: #FFF; } /*End Advantage*/ /*Start role*/ .role{ background-color: #18436e; margin: 0; margin-left:-67px; } .role .container p{ font-family: sans-serif; font-weight: bold; font-size: 32px; text-align: center; line-height: 1.4; color: #FFF; margin: 0 0 20px 0; padding: 50px } /*End Role*/ /*Start Work*/ .works{ text-align: center; padding-left:-67px; overflow: hidden } .container .works h1{ font-family: sans-serif; font-size: 32px; line-height: 1.4; color: #1c3751; padding-top: 30px; margin-bottom: 12px; } .container .exampels{ margin-top: 35px; margin-bottom: 30px; } .container .exampels .exampel{ margin: 9px; float: left; width: 30.33333%; text-align: center; border: 1px solid #f7f7f7; padding: 12px; } .container .exampel:first-of-type h4{margin-top: 0px} .container .exampel h4{ color: #1c3751; font-family: sans-serif; text-transform: uppercase } /*End Work*/ /*Start Investment*/ .invest{ margin: 70px 0 30px 0; height: 200px; overflow: hidden; background-image: url(http://www12.0zz0.com/2017/06/24/23/691285333.png); background-size: contain } /*End Investment /*Start hire*/ .hire{ margin-left: -67px; text-align: center; margin-bottom: 30px; overflow: hidden } .hire h1{ padding-top: 10px; font-size: 35px; text-transform: capitalize; font-family: sans-serif; margin-bottom: 12px; color: #1c3751; } .hire .container .info{ float: left; width: 45%; border: 1px solid #f3f3f3; margin-top: 10px; margin-left: 20px; margin-right: 5px; padding: 25px; } .hire .container .info h3{ font-size: 20px; text-transform: capitalize; font-family: sans-serif; color: #1c3751; } .hire .container .info span{ color: #1c3751; font-weight: bold; } .hire .container .info button{ margin-top: 25px; background-color: #ed862c; height: 39px; width: 180px; border-radius: 4px; font-weight: bold; font-size: 12px; color: #FFF; border: none; line-height: 20px; cursor: pointer; text-transform: uppercase } .hire .container .info:nth-of-type(2) button{ margin-top: 40px; } .hire .container .info button:hover{ background-color: #FFF; color: #ed862c; } .hire .container h1{ margin-top: 60px; font-size: 35px; text-transform: capitalize; font-family: sans-serif; margin-bottom: 12px; color: #1c3751; } .hire .container .deal{ float: left; width: 50% } .hire .container .deal h5{ color: #1c3751; text-transform: uppercase; font-family: sans-serif; padding-bottom: 5px; } .hire .container .deal span{ border-radius: 50%; border: 1px solid #ed862c; padding: 18px 13px 18px 13px; font-weight: bold; color: #ed862c } .hire .container .deal h6{ color: #1c3751; font-size: 12px; font-family: sans-serif; font-weight: bold; padding-top: 5px } .hire .container .deal p{ font-size: 10px; margin-top: -18px; } /*End Hire*/ /*Start Firm*/ .firm{ margin-left: -67px; margin-top: 75px; padding-bottom: 55px; background-color: #18436e; text-align: center; overflow: hidden } .firm .container h1{ margin-top: 60px; font-size: 35px; text-transform: capitalize; font-family: sans-serif; margin-bottom: 12px; color: #FFF; } .firm .container p{color: #FFF;} .firm .container button{ margin-top: 25px; background-color: #ed862c; height: 39px; width: 180px; border-radius: 4px; font-weight: bold; text-transform: uppercase; font-family: sans-serif; font-size: 12px; color: #FFF; border: none; line-height: 20px; cursor: pointer; } .firm .container button:hover{ background-color: #FFF; color: #ed862c; } /*End Firm*/ /*Start Footer*/ .footer{ padding: 10px 0 0px 0; margin-left: -67px; background-color: #233041; overflow: hidden } .footer .container .info{ float: left; padding: 20px; } .footer .container .info h5{ margin: 0; padding-top: 25px; padding-bottom: 10px; color: #FFF; text-transform: uppercase; font-family: sans-serif; } .footer .container .info p{ color: #dfe0e2; text-transform: uppercase; font-family: sans-serif; font-size: 10px; line-height: 1.9 } .footer .container .contact{ float: right; } .footer .container .contact h5{ padding-top: 25px; padding-left: 7px; color: #FFF; text-transform: uppercase; font-family: sans-serif; } .footer .container .contact ul{ list-style-type:none; padding-left: 0; margin-right: 20px; } .footer .container .contact ul li{ display: inline-block; } .footer .container .contact ul li img{ width:25px; } .footer .container .contact img{ width: 25px; padding-bottom: 32px; } .footer .container .contact span{ float: right; padding-left: 10px; text-transform: uppercase; font-family: sans-serif; font-size: 12px; font-weight: bold; color: #eb8639; display: block } /*End Footer*/

Related: See More


Questions / Comments: