Guest User

Untitled

a guest
Jan 25th, 2019
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.28 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta name="Viewport" content="width=device-width, initial-scale=1">
  5. <meta charset="UTF-8">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  11. <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  12. <link rel="stylesheet" href="css.css" type="text/css">
  13. </head>
  14. <body>
  15. <!--First nav-bar-->
  16.  
  17. <div class="fnav">
  18. <div class="phone"><i class="fas fa-phone-square"></i> +201166633565</div>
  19. <div class="Email"><i class="fas fa-envelope"></i> Email@Email.comcccc</div>
  20. </div>
  21.  
  22. <br>
  23. <!--nav-->
  24.  
  25.  
  26. <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  27.  
  28. <div class="container-fluid">
  29.  
  30. <a class="navbar-brand" href="#"><img src="imgs/logo.png"></a>
  31.  
  32. <button class="navbar-toggler" type="button" data-toggle="colapse" data-target="#navbarResponsive">
  33.  
  34. <span class="navbar-toggler-icon"></span>
  35. </button>
  36.  
  37. <div class="collapse navbar-collapse" id="navbarResponsive">
  38. <ul class="navbar-nav ml-auto">
  39. <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
  40. <li class="nav-item"><a class="nav-link" href="#">ِAbout</a></li>
  41. <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
  42. <li class="nav-item"><a class="nav-link" href="#">Team</a></li>
  43. <li class="nav-item"><a class="nav-link" href="#">Connect</a></li>
  44.  
  45. </ul>
  46. </div>
  47.  
  48. </div>
  49. </nav>
  50.  
  51.  
  52.  
  53. <!--image slider -->
  54. <div id="slides"class="carousel slide" data-ride="carousel">
  55. <ul class="carousel-indicators">
  56. <li data-target="#slides" data-slide-to="0" class="active"></li>
  57. <li data-target="#slides" data-slide-to="1"></li>
  58. <li data-target="#slides" data-slide-to="2"></li>
  59. </ul>
  60. <div class="carousel-inner">
  61. <div class="carousel-item active">
  62. <img src="imgs/background.png">
  63. <div class="carousel-caption">
  64. <h1 class="display-2">NeNow</h1>
  65. <h3>Complete WebSite layout</h3>
  66. <button type="button" class="btn btn-outline-light btn-lg">VEW DEMO</button>
  67. <button type="button" class="btn btn-primary btn-lg">Get It Now !</button>
  68. </div>
  69. </div>
  70.  
  71. <div class="carousel-item">
  72. <img src="imgs/background2.png">
  73. </div>
  74.  
  75. <div class="carousel-item">
  76. <img src="imgs/background3.png">
  77. </div>
  78. </div>
  79.  
  80.  
  81. </div>
  82.  
  83.  
  84. <!--Jumboron-->
  85. <!--- Jumbotron -->
  86. <div class="container-fluid">
  87. <div class="row jumbotron">
  88. <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
  89. <p class="lead">
  90. It's a simple and fast template with great options, simple,fast,responsive
  91. <button type="button" class="btn btn-defalut btn-lg">Get It now !</button></p>
  92.  
  93. </div>
  94. </div>
  95.  
  96. </div>
  97.  
  98. <!--Wellcome section-->
  99. <div class="container-fluid padding">
  100. <div class="row welcome text-center">
  101. <div class="col-12">
  102. <h1 class="display-4">Bulit with ease</h1>
  103. </div>
  104. <hr>
  105. <div class="col-12">
  106. <p class="lead">Hello this is a test for the wellcome section</p>
  107. </div>
  108. </div>
  109. </div>
  110.  
  111.  
  112. <!--- Three Column Section -->
  113. <div class="container-fluid padding">
  114. <div class="row text-center padding">
  115. <div class="col-xs-12 col-sm6 col-md-4">
  116. <i class="fas fa-code"></i>
  117. <h3>HTML5</h3>
  118. <p>Bulit with the latest version of html.html5</p>
  119. </div>
  120.  
  121.  
  122.  
  123. <div class="col-xs-12 col-sm6 col-md-4">
  124. <i class="fas fa-bold"></i>
  125. <h3>BootStrap</h3>
  126. <p>Bulit with the latest version of html.html5</p>
  127. </div>
  128.  
  129.  
  130. <div class="col-xs-12 col-md-4">
  131. <i class="fab fa-css3"></i>
  132. <h3>HTML5</h3>
  133. <p>Bulit with the latest version of html.html5</p>
  134. </div>
  135. </div>
  136. <hr class="my-4">
  137. </div>
  138.  
  139. <!--gallery-->
  140. <div class="container-fluid">
  141. <ul class="gallery_box">
  142. <li>
  143. <a href="#0"><img src="https://picsum.photos/600/700/?random">
  144. <div class="box_data">
  145. <span>Ravi With Bike</span>
  146. </div></a>
  147. </li>
  148. <li>
  149. <a href="#0"><img src="https://picsum.photos/600/701/?random">
  150. <div class="box_data">
  151. <span>Ravi Singh</span>
  152. </div></a>
  153. </li>
  154. <li>
  155. <a href="#0"><img src="https://picsum.photos/600/702/?random">
  156. <div class="box_data">
  157. <span>White wall</span>
  158. </div></a>
  159. </li>
  160. <li>
  161. <a href="#0"><img src="https://picsum.photos/600/703/?random">
  162. <div class="box_data">
  163. <span>Green Tree</span>
  164. </div></a>
  165. </li>
  166. <li style=" position: relative;
  167. top: -134px;">
  168. <a href="#0"><img src="https://picsum.photos/600/704/?random">
  169. <div class="box_data">
  170. <span>Blue</span>
  171. </div></a>
  172. </li>
  173. <li>
  174. <a href="#0"><img src="https://picsum.photos/600/705/?random">
  175. <div class="box_data">
  176. <span>Ravi</span>
  177. </div></a>
  178. </li>
  179.  
  180. </ul>
  181. </div>
  182. <!--- Two Column Section -->
  183. <div class="container-fluid padding">
  184. <div class="row padding">
  185. <div class="col-md-12 col-lg-6">
  186. <h1>If you Bulid it .. </h1>
  187. <p>Hello this is a test for bulid a web site using pnly html5 and css</p>
  188.  
  189. <p>Hello this is a test for bulid a web site using pnly html5 and css</p>
  190.  
  191. <p>Hello this is a test for bulid a web site using pnly html5 and css</p>
  192.  
  193. <p>Hello this is a test for bulid a web site using pnly html5 and css</p>
  194. <br>
  195. <a href="#" class="btn btn-primary">learn more</a>
  196. </div>
  197. <div class="col-lg-6">
  198. <img src="imgs/desk.png" class="img-fluid">
  199. </div>
  200. </div>
  201. </div>
  202. <hr class="my-4">
  203. <!--- Fixed background -->
  204.  
  205. <figure>
  206. <div class="fixed-warp">
  207. <div id="fixed">
  208.  
  209.  
  210. </div>
  211. </div>
  212. </figure>
  213. <!--- Emoji Section -->
  214.  
  215.  
  216. <!--- Meet the team -->
  217.  
  218. <div class-"container-fluid padding">
  219. <div class="row text-center">
  220. <div class="col-12"><h2>Meet our Team ! </h2></div>
  221.  
  222. </div>
  223. </div>
  224. <hr>
  225.  
  226. <!--- Cards -->
  227. <div class="container-fluid padding">
  228. <div class="row padding">
  229. <div class="col-md-4">
  230. <div class="card">
  231. <img class="card-img-top" src="imgs/team1.png">
  232. <div class="card-body"><h4 class="card-title">Jone Wick</h4>
  233. <p>Hello this is our team and this is jone, he is good at back end
  234. <a href="#"><div class="btn btn-outline-secondary">Profile</div></a>
  235. </p>
  236. </div>
  237. </div>
  238. </div>
  239.  
  240. <div class="col-md-4">
  241. <div class="card">
  242. <img class="card-img-top" src="imgs/team1.png">
  243. <div class="card-body"><h4 class="card-title">Jone Wick</h4>
  244. <p>Hello this is our team and this is jone, he is good at back end
  245. <a href="#"><div class="btn btn-outline-secondary">Profile</div></a>
  246. </p>
  247. </div>
  248. </div>
  249. </div>
  250.  
  251. <div class="col-md-4">
  252. <div class="card">
  253. <img class="card-img-top" src="imgs/team1.png">
  254. <div class="card-body"><h4 class="card-title">Jone Wick</h4>
  255. <p>Hello this is our team and this is jone, he is good at back end
  256. <a href="#"><div class="btn btn-outline-secondary">Profile</div></a>
  257. </p>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. <hr>
  264. <!--- Two Column Section -->
  265. <div class="jumbotron">
  266. <div class="container-fluid padding">
  267.  
  268. <div class="row padding">
  269. <div class="col-md-12 col-lg-6">
  270.  
  271. <h1>If you Bulid it .. </h1>
  272. <p>Hello this is a test for bulid a web site using pnly html5 and css</p>
  273.  
  274. </div>
  275. </div>
  276. </div>
  277.  
  278. <hr>
  279.  
  280. <!--- Connect -->
  281. <div class="container-fluid padding">
  282. <div class="row text-center padding">
  283. <div class="col-12">
  284. <h2>Connect</h2>
  285. </div>
  286. <div class="col-12 soical padding">
  287. <a href="#" ><i class="fab fa-facebook"></i></a>
  288. <a href="#" ><i class="fab fa-twitter"></i></a>
  289. <a href="#" ><i class="fab fa-youtube"></i></a>
  290.  
  291. </div>
  292. </div>
  293. </div>
  294.  
  295. <!--- Footer -->
  296.  
  297.  
  298.  
  299. <footer>
  300. <div class="container-fluid padding">
  301. <div class="row text-center">
  302. <div class="col-md-4">
  303. <img src="imgs/logo.png">
  304. <hr class="light">
  305. <p>01155522984</p>
  306. <p>email@email.com</p>
  307. <p>100 straeet</p>
  308. <p>11311</p>
  309. </div>
  310.  
  311. <div class="col-md-4">
  312. <img src="imgs/logo.png">
  313. <hr class="light">
  314. <p>01155522984</p>
  315. <p>email@email.com</p>
  316. <p>100 straeet</p>
  317. <p>11311</p>
  318. </div>
  319. <div class="col-md-4">
  320. <img src="imgs/logo.png">
  321. <hr class="light">
  322. <p>01155522984</p>
  323. <p>email@email.com</p>
  324. <p>100 straeet</p>
  325. <p>11311</p>
  326. </div>
  327. </div>
  328. </div>
  329. </footer>
  330.  
  331. </body>
  332. </html>
Add Comment
Please, Sign In to add comment