Guest User

Untitled

a guest
Jul 3rd, 2015
215
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.34 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>OnePage Site</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  8. <link rel="stylesheet" type="text/css" href="css/style.css">
  9. <link rel="stylesheet" type="text/css" href="css/vars.css">
  10. <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  11. <link rel="stylesheet" type="text/css" href="css/bootstrap-social.css">
  12. <!-- FONTS -->
  13. <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  14. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
  15. <!-- SCRIPTS -->
  16. <script src="js/jquery-2.1.4.min.js"></script>
  17. <script src="js/jquery-ui.min.js"></script>
  18. <script src="js/bootstrap.min.js"></script>
  19. <script src="js/main.js"></script>
  20. <script src="js/smoothscrolling.js"></script>
  21. </head>
  22.  
  23.  
  24. <body>
  25.  
  26. <!-- HEADER SECTION !-->
  27. <div class="navhed" id="navhed">
  28. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  29. <div class="container">
  30. <div class="navbar-header">
  31. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  32. <span class="sr-only">Toggle navigation</span>
  33. <span class="icon-bar"></span>
  34. <span class="icon-bar"></span>
  35. <span class="icon-bar"></span>
  36. </button>
  37.  
  38. </div>
  39. <div class="collapse navbar-collapse navbar-right">
  40. <ul class="nav navbar-nav">
  41.  
  42. <li><a href="#about">ABOUT</a></li>
  43. <li><a href="#skills">SKILLS</a></li>
  44. <li><a href="#portfolio">PORTFOLIO</a></li>
  45. <li><a href="#contact">CONTACT</a></li>
  46. </ul>
  47. </div>
  48. </div>
  49. </nav>
  50. <header>
  51. <div class="container">
  52. <div class="row">
  53. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
  54. <h1>Lorem Ipsum</h1>
  55. <h3> Lorem ipsum dolor sit amet enim</h3>
  56. </div>
  57. </div>
  58. </div>
  59. </header>
  60. </div>
  61.  
  62.  
  63. <!-- ABOUT SECTION !-->
  64.  
  65. <section id="about">
  66. <div class="container">
  67. <div class="row">
  68.  
  69. </div>
  70. <div class="row about-img text-center"><img src="img/about.png"></div>
  71. <div class="row">
  72. <div class="col-xs-12 col-sm-8 col-md-12 col-lg-12 text-center about-text">
  73. <span class="about-text"><span class="bold-about">Lorem ipsum dolor sit amet enim. Etiam ullamcorper.</span> Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat.</span>
  74. </div>
  75. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  76. </div>
  77. </section>
  78.  
  79. <!-- SKILLS SECTION !-->
  80.  
  81. <section id="skills" class="skills-section">
  82. <div class="container">
  83. <div class="row">
  84. <div class="row skills-box">
  85. <div class="col-md-12">
  86. <div class="row">
  87. <div class="col-md-4">
  88. <p class="skills-lead text-center">Lorem Ipsum</p>
  89. <p class="skills-about text-justify">Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
  90. </div>
  91. <div class="col-md-4">
  92. <p class="skills-lead text-center">Lorem Ipsum</p>
  93. <p class="skills-about text-justify">Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
  94. </div>
  95. <div class="col-md-4 col-xs-12">
  96. <p class="skills-lead text-center">Lorem Ipsum</p>
  97. <p class="skills-about text-justify">Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
  98. </div>
  99.  
  100.  
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </section>
  106.  
  107. <!-- PORTFOLIO SECTION !-->
  108.  
  109. <section id="portfolio">
  110. <div class="container">
  111. <div class="row text-center portfolio-imgs">
  112.  
  113.  
  114. <div class="col-md-4 first-img">
  115. <img src="img/about.png">
  116. </div>
  117.  
  118. <div class="col-md-4 second-img">
  119. <img src="img/about.png">
  120. </div>
  121.  
  122. <div class="col-md-4 third-img">
  123. <img src="img/about.png">
  124. </div>
  125.  
  126. </div>
  127. </div>
  128. </section>
  129.  
  130. <!-- CONTACT SECTION !-->
  131.  
  132. <section id="contact">
  133. <div class="container">
  134. <form role="form" action="" method="post" >
  135. <div class="col-lg-6">
  136. <div class="well well-sm"><strong><i class="fa fa-star"></i> Required Field</strong></div>
  137. <div class="form-group">
  138. <label for="InputName" class="contact-text">Your Name</label>
  139. <div class="input-group">
  140. <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
  141. <span class="input-group-addon"><i class="fa fa-star"></i></span></div>
  142. </div>
  143. <div class="form-group">
  144. <label for="InputEmail" class=" contact-text">Your Email</label>
  145. <div class="input-group">
  146. <input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required >
  147. <span class="input-group-addon"><i class="fa fa-star"></i></span></div>
  148. </div>
  149. <div class="form-group">
  150. <label for="InputMessage" class=" contact-text">Message</label>
  151. <div class="input-group">
  152.  
  153. <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
  154. <span class="input-group-addon"><i class="fa fa-star"></i></span></div>
  155. </div>
  156. <div class="form-group">
  157. <label for="InputReal" class=" contact-text">What is 4 + 3? (Simple Spam Checker)</label>
  158. <div class="input-group">
  159. <input type="text" class="form-control" name="InputReal" id="InputReal" required>
  160. <span class="input-group-addon"><i class="fa fa-star"></i></span></div>
  161. </div>
  162. <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
  163. </div>
  164. </form>
  165. <hr class="featurette-divider hidden-lg">
  166. <div class="col-lg-5 col-md-push-1">
  167. <address>
  168. <h3>Contact Me</h3>
  169. </address>
  170. </div>
  171. </div>
  172. </div>
  173. </section>
  174.  
  175. <!-- FOOTER -->
  176.  
  177. <footer class="footer">
  178. <div class="container">
  179. <div class="row footer-icons">
  180. <a href="#"><i class="fa fa-facebook-square fa-3x"></i></a>
  181. <a href="#"><i class="fa fa-twitter-square fa-3x"></i></a>
  182. <a href="#"><i class="fa fa-google-plus-square fa-3x"></i></a>
  183. </div>
  184. <div class="col-md-4 pull-right" id="footer-about">
  185. <i class="fa fa-user"> &nbsp Your Name</i> <br>
  186. <i class="fa fa-home"> &nbspAbcabc, Abcbca</i><br>
  187. <i class="fa fa-envelope"> &nbsp [email protected]</i> <br>
  188. <i class="fa fa-phone"> &nbsp 999-999-999</i>
  189. </div>
  190. </div>
  191. </footer>
  192. </body>
  193. </html>
Advertisement
Add Comment
Please, Sign In to add comment