API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 9th, 2019
269
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.06 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. <title>website Sunlight RBIT</title>
  6. <link rel="stylesheet" href="fonts.css">
  7.  
  8. <style>
  9. *{
  10. padding:0px;
  11. margin: 0px;
  12. text-decoration: none;
  13. list-style: none;
  14. box-sizing: border-box;
  15. }
  16.  
  17.  
  18. .headr_section{
  19. text-align: center;
  20.  
  21. }
  22. nav{
  23. background: black;
  24. height: 80px;
  25. width: 100%;
  26. position: fixed;
  27. z-index: 4;
  28. }
  29. label.logo{
  30. color:white;
  31. font-size: 35px;
  32. line-height: 80px;
  33. padding: 0 100px;
  34. font-weight: bold;
  35. cursor: pointer;
  36. padding-left: -40px;
  37. }
  38. nav ul{
  39. float: right;
  40. margin-right: 20px;
  41.  
  42. }
  43. nav ul li{
  44. display: inline-block;
  45. line-height: 80px;
  46. margin:0 5px;
  47.  
  48. }
  49. nav ul li a{
  50. color: white;
  51. font-size: 17px;
  52. padding: 7px 13px;
  53. border-radius: 3px;
  54. text-transform: uppercase;
  55. }
  56. a:hover{
  57. color:#1b9bff;
  58. transition: .5s;
  59. }
  60. /*.background_image{
  61. width: 100%;
  62. position: relative;
  63. margin-right: 0 auto;
  64. }*/
  65. .background_image{
  66. height:800px;
  67. width:100%;
  68. background-image: url('bg/bg-1.jpg');
  69. background-repeat: no-repeat;
  70. }
  71.  
  72. .background_image h2{
  73. font-size: 70px;
  74. top: 100%;
  75. left: 10%;
  76. color: white;
  77. overflow: auto;
  78. height: 30%;
  79. width: 70%;
  80. text-align: center;
  81. position: absolute;
  82. }
  83. .h1_text1{
  84. position: absolute;
  85. color: red;
  86. bottom: 20%;
  87. left: 15%;
  88. text-align: center;
  89.  
  90.  
  91. }
  92. .texth3{
  93. position: absolute;
  94. color: white;
  95. left: 20%;
  96. bottom: 16%;
  97. text-align: center;
  98.  
  99. }
  100. /*section 2 start*/
  101.  
  102. .section2 {
  103. width: 100%;
  104. height: 350px;
  105. /*top: 10%;*/
  106. background: #3CB371;
  107. float: left;
  108. /*position: relative;*/
  109.  
  110. }
  111. .image_me{
  112. width: 200px;
  113. height: 200px;
  114. margin-top: 50px;
  115. margin-right: 70px;
  116.  
  117.  
  118. /*position: absolute;*/
  119.  
  120.  
  121. }
  122. .section2 .image_me{
  123. float: right;
  124.  
  125. }
  126. .sectiontext{
  127. font-size: 40px;
  128. color: white;
  129. margin-top: 50px;
  130. margin-left: 70px;
  131. font-family: cursive;
  132.  
  133. }
  134. .makestext{
  135. float: right;
  136. margin-right:200px;
  137. color: #B87333;
  138. background: #DDA0DD;
  139. }
  140. /*section 3*/
  141. .who_we_are{
  142. font-size: 50px;
  143. text-align: center;
  144. margin-top:30%;
  145.  
  146. }
  147. .We_live_with_creativity{
  148. font-size: 30px;
  149. margin-top:5%;
  150. margin-left: 1%;
  151.  
  152. }
  153. .creativity_image{
  154. float: right;
  155. top: 30%;
  156. }
  157. .creativity_text{
  158. font-size: 20px;
  159. font-family: cursive;
  160. margin-top:2%;
  161. margin-left: 2%;
  162. }
  163.  
  164. .team_image_text_h1{
  165. color: black;
  166. margin-top:11%;
  167. float: top;
  168.  
  169. }
  170. .team_image_five{
  171. display: inline-block;
  172. margin-top:10%;
  173. margin-left: 2%;
  174. }
  175. .team_image_five .team_image{
  176. border-radius: 50%;
  177. padding: 30px;
  178.  
  179.  
  180. }
  181. /*section 4 SERVICES SECTION */
  182. .services_class{
  183. height: 700px;
  184. width: 100%;
  185. background:orangered;
  186. margin-top:10%;
  187. cursor: pointer;
  188.  
  189. }
  190.  
  191.  
  192. .services_services{
  193. font-size: 70px;
  194. color: white;
  195. text-align: center;
  196. padding-top:5%;
  197. }
  198. .five_image_name{
  199. text-align: center;
  200. font-size: 25px;
  201. }
  202. .five_image_designer{
  203. text-align: center;
  204.  
  205. }
  206. /* section04 start*/
  207. .services_icons_image_section{
  208. float: left;
  209. }
  210. .services_icons_image{
  211. width: 20%;
  212. float: left;
  213. margin-bottom: 20%;
  214. padding: 30px;
  215. margin-left: 30px;
  216. }
  217. .services_icons_image:hover{
  218. background: red;
  219.  
  220. }
  221. .services_section_h2{
  222. color: white;
  223.  
  224. }
  225. .services_section_p{
  226. color: white;
  227. font-size: 15px;
  228. }
  229.  
  230. .services_hover:hover{
  231. /*font-family: cursive;*/
  232. }
  233. .laptop_icon{
  234.  
  235. }
  236. .laptop_icon:hover{
  237. background: 50px red;
  238.  
  239. }
  240.  
  241. /*new section start*/
  242. .our_works{
  243. padding-top: 2%;
  244. font-size: 70px;
  245. text-align: center;
  246. }
  247. .our_works_icon{
  248. padding-top:30px;
  249. }
  250. .our_works_icon .our_works_icon_img{
  251. width: 280px;
  252. height: 180px;
  253.  
  254. }
  255.  
  256. .our_works_bottom{
  257. background-image: url('bg/bg-3.jpg');
  258. width: 100%;
  259. height: 450px;
  260. }
  261. /*new section start*/
  262. .our_works_bottom_h2{
  263. font-size: 40px;
  264. color: white;
  265. margin-left: 50px;
  266. text-align: center;
  267. padding-top: 50px;
  268.  
  269. }
  270. .our_works_bottom .our_works_bottom_image{
  271. margin-left: 30%;
  272. }
  273. /*new section start*/
  274. .our_blog{
  275. width: 100%;
  276. height:500px;
  277.  
  278. }
  279. .our_blog_h1{
  280. padding-top: 60px;
  281. font-size: 60px;
  282. text-align: center;
  283. }
  284.  
  285. .our_blog_image{
  286. width: 280px;
  287. height: 200px;
  288. margin-left: 30px;
  289. float: left;
  290. margin-top: 40px;
  291. }
  292.  
  293. /*button text*/
  294. .button_text{
  295. height: 60px;
  296. width: 280px;
  297. background: lightgreen;
  298. text-align: center;
  299. font-size: 40px;
  300. border:4px solid red;
  301. margin-left: 37%;
  302. }
  303. .button_text:hover{
  304. background-color:#3B7A57;
  305. color: white;
  306. cursor: pointer;
  307. }
  308. /*new section start*/
  309. .get_in_touch{
  310. height: 700px;
  311. width: 100%;
  312. background: #3BAC57;
  313. margin-top: 100px;
  314. }
  315. .get_in_touch_h1{
  316. text-align: center;
  317. font-size: 50px;
  318. color: white;
  319. padding-top: 80px;
  320. }
  321. .get_in_touch_p{
  322. color: white;
  323. padding-left: 40px;
  324. padding-right: 50px;
  325. padding-top: 30px;
  326. font-family: cursive;
  327. }
  328. .form_input[type="text"]{
  329. margin-left: 40px;
  330. border:15px solid white;
  331. width: 500px;
  332. height: 60px;
  333. margin-top: 50px;
  334. border-radius: 5px;
  335. font-size: 20px;
  336. font-family: cursive;
  337. }
  338. .form_message{
  339. height: 200px;
  340. width: 600px;
  341. margin-bottom:100px;
  342. margin-left:580px;
  343. border-radius: 7px;
  344. max-height: 340px;
  345. min-height:200px;
  346. min-width: 600px;
  347. max-width: 670px;
  348. }
  349. .form_message[type="message"]{
  350. font-size: 25px;
  351. font-family: cursive;
  352. margin-top:-320px;
  353. }
  354. .submit-button{
  355. margin-left: 580px;
  356. background:#3BAC57;
  357. font-size: 20px;
  358. color: white;
  359. height: 50px;
  360. width: 180px;
  361.  
  362. }
  363. .submit-button:hover{
  364. background: black;
  365. color: white;
  366. }
  367. .send_message_button{
  368. margin-top:-80px;
  369. cursor: pointer;
  370. }
  371. /*new section start*/
  372.  
  373. .gallery_image{
  374. height: 830px;
  375. width: 100%;
  376. background-image: url('bg/bg-2.jpg');
  377. }
  378. .gallery_h1{
  379. font-size: 40px;
  380. color: white;
  381. text-align: center;
  382. padding-top:30px;
  383.  
  384. }
  385.  
  386. .student_image{
  387. height:200px;
  388. width: 300px;
  389. margin:15px;
  390. margin-left: 70px;
  391. border-radius: 50px;
  392. transition: transform .20s;
  393. filter: grayscale(50%);
  394. }
  395. .student_image:hover{
  396. transform: scale(1.1);
  397. filter: grayscale(0%);
  398. }
  399.  
  400. /*new section start*/
  401. .social_section{
  402. width: 100%;
  403. height: 300px;
  404. background: #303036;
  405.  
  406. }
  407. .Flow_icon{
  408. margin-left: 40%;
  409. padding-top: 100px;
  410. }
  411.  
  412. .Flow_icon li a{
  413. float: left;
  414. padding: 20px;
  415.  
  416. }
  417. .Flow_icon li a:hover{
  418. background: white;
  419. }
  420. .footer_designer{
  421. margin-top: 100PX;
  422. text-align: center;
  423. color: white;
  424. }
  425. .active{
  426. background: blue;
  427. }
  428. .active:hover{
  429. background: red;
  430. color: white;
  431. }
  432.  
  433. </style>
  434. </head>
  435. <body>
  436. <section>
  437. <div class="headr_section">
  438. <nav>
  439. <label class="logo">SunlightRBIT</label>
  440. <ul>
  441. <li><a class="active" href="index.html">Home</a></li>
  442. <li><a href="services.html">Service</a></li>
  443. <li><a href="gallery.html">Gallery</a></li>
  444. <li><a href="blog.html">Blog</a></li>
  445. <li><a href="works.html">Works</a></li>
  446. <li><a href="contacts.html">Contact</a></li>
  447. </ul>
  448. </nav>
  449. </div>
  450. </section>
  451. <!--end section1-->
  452. <section>
  453. <div class="background_image">
  454. <img src="C:\Users\LENOVO\Desktop\templats\Maxim\img\logo-image.png" alt="" style="margin-left:44%; margin-top:100px;">
  455. <div>
  456. <h1 class="h1_text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ea voluptatibus,</h1><h3 class="texth3"> necessitatibus at ipsam voluptas. Incidunt a, quidem dolor voluptas voluptate,</h3>
  457. </div>
  458. <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod est ut ipsa similique accusantium eveniet quibusdam dicta itaque, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius labore voluptatibus itaque voluptates dicta placeat, temporibus, iste doloremque reiciendis neque facere obcaecati quia provident, eum nobis sapiente ipsa autem voluptate.</h2>
  459.  
  460. </div>
  461. </section>
  462. <!--end section2-->
  463. <section>
  464. <div class="section2">
  465. <img class="image_me" src="C:/Users/LENOVO/Desktop/image_1.jpg" alt="" height="1000" width="1000">
  466.  
  467. <p class="sectiontext">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit. voluptates, aliquid voluptatibus rem eos.</p>
  468. <p class="makestext">-makes sunlight movies</p>
  469.  
  470. </div>
  471. </section>
  472. <!--end section3-->
  473.  
  474. <section>
  475. <h1 class="who_we_are">
  476. Who We Are
  477. </h1>
  478. <p class="We_live_with_creativity">We live with <b>creativity</b></p>
  479.  
  480. <img class="creativity_image" src="icons/creativity.png" alt="">
  481. <p class="creativity_text">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores</p>
  482.  
  483.  
  484. <div class="team_image_five">
  485. <div>
  486. <img class="team_image" src="team/img-1.jpg" alt="">
  487. <h1 class="five_image_name">Ramesh Baduwal</h1>
  488. <p class="five_image_designer">Film Director</p>
  489. </div>
  490. </div>
  491.  
  492. <div class="team_image_five">
  493. <div>
  494. <img class="team_image" src="team/img-2.jpg" alt="">
  495. <h1 class="five_image_name">Dinesh Baduwal</h1>
  496. <p class="five_image_designer">Editor</p>
  497. </div>
  498. </div>
  499.  
  500. <div class="team_image_five">
  501. <div>
  502. <img class="team_image" src="team/img-3.jpg" alt="">
  503. <h1 class="five_image_name">Anil Rawal</h1>
  504. <p class="five_image_designer">Film Maker</p>
  505. </div>
  506. </div>
  507.  
  508. <div class="team_image_five">
  509. <div>
  510.  
  511. <img class="team_image" src="team/img-4.jpg" alt="">
  512. <h1 class="five_image_name">Bibek Bista</h1>
  513. <p class="five_image_designer">Art Director</p>
  514. </div>
  515. </div>
  516.  
  517. <div class="team_image_five">
  518. <div>
  519. <img class="team_image" src="team/img-5.jpg" alt="">
  520. <h1 class="five_image_name">Chakra Baduwal</h1>
  521. <p class="five_image_designer">Web Designer</p>
  522. </div>
  523. </div>
  524.  
  525.  
  526. </section>
  527. <!--section end-->
  528. <section>
  529. <div class="services_class">
  530. <h2 class="services_services">Services</h2>
  531. <div class="services_icons_image_section">
  532. <div class="services_hover">
  533. <div class="services_icons_image">
  534. <div class="laptop_icon">
  535. <img src="icons/laptop.png" alt="">
  536. <h2 class="services_section_h2">Web design</h2><br>
  537. <p class="services_section_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque veniam in nobis nulla, excepturi necessitatibus maxime sapiente laborum, rerum asperiores ipsa similique quos, deserunt beatae aliquam maiores alias sed dolorum?</p>
  538. </div>
  539. </div>
  540. </div>
  541.  
  542. <div class="services_hover">
  543. <div class="services_icons_image">
  544. <div class="laptop_icon">
  545. <img src="icons/lab.png" alt="">
  546. <h2 class="services_section_h2">Web development</h2><br>
  547. <p class="services_section_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque veniam in nobis nulla, excepturi necessitatibus maxime sapiente laborum, rerum asperiores ipsa similique quos, deserunt beatae aliquam maiores alias sed dolorum?</p>
  548. </div>
  549. </div>
  550. </div>
  551.  
  552. <div class="services_hover">
  553. <div class="services_icons_image">
  554. <div class="laptop_icon">
  555. <img src="icons/camera.png" alt="">
  556. <h2 class="services_section_h2">Photography</h2><br>
  557. <p class="services_section_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque veniam in nobis nulla, excepturi necessitatibus maxime sapiente laborum, rerum asperiores ipsa similique quos, deserunt beatae aliquam maiores alias sed dolorum?</p>
  558. </div>
  559. </div>
  560. </div>
  561.  
  562. <div class="services_hover">
  563. <div class="services_icons_image">
  564. <div class="laptop_icon">
  565. <img src="icons/basket.png" alt="">
  566. <h2 class="services_section_h2">Ecommerce</h2><br>
  567. <p class="services_section_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque veniam in nobis nulla, excepturi necessitatibus maxime sapiente laborum, rerum asperiores ipsa similique quos, deserunt beatae aliquam maiores alias sed dolorum?</p>
  568. </div>
  569. </div>
  570. </div>
  571. </div>
  572. </div>
  573. </section>
  574. <!--end section4-->
  575.  
  576. <section>
  577.  
  578. <h2 class="our_works">Our Works</h2>
  579. <div class="our_works_icon">
  580. <img class="our_works_icon_img" src="works/1.png" alt="">
  581. <img class="our_works_icon_img" src="works/2.png" alt="">
  582. <img class="our_works_icon_img" src="works/3.png" alt="">
  583. <img class="our_works_icon_img" src="works/4.png" alt="">
  584. <img class="our_works_icon_img" src="works/5.png" alt="">
  585. <img class="our_works_icon_img" src="works/6.png" alt="">
  586. <img class="our_works_icon_img" src="works/7.png" alt="">
  587. <img class="our_works_icon_img" src="works/10.png" alt="">
  588. </div>
  589.  
  590. </section>
  591.  
  592. <!--new section start-->
  593. <section>
  594. <div class="our_works_bottom">
  595. <h1 class="our_works_bottom_h2"><b>We are an established and trusted web agency with a<br> reputation for commitment and high integrity</b></h1>
  596. <img class="our_works_bottom_image" src="icons/creativity.png" alt="">
  597.  
  598. </div>
  599. </section>
  600. <!--NEW SECTION START-->
  601. <section>
  602. <div>
  603. <div class="our_blog">
  604. <h1 class="our_blog_h1">Our Blog</h1>
  605. <div>
  606. <img class="our_blog_image" src="blog/img1.jpg" alt="">
  607. </div>
  608.  
  609. <div>
  610. <img class="our_blog_image" src="blog/img2.jpg" alt="">
  611.  
  612. </div>
  613.  
  614. <div>
  615. <img class="our_blog_image" src="blog/img3.jpg" alt="">
  616. </div>
  617.  
  618. <div>
  619. <img class="our_blog_image" src="blog/img4.jpg" alt="">
  620. </div>
  621.  
  622. </div>
  623. <li class="button_text">More Blog Post</li>
  624. </div>
  625. </section>
  626. <!--new section start-->
  627. <section>
  628. <div class="get_in_touch">
  629. <h1 class="get_in_touch_h1">Get In Touch</h1>
  630. <p class="get_in_touch_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates blanditiis tenetur natus illum velit ea, ratione perferendis placeat recusandae magni voluptatum, tempore voluptatem iste distinctio aut est, quae esse nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore impedit doloremque molestiae tenetur, dolores, ipsam dicta nam sequi, repellendus quas, nulla architecto quos. Eaque deleniti minus enim perferendis. Eius, sequi.</p>
  631.  
  632. <form action="post">
  633.  
  634. <input class="form_input" type="text" name="name" placeholder="Your Name" required="required"><br><br>
  635.  
  636. <input class="form_input" type="text" name="email" placeholder="Your Email" required="required"><br><br>
  637. <input class="form_input" type="text" name="text" placeholder="Subject">
  638.  
  639. <div>
  640. <textarea class="form_message" type="message" name="message" placeholder="Message"></textarea>
  641. </div>
  642. <div class="send_message_button">
  643. <input class="submit-button" type="submit" value="Send message">
  644. </div>
  645. </form>
  646. </div>
  647. </section>
  648. <!--new section start-->
  649. <section>
  650.  
  651. <div class="gallery_image">
  652. <div class="gallery_h1">
  653. <h1>Gallery-Photos</h1>
  654. </div>
  655. <div>
  656. <a href="student/bg_1.jpg"><img class="student_image" src="student/bg_1.jpg" alt=""></a>
  657. <a href="student/bg_2.jpg"><img class="student_image" src="student/bg_2.jpg" alt=""></a>
  658. <a href="student/bg_3.jpg"><img class="student_image" src="student/bg_3.jpg" alt=""></a>
  659. <a href="student/bg_5.jpg"><img class="student_image" src="student/bg_5.jpg" alt=""></a>
  660. <a href="student/course-1.jpg"><img class="student_image" src="student/course-1.jpg" alt=""></a>
  661. <a href="student/course-2.jpg"><img class="student_image" src="student/course-2.jpg" alt=""></a>
  662. <a href="student/course-3.jpg"><img class="student_image" src="student/course-3.jpg" alt=""></a>
  663. <a href="student/course-4.jpg"><img class="student_image" src="student/course-4.jpg" alt=""></a>
  664. </div>
  665. </div>
  666. </section>
  667. <!--New Section Start -->
  668. <section>
  669. <div class="social_section">
  670. <ul class="Flow_icon">
  671. <li><a target="_blank" class="icon-facebook1" href="https://www.facebook.com/rubenbaduwal"></a></li>
  672. <li><a target="_blank" class="icon-instagram1" href="https://www.instagram.com/rubenbaduwal/"></a></li>
  673. <li><a target="_blank" class="icon-twitter1" href="https://twitter.com/Rubenbaduwal"></a></li>
  674. <li><a target="_blank" class="icon-youtube1" href="https://www.youtube.com/channel/UCb-5hst7o1i2lrTYol-JZYg?view_as=subscriber"></a></li>
  675. </ul>
  676. <div class="footer_designer">
  677. Copyright &copy; 2019 Sunlight Movies | Design By Sunlight RBITbr <br> All Right Reseved vudu9movies.tk
  678. </div>
  679.  
  680. <div class="gmail">
  681.  
  682. </div>
  683.  
  684. </div>
  685. </section>
  686.  
  687. </body>
  688. </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!