<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="container"> <div class="col-lg-12"> <img src="http://cdn.fearlessflyer.com/wp-content/uploads/2015/10/flat-responsive-vector-web-design.jpg" class="img-responsive center-block" alt="Cinque Terre" width="50%" height="50%"> <h1>PANDA SOCIAL NET</h1> <p>Panda social networking site for pinoys is new and active for more infor pm me <a href="https://www.facebook.com/JheanYu">@JEANYU</a>.</p> <button class="w3-btn w3-blue w3-large"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>Learn more</button> </div> </div> </div> <div class="container"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <div class="section-heading"> <h2>Unlimited Features, Unlimited Fun</h2> <p class="text-muted">Check out what you can do with this app theme!</p> <hr> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-4"> <img src="http://drawingimage.com/files/3/Panda-Face-Beautiful-Image-Drawing.jpeg" class="img-responsive" alt=""> </div> <div class="col-lg-8"> <div class="row"> <div class="col-md-6"> <span class="glyphicon glyphicon-globe fa-5x" aria-hidden="true"></span> <h3>Device Mockups</h3> <p class="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p> </div> <div class="col-lg-6"> <h3>Flexible Use</h3> <p class="text-muted">Put an image, video, animation, or anything else in the screen!</p> </div> </div> <div class="row"> <div class="col-lg-6"> <h3>Free to Use</h3> <p class="text-muted">As always, this theme is free to download and use for any purpose!</p> </div> <div class="col-lg-6"> <h3>Open Source</h3> <p class="text-muted">Since this theme is MIT licensed, you can use it commercially!</p> </div> </div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Services</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Responsive Design</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-lock fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Web Security</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> </div> </div> <br> <div class="container"> <div class="row text-center"> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Responsive Design</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-lock fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Web Security</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> </div> </div> <br> <div class="container"> <div class="row text-center"> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Responsive Design</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> <div class="col-lg-4"> <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-lock fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Web Security</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-sm btn-info"> <span class="glyphicon glyphicon-paperclip " aria-hidden="true"></span> LEARN MORE</button> </div> </div> <hr> <br> <div class="container"> <div class="col-lg-12 text-center"> <h2 class="section-heading">OUR PROCESS </h2> <h3 class="section-subheading text-muted">This is how we do the products and more</h3> <img src="http://www.infographiclov.com/wp-content/uploads/2016/04/fasi-progetto-creativo-500x500.jpg" class="images-responsive" alt="" width="100%"> </div> </div> <br> <hr> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">MEET OUR TEAM</h2> <h3 class="section-subheading text-muted">The phillipine Pride.</h3> </div> </div> <div class="row text-center"> <div class="col-lg-4"> <img src="https://pbs.twimg.com/profile_images/726017255897587712/bJ2M33WY_400x400.jpg" class="img-responsive center-block img-rounded" alt="ABBY PICURES"> <h4 class="service-heading">E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="col-lg-4"> <img src="https://pbs.twimg.com/profile_images/726017255897587712/bJ2M33WY_400x400.jpg" class="img-responsive center-block img-rounded" alt="ABBY PICURES"> <h4 class="service-heading">Responsive Design</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="col-lg-4"> <img src="https://pbs.twimg.com/profile_images/726017255897587712/bJ2M33WY_400x400.jpg" class="img-responsive center-block img-rounded" alt="ABBY PICURES"> <h4 class="service-heading">Web Security</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> </div> </div> <br> <hr> <div class="container text-center"> <h1>PURE AND FAST DEVELOPEMENT </h1> <p>We build superior responsive websites completing all needs for a Agency, Business, Startup, E-Commerce & Blogger using advanced Technologies and can also extend it to your Mobile Application.</p> <img src="https://thumb7.shutterstock.com/display_pic_with_logo/999119/294768521/stock-vector-vector-circle-arrows-for-infographic-template-for-cycling-diagram-graph-presentation-and-round-294768521.jpg" class="img-responsive center-block"> </div> <br> <hr> <div id="whyus"> <h1>WHY US</h1> <ul> <li>SIMPLE</li> <li>CREATIVE</li> <li>FAST</li> <li>GOOD SERVICE</li> <li>TOP RANKINGS</li> <li>RELAIBILTY</li> <li>WORK PERFECTION</li> </ul> </div> <br> <hr> <div class="container"> <div class="row"> <div class="col-lg-3"> <h3>LATEST POST</h3> <ul class="w3-ul w3-hoverable"> <li>BROWSER UPDATE</li> <li>MOBILE SUPPORT</li> <li>DESKTOP</li> <li>FIRMWARE</li> <li>COOKIES</li> <li>CACHE</li> <li>ADMIN SUPPORT</li> <li>BUGG</li> <li>OPEN GRAPH</li> </ul> </div> <div class="col-lg-3"> <h3>RESOURCES</h3> <ul class="w3-ul w3-hoverable"> <li>BOOTSTRAP</li> <li>W3SCHOOL W3-CSS</li> <li>KICKSTRAP</li> <li>STACK-OVERFLOW</li> </ul> </div> <div class="col-lg-3"> <h3>SERVICE</h3> <ul class="w3-ul w3-hoverable"> <li>WEB GRAPHICS</li> <li>WEB DEVELOPEMENT</li> <li>DEVICE MANAGEMENT</li> <li>RESEARCH DEVELOPEMENT</li> <li>24 HOURS OPERATION</li> <li>TECHNICAL SUPPORT</li> </ul> </div> <div class="col-lg-3"> <h3>CONTACT US</h3> <ul class="w3-ul w3-hoverable"> <li> <label for="usr">Name:</label> <input type="text" class="form-control input-sm" id="usr"> </li> <li> <label for="usr">Email:</label> <input type="text" class="form-control input-sm" id="usr"> </li> <li> <label for="usr">Mobile:</label> <input type="text" class="form-control input-sm" id="usr"> </li> <li> <label for="usr">Subject:</label> <input type="text" class="form-control input-sm" id="usr"> </li> <li> <button class="w3-btn w3-blue w3-xlarge "> CONTACT NOW</button> </li> </ul> </div> </div> </div> <hr> </div>

body {background-color:#fff;margin-bottom:120px;} .container-fluid {background-image:url(images/w.jpg);background-repeat:no-repeat;background-size:100%,100%;} .container {background-color:#fff;margin-bottom:50px;} .container .col-lg-12 {background-color:#fff;} .container .col-lg-12 h1 {color:#00a9cb;} .container .col-lg-12 p {font-family:Dotum;} .container .col-lg-4 span {border:2px solid lightgray;border-radius:100px;} .container .col-lg-3 ul li button {width:100%}