API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 18th, 2018
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.64 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="pt-br">
  3.  
  4. <head>
  5. <!-- Required meta tags -->
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9. <!-- Bootstrap CSS -->
  10. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  11. crossorigin="anonymous">
  12. <!-- fontawesome -->
  13. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
  14. crossorigin="anonymous">
  15.  
  16. <title>Willian Serralheria</title>
  17.  
  18. <style>
  19. html {
  20. height: 100%;
  21. }
  22.  
  23. body {
  24. height: 100%;
  25. }
  26.  
  27. .text-vermelho {
  28. color: #c50000 !important;
  29. }
  30.  
  31. .bg-vermelho {
  32. background-color: #c50000 !important;
  33. }
  34.  
  35. .text-lg {
  36. font-size: 1.3rem;
  37. }
  38.  
  39. .icones-contato {
  40. font-size: 1.7rem;
  41. }
  42.  
  43. a .icones-redes-sociais {
  44. font-size: 2.3rem;
  45. color: #c50000 !important;
  46. }
  47.  
  48. a .icones-redes-sociais:hover {
  49. color: #C0C0C0 !important;
  50. }
  51.  
  52.  
  53.  
  54. nav {
  55. z-index: 99999;
  56. }
  57.  
  58. .nav-link {
  59. color: #fff !important;
  60. text-transform: uppercase;
  61. font-weight: bold;
  62.  
  63. width: 100%;
  64. padding-right: 0 !important;
  65. padding-left: 0 !important;
  66. margin-right: 0 !important;
  67. margin-left: 0 !important;
  68. }
  69.  
  70.  
  71.  
  72. .nav-item {
  73. padding-right: 0 !important;
  74. padding-left: 0 !important;
  75. }
  76.  
  77. .nav-link:hover {
  78.  
  79. color: #C0C0C0 !important;
  80. }
  81.  
  82. .navbar-toggler {
  83. border-color: rgba(255, 255, 255, 0.5) !important;
  84. }
  85.  
  86. .carousel-imagem {
  87. background-size: cover;
  88. height: 70vh !important;
  89. }
  90.  
  91. .carousel {
  92. margin-top: -50px;
  93. }
  94.  
  95. .btn-vermelho {
  96. background-color: #fff !important;
  97. color: #c50000;
  98. border: 2px solid #dc3545;
  99. }
  100.  
  101. .btn-vermelho:hover {
  102. background-color: #c50000 !important;
  103. color: #fff;
  104. }
  105.  
  106. .btn-menu {
  107. background-color: #c50000!important;
  108. color: #fff;
  109.  
  110. }
  111.  
  112. .btn-menu:hover {
  113. background-color: #fff !important;
  114. color: #dc3545;
  115. }
  116.  
  117.  
  118.  
  119. .delta{
  120. text-transform: uppercase;
  121. padding-bottom: 60px;
  122. padding-top: 10px;
  123. }
  124.  
  125.  
  126. .delta:after{
  127. content: '';
  128. width: 24px;
  129. height: 24px;
  130. position: absolute;
  131. margin-top: -5px;
  132. margin-left: -5px;
  133. margin-bottom: 5px;
  134. border-top: 3px solid #c50000;
  135. border-left: 1px solid transparent;
  136. border-bottom: 1px solid transparent;
  137. border-right: 3px solid #c50000;
  138.  
  139. }
  140. .delta:before{
  141. content: '';
  142. width: 24px;
  143. height: 24px;
  144. position: absolute;
  145. margin-top: 22px;
  146. margin-left: -15px;
  147. margin-bottom: 5px;
  148. border-top: 1px solid transparent;
  149. border-left: 3px solid #c50000;
  150. border-bottom: 3px solid #c50000;
  151. border-right: 1px solid transparent;
  152. }
  153.  
  154. .bg-gray {
  155. background-color: #f3f3f3;
  156. }
  157.  
  158. .btn-link-red {
  159. background-color: transparent;
  160. color: #c50000;
  161. }
  162.  
  163. .parceiros {
  164. max-width: 100%;
  165. }
  166.  
  167. .formContato {
  168. background: url('img/WSopacity.png') no-repeat;
  169. background-position: center;
  170. background-size: 100%;
  171. }
  172. .whatsapp {
  173. position: fixed; bottom: 0; right: 0; padding: 2rem; z-index: 999999999;
  174. }
  175.  
  176. @media (min-width: 767px) /* @grid-float-breakpoint -1 */
  177. {
  178. .borda-menu-lado
  179. {
  180. border-right: #fff 1px solid;
  181. border: 1px solid #fff;
  182.  
  183. }
  184.  
  185. .nav-link {
  186. font-size: 90% !important;
  187. }
  188.  
  189.  
  190.  
  191. }
  192.  
  193.  
  194. @media (min-width: 960px) /* @grid-float-breakpoint -1 */
  195. {
  196. .nav-link {
  197. font-size: 70%;
  198. }
  199. }
  200.  
  201. .form-control {
  202. background: transparent;
  203. }
  204.  
  205. </style>
  206.  
  207. </head>
  208.  
  209. <body>
  210.  
  211.  
  212. <!--header-->
  213. <div class="w-100">
  214.  
  215.  
  216. <div class="container">
  217.  
  218. <div class="row pt-3">
  219.  
  220. <div class="col-md-4 mb-3">
  221. <div class="text-md-left text-center">
  222. <img src="img/WSLogo.png" height="100px">
  223. </div>
  224. </div>
  225.  
  226. <div class="col-md-8 text-right d-none d-md-block">
  227.  
  228. <ul class="list-inline mt-4 mr-0">
  229. <li class="list-inline-item text-vermelho text-lg"><i class="fas fa-envelope icones-contato"></i></li>
  230. <li class="list-inline-item text-lg" style="color: #A9A9A9;">williamserralheiro@live.com</li>
  231.  
  232. <li class="list-inline-item text-vermelho text-lg"><i class="fas fa-phone icones-contato"></i></li>
  233. <li class="list-inline-item text-lg" style="color: #A9A9A9;">(11) 4576-5268</li>
  234.  
  235. <li class="list-inline-item text-vermelho text-lg"><a href="#"><i class="fab fa-facebook-square icones-redes-sociais"></i></a></li>
  236. <li class="list-inline-item text-vermelho text-lg"><a href="#"><i class="fab fa-instagram icones-redes-sociais"></i></a></li>
  237. </ul>
  238.  
  239. </div>
  240.  
  241. </div>
  242.  
  243. </div>
  244.  
  245.  
  246. </div>
  247.  
  248. <!--/header-->
  249.  
  250. <!--nav-->
  251. <div class="container">
  252.  
  253. <div class="row">
  254.  
  255. <div class="col-md-4"></div>
  256.  
  257. <div class="col-md-8 p-0 m-0">
  258.  
  259.  
  260. <nav class="navbar navbar-expand-md navbar-dark bg-vermelho" id="menutopdescer">
  261.  
  262. <a class="navbar-brand d-none" id="logonavbar" href="#"><img src="img/WSLogo.png" height="40px"></a>
  263.  
  264. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarExpendContent"
  265. aria-controls="navbarExpendContent" aria-expanded="false" aria-label="Toggle navigation">
  266. <span class="navbar-toggler-icon"></span>
  267. </button>
  268.  
  269. <div class="collapse navbar-collapse" id="navbarExpendContent">
  270. <ul class="navbar-nav m-0 row w-100">
  271.  
  272. <li class="nav-item col-md-2 col-12 text-center border-sm-0 borda-menu-lado">
  273. <a class="nav-link" href="#">Home</a>
  274. </li>
  275.  
  276. <li class="nav-item col-md-3 col-12 text-center borda-menu-lado">
  277. <a class="nav-link" id="linkmenu" href="#about">SOBRE NÓS</a>
  278. </li>
  279.  
  280. <li class="nav-item col-md-2 col-12 text-center borda-menu-lado">
  281. <a class="nav-link" href="#services">SERVIÇOS</a>
  282. </li>
  283.  
  284. <li class="nav-item col-md-3 col-12 text-center borda-menu-lado">
  285. <a class="nav-link" href="#port">Portifólio</a>
  286. </li>
  287.  
  288. <li class="nav-item col-md-2 col-12 text-center borda-menu-lado">
  289. <a class="nav-link" href="#contact">Contato</a>
  290. </li>
  291.  
  292. </ul>
  293. </div>
  294. </nav>
  295.  
  296.  
  297. </div>
  298.  
  299.  
  300. </div>
  301.  
  302.  
  303. </div>
  304. <!--/nav-->
  305.  
  306.  
  307. <!--slide-->
  308.  
  309. <div id="carousel" class="carousel slide" data-ride="carousel">
  310. <div class="carousel-inner">
  311.  
  312. <!--item-->
  313. <div class="carousel-item active">
  314. <div class="carousel-imagem w-100" style="background: url('https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260') no-repeat center center; background-size: cover;">
  315.  
  316. <div class="container">
  317.  
  318. <div class="position-absolute text-md-left text-center" style="bottom: 2rem;">
  319. <a href="#" class="btn btn-menu rounded-0 btn-lg m-3 p-2">Solicitar Orçamento</a>
  320. <a href="#" class="btn btn-menu rounded-0 btn-lg m-3 p-2">Saiba Mais</a>
  321. </div>
  322.  
  323. </div>
  324.  
  325. </div>
  326. </div>
  327. <!--/item-->
  328.  
  329. <!--item
  330. <div class="carousel-item ">
  331. <div class="carousel-imagem w-100" style="background: url('https://i.imgur.com/N4wJL5M.png') no-repeat center center;">
  332.  
  333. <div class="container">
  334.  
  335. <div class="position-absolute text-md-left text-center" style="bottom: 2rem;">
  336. <a href="#" class="btn btn-menu rounded-0 btn-lg m-3 p-2">Solicitar Orçamento</a>
  337. <a href="#" class="btn btn-menu rounded-0 btn-lg m-3 p-2">Saiba Mais</a>
  338. </div>
  339.  
  340. </div>
  341.  
  342. </div>
  343. </div> -->
  344. <!--/item-->
  345.  
  346. </div>
  347. </div>
  348.  
  349. <!--/slide-->
  350.  
  351. <!--conteudo-->
  352. <div class="container mt-5 mb-3">
  353.  
  354. <div class="row" id="about">
  355.  
  356. <div class="col-12 text-center mt-5 mb-4">
  357. <h2 class="delta">Quem Somos</h2>
  358. </div>
  359.  
  360. <div class="col-md-8 text-justify">
  361. <p class="lead">William Serralheria industrializa portões para residências, comércios, indústrias,
  362. condomínios,
  363. escolas, etc.</p>
  364. <p class="lead">Trabalhamos somente com materiais de primeira qualidade, adquiridos das principais
  365. indústrias do
  366. setor. Possuímos mão de obra especializada para cada setor de produção, desde a medição até a
  367. entrega do produto, com o objetivo de oferecer ao seu cliente o que há de melhor.</p>
  368. <p class="lead">Todos os nossos produtos são projetados e fabricados pela William Serralheria onde
  369. conta com toda
  370. tecnologia disponível no mercado, o que faz de seus produtos únicos e exclusivos.</p>
  371. <p class="lead">Os nossos profissionais se preocupam com a qualidade, comodidade e a segurança de
  372. nossos clientes.
  373. Portanto solicite já um de nossos profissionais e você terá a melhor prestação de serviço e
  374. inovação para o seu projeto.</p>
  375. <p class="lead">Nossos orçamentos podem ser realizados com envio de projetos ou visita de nossos
  376. técnicos
  377. especializados ao local sem custo algum. Desta forma, procuramos personalizar nossas relações para
  378. melhor servi-lo.</p>
  379. </div>
  380.  
  381. <div class="col-md-4">
  382.  
  383.  
  384. <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="margin-top: 10px">
  385. <div class="carousel-inner">
  386. <div class="carousel-item active">
  387. <img src="img/quemsomos1.png" alt="" width="100%" class="my-1">
  388. <img src="img/quemsomos2.png" alt="" width="100%" class="my-1">
  389. </div>
  390. <div class="carousel-item">
  391. <img src="img/quemsomos3.jpeg" alt="" width="100%" class="my-1">
  392. <img src="img/quemsomos4.jpeg" alt="" width="100%" class="my-1">
  393. </div>
  394. <div class="carousel-item">
  395. <img src="img/quemsomos5.jpeg" alt="" width="100%" class="my-1">
  396. <img src="img/quemsomos6.jpeg" alt="" width="100%" class="my-1">
  397. </div>
  398. </div>
  399. </div>
  400.  
  401.  
  402.  
  403.  
  404.  
  405. </div>
  406.  
  407.  
  408. </div>
  409. <!--/row-->
  410.  
  411. </div>
  412.  
  413. <div class="w-100 bg-gray">
  414. <div class="container mt-5 pb-5">
  415.  
  416. <div class="row" id="services">
  417.  
  418. <div class="col-12 mt-5 mb-4">
  419.  
  420. <h2 class="delta text-center">SERVIÇOS</h2>
  421.  
  422. <p class="text-justify">William Serralheria oferece serviços de excelente qualidade, utilizando mão
  423. de obra especializada e equipamentos de última geração. Desenvolvemos soluções sob medida para
  424. suas necessidades, com a melhor tecnologia e qualidade.</p>
  425.  
  426. </div>
  427.  
  428. </div>
  429.  
  430. <div class="row mb-4">
  431.  
  432. <div class="col-md-6 mb-3">
  433.  
  434. <div class="accordion" id="accordionExample">
  435. <div class="card">
  436. <div class="card-header" id="headingOne">
  437. <h5 class="mb-0">
  438. <button class="btn btn-link-red btn-block" type="button" data-toggle="collapse"
  439. data-target="#button1" aria-expanded="true" aria-controls="button1">
  440. Portão Basculante
  441. </button>
  442. </h5>
  443. </div>
  444.  
  445. <div id="button1" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  446. <div class="card-body m-0 p-0">
  447. <img src="img/services/pbasculante.jpeg" width="100%">
  448. </div>
  449. </div>
  450. </div>
  451. <div class="card">
  452. <div class="card-header" id="headingTwo">
  453. <h5 class="mb-0">
  454. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  455. data-target="#button2" aria-expanded="false" aria-controls="button2">
  456. Portão Deslizante
  457. </button>
  458. </h5>
  459. </div>
  460. <div id="button2" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
  461. <div class="card-body m-0 p-0">
  462. <img src="img/services/pdeslizante.jpeg" width="100%">
  463. </div>
  464. </div>
  465. </div>
  466. <div class="card">
  467. <div class="card-header" id="headingThree">
  468. <h5 class="mb-0">
  469. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  470. data-target="#button3" aria-expanded="false" aria-controls="button3">
  471. Portão Social
  472. </button>
  473. </h5>
  474. </div>
  475. <div id="button3" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
  476. <div class="card-body m-0 p-0">
  477. <img src="img/services/psocial.jpeg" width="100%">
  478. </div>
  479. </div>
  480. </div>
  481.  
  482. <div class="card">
  483. <div class="card-header" id="headingTwo">
  484. <h5 class="mb-0">
  485. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  486. data-target="#button4" aria-expanded="false" aria-controls="button4">
  487. Portão de Aço
  488. </button>
  489. </h5>
  490. </div>
  491. <div id="button4" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
  492. <div class="card-body m-0 p-0">
  493. <img src="img/services/pco.jpeg" width="100%">
  494. </div>
  495. </div>
  496. </div>
  497.  
  498.  
  499. <div class="card">
  500. <div class="card-header" id="headingTwo">
  501. <h5 class="mb-0">
  502. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  503. data-target="#button5" aria-expanded="false" aria-controls="button5">
  504. Porta de Enrolar (Automática)
  505. </button>
  506. </h5>
  507. </div>
  508. <div id="button5" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
  509. <div class="card-body m-0 p-0">
  510. <img src="img/services/portaenrolar.jpeg" width="100%">
  511. </div>
  512. </div>
  513. </div>
  514.  
  515. <div class="card">
  516. <div class="card-header" id="headingTwo">
  517. <h5 class="mb-0">
  518. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  519. data-target="#button6" aria-expanded="false" aria-controls="button6">
  520. Grades
  521. </button>
  522. </h5>
  523. </div>
  524. <div id="button6" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
  525. <div class="card-body m-0 p-0">
  526. <img src="img/services/grades.jpeg" width="100%">
  527. </div>
  528. </div>
  529. </div>
  530.  
  531.  
  532. </div>
  533.  
  534. </div>
  535. <!--/md-6-->
  536.  
  537.  
  538.  
  539. <div class="col-md-6 mb-3">
  540.  
  541. <div class="accordion" id="accordionOne">
  542. <div class="card">
  543. <div class="card-header" id="headingOne">
  544. <h5 class="mb-0">
  545. <button class="btn btn-link-red btn-block" type="button" data-toggle="collapse"
  546. data-target="#button7" aria-expanded="true" aria-controls="button7">
  547. Corrimões
  548. </button>
  549. </h5>
  550. </div>
  551.  
  552. <div id="button7" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionOne">
  553. <div class="card-body m-0 p-0">
  554. <img src="img/services/corrimao.jpeg" width="100%">
  555. </div>
  556. </div>
  557. </div>
  558. <div class="card">
  559. <div class="card-header" id="headingTwo">
  560. <h5 class="mb-0">
  561. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  562. data-target="#button8" aria-expanded="false" aria-controls="button8">
  563. Guarda-Corpo
  564. </button>
  565. </h5>
  566. </div>
  567. <div id="button8" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionOne">
  568. <div class="card-body m-0 p-0">
  569. <img src="img/services/gcorpo.jpeg" width="100%">
  570. </div>
  571. </div>
  572. </div>
  573. <div class="card">
  574. <div class="card-header" id="headingThree">
  575. <h5 class="mb-0">
  576. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  577. data-target="#button9" aria-expanded="false" aria-controls="button9">
  578. Parapeito
  579. </button>
  580. </h5>
  581. </div>
  582. <div id="button9" class="collapse" aria-labelledby="headingThree" data-parent="#accordionOne">
  583. <div class="card-body m-0 p-0">
  584. <img src="img/services/parapeito.jpeg" width="100%">
  585. </div>
  586. </div>
  587. </div>
  588.  
  589. <div class="card">
  590. <div class="card-header" id="headingTwo">
  591. <h5 class="mb-0">
  592. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  593. data-target="#button10" aria-expanded="false" aria-controls="button10">
  594. Mezanino
  595. </button>
  596. </h5>
  597. </div>
  598. <div id="button10" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionOne">
  599. <div class="card-body m-0 p-0">
  600. <img src="img/services/mezanino.jpeg" width="100%">
  601. </div>
  602. </div>
  603. </div>
  604.  
  605.  
  606. <div class="card">
  607. <div class="card-header" id="headingTwo">
  608. <h5 class="mb-0">
  609. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  610. data-target="#button11" aria-expanded="false" aria-controls="button11">
  611. Automação
  612. </button>
  613. </h5>
  614. </div>
  615. <div id="button11" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionOne">
  616. <div class="card-body m-0 p-0">
  617. <img src="img/services/automacao.jpeg" width="100%">
  618. </div>
  619. </div>
  620. </div>
  621.  
  622. <div class="card">
  623. <div class="card-header" id="headingTwo">
  624. <h5 class="mb-0">
  625. <button class="btn btn-link-red collapsed btn-block" type="button" data-toggle="collapse"
  626. data-target="#button12" aria-expanded="false" aria-controls="button12">
  627. Reforma
  628. </button>
  629. </h5>
  630. </div>
  631. <div id="button12" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionOne">
  632. <div class="card-body m-0 p-0">
  633. <img src="img/services/reforma.jpeg" width="100%">
  634. </div>
  635. </div>
  636. </div>
  637.  
  638.  
  639. </div>
  640.  
  641. </div>
  642. <!--/md-6-->
  643.  
  644. </div>
  645. <!--/row-->
  646.  
  647. </div>
  648.  
  649. </div>
  650. <!--/container-->
  651.  
  652.  
  653. <div class="container mt-5 mb-3" id="port">
  654.  
  655.  
  656. <div class="row">
  657.  
  658. <div class="col-12 mt-5 mb-4">
  659. <h2 class="delta text-center">PORTFÓLIO</h2>
  660. </div>
  661. <!--/col-12-->
  662.  
  663. </div>
  664. <!--/row-->
  665.  
  666. <div class="row accordion" id="accordionPortfolio">
  667.  
  668.  
  669.  
  670. <div class="col-md-2">
  671. <button type="button" class="btn btn-vermelho btn-block rounded-0" data-toggle="collapse" data-target="#coberturas">Coberturas</button>
  672. </div>
  673.  
  674. <div class="col-md-2">
  675. <button type="button" class="btn btn-vermelho btn-block rounded-0" data-toggle="collapse" data-target="#corrimao">Corrimão</button>
  676. </div>
  677.  
  678. <div class="col-md-2">
  679. <button type="button" class="btn btn-vermelho btn-block rounded-0" data-toggle="collapse" data-target="#portao">Portões
  680. Abertos</button>
  681. </div>
  682.  
  683. <div class="col-md-2">
  684. <button type="button" class="btn btn-vermelho btn-block rounded-0" data-toggle="collapse" data-target="#portaob">Portões
  685. Especiais</button>
  686. </div>
  687.  
  688. <div class="col-md-2">
  689. <button type="button" class="btn btn-vermelho btn-block rounded-0" data-toggle="collapse" data-target="#portaof">Portão
  690. Fechado</button>
  691. </div>
  692.  
  693. <div class="col-md-2">
  694. <button type="button" class="btn btn-vermelho btn-block rounded-0" data-toggle="collapse" data-target="#portaom">Portao
  695. de Madeira</button>
  696. </div>
  697.  
  698.  
  699. <div class="w-100 mt-3"></div>
  700.  
  701. <!-- coberturas -->
  702. <div class="col-md-4 col-6 p-1 todos collapse " id="coberturas" data-parent="#accordionPortfolio"><img
  703. width="100%" src="img/portifolio/coberturas/01.jpeg"></div>
  704. <div class="col-md-4 col-6 p-1 todos collapse " id="coberturas" data-parent="#accordionPortfolio"><img
  705. width="100%" src="img/portifolio/coberturas/03.jpeg"></div>
  706. <div class="col-md-4 col-6 p-1 todos collapse " id="coberturas" data-parent="#accordionPortfolio"><img
  707. width="100%" src="img/portifolio/coberturas/04.jpeg"></div>
  708. <div class="col-md-4 col-6 p-1 todos collapse " id="coberturas" data-parent="#accordionPortfolio"><img
  709. width="100%" src="img/portifolio/coberturas/05.jpeg"></div>
  710. <div class="col-md-4 col-6 p-1 todos collapse " id="coberturas" data-parent="#accordionPortfolio"><img
  711. width="100%" src="img/portifolio/coberturas/06.jpeg"></div>
  712. <div class="col-md-4 col-6 p-1 todos collapse show" id="coberturas" data-parent="#accordionPortfolio"><img
  713. width="100%" src="img/portifolio/coberturas/07.jpeg"></div>
  714.  
  715. <!-- coberturas -->
  716.  
  717. <!-- corrimao-->
  718.  
  719. <div class="col-md-4 col-6 p-1 todos collapse " id="corrimao" data-parent="#accordionPortfolio"><img width="100%"
  720. src="img/portifolio/corri/03.jpeg"></div>
  721. <div class="col-md-4 col-6 p-1 todos collapse " id="corrimao" data-parent="#accordionPortfolio"><img width="100%"
  722. src="img/portifolio/corri/04.jpeg"></div>
  723. <div class="col-md-4 col-6 p-1 todos collapse " id="corrimao" data-parent="#accordionPortfolio"><img width="100%"
  724. src="img/portifolio/corri/05.jpeg"></div>
  725. <div class="col-md-4 col-6 p-1 todos collapse " id="corrimao" data-parent="#accordionPortfolio"><img width="100%"
  726. src="img/portifolio/corri/06.jpeg"></div>
  727. <div class="col-md-4 col-6 p-1 todos collapse " id="corrimao" data-parent="#accordionPortfolio"><img width="100%"
  728. src="img/portifolio/corri/07.jpeg"></div>
  729. <div class="col-md-4 col-6 p-1 todos collapse show" id="corrimao" data-parent="#accordionPortfolio"><img
  730. width="100%" src="img/portifolio/corri/08.jpeg"></div>
  731. <!-- corrimao -->
  732.  
  733. <!-- portao -->
  734. <div class="col-md-4 col-6 p-1 todos collapse " id="portao" data-parent="#accordionPortfolio"><img width="100%"
  735. src="img/portifolio/portao/01.jpeg"></div>
  736. <div class="col-md-4 col-6 p-1 todos collapse " id="portao" data-parent="#accordionPortfolio"><img width="100%"
  737. src="img/portifolio/portao/02.jpeg"></div>
  738. <div class="col-md-4 col-6 p-1 todos collapse " id="portao" data-parent="#accordionPortfolio"><img width="100%"
  739. src="img/portifolio/portao/03.jpeg"></div>
  740. <div class="col-md-4 col-6 p-1 todos collapse " id="portao" data-parent="#accordionPortfolio"><img width="100%"
  741. src="img/portifolio/portao/04.jpeg"></div>
  742. <div class="col-md-4 col-6 p-1 todos collapse " id="portao" data-parent="#accordionPortfolio"><img width="100%"
  743. src="img/portifolio/portao/09.jpeg"></div>
  744. <div class="col-md-4 col-6 p-1 todos collapse show" id="portao" data-parent="#accordionPortfolio"><img
  745. width="100%" src="img/portifolio/portao/08.jpeg"></div>
  746.  
  747. <!-- portao -->
  748.  
  749.  
  750.  
  751. <!-- portao basculante-->
  752. <div class="col-md-4 col-6 p-1 todos collapse " id="portaob" data-parent="#accordionPortfolio"><img width="100%"
  753. src="img/portifolio/portaob/01.jpeg"></div>
  754. <div class="col-md-4 col-6 p-1 todos collapse " id="portaob" data-parent="#accordionPortfolio"><img width="100%"
  755. src="img/portifolio/portaob/02.jpeg"></div>
  756. <div class="col-md-4 col-6 p-1 todos collapse " id="portaob" data-parent="#accordionPortfolio"><img width="100%"
  757. src="img/portifolio/portaob/03.jpeg"></div>
  758. <div class="col-md-4 col-6 p-1 todos collapse " id="portaob" data-parent="#accordionPortfolio"><img width="100%"
  759. src="img/portifolio/portaob/04.jpeg"></div>
  760. <div class="col-md-4 col-6 p-1 todos collapse " id="portaob" data-parent="#accordionPortfolio"><img width="100%"
  761. src="img/portifolio/portaob/05.jpeg"></div>
  762. <div class="col-md-4 col-6 p-1 todos collapse show" id="portaob" data-parent="#accordionPortfolio"><img
  763. width="100%" src="img/portifolio/portaob/06.jpeg"></div>
  764.  
  765. <!-- portao basculante -->
  766.  
  767. <!-- portao fechado-->
  768. <div class="col-md-4 col-6 p-1 todos collapse " id="portaof" data-parent="#accordionPortfolio"><img width="100%"
  769. src="img/portifolio/portaof/01.jpeg"></div>
  770. <div class="col-md-4 col-6 p-1 todos collapse " id="portaof" data-parent="#accordionPortfolio"><img width="100%"
  771. src="img/portifolio/portaof/07.jpeg"></div>
  772. <div class="col-md-4 col-6 p-1 todos collapse " id="portaof" data-parent="#accordionPortfolio"><img width="100%"
  773. src="img/portifolio/portaof/03.jpeg"></div>
  774. <div class="col-md-4 col-6 p-1 todos collapse " id="portaof" data-parent="#accordionPortfolio"><img width="100%"
  775. src="img/portifolio/portaof/04.jpeg"></div>
  776. <div class="col-md-4 col-6 p-1 todos collapse " id="portaof" data-parent="#accordionPortfolio"><img width="100%"
  777. src="img/portifolio/portaof/05.jpeg"></div>
  778. <div class="col-md-4 col-6 p-1 todos collapse show" id="portaof" data-parent="#accordionPortfolio"><img
  779. width="100%" src="img/portifolio/portaof/06.jpeg"></div>
  780.  
  781. <!-- portao fechado -->
  782.  
  783. <div class="col-md-4 col-6 p-1 todos collapse " id="portaom" data-parent="#accordionPortfolio"><img width="100%"
  784. src="img/portifolio/portaom/01.jpeg"></div>
  785. <div class="col-md-4 col-6 p-1 todos collapse " id="portaom" data-parent="#accordionPortfolio"><img width="100%"
  786. src="img/portifolio/portaom/02.jpeg"></div>
  787. <div class="col-md-4 col-6 p-1 todos collapse " id="portaom" data-parent="#accordionPortfolio"><img width="100%"
  788. src="img/portifolio/portaom/03.jpeg"></div>
  789. <div class="col-md-4 col-6 p-1 todos collapse " id="portaom" data-parent="#accordionPortfolio"><img width="100%"
  790. src="img/portifolio/portaom/04.jpeg"></div>
  791. <div class="col-md-4 col-6 p-1 todos collapse show" id="portaom" data-parent="#accordionPortfolio"><img
  792. width="100%" src="img/portifolio/portaom/05.jpeg"></div>
  793.  
  794.  
  795. </div>
  796. <!--/row-->
  797.  
  798.  
  799.  
  800.  
  801.  
  802. </div>
  803. <!--/container-->
  804.  
  805.  
  806. <!--parcerias-->
  807. <div class="container mt-5 mb-3" id="parcerias">
  808.  
  809.  
  810. <div class="row">
  811.  
  812. <div class="col-12 mt-5 mb-4">
  813. <h2 class="delta text-center">Parcerias</h2>
  814. </div>
  815. <!--/col-12-->
  816.  
  817. </div>
  818. <!--/row-->
  819.  
  820.  
  821. </div>
  822. <!--/container-->
  823.  
  824. <div class="w-100 py-5" style="background: url(img/parceria-fundo.png);;">
  825.  
  826. <div class="container py-5">
  827.  
  828. <div class="row align-items-center">
  829.  
  830.  
  831.  
  832.  
  833. <div class="col-md-6 text-center my-2">
  834. <img src="img/parceiro1.png" alt="Parceiro 1" height="120px" class="parceiros">
  835. </div>
  836.  
  837. <div class="col-md-6 text-center my-2">
  838. <img src="img/parceiro2.png" alt="Parceiro 2" height="120px" class="parceiros">
  839. </div>
  840.  
  841. </div>
  842.  
  843. </div>
  844.  
  845. </div>
  846.  
  847. <!--/parcerias-->
  848.  
  849.  
  850.  
  851. <!--contato-->
  852.  
  853. <div class="container mt-5 mb-3" id="contact">
  854.  
  855.  
  856. <div class="row">
  857.  
  858. <div class="col-12 mt-5 mb-4">
  859. <h2 class="delta text-center">Contato</h2>
  860. </div>
  861. <!--/col-12-->
  862.  
  863.  
  864. <div class="w-100"></div>
  865.  
  866. <div class="col-md-6 text-md-right text-center">
  867. <i class="fas fa-phone text-vermelho" style="font-size: 1.6rem;"></i> &nbsp; &nbsp;<strong style="color: #A9A9A9;"
  868. class="lead">(11) 4576-5268</strong>
  869. </div>
  870.  
  871. <div class="col-md-6 text-md-left text-center">
  872. <i class="fas fa-envelope text-vermelho" style="font-size: 1.6rem;"></i> <strong style="color: #A9A9A9;"
  873. class="lead">williamserralheiro@live.com</strong>
  874. </div>
  875.  
  876.  
  877. <div class="w-100 mt-3"></div>
  878.  
  879.  
  880. <div class="col-md-6 pt-4">
  881.  
  882. <form action="" class="formContato">
  883.  
  884. <div class="form-group">
  885. <input type="text" class="form-control" placeholder="NOME">
  886. </div>
  887.  
  888. <div class="row">
  889. <div class="col-md-6 mb-3">
  890. <input type="text" class="form-control" placeholder="TELEFONE">
  891. </div>
  892.  
  893. <div class="col-md-6 mb-3">
  894. <input type="text" class="form-control" placeholder="CIDADE">
  895. </div>
  896. </div>
  897.  
  898. <div class="form-group">
  899. <input type="email" class="form-control" placeholder="EMAIL">
  900. </div>
  901.  
  902. <div class="form-group">
  903. <input type="email" class="form-control" placeholder="PRODUTO">
  904. </div>
  905.  
  906. <div class="form-group">
  907. <textarea class="form-control" rows="3" placeholder="DESCRIÇÃO"></textarea>
  908. </div>
  909.  
  910. <div class="text-right">
  911.  
  912. <button class="btn btn-vermelho btn-lg rounded-0" type="reset">Limpar</button>
  913. <button class="btn btn-vermelho btn-lg rounded-0" type="submit">Enviar</button>
  914.  
  915. </div>
  916.  
  917. </form>
  918.  
  919. </div>
  920. <!--/md-6-->
  921.  
  922.  
  923. <div class="col-md-6 pt-3">
  924.  
  925.  
  926.  
  927. <div class="w-100">
  928. <p>Av. José Moreira, 11 A - Quarto Centenário - Mauá - SP</p>
  929. <div class="w-100">
  930. <iframe width="100%" height="140" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
  931. src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3653.9523666764208!2d-46.42330078471872!3d-23.677661371783145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce6c1604444241%3A0x6f66aa93aed20de3!2sAv.+Jos%C3%A9+Moreira%2C+11+-+Jardim+Quarto+Centenario%2C+Mau%C3%A1+-+SP%2C+09341-120!5e0!3m2!1spt-BR!2sbr!4v1470236501289"></iframe>
  932. </div>
  933. </div>
  934.  
  935. <div class="w-100">
  936. <p>Av. Dom Pedro de Alcântara, 181 Vl. São Pedro - São Bernardo do Campo</p>
  937. <div class="w-100">
  938. <iframe width="100%" height="140" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
  939. src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3652.841684052435!2d-46.53070268444629!3d-23.717346973257484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce41e921df8251%3A0xa1ccfb3ea88e9b53!2sAv.+Dom+Pedro+de+Alc%C3%A2ntara%2C+181+-+Vila+Sao+Pedro%2C+S%C3%A3o+Bernardo+do+Campo+-+SP%2C+09784-000!5e0!3m2!1spt-BR!2sbr!4v1521573596029"></iframe>
  940. </div>
  941. </div>
  942.  
  943.  
  944.  
  945.  
  946. </div>
  947. <!--/md-6-->
  948.  
  949.  
  950. </div>
  951. <!--/row-->
  952.  
  953.  
  954. </div>
  955. <!--/container-->
  956.  
  957. <!--/contato-->
  958.  
  959.  
  960. <!--/conteudo-->
  961.  
  962.  
  963.  
  964. <div class="w-100 mt-5 pt-3 pb-5 bg-gray">
  965.  
  966. <div class="container">
  967.  
  968. <div class="row">
  969.  
  970. <div class="col-md-2 my-3">
  971. <div class="text-center">
  972.  
  973. <img src="img/WSLogo.png" width="100%" class="my-1">
  974.  
  975. </div>
  976.  
  977. <ul class="list-inline mt-4 mr-0 text-center">
  978. <li class="list-inline-item text-vermelho text-lg"><a href="#"><i class="fab fa-facebook-square icones-redes-sociais"></i></a></li>
  979. <li class="list-inline-item text-vermelho text-lg"><a href="#"><i class="fab fa-instagram icones-redes-sociais"></i></a></li>
  980. </ul>
  981.  
  982.  
  983. </div>
  984.  
  985. <div class="col-md-3 my-3 pr-md-2">
  986.  
  987. <h4>Menu</h4>
  988.  
  989. <p><a href="#about" class="text-lg text-dark">Sobre Nós</a></p>
  990. <p><a href="#services" class="text-lg text-dark">Serviços</a></p>
  991. <p><a href="#port" class="text-lg text-dark">Portifólio</a></p>
  992. <p><a href="#contact" class="text-lg text-dark">Contato</a></p>
  993.  
  994. </div>
  995.  
  996. <div class="col-md-4 my-3 pb-3">
  997.  
  998. <h4>Informações</h4>
  999.  
  1000. <p>Av. José Moreira, 11 A - Quarto Centenário - Mauá - SP</p>
  1001.  
  1002. <p>Av. Dom Pedro de Alcântara, 181 Vl. São Pedro - São Bernardo do Campo</p>
  1003.  
  1004. <p><i class="fas fa-phone fa-lg text-vermelho"></i> <strong>(11) 4576-5268</strong></p>
  1005. <p><i class="fas fa-envelope fa-lg text-vermelho"></i> <strong>williamserralheiro@live.com</strong></p>
  1006.  
  1007. </div>
  1008.  
  1009. <div class="col-md-3 my-3 pb-3">
  1010.  
  1011. <h4>Nossa Página</h4>
  1012.  
  1013. <div id="fb-root"></div>
  1014. <script>(function (d, s, id) {
  1015. var js, fjs = d.getElementsByTagName(s)[0];
  1016. if (d.getElementById(id)) return;
  1017. js = d.createElement(s); js.id = id;
  1018. js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v3.2&autoLogAppEvents=1';
  1019. fjs.parentNode.insertBefore(js, fjs);
  1020. }(document, 'script', 'facebook-jssdk'));</script>
  1021.  
  1022. <div class="fb-page" data-href="https://www.facebook.com/agoraeuvidetudo/" data-small-header="false"
  1023. data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
  1024. <blockquote cite="https://www.facebook.com/agoraeuvidetudo/" class="fb-xfbml-parse-ignore"><a
  1025. href="https://www.facebook.com/agoraeuvidetudo/">Agora Eu Vi de Tudo</a></blockquote>
  1026. </div>
  1027.  
  1028. </div>
  1029.  
  1030. </div>
  1031.  
  1032. </div>
  1033.  
  1034. </div>
  1035.  
  1036. <div class="whatsapp">
  1037.  
  1038.  
  1039.  
  1040. <div class="whatsapp-textarea collapse" style="width: 180px;">
  1041. <div class="card">
  1042. <div class="card-body p-1">
  1043. <form action="https://api.whatsapp.com/send" method="GET">
  1044. <input type="hidden" name="phone" value="5511980341844">
  1045. <div class="form-group mb-1">
  1046. <textarea class="form-control" name="text" placeholder="Escreva uma mensagem..." rows="3"
  1047. required></textarea>
  1048. </div>
  1049.  
  1050. <button type="submit" class="mt-0 btn btn-success btn-block">Enviar</button>
  1051.  
  1052. </form>
  1053. </div>
  1054.  
  1055. </div>
  1056.  
  1057. </div>
  1058.  
  1059. <div class="text-right">
  1060. <button class="btn btn-link p-0 m-0" id="clickwhatsapp" style="width: 8vh;" type="button" data-toggle="collapse"
  1061. data-target=".whatsapp-textarea" aria-expanded="false"><img src="img/whatsapp.png?v1" width="100%" /></button>
  1062.  
  1063. </div>
  1064.  
  1065.  
  1066. </div>
  1067.  
  1068.  
  1069. <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  1070. crossorigin="anonymous"></script>
  1071. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  1072. crossorigin="anonymous"></script>
  1073. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
  1074. crossorigin="anonymous"></script>
  1075.  
  1076. <script>
  1077.  
  1078.  
  1079.  
  1080. $('#clickwhatsapp').click(function () {
  1081. console.log("clicado");
  1082. });
  1083.  
  1084.  
  1085.  
  1086. $(document).scroll(function () {
  1087.  
  1088. if (window.scrollY > $('#about').offset().top - window.innerHeight / 2) {
  1089. $("#menutopdescer").addClass("fixed-top");
  1090. $("#logonavbar").removeClass("d-none");
  1091.  
  1092. } else {
  1093. $("#menutopdescer").removeClass("fixed-top");
  1094. $("#logonavbar").addClass("d-none");
  1095. }
  1096.  
  1097. });
  1098.  
  1099.  
  1100.  
  1101.  
  1102. $('a').click(function () {
  1103. $('html, body').animate({
  1104. scrollTop: $($(this).attr('href')).position().top - 100
  1105. }, 'slow');
  1106.  
  1107. return false;
  1108. });
  1109.  
  1110.  
  1111.  
  1112.  
  1113. </script>
  1114. </body>
  1115.  
  1116. </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!