API tools faq
paste
Advertisement
Guest User

HTML code

a guest
May 9th, 2014
511
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <!-- Link to Stylsheets -->
  7. <link href='http://fonts.googleapis.com/css?family=Oswald:700,300' rel='stylesheet' type='text/css'>
  8. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  9. <link href="css/style.css" rel="stylesheet" type="text/css" />
  10. <link rel="stylesheet" href="css/animations.css">
  11. <link rel="stylesheet" href="css/owl.theme.css" />
  12. <link rel="stylesheet" href="css/owl.carousel.css" />
  13. <link rel="stylesheet" href="css/flexslider.css" />
  14. <link href="http://netdna.bootstrapcdn.com/bootswatch/3.0.0/cosmo/bootstrap.min.css" rel="stylesheet" />
  15. <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
  16. <link rel="stylesheet" href="css/magnific-popup.css" />
  17. <title>The NYCE Template</title>
  18. </head>
  19. <body>
  20. <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  21. <a href="#" class="navbar-brand">NYCE</a>
  22. <div class="container">
  23. <div class="navbar-header">
  24. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  25. <span class="sr-only">Toggle navigation</span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. </button>
  30. </div>
  31. <div class="collapse navbar-collapse">
  32. <ul id="nav" class="nav navbar-nav">
  33. <li><a href="#bigtext">Home</a></li>
  34. <li><a href="#about-section">About</a></li>
  35. <li><a href="#work-section">Work</a></li>
  36. <li><a href="#contact-section">Contact</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. </div>
  41.  
  42. <div id="bigimage">
  43. <img class="img-responsive" src="image/nice_shots3.jpg"></img>
  44. <div class="theoverlay"></div>
  45. </div>
  46.  
  47. <div class="container-fluid"> <!--start of the text on the background image-->
  48. <div class="row">
  49. <section class="col-sm-12 col-md-12 col-lg-12" id="insideimg">
  50. <p>I'm Rueben Abankwah</p>
  51. <p>Front End Designer . UX Designer .Vitruvian Man .Artist .Renaissance man</p>
  52. </section>
  53. <section id="welcomemsg">
  54. <h2>WELCOME BUDDY</h2>
  55. <p>Thanks for stopping by to check me out. My name is rueben abankwah.I'm a front Designer, UX designer, Rennaissance man, Artist. You wanna work with me, drop me a line using the form below. I will love to hear from you.</p>
  56. <button type="button" class="btn btn-default">Explore</button>
  57. </section>
  58. </div>
  59. </div>
  60.  
  61.  
  62. <div class="container-fluid">
  63. <div class="row">
  64. <div id="big_name" class="col-md-12 col-lg-12">
  65. <h2>WHY YOU SHOULD CONSIDER NYCE</h2>
  66. <p>Choosing a template can be a bit tricky to say the least.Llorem ipsum icvatum.Just try us now and see.<br>Dont worry we've got you covered.Llorem ipsum icvatum insi.</p>
  67. </div>
  68. </div>
  69.  
  70.  
  71. <div class="row" id="under_bigname">
  72.  
  73. <div class="col-sm-4 col-md-4 col-lg-4">
  74. <div data-scroll-reveal="after 0.3s" id="works">
  75. <i class="glyphicon glyphicon-tag"></i>
  76. </div>
  77. <h5>GOOD SUPPORT</h5>
  78. <p data-scroll-reveal="after 0.3s">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  79. </p>
  80. </div>
  81.  
  82. <div class="col-sm-4 col-md-4 col-lg-4">
  83. <div data-scroll-reveal="wait 0.6s" id="works">
  84. <i class="glyphicon glyphicon-certificate"></i>
  85. </div>
  86. <h5>CLEAN CODE</h5>
  87. <p data-scroll-reveal="wait 0.6s">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  88. </div>
  89.  
  90. <div class="col-sm-4 col-md-4 col-lg-4">
  91. <div data-scroll-reveal="wait 0.9s" id="works">
  92. <i class="glyphicon glyphicon-fire"></i>
  93. </div>
  94. <H5>RESPONSIVE DESIGN</H5>
  95. <p data-scroll-reveal="wait 0.9s">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  96. </div>
  97. </div>
  98. </div>
  99. </div> <!-- End of the Home section code -->
  100.  
  101. <div id="about-section"> <!-- This is for the about section of the page -->
  102. <div id="about" class="container-fluid">
  103. <div id="owl-example" class="owl-carousel">
  104.  
  105. <div id="slider-one"> <!-- Start of first slide -->
  106. <h5>WHO AM I</h5>
  107. <div class="row">
  108. <div id="imagewrap" class="col-sm-3 col-md-3">
  109. <img data-scroll-reveal="enter left after 0.5s" src="image/anthonygarand.jpg" class="img-responsive">
  110. </div>
  111.  
  112. <div id="afterimage" class="col-sm-12 col-md-7">
  113. <p>Hello, I'm Rueben Abankwah. I'm a Front end designer, Web developer, Artist, rennaissance man and and the vitruvian man if you dont mind :). The work i do is my passion and legacy. I love coffee, coding and listening to music. Ok, i love reading books too. I use Macaw Design Tool as a substitute for Photoshop and then mess with HTML 5, CSS 3 and Jquery. :) </p>
  114. </div>
  115. </div>
  116. </div> <!-- End of First Slide -->
  117.  
  118. <div id="slider-two">
  119. <h5>MY ARSENAL OF SKILLS</h5>
  120. <p>These are my digital Weapons of War.I win with them. </p>
  121. <div class="row">
  122. <div id="myskills" class="col-sm-8 col-md-8 col-sm-offset-2">
  123. <div><p>HTML5</p><span>90%</span></div>
  124. <div><p>CSS3 </p><span>100%</span></div>
  125. <div><p>UX DESIGN</p><span>80%</span></div>
  126. <div><p>PHP</p><span>95%</span></div>
  127. </div>
  128. </div> <!--End of owl-carousel wrapper -->
  129. </div>
  130. </div> <!-- End of the About section -->
  131. </div>
  132.  
  133.  
  134.  
  135. <div id="work-section">
  136. <div class="container-fluid">
  137. <div class="row">
  138. <h2 data-scroll-reveal="after .5s">MASTERPIECES </h2>
  139.  
  140. <ul data-scroll-reveal="after .8s" id="filterControls"> <!-- Filtering list -->
  141. <li class="filter" data-filter="recent lastyear old">All</li>
  142. <li class="filter" data-filter="lastyear">LastYear</li>
  143. <li class="filter" data-filter="recent">Recent</li>
  144. <li class="filter" data-filter="old">Old</li>
  145. </ul> <!--End of Filtering -->
  146.  
  147. <ul id="Grid" data-scroll-reveal="enter right wait 0.9s" class="col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"> <! - A list of the images to mixitup using mixitup plugin-->
  148. <li class="mix recent">
  149. <img class="img-responsive" src="image/1.jpg">
  150. <div>
  151. <h3> Minimalist Touch </h3>
  152. <p>If you dont decide what you want in life, you will have to live with what you get.</p>
  153. <a href=""><i class="glyphicon glyphicon-search"></i></a>
  154. </div>
  155. </li>
  156.  
  157. <li class="mix recent">
  158. <img class="img-responsive" src="image/2.jpg" >
  159. <div>
  160. <h3> Pixel Perfect</h3>
  161. <p>Drink water from your own Cistern. Let it be yours only and not for others. </p>
  162. <a href=""><i class="glyphicon glyphicon-search"></i></a>
  163. </div>
  164. </li>
  165.  
  166. <li class="mix recent">
  167. <img class="img-responsive" src="image/3.jpg" >
  168. <div>
  169. <h3>Bootstrap Base</h3>
  170. <p>The Lord is my sheperd, i shall not want.He makes me lie down in green pastures. </p>
  171. <a href=""><i class="glyphicon glyphicon-search"></i> </a>
  172. </div>
  173. </li>
  174.  
  175. <li class="mix lastyear">
  176. <img class="img-responsive" src="image/7.jpg" >
  177. <div>
  178. <h3>Standard Technology</h3>
  179. <p> The way of the sluggard is as a hedge of thorns but the way of the hard worker is a highway. </p>
  180. <a href=""> <i class="glyphicon glyphicon-search"></i></a>
  181. </div>
  182. </li>
  183.  
  184. <li class="mix lastyear">
  185. <img class="img-responsive" src="image/8.jpg" >
  186. <div>
  187. <h3>Themeforest</h3>
  188. <p>When the clouds are full of rain they pour down.</p>
  189. <a href=""><i class="glyphicon glyphicon-search"></i></a>
  190. </div>
  191. </li>
  192.  
  193. <li class="mix old">
  194. <img class="img-responsive" src="image/10.jpg" >
  195. <div>
  196. <h3> Genius Photographer </h3>
  197. <p>Here is the principle, a door of opportunity must open for the hardworker. </p>
  198. <a id="viewbutton" href=""><i class="glyphicon glyphicon-search"></i></a>
  199. </div>
  200. </li>
  201. </ul> <!--End of List of images -->
  202. </div>
  203.  
  204. <div id="features" class="row">
  205. <div class="col-sm-12 col-md-12">
  206.  
  207.  
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213.  
  214. <div id="contact-section">
  215. <div class="container">
  216. <div class="row">
  217. <div class="col-md-6 hidden-xs">
  218. <h2><strong>Contact</strong> Me</h2>
  219. </div>
  220. </div>
  221. </div>
  222. <div class="hidden-xs" id="map"></div>
  223. <div id="contacts">
  224. <div class="row" data-scroll-reveal="enter right wait 0.3s">
  225. <!-- Alignment -->
  226. <div class="col-sm-offset-3 col-sm-6">
  227. <!-- Form itself -->
  228. <form name="sentMessage" class="well" id="contactForm" novalidate>
  229. <legend>DROP ME A LINE</legend>
  230. <div class="control-group">
  231. <div class="controls">
  232. <div class="input-group">
  233. <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  234. <input type="text" class="form-control" placeholder="Full Name" id="name" required
  235. data-validation-required-message="Please enter your name" />
  236. </div>
  237. <p class="help-block"></p>
  238. </div>
  239. </div>
  240. <div class="control-group">
  241. <div class="controls">
  242. <div class="input-group">
  243. <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  244. <input type="email" class="form-control" placeholder="Email" id="email" required data-validation-required-message="Please enter your email" />
  245. </div>
  246. </div>
  247. </div>
  248.  
  249. <div class="control-group">
  250. <div class="controls">
  251. <div class="input-group">
  252. <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
  253. <textarea rows="10" cols="100" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter your message" minlength="5" data-validation-minlength-message="Min 5 characters" maxlength="999" style="resize:none"></textarea>
  254. </div>
  255. </div>
  256. </div>
  257. <div id="success"> </div> <!-- For success/fail messages -->
  258. <button type="submit" class="btn btn-primary pull-right">Send</button><br />
  259. </form>
  260. </div>
  261. </div>
  262. </div>
  263.  
  264. <!-- The Footer -->
  265. <div id="footer" class="container-fluid">
  266. <div class="row">
  267. <div id="socialsbar" class="col-md-12 col-lg-12">
  268. <p>Connect With Me on the following Social Networks</p>
  269. <ul class="list-unstyled">
  270. <li><a href="#"><img src="image/googleplus32.png"></img></a></li>
  271. <li><a href="#"><img src="image/twitter32.png"></img></a></li>
  272. <li><a href="#"><img src="image/facebook32.png"></img></a></li>
  273. <li><a href="#"><img src="image/dribbble32.png"></img></a></li>
  274. </ul>
  275. </div>
  276. </div>
  277.  
  278. <div class="row">
  279. <div id="copyright" class="col-md-12 col-lg-12">
  280. <p>&copy Copyright 2014. All rights reserved.Theme by Rueben</p>
  281. </div>
  282. </div>
  283. </div>
  284.  
  285. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  286. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  287. <script src="js/bootstrap.min.js"></script>
  288. <script src="js/jquery.mixitup.min.js"></script>
  289. <script src="js/owl.carousel.js"></script>
  290. <script src="js/jquery.gmap.min.js"></script>
  291. <script src="js/jquery.nav.js"></script>
  292. <script src="js/jquery.scrollTo.js"></script>
  293. <script src="js/jquery.flexslider-min.js"></script>
  294. <script src="js/jqBootstrapvalidation.js"></script>
  295. <script type="text/javascript" src="js/contact_me.js"></script>
  296. <script src="https://rawgithub.com/WickyNilliams/headroom.js/master/dist/headroom.js"></script>
  297. <script src="https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script>
  298.  
  299.  
  300.  
  301. <script type="text/javascript">
  302. $(".navbar-fixed-top").headroom();
  303. </script>
  304.  
  305. <!--****************Script to initiate Mixitup Plugin ****************** -->
  306. <script>
  307. $(function(){
  308.  
  309. $('#Grid').mixitup({
  310. effects:['fade','RotateZ'],
  311. easing:'smooth'
  312. });
  313. });
  314. </script>
  315.  
  316. <!--Owl Carousel Initializer -->
  317. <script>
  318. $(document).ready(function() {
  319. $("#owl-example").owlCarousel({
  320. items:1,
  321. autoPlay:false,
  322. singleItem:true,
  323. pagination:true
  324. });
  325. $("#owl-carousel").owlCarousel({
  326. items:1,
  327. autoPlay:false,
  328. singleItem:true,
  329. pagination:false
  330. });
  331. });
  332. </script>
  333.  
  334.  
  335.  
  336. <!--Google Maps -->
  337. <script>
  338. $('#map').gMap({
  339. address: "Nsawam, Ghana",
  340. zoom: 5,
  341. markers:[
  342. {
  343. latitude: 5.804359000000001,
  344. longitude: 0.3512479999999414,
  345. html: "_latlng"
  346. },
  347. {
  348. address: "Nsawam,Ghana",
  349. html: "Nsawam, Ghana",
  350. popup: true
  351. },
  352. {
  353. address: "Nsawam, Ghana",
  354. html: "_address"
  355. }
  356. ]
  357. });
  358. </script>
  359.  
  360.  
  361.  
  362.  
  363. <script>
  364. $(document).ready(function() {
  365. $('#nav').onePageNav({
  366. begin: function() {
  367. console.log('start');
  368. },
  369. end: function() {
  370. console.log('stop');
  371. },
  372. scrollOffset: 30
  373. });
  374. });
  375. </script>
  376.  
  377.  
  378. </body>
  379. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!