"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 ----------> <div id="main-background-image"></div> <div id="address-bar"></div> <div id="menu-bar"></div> <div id="page-name-bar"></div> <div id="footer-back"></div> <div id="footer-back2"></div> <div id="main-wrap"> <a href="#"><i class="fa fa-facebook-square"></i></a> <a href="#"><i class="fa fa-twitter-square"></i></a> <div id="phone-sec"> <i class="fa fa-phone"></i> <i class="fa fa-home"></i> <i class="fa fa-clock-o"></i> <div id="large-p">(03) 9465 9639</div> <div id="large-p2">14/350 Settlement Road</div> <div id="large-p3">Mon-Sat 8.00 - 18.00</div> <div id="small-p">admin@cmtpanels.com</div> <div id="small-p2">Thomastown, VIC 3074</div> <div id="small-p3">Sunday CLOSED</div> </div> <!--<a href="#"><i class="fa fa-youtube-square"></i></a>--> <div id="adress-bar-text">14/350 Settlement Rd Thomastown, Victoria. Locate us on the <a href="">map here.</a></div> <div id="menu-bar2"></div> <div id="logo"><img src="https://images.discordapp.net/.eJwFwUtygjAAANC7sJeQhBB0BwJDmaqt1tCuOggY6IAJJOFjp3fve7-WGTtrZzVaS7UDoGpVKcbKVlqMBa9tLgTv6kK2yi5FDwqti7Lp64dWABEfIp9g6HoUUQS3LkDUd7HreoRQTD0CEQR1NrM1iU98DQ7BcU_LIBhCdneiVxW_s6yq9rmzgRJt_U-8uVFzcDxsNFLePMwpk90tIcezSfv86-ONTUMzKZEsxfP6ncvp6gck9JdndOrCS9jmYczJUvemj9JzzPumnk12f1R4ishavjDX_pHc-vsHI29O9Q.m7a6WeXDiUw56NXKm3ws3d73xfg" /></div> <div id="nav-one"> <ul> <li><a href="#">home</a></li> <li><a href="#">services</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact</a></li> </ul> </div> <div id="about-us-text">Whatever your project is or whatever you're looking at getting done you can always rely on us for our expertise and efficiency. We have a simple 2 step process when it comes to delivering our outstanding services, making it easy and hassle free for all our clients. We have a get-it-done and get-it-right mindset which sets us apart from our competitors leaving everyone satisfied! </div> <div id="page-name-bar-heading"> <p id="p-n-b-h">Our Services</p> <p id="p-n-b-h2">SEE WHAT WE CAN DO FOR YOU</p> </div> <div id="service-box-1"> <p class="s-text-1">Cold Storage</p> <p class="s-text-2">Ut et coue augue. Maecenas fernum vel ante a aliam etiam vivera mius as sapien.</p> <img src="https://s15.postimg.org/6fbabdayz/image.png" /> </div> <div id="service-box-2"> <p class="s-text-1">Insulated Trailers</p> <p class="s-text-2">Integer sodles at sen seanto dapibus. Vivus tincint urars ac enim plinar, mosie acums.</p> <img src="https://s13.postimg.org/s2xuscog7/image.png" /> </div> <div id="service-box-3"> <p class="s-text-1">Clean Rooms</p> <p class="s-text-2">Ut et coue augue. Maecenas fernum vel ante a aliam etiam vivera mius as sapien.</p> <img src="https://s13.postimg.org/qwp9ftarr/image.png" /> </div> <div id="service-box-4"> <p class="s-text-1">Installation and Supply</p> <p class="s-text-2">Ut et coue augue. Maecenas fernum vel ante a aliam etiam vivera mius as sapien.</p> <img src="https://s13.postimg.org/outdfb26f/image.png" /> </div> <div id="service-box-5"> <p class="s-text-1">Fire Rated Systems</p> <p class="s-text-2">Integer sodles at sen seanto dapibus. Vivus tincint urars ac enim plinar, mosie acums.</p> <img src="https://s13.postimg.org/6bahnwt6v/image.png" /> </div> <div id="service-box-6"> <p class="s-text-1">Granny Flats</p> <p class="s-text-2">Ut et coue augue. Maecenas fernum vel ante a aliam etiam vivera mius as sapien.</p> <img src="https://s13.postimg.org/3wn7h82br/image.png" /> </div> <div id="service-box-7"> <p class="s-text-1">Portable Accommodation</p> <p class="s-text-2">Ut et coue augue. Maecenas fernum vel ante a aliam etiam vivera mius as sapien.</p> <img src="https://s13.postimg.org/c5z2vmw1z/image.png" /> </div> <div id="service-box-8"> <p class="s-text-1">Food Processing Facilities</p> <p class="s-text-2">Integer sodles at sen seanto dapibus. Vivus tincint urars ac enim plinar, mosie acums.</p> <img src="https://s13.postimg.org/fquyev0lj/image.png" /> </div> <div id="service-box-9"> <p class="s-text-1">Insulated Walling & Roofing</p> <p class="s-text-2">Ut et coue augue. Maecenas fernum vel ante a aliam etiam vivera mius as sapien.</p> <img src="https://s13.postimg.org/kqsemt687/image.png " /> </div> <div id="process-box-1"> <div class="process-box-number"> <p>01.</p> </div> <div class="triangle-process"></div> <div class="process-text-head">Get-It-Done</div> <div class="process-text-desc">We're all about getting it done on time and to client satisfaction. From start to finish we have a positive and enthusiastic attitude. We have the experience and dedication to finish all our projects on time giving all our clients peace of mind.</div> </div> <div id="process-box-2"> <div class="process-box-number"> <p>02.</p> </div> <div class="triangle-process"></div> <div class="process-text-head">Get-It-Right</div> <div class="process-text-desc">Sometimes getting it done isn't enough. Getting it right goes hand in hand with finishing a project. Mistakes are something we always avoid and we consistantly finish projects with no problems. This is just one of our values we pride ourselves with.</div> </div> <div id="logo-bottom"><img src="https://images.discordapp.net/.eJwFwUtygjAAANC7sJeQhBB0BwJDmaqt1tCuOggY6IAJJOFjp3fve7-WGTtrZzVaS7UDoGpVKcbKVlqMBa9tLgTv6kK2yi5FDwqti7Lp64dWABEfIp9g6HoUUQS3LkDUd7HreoRQTD0CEQR1NrM1iU98DQ7BcU_LIBhCdneiVxW_s6yq9rmzgRJt_U-8uVFzcDxsNFLePMwpk90tIcezSfv86-ONTUMzKZEsxfP6ncvp6gck9JdndOrCS9jmYczJUvemj9JzzPumnk12f1R4ishavjDX_pHc-vsHI29O9Q.m7a6WeXDiUw56NXKm3ws3d73xfg" /></div> <div id="cpyright-txt"> <p>Copyright @ 2017 CMT Panels. All Rights Reserved. </p> </div> <div id="footer-menub"> <p id="footer-menu2b">Contact</p> <p id="footer-menu3b"> 14/350 Settlement Rd, Thomastown VIC 3074<br> (03) 9465 9639</a><br> admin@cmtpanels.com </a><br> </p> </div> <div id="footer-menu"> <p id="footer-menu2">Navigation</p> <p id="footer-menu3b"> <a href="">- Home</a><br> <a href="">- Services</a><br> <a href="">- Gallery</a><br> <a href="">- About Us</a><br> <a href="">- Contact Us</a><br> </p> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700); @import url('https://fonts.googleapis.com/css?family=Lato:400,700,900,900i'); @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900'); * { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } body { margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; background: white; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } #address-bar { width: 100%; height: 40px; background: rgb(46, 46, 46); position: absolute; z-index: -1; } #menu-bar { width: 100%; height: 160px; background: rgb(69, 69, 69); position: absolute; margin-top: 40px; border-top: 1px solid rgb(77, 77, 77); z-index: -1; -webkit-box-shadow: inset 0px -27px 104px -33px rgba(0, 0, 0, 0.36); -moz-box-shadow: inset 0px -27px 104px -33px rgba(0, 0, 0, 0.36); box-shadow: inset 0px -27px 104px -33px rgba(0, 0, 0, 0.9); } #menu-bar2 { margin-top: 150px; position: absolute; height: 100px; width: 1000px; background: rgb(249, 249, 249); -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.53); -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.53); box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.53); } #main-wrap { margin: 0 auto; width: 1000px; } #logo img { margin-top: 55px; width: 80px; margin-left: -1px; hegith: 80px; } #adress-bar-text { position: absolute; margin-top: 10px; font-size: 13px; font-weight: 400; color: rgb(218, 218, 218); } #adress-bar-text a { font-size: 13px; font-weight: 400; color: rgb(236, 233, 70); transition: all 0.2s; } #adress-bar-text a:hover { font-size: 13px; font-weight: 400; color: white; } .fa-facebook-square { margin-top: 5px; position: absolute; font-size: 30px; color: rgb(70, 98, 158); margin-left: 938px; transition: all 0.2s; } .fa-twitter-square { position: absolute; color: rgb(94, 169, 221); margin-left: 973px; font-size: 30px; margin-top: 5px; transition: all 0.2s; } .fa-phone, .fa-home { position: absolute; color: rgb(152, 152, 152); margin-left: 390px; font-size: 50px; margin-top: 72px; transition: all 0.1s; } .fa-phone { margin-left: 225px; } .fa-home { margin-left: 465px; } .fa-clock-o { position: absolute; color: rgb(152, 152, 152); margin-left: 762px; font-size: 50px; margin-top: 72px; transition: all 0.1s; } #large-p, #large-p2, #large-p3 { color: rgb(221, 221, 221); position: absolute; margin-top: 72px; margin-left: 445px; text-decoration: none; font-weight: 900; letter-spacing: 1px; font-size: 18px; } #large-p { margin-left: 279px; } #large-p2 { margin-left: 520px; } #large-p3 { margin-left: 818px; } #small-p, #small-p2, #small-p3 { color: rgb(152, 152, 152); margin-top: 96px; font-size: 16px; margin-left: 445px; position: absolute; } #small-p { margin-left: 280px; } #small-p2 { margin-left: 521px; } #small-p3 { margin-left: 818px; } /* .fa-youtube-square{ position: absolute; color: #c4302b; margin-left: 975px; font-size: 30px; margin-top: 5px; transition: all 0.2s; } */ .fa-twitter-square:hover, .fa-facebook-square:hover { color: white; } #nav-one { position: relative; float: left; margin-left: -25px; padding-top: 35px; } #nav-one ul { list-style: none; } #nav-one ul li { display: inline; padding-left: 70px; position: center; } #nav-one ul li a { color: rgb(152, 152, 152); text-decoration: none; text-transform: uppercase; font-weight: 900; letter-spacing: 4px; font-size: 16px; transition: ; padding-bottom: 38px; padding-left: 10px; padding-right: 10px; padding-top: 10px; } #nav-one ul li a:hover { color: rgb(69, 69, 69); border-bottom: 4px solid rgb(236, 233, 70); } #page-name-bar { width: 100%; height: 200px; margin-top: 200px; position: absolute; background-color: rgb(238, 238, 238); background-image: url(https://demo.proteusthemes.com/buildpress/wp-content/uploads/sites/16/2014/10/title-area-pattern.png); background-repeat: repeat; border-bottom: 1px solid rgb(215, 215, 215); } #page-name-bar-heading { position: absolute; margin-top: 110px; width: 1000px; } #p-n-b-h { color: rgb(51, 51, 51); margin-left: -20px; margin-top: 50px; text-align: center; color: rgb(51, 51, 51); font-size: 40px; font-weight: 600; font-family: 'Montserrat', sans-serif; letter-spacing: -1px; } #p-n-b-h2 { position: absolute; margin-top: 60px; font-size: 18px; margin-left: 345px; font-weight: 600; font-transform: uppercase; font-family: 'Montserrat', sans-serif; color: rgb(77, 77, 77); padding-bottom: 10px; } #about-us-text { color: #999999; margin-top: 360px; margin-left: 169px; font-size: 16px; letter-spacing: 1px; width: 650px; text-align: center; line-height: 31px; z-index: 3; position: absolute; } #service-box-1 { width: 350px; position: absolute; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 900px; margin-left: -60px; } #service-box-1 img, #service-box-2 img, #service-box-3 img, #service-box-4 img, #service-box-5 img, #service-box-6 img, #service-box-7 img, #service-box-8 img, #service-box-9 img { position: absolute; width: 80px; margin-top: -94px; margin-left: 245px; } #service-box-2 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 900px; margin-left: 325px; } #service-box-3 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 900px; margin-left: 710px; } #service-box-4 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 1080px; margin-left: -60px; } #service-box-5 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 1080px; margin-left: 325px; } #service-box-6 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 1080px; margin-left: 710px; } #service-box-7 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 1260px; margin-left: -60px; } #service-box-8 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 1260px; margin-left: 325px; } #service-box-9 { position: absolute; width: 350px; height: 150px; border: 1px solid #e9e9e9; border-radius: 5px; margin-top: 1260px; margin-left: 710px; } .s-text-1 { font-weight: 600; font-transform: uppercase; padding-left: 15px; font-family: 'Montserrat', sans-serif; color: rgb(77, 77, 77); } .s-text-2 { color: #969696; padding-left: 15px; width: 220px; font-size: 16px; line-height: 23px; font-weight: 400; font-family: 'Source Sans Pro', sans-serif; } #process-box-1, #process-box-2 { width: 530px; height: 250px; background: rgb(245, 245, 245); margin-left: -50px; position: absolute; margin-top: 560px; border-radius: 5px; } #process-box-2 { margin-left: 520px; } .process-box-number { width: 100px; border-radius: 3px; height: 100px; margin-left: -10px; background: rgb(250, 194, 0); color: white; z-index: 99999; } .process-box-number p { font-size: 45px; font-family: 'Montserrat', sans-serif; padding-top: 21px; padding-left: 20px; } #service-box-4 img { width: 70px; margin-top: -95px; } #footer-back { width: 100%; height: 350px; position: absolute; -webkit-box-shadow: inset 0px 35px 104px -33px rgba(0, 0, 0, 0.36); -moz-box-shadow: inset 0px 35px 104px -33px rgba(0, 0, 0, 0.36); box-shadow: inset 0px 35px 104px -33px rgba(0, 0, 0, 0.9); background: rgb(69, 69, 69); margin-top: 1650px; z-index: -1; } #footer-back2 { width: 100%; margin-top: 2000px; height: 60px; background: rgb(46, 46, 46); position: absolute; z-index: -1; } .triangle-process { margin-left: -10px; width: 0; height: 0; border-top: 10px solid rgb(173, 136, 0); border-left: 10px solid transparent; margin-top: -1px; z-index: -99999; } .process-text-head { margin-top: -115px; padding-left: 110px; color: rgb(51, 51, 51); font-size: 30px; font-weight: 600; font-family: 'Montserrat', sans-serif; } .process-text-desc { padding-top: 15px; padding-left: 110px; padding-right: 40px; font-size: 15px; font-weight: 400; font-family: 'Montserrat', sans-serif; letter-spacing: 0px; line-height: 23px; } #logo-bottom { z-index: 99; } #logo-bottom img { margin-top: 1488px; width: 80px; margin-left: -1px; z-index: 99; height: 80px; } #cpyright-txt { position: absolute; margin-top: 212px; font-size: 13px; font-weight: 400; color: rgb(218, 218, 218); } #footer-menu { position: absolute; margin-top: -98px; margin-left: 150px; } #footer-menu2 { font-size: 14px; margin-left: 0px; color: rgb(228, 228, 228); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-family: 'Montserrat', sans-serif; } #footer-menu3 { font-size: 12px; margin-top: 6px; margin-left: 0px; width: 200px; color: rgb(130, 130, 130); text-transform: uppercase; letter-spacing: 2px; font-weight: 400; text-decoration: none; font-family: 'Montserrat', sans-serif; } #footer-menu3 a:hover { color: #fcc71f; } #footer-menub { position: absolute; margin-top: -98px; margin-left: 335px; } #footer-menu2b { font-size: 14px; margin-left: 0px; color: rgb(228, 228, 228); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-family: 'Montserrat', sans-serif; } #footer-menu3b { font-size: 12px; margin-left: 0px; color: rgb(130, 130, 130); text-transform: uppercase; letter-spacing: 2px; font-weight: 400; line-height: 30px; text-decoration: none; font-family: 'Montserrat', sans-serif; } #footer-menu3b a { font-size: 12px; margin-left: 0px; color: rgb(130, 130, 130); text-transform: uppercase; letter-spacing: 2px; font-weight: 400; line-height: 30px; text-decoration: none; font-family: 'Montserrat', sans-serif; } #footer-menu3b a:hover { color: #fcc71f; } #footer-menu3 { font-size: 12px; margin-top: 6px; margin-left: 0px; width: 200px; color: rgb(130, 130, 130); text-transform: uppercase; letter-spacing: 2px; font-weight: 400; text-decoration: none; font-family: 'Montserrat', sans-serif; } #footer-menu3 a:hover { color: #fcc71f; }

Related: See More


Questions / Comments: