API tools faq
paste
Advertisement
Cesar959

Untitled

Cesar959
Jan 19th, 2020
338
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.15 KB | None | 0 0
raw download clone embed print report
  1. <!--index.html-->
  2.  
  3. <!DOCTYPE html>
  4. <html lang="pt-br">
  5.  
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10. <title>Academia Athena</title>
  11.  
  12. <!-- Componentes do Bootstrep -->
  13. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  14. <!-- Final dos Componentes do Bootstrep-->
  15.  
  16. <!-- Componentes da biblioteca font awesome-->
  17. <link rel="stylesheet" type="text/css"
  18. href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  19. <!-- Final dos Componentes da biblioteca font awesome-->
  20.  
  21. <!-- Componentes do material design icons -->
  22. <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons"
  23. rel="stylesheet">
  24. <!-- Final dos Componentes do material design icons-->
  25.  
  26. <!-- Folha de estilo personalizada ( custom.css )-->
  27. <link rel="stylesheet" type="text/css" href="css/custom.css">
  28. <!-- Final da folha de estilo personalizada ( custom.css)-->
  29.  
  30. <!-- Biblioteca do jquery-->
  31. <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  32. <!-- Final da Biblioteca do jquery-->
  33.  
  34. <!--Biblioteca do jquery mask plugin-->
  35. <script type="text/javascript" src="js/jquery.mask.min.js"></script>
  36. <!--Final da Biblioteca do jquery mask plugin-->
  37.  
  38. <!-- Biblioteca do sweealert2-->
  39. <script type="text/javascript"
  40. src="https://cdn.jsdelivr.net/npm/sweetalert2@9.6.0/dist/sweetalert2.all.min.js"></script>
  41. <link rel="stylesheet" type="text/css"
  42. href="https://cdn.jsdelivr.net/npm/sweetalert2@9.6.0/dist/sweetalert2.min.css">
  43. <!--Final Biblioteca do sweealert2-->
  44.  
  45. <script type="text/javascript">
  46. $(document).ready(function () {
  47. $('#telefone').mask('(00) 0000-0000');
  48. });
  49. </script>
  50.  
  51. </head>
  52.  
  53. <body>
  54. <!-- Menu -->
  55. <nav class="navbar navbar-dark navbar-expand-lg fixed-top navbar-light" style="background-color:#262626;">
  56. <a href="index.html"><img src="img/logo.png" alt="Logo" style="width: 50px; height: 50px;" /></a>
  57.  
  58. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuSite">
  59. <span class="navbar-toggler-icon"></span>
  60. </button>
  61.  
  62. <div class="container">
  63.  
  64. <div class="collapse navbar-collapse" id="menuSite">
  65. <ul class="navbar-nav ml-auto">
  66. <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
  67. <li class="nav-item"><a class="nav-link" href="#sobre">Sobre</a></li>
  68. <li class="nav-item"><a class="nav-link" href="#planos">Planos</a></li>
  69. <li class="nav-item"><a class="nav-link" href="#modalidades">Modalidades</a></li>
  70. <li class="nav-item"><a class="nav-link" href="#depoimentos">Depoimentos</a></li>
  71. <li class="nav-item"><a class="nav-link" href="#contato">Contato</a></li>
  72. </ul>
  73. </div>
  74. </div>
  75. </nav>
  76. <!-- Final do Menu -->
  77.  
  78. <!-- Carrosel de imagems -->
  79. <section id="home" class="container-fluid">
  80. <div class="row">
  81. <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
  82. <ol class="carousel-indicators">
  83. <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  84. <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  85. <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  86. </ol>
  87. <div class="carousel-inner">
  88. <div class="carousel-item active">
  89. <img src="img/imagem1.jpg" class="d-block w-100" alt="contato">
  90. <div class="container">
  91. <div class="carousel-caption">
  92. <h5>Contato</h5>
  93. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  94. <a href="#contato">
  95. <button type="button"
  96. class="btn btn-primary bordas-arredondadas btn-lg">Contato</button>
  97. </a>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="carousel-item">
  102. <img src="img/imagem2.jpg" class="d-block w-100" alt="...">
  103. <div class="container">
  104. <div class="carousel-caption ">
  105. <h5>Planos</h5>
  106. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  107. <a href="#planos">
  108. <button type="button"
  109. class="btn btn-success bordas-arredondadas btn-lg">Planos</button>
  110. </a>
  111. </div>
  112. </div>
  113.  
  114. </div>
  115. <div class="carousel-item">
  116. <img src="img/imagem3.jpg" class="d-block w-100" alt="modalidades">
  117. <div class="container">
  118. <div class="carousel-caption ">
  119. <h5>Modalidades</h5>
  120. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  121. <a href="#modalidades">
  122. <button type="button"
  123. class="btn btn-secondary bordas-arredondadas btn-lg">Modalidades</button>
  124. </a>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="carousel-item">
  129. <img src="img/imagem4.jpg" class="d-block w-100" alt="depoimentos">
  130. <div class="container">
  131. <div class="carousel-caption">
  132. <h5>Depoimentos</h5>
  133. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  134. <a href="#depoimentos">
  135. <button type="button"
  136. class="btn btn-danger bordas-arredondadas btn-lg">Depoimentos</button>
  137. </a>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  143. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  144. <span class="sr-only">Previous</span>
  145. </a>
  146. <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  147. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  148. <span class="sr-only">Next</span>
  149. </a>
  150. </div>
  151. </div>
  152. </section>
  153. <!--Final do Carrosel de imagems -->
  154.  
  155. <!-- Sobre-->
  156. <section id="sobre" class="container-fluid">
  157. <div class="row">
  158. <div class="divsobre col-lg-12">
  159. <h5 class="text-center">Sobre</h5>
  160. </div>
  161. </div>
  162.  
  163. <div class="container">
  164. <div class="row">
  165. <div class="col-lg-12">
  166. <div class="video">
  167. <iframe src="https://www.youtube.com/embed/FSNS3GQkWjE"></iframe>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <div class="row">
  173. <div class="container-fluid espaçamento ">
  174. <div class="col-lg-12 ">
  175. <p class="text-center paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta
  176. sit amet
  177. turpis et
  178. semper.
  179. In et volutpat quam. Ut ut massa sit amet est convallis interdum. Phasellus est ligula,
  180. hendrerit ac ex at,
  181. scelerisque tincidunt felis. Curabitur lobortis, neque et facilisis dignissim, lacus ex
  182. iaculis
  183. ex, in semper
  184. neque est eu augue. Donec auctor odio vitae laoreet dictum. Donec a blandit metus, vitae
  185. aliquet
  186. leo. Proin dignissim non metus
  187. at varius. Duis porta suscipit est vitae bibendum. Duis quis sapien non lectus imperdiet
  188. maximus
  189. nec eget libero. Nulla facilisi.
  190. Donec at consectetur diam. Ut vitae malesuada ex. Curabitur interdum vehicula dui ac
  191. ornare.ex, in semper
  192. neque est eu augue. Donec auctor odio vitae laoreet dictum. Donec a blandit metus, vitae
  193. aliquet
  194. leo. Proin dignissim non metus
  195. at varius. Duis porta suscipit est vitae bibendum. Duis quis sapien non lectus imperdiet
  196. maximus
  197. nec eget libero. Nulla facilisi.
  198. Donec at consectetur diam. Ut vitae malesuada ex. Curabitur interdum vehicula dui ac
  199. ornare.</p>
  200. </div>
  201. <div class="text-center">
  202. <a href="https://www.facebook.com/" target="_blank">
  203. <button type="button" class="btn btn-primary borde-icon btn-lg" style="margin-right: 30px;">
  204. <i class="fab fa-facebook" style="font-size: 1.6em;"></i>
  205. </button>
  206. </a>
  207.  
  208. <a href="https://www.instagram.com/?hl=pt-br" target="_blank">
  209. <button type="button" class="btn btn-instagram borde-icon btn-lg" style="margin-right: 30px;">
  210. <i class="fab fa-instagram" style="font-size: 1.6em;"></i>
  211. </button>
  212. </a>
  213.  
  214. <a href="https://web.whatsapp.com/" target="_blank">
  215. <button type="button" class="btn btn-success borde-icon btn-lg">
  216. <i class="fab fa-whatsapp" style="font-size: 1.6em;"></i>
  217. </button>
  218. </a>
  219. </div>
  220. </div>
  221.  
  222. </div>
  223.  
  224. </section>
  225. <!-- Final do Sobre-->
  226.  
  227. <!-- Planos-->
  228.  
  229. <section id="planos" class="container-fluid">
  230. <div class="row espaçamento">
  231. <div class="col-lg-12 ">
  232. <div class="divplano">
  233. <h5 class="text-center">Planos</h5>
  234. <p class="text-center">Some quick example text to build on the card title and make up the bulk
  235. of the
  236. card's content.</p>
  237. </div>
  238. </div>
  239. </div>
  240.  
  241. <center>
  242. <div class="container-fluid">
  243. <div class="row ">
  244. <div class="col-lg-4 espaçamento">
  245. <div class="card" style="width: 18rem;">
  246. <img src="img/plano1.jpg" class="card-img-top" alt="basico">
  247. <div class="card-body">
  248. <h3 class="card-title text-center">Basico</h3>
  249. <h2 class="text-center">R$ 150 <small class="text-muted">/ mês</small></h2>
  250. <p class="card-text">Some quick example text to build on the card title and make up the
  251. bulk of
  252. the card's content.</p>
  253. <div class="center">
  254. <a class="btn btn-success bordas-arredondadas" data-toggle="modal"
  255. data-target="#ModalDetalhes">Detalhes</a>
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260.  
  261. <div class="col-lg-4 espaçamento">
  262. <div class="card" style="width: 18rem;">
  263. <img src="img/plano2.jpg" class="card-img-top" alt="plus">
  264. <div class="card-body">
  265. <h3 class="card-title text-center">Plus</h3>
  266. <h2 class="text-center">R$ 280 <small class="text-muted">/ mês</small></h2>
  267. <p class="card-text">Some quick example text to build on the card title and make up the
  268. bulk of
  269. the card's content.</p>
  270. <div class="center">
  271. <a class="btn btn-success bordas-arredondadas" data-toggle="modal"
  272. data-target="#ModalDetalhes">Detalhes</a>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277.  
  278. <div class="col-lg-4 espaçamento">
  279. <div class="card" style="width: 18rem;">
  280. <img src="img/imagem3.jpg" class="card-img-top" alt="turbo">
  281. <div class="card-body">
  282. <h3 class="card-title text-center">Turbo</h3>
  283. <h2 class="text-center">R$ 400 <small class="text-muted">/ mês</small></h2>
  284. <p class="card-text">Some quick example text to build on the card title and make up the
  285. bulk of
  286. the card's content.</p>
  287. <div class="center">
  288. <a class="btn btn-success bordas-arredondadas" data-toggle="modal"
  289. data-target="#ModalDetalhes">Detalhes</a>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. </center>
  297.  
  298. </section>
  299.  
  300. <!-- Modal da parte do Plano -->
  301. <div class="modal fade bd-example-modal-lg" id="ModalDetalhes" tabindex="-1" role="dialog"
  302. aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  303. <div class="modal-dialog modal-lg" role="document">
  304. <div class="modal-content">
  305. <div class="modal-header">
  306. <h5 class="modal-title text-center" id="exampleModalLongTitle">Detalhes</h5>
  307. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  308. <span aria-hidden="true">&times;</span>
  309. </button>
  310. </div>
  311. <div class="modal-body">
  312. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra augue
  313. mi, eu dictum nisl vehicula et. Cras suscipit, est ut consectetur lobortis, est elit
  314. sollicitudin
  315. nisl, eu posuere purus orci nec augue. Donec vestibulum vulputate augue vel pharetra.
  316. Pellentesque
  317. faucibus eu elit bibendum rutrum. Quisque mollis, ex sit amet consequat consequat, nunc
  318. lectus
  319. tincidunt augue, vitae hendrerit neque libero vitae lorem. Donec ullamcorper ultrices
  320. justo vel
  321. faucibus. Nam ullamcorper purus quam, et sollicitudin magna auctor vel. Nunc mollis,
  322. metus non
  323. aliquam efficitur, dolor lectus euismod erat, quis rhoncus tortor nunc quis nibh.
  324. Aliquam erat
  325. volutpat. Praesent nunc diam, facilisis ac pharetra ut, ullamcorper vitae diam. Duis
  326. lobortis
  327. ipsum
  328. nisl, nec tempor orci egestas in.</p>
  329.  
  330. <p>Sed non elit elit. Suspendisse rhoncus id leo id consectetur. Cras egestas ipsum eget
  331. lorem
  332. auctor,
  333. in mattis quam faucibus. Aenean scelerisque nisl neque, a finibus lorem ultricies ac.
  334. Donec vel
  335. nisi
  336. odio. Integer blandit aliquam nibh nec molestie. Quisque velit quam, dapibus et placerat
  337. sit
  338. amet,
  339. interdum id elit. Sed aliquet tincidunt ipsum, quis laoreet enim maximus a. Aenean
  340. molestie
  341. efficitur consequat.</p>
  342.  
  343. <p>Sed tempor venenatis libero, vel gravida urna porttitor sit amet. Nunc a egestas erat.
  344. Sed quam
  345. velit, vestibulum eu lectus mollis, molestie elementum velit. Proin ac hendrerit arcu.
  346. Fusce
  347. volutpat tellus nec odio tincidunt aliquam. Nulla sit amet turpis et lacus facilisis
  348. vehicula.
  349. Donec
  350. sem ligula, commodo eu metus id, laoreet lacinia orci. Mauris eu diam a mi ullamcorper
  351. dapibus.
  352. Curabitur ullamcorper nulla eu tempus consectetur. Sed porta libero iaculis sem ornare
  353. dictum.
  354. Aenean ut fermentum lectus, a hendrerit lectus. Suspendisse potenti. Mauris in magna
  355. vulputate,
  356. feugiat nulla sit amet, hendrerit orci. Ut id odio non est mollis tempus. Phasellus
  357. commodo
  358. convallis ante, vitae tincidunt ex posuere vel. Praesent non tortor sit amet mauris
  359. feugiat
  360. faucibus
  361. in at massa.</p>
  362.  
  363. <p> ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra augue mi, eu dictum
  364. nisl
  365. vehicula et. Cras suscipit, est ut consectetur lobortis, est elit sollicitudin nisl, eu
  366. posuere
  367. purus orci nec augue. Donec vestibulum vulputate augue vel pharetra. Pellentesque
  368. faucibus eu
  369. elit
  370. bibendum rutrum. Quisque mollis, ex sit amet consequat consequat, nunc lectus tincidunt
  371. augue,
  372. vitae
  373. hendrerit neque libero vitae lorem. Donec ullamcorper ultrices justo vel faucibus. Nam
  374. ullamcorper
  375. purus quam, et sollicitudin magna auctor vel. Nunc mollis, metus non aliquam efficitur,
  376. dolor
  377. lectus
  378. euismod erat, quis rhoncus tortor nunc quis nibh. Aliquam erat volutpat. Praesent nunc
  379. diam,
  380. facilisis ac pharetra ut, ullamcorper vitae diam. Duis lobortis ipsum nisl, nec tempor
  381. orci
  382. egestas
  383. in.</p>
  384.  
  385. <p> non elit elit. Suspendisse rhoncus id leo id consectetur. Cras egestas ipsum eget lorem
  386. auctor,
  387. in mattis quam faucibus. Aenean scelerisque nisl neque, a finibus lorem ultricies ac.
  388. Donec vel
  389. nisi
  390. odio. Integer blandit aliquam nibh nec molestie. Quisque velit quam, dapibus et placerat
  391. sit
  392. amet,
  393. interdum id elit. Sed aliquet tincidunt ipsum, quis laoreet enim maximus a. Aenean
  394. molestie
  395. efficitur consequat.</p>
  396.  
  397. <p>Sed tempor venenatis libero, vel gravida urna porttitor sit amet. Nunc a egestas erat.
  398. Sed quam
  399. velit, vestibulum eu lectus mollis, molestie elementum velit. Proin ac hendrerit arcu.
  400. Fusce
  401. volutpat tellus nec odio tincidunt aliquam. Nulla sit amet turpis et lacus facilisis
  402. vehicula.
  403. Donec
  404. sem ligula, commodo eu metus id, laoreet lacinia orci. Mauris eu diam a mi ullamcorper
  405. dapibus.
  406. Curabitur ullamcorper nulla eu tempus consectetur. Sed porta libero iaculis sem ornare
  407. dictum.
  408. Aenean ut fermentum lectus, a hendrerit lectus. Suspendisse potenti. Mauris in magna
  409. vulputate,
  410. feugiat nulla sit amet, hendrerit orci. Ut id odio non est mollis tempus. Phasellus
  411. commodo
  412. convallis ante, vitae tincidunt ex posuere vel. Praesent non tortor sit amet mauris
  413. feugiat
  414. faucibus
  415. in at massa.</p>
  416. </div>
  417. <div class="modal-footer">
  418. <button type="button" class="btn btn-secondary bordas-arredondadas"
  419. data-dismiss="modal">Close</button>
  420. </div>
  421. </div>
  422. </div>
  423. </div>
  424. <!-- Final do Modal da parte do Plano-->
  425.  
  426.  
  427.  
  428. <!-- Começo da parte das modalidade -->
  429. <section id="modalidades" class="container-fluid">
  430. <div class="row espaçamento">
  431. <div class="col-lg-12">
  432. <div class="divmodalidades">
  433. <h5 class="text-center">Modalidades</h5>
  434. <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet
  435. imperdiet
  436. ex, vel laoreet tellus. Suspendisse ultrices hendrerit varius. </p>
  437. </div>
  438. </div>
  439. </div>
  440.  
  441. <div class="container-fluid">
  442. <div class="row justify-content-center">
  443. <div class="col-lg-6">
  444. <div class="card mb-3 bordas-arredondadas" style="max-width: 640px;">
  445. <div class="row no-gutters">
  446. <div class="col-md-4">
  447. <img src="img/boxe.jpg" style=" height: 100%;" class="card-img bordas-arredondadas"
  448. alt="Boxe">
  449. </div>
  450. <div class="col-md-8">
  451. <div class="card-body">
  452. <h5>Boxe</h5>
  453. <p>This is a wider card with supporting text below as a natural
  454. lead-in to
  455. additional content. This content is a little bit longer.</p>
  456. <div class="center">
  457. <a href="detalhes_boxe.html"
  458. class="btn btn-success bordas-arredondadas">Detalhes</a>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465.  
  466. <div class="col-lg-6 ">
  467. <div class="card mb-3 bordas-arredondadas" style="max-width: 640px;">
  468. <div class="row no-gutters">
  469. <div class="col-md-4">
  470. <img src="img/muay_thai.jpg" style="height: 100%;" class="card-img bordas-arredondadas"
  471. alt="Muay Thai">
  472. </div>
  473. <div class="col-md-8">
  474. <div class="card-body">
  475. <h5>Muay Thai</h5>
  476. <p>This is a wider card with supporting text below as a natural
  477. lead-in to
  478. additional content. This content is a little bit longer.</p>
  479. <div class="center">
  480. <a href="detalhes_muay_thai.html"
  481. class="btn btn-success bordas-arredondadas">Detalhes</a>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. </div>
  487. </div>
  488.  
  489. </div>
  490.  
  491.  
  492. <div class="row justify-content-center">
  493. <div class="col-lg-6">
  494. <div class="card mb-3 bordas-arredondadas" style="max-width: 640px;">
  495. <div class="row no-gutters">
  496. <div class="col-md-4">
  497. <img src="img/ginastica.jpg" style=" height: 100%;"
  498. class="card-img bordas-arredondadas" alt="ginastica">
  499. </div>
  500. <div class="col-md-8">
  501. <div class="card-body">
  502. <h5>Ginastica</h5>
  503. <p>This is a wider card with supporting text below as a natural
  504. lead-in to
  505. additional content. This content is a little bit longer.</p>
  506. <div class="center">
  507. <a href="detalhes_ginastica.html"
  508. class="btn btn-success bordas-arredondadas">Detalhes</a>
  509. </div>
  510. </div>
  511. </div>
  512. </div>
  513. </div>
  514. </div>
  515.  
  516. <div class="col-lg-6 ">
  517. <div class="card mb-3 bordas-arredondadas" style="max-width: 640px;">
  518. <div class="row no-gutters">
  519. <div class="col-md-4">
  520. <img src="img/aerobica.jpg" style="height: 100%;" class="card-img bordas-arredondadas"
  521. alt="aerobica">
  522. </div>
  523. <div class="col-md-8">
  524. <div class="card-body">
  525. <h5>Aeróbica</h5>
  526. <p>This is a wider card with supporting text below as a natural
  527. lead-in to
  528. additional content. This content is a little bit longer.</p>
  529. <div class="center">
  530. <a href="detalhes_aerobica.html"
  531. class="btn btn-success bordas-arredondadas">Detalhes</a>
  532. </div>
  533. </div>
  534. </div>
  535. </div>
  536. </div>
  537. </div>
  538.  
  539. </div>
  540.  
  541. <div class="row justify-content-center">
  542. <div class="col-lg-6">
  543. <div class="card mb-3 bordas-arredondadas" style="max-width: 640px;">
  544. <div class="row no-gutters">
  545. <div class="col-md-4">
  546. <img src="img/zumba.jpg" style=" height: 100%;" class="card-img bordas-arredondadas"
  547. alt="zumba">
  548. </div>
  549. <div class="col-md-8">
  550. <div class="card-body">
  551. <h5>Zumba</h5>
  552. <p>This is a wider card with supporting text below as a natural
  553. lead-in to
  554. additional content. This content is a little bit longer.</p>
  555. <div class="center">
  556. <a href="detalhes_zumba.html"
  557. class="btn btn-success bordas-arredondadas">Detalhes</a>
  558. </div>
  559. </div>
  560. </div>
  561. </div>
  562. </div>
  563. </div>
  564.  
  565. <div class="col-lg-6 ">
  566. <div class="card mb-3 bordas-arredondadas" style="max-width: 640px;">
  567. <div class="row no-gutters">
  568. <div class="col-md-4">
  569. <img src="img/yoga.jpg" style="height: 100%;" class="card-img bordas-arredondadas"
  570. alt="yoga">
  571. </div>
  572. <div class="col-md-8">
  573. <div class="card-body">
  574. <h5>Yoga</h5>
  575. <p>This is a wider card with supporting text below as a natural
  576. lead-in to
  577. additional content. This content is a little bit longer.</p>
  578. <div class="center">
  579. <a href="detalhes_yoga.html"
  580. class="btn btn-success bordas-arredondadas">Detalhes</a>
  581. </div>
  582. </div>
  583. </div>
  584. </div>
  585. </div>
  586. </div>
  587. </div>
  588. </div>
  589. </section>
  590.  
  591. <!--Começo da parte depoimento-->
  592. <section id="depoimentos" class="container-fluid">
  593. <div class="row">
  594. <div class="col-lg-12">
  595. <div class=" divdepoimentos espaçamento">
  596. <h5 class="text-center">Depoimentos</h5>
  597. <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In blandit a velit
  598. et
  599. finibus. Nullam semper magna mauris, et vehicula nisl tincidunt eget.</p>
  600. </div>
  601. </div>
  602. </div>
  603.  
  604. <center>
  605.  
  606. <div class="row">
  607. <div class="col-lg-4 col-md-6 col-sm-12 espaçamento">
  608. <div class="card card-depoimentos">
  609. <img src="img/depoimento1.jpg" class="card-img-top rounded-circle" alt="depoimento">
  610. <div class="card-body">
  611. <h4 class="text-center">Marcele</h4>
  612. <p class="card-text">"Some quick example text to build on the card title and make up the
  613. bulk
  614. of the card's content."</p>
  615. <div class="text-center">
  616. <a href="https://www.facebook.com/" target="_blank">
  617. <button type="button" class="btn btn-primary borde-icon "
  618. style="margin-right: 10px;">
  619. <i class="fab fa-facebook" style="font-size: 1.6em;"></i>
  620. </button>
  621. </a>
  622.  
  623. <a href="https://www.instagram.com/?hl=pt-br" target="_blank">
  624. <button type="button" class="btn btn-instagram borde-icon "
  625. style="margin-right: 10px;">
  626. <i class="fab fa-instagram" style="font-size: 1.6em;"></i>
  627. </button>
  628. </a>
  629. </div>
  630. </div>
  631. </div>
  632. </div>
  633.  
  634. <div class="col-lg-4 col-md-6 col-sm-12 espaçamento">
  635. <div class="card card-depoimentos">
  636. <img src="img/depoimento2.jpg" class="card-img-top rounded-circle" alt="depoimento">
  637. <div class="card-body">
  638. <h4 class="text-center">Julieta</h4>
  639. <p class="card-text">"Some quick example text to build on the card title and make up the
  640. bulk
  641. of the card's content."</p>
  642. <div class="text-center">
  643. <a href="https://www.facebook.com/" target="_blank">
  644. <button type="button" class="btn btn-primary borde-icon "
  645. style="margin-right: 10px;">
  646. <i class="fab fa-facebook" style="font-size: 1.6em;"></i>
  647. </button>
  648. </a>
  649.  
  650. <a href="https://www.instagram.com/?hl=pt-br" target="_blank">
  651. <button type="button" class="btn btn-instagram borde-icon "
  652. style="margin-right: 10px;">
  653. <i class="fab fa-instagram" style="font-size: 1.6em;"></i>
  654. </button>
  655. </a>
  656. </div>
  657. </div>
  658. </div>
  659. </div>
  660.  
  661. <div class="col-lg-4 col-md-6 col-sm-12 espaçamento">
  662. <div class="card card-depoimentos">
  663. <img src="img/depoimento3.jpg" class="card-img-top rounded-circle" alt="depoimento">
  664. <div class="card-body">
  665. <h4 class="text-center">Ricardo</h4>
  666. <p class="card-text">"Some quick example text to build on the card title and make up the
  667. bulk
  668. of the card's content."</p>
  669. <div class="text-center">
  670. <a href="https://www.facebook.com/" target="_blank">
  671. <button type="button" class="btn btn-primary borde-icon "
  672. style="margin-right: 10px;">
  673. <i class="fab fa-facebook" style="font-size: 1.6em;"></i>
  674. </button>
  675. </a>
  676.  
  677. <a href="https://www.instagram.com/?hl=pt-br" target="_blank">
  678. <button type="button" class="btn btn-instagram borde-icon "
  679. style="margin-right: 10px;">
  680. <i class="fab fa-instagram" style="font-size: 1.6em;"></i>
  681. </button>
  682. </a>
  683. </div>
  684. </div>
  685. </div>
  686. </div>
  687. </div>
  688.  
  689. </center>
  690. </section>
  691. <!--Final da parte do depoimento-->
  692.  
  693. <!-- Começo da parte do contato-->
  694. <section id="contato" class="container-fluid">
  695. <div class="row">
  696. <div class="col-lg-12">
  697. <div class=" divcontato">
  698. <h5 class="text-center">Contato</h5>
  699. <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  700. </div>
  701. </div>
  702. </div>
  703.  
  704.  
  705. <div class="row justify-content-center">
  706. <div class="col-sm-12 col-md-10 col-lg-8">
  707. <form class="divformulario" name="formcontato">
  708. <div class="form-row">
  709. <div class="form-group col-sm-6">
  710. <label for="inputNome">Nome</label>
  711. <input type="text" class="form-control" name="nome" placeholder="Seu nome"
  712. :valid>
  713. </div>
  714. <div class="form-group col-sm-6">
  715. <label for="inputEmail">Email</label>
  716. <input type="email" class="form-control" name="email"
  717. placeholder="Seu email">
  718. </div>
  719. </div>
  720. <div class="form-row">
  721. <div class="form-group col-sm-6">
  722. <label for="inputCategorial">Categoria</label>
  723. <select name="categoria" type="select" id="selectCategoria" class="form-control">
  724. <option selected>Escolha...</option>
  725. <option value="duvida">Duvida</option>
  726. <option value="reclamacao">Reclamação</option>
  727. <option value="curriculo">Envio de curriculo</option>
  728.  
  729. </select>
  730. </div>
  731. <div class="form-group col-sm-6">
  732. <label for="inputTelefone">Telefone</label>
  733. <input id="telefone" type="text" class="form-control" name="telefone"
  734. placeholder="Seu telefone">
  735. </div>
  736. </div>
  737. <div class="form-row">
  738. <div class="form-group col-sm-12">
  739. <label>Descrição</label>
  740. <textarea type="text" class="form-control" name="descricao"></textarea>
  741. </div>
  742. </div>
  743. <div class="form-row">
  744. <div class="form-group col-sm-12">
  745. <label for="inputArquivo">Arquivo</label>
  746. <input type="file" class="form-control-file" name="arquivo">
  747. </div>
  748. </div>
  749. <div class="bt-enviar espaçamento center">
  750. <input type="submit" value="Enviar" class="btn btn-success bordas-arredondadas btn-lg" onclick="validar_formcontato()">
  751. </div>
  752. </form>
  753. </div>
  754. </div>
  755. </section>
  756. <!-- Final da parte do contato-->
  757.  
  758. <!--Começo da parte do rodape-->
  759. <section class="container-fluid rodape pt-5 ">
  760. <center>
  761. <div class="row rodape col-lg-12">
  762. <div class="col-lg-6 pb-5">
  763. <h4>Tópicos</h4>
  764. <li><a href="#home">Home</a></li>
  765. <li><a href="#sobre">Planos</a></li>
  766. <li><a href="#modalidades">Modalidades</a></li>
  767. <li><a href="#depoimentos">Depoimentos</a></li>
  768. <li><a href="#contato">Contato</a></li>
  769. <br>
  770. <img style="width: 150px; height: 150px;" src="img/logo.png" alt="logo">
  771. </div>
  772.  
  773. <div class="col-lg-6 pb-5">
  774. <h3 class="text-center">Venha conhecer agente !!</h3>
  775. <iframe style="width: 100%; height: 300px;"
  776. src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.6900531428278!2d-46.63470288549199!3d-23.543647766822424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce58ff663d3d07%3A0x26afc2d8c04e9337!2sRua%2025%20de%20Mar%C3%A7o%20-%20Centro%20Hist%C3%B3rico%20de%20S%C3%A3o%20Paulo%2C%20S%C3%A3o%20Paulo%20-%20SP!5e0!3m2!1spt-PT!2sbr!4v1578508418041!5m2!1spt-PT!2sbr"
  777. frameborder="0" style="border:0;" allowfullscreen=""></iframe>
  778. </div>
  779. </div>
  780. </center>
  781. </section>
  782. <!--Final da parte do rodape-->
  783.  
  784. <!-- Links externos-->
  785. <section class="container-fluid link">
  786. <div class="row">
  787. <div class="col-lg-12 pb-4 pt-4">
  788. <h3 class="text-center">Desenvolvido por Cesar dos Santos de Almeida</h3>
  789. <div class="center">
  790. <a class="btn btn-dark" href="#"><i class="fab fa-github"></i>GitHub</a>
  791. </div>
  792. </div>
  793. </div>
  794. </section>
  795. <!-- Links externos-->
  796.  
  797.  
  798.  
  799.  
  800. <!-- Bibliotecas do javascript do bootstrap-->
  801. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  802. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  803. integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  804. crossorigin="anonymous"></script>
  805. <!-- Final da Bibliotecas do javascript do bootstrap-->
  806.  
  807. <script type="text/javascript" src="js/custom.js"></script>
  808.  
  809. <script>
  810.  
  811. </script>
  812.  
  813. </body>
  814.  
  815. </html>
  816.  
  817.  
  818. <!--custom.css-->
  819.  
  820. .navbar-dark .navbar-nav .nav-link {
  821. color: #fff;
  822. }
  823.  
  824.  
  825. h5{
  826. color: #fff;
  827. margin-top: 10px;
  828. font-size: 40px;
  829. }
  830.  
  831. .btn-primary {
  832. color: #fff;
  833. background-color: transparent;
  834. border-color: #007bff;
  835. border: #007bff solid 2px;
  836. }
  837.  
  838.  
  839. button {
  840. align-items: center;
  841. }
  842.  
  843. .btn-secondary {
  844. color: #fff;
  845. background-color: transparent;
  846. border: #6c757d solid 2px;
  847. }
  848.  
  849. .btn-success {
  850. color: #fff;
  851. background-color: transparent;
  852. border: #28a745 solid 2px;
  853. }
  854.  
  855. .btn-danger {
  856. color: #fff;
  857. background-color: transparent;
  858. border-color: #dc3545;
  859. }
  860.  
  861. .divsobre{
  862. width: 700px;
  863. height: auto;
  864. background: #343A40;
  865. }
  866.  
  867. /* .divplano{
  868. width: 500px;
  869. height: auto;
  870. background: #343A40;
  871. } */
  872.  
  873.  
  874. .imagem {
  875. width: 600px;
  876. margin-left: 30px;
  877. margin-top: 15px;
  878. }
  879.  
  880. /* .background{
  881. background: #343A40;
  882. } */
  883.  
  884. .bordas-arredondadas{
  885. border-radius: 40px;
  886. }
  887.  
  888.  
  889.  
  890. .paragrafo{
  891. margin-left: 30px;
  892. margin-right: 30px;
  893. margin-top: 15px;
  894. color:#fff;
  895. }
  896.  
  897. .espaçamento{
  898. padding-bottom: 30px;
  899. }
  900.  
  901. .borde-icon{
  902. border-radius: 60px;
  903. }
  904.  
  905. /* Botão personalizado do Instragram */
  906.  
  907. .btn-instagram {
  908. color: #fff;
  909. background-color: transparent;
  910. border-color: #833AB4;
  911. }
  912.  
  913. .btn-instagram:hover {
  914. color: #fff;
  915. background-image: linear-gradient(#405DE6, #5851DB, #833AB4, #C13584,#E1306C);
  916. border-color: #833AB4;
  917. }
  918.  
  919. .btn-:focus, .btn-.focus {
  920. color: #fff;
  921. background-image: linear-gradient(#405DE6, #5851DB, #833AB4, #C13584,#E1306C);
  922. border-color: #833AB4;
  923. box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
  924. }
  925.  
  926. .btn-.disabled, .btn-:disabled {
  927. color: #fff;
  928. background-image: linear-gradient(#405DE6, #5851DB, #833AB4, #C13584,#E1306C);
  929. border-color: #833AB4;
  930. }
  931.  
  932. .btn-instagram:not(:disabled):not(.disabled):active, .btn-instagram:not(:disabled):not(.disabled).active,
  933. .show > .btn-instagram.dropdown-toggle {
  934. color: #fff;
  935. background-image: linear-gradient(#405DE6, #5851DB, #833AB4, #C13584,#E1306C);
  936. border-color: #833AB4;
  937. }
  938.  
  939. .btn-instagram:not(:disabled):not(.disabled):active:focus, .btn-instagram:not(:disabled):not(.disabled).active:focus,
  940. .show > .btn-instagram.dropdown-toggle:focus {
  941. box-shadow: 0 0 0 0.2rem rgba(193, 53, 132, 1);
  942. }
  943.  
  944. /* Final do Botão personalizado do Instragram */
  945.  
  946. .card-plano{
  947. margin-top: 15px;
  948. display: flex;
  949. }
  950.  
  951. /* .carousel-inner > img {
  952. width: 100%;
  953. height: 100%;
  954. }
  955.  
  956. .carousel-inner{
  957. width: 100%;
  958. height: 100%;
  959. }
  960.  
  961. .carousel-caption .d-md-block{
  962. display: block !important;
  963. } */
  964.  
  965. body{
  966. background:#343A40 ;
  967. }
  968.  
  969. .card-img-top{
  970. width: auto;
  971. height: 200px;
  972. }
  973.  
  974. .card{
  975. background: #262626;
  976. color: #fff;
  977. }
  978.  
  979. .divplano {
  980. color: #fff;
  981. }
  982.  
  983. .modal-content{
  984. background:#343A40 ;
  985. color: #fff;
  986. }
  987.  
  988. span{
  989. color: #fff;
  990. }
  991.  
  992. .divmodalidades{
  993. color: #fff;
  994. }
  995.  
  996. .carousel-caption {
  997. bottom: 5rem;
  998. z-index: 10;
  999. }
  1000.  
  1001. /* .card-depoimentos{
  1002. width: 24rem;
  1003. height: 27rem;
  1004. } */
  1005.  
  1006. .card-depoimentos > img{
  1007. width:210px;
  1008. height:210px;
  1009. margin-top: 15px;
  1010.  
  1011. }
  1012.  
  1013. .divdepoimentos{
  1014. color: #fff;
  1015. }
  1016.  
  1017. .divformulario{
  1018. color:#fff;
  1019. }
  1020.  
  1021. textarea.form-control {
  1022. height: 300px;
  1023. }
  1024.  
  1025.  
  1026.  
  1027. .divcontato{
  1028. color: #fff;
  1029. }
  1030.  
  1031. .cor-link{
  1032. color: #fff;
  1033. padding-left: 0%;
  1034.  
  1035. }
  1036.  
  1037. .video{
  1038. position: relative;
  1039. width: 100%;
  1040. padding-bottom: 56.25%;
  1041.  
  1042. }
  1043.  
  1044. .video > iframe{
  1045. position: absolute;
  1046. width: 100%;
  1047. height: 100%;
  1048. border: none;
  1049. }
  1050.  
  1051. .flex{
  1052. display: flex;
  1053. justify-content: space-around;
  1054. flex-wrap: wrap;
  1055.  
  1056. }
  1057.  
  1058. a {
  1059. color: #fff;
  1060. }
  1061.  
  1062. .btn-dark {
  1063. color: #fff;
  1064. background-color: #262626;
  1065. border-color: #262626;
  1066. border: #262626 solid 2px;
  1067. }
  1068.  
  1069. h3{
  1070. color: #fff;
  1071. }
  1072.  
  1073. .rodape{
  1074. background: #262626;
  1075. color: #fff;
  1076. list-style-type: none;
  1077. }
  1078.  
  1079. .link{
  1080. background: #000000;
  1081. color: #fff;
  1082. }
  1083.  
  1084. .fa-github{
  1085. margin-right: 5px;
  1086. }
  1087.  
  1088. .center{
  1089. display: flex;
  1090. justify-content: center;
  1091. }
  1092.  
  1093.  
  1094. /* --------------------------------------------- Detalhes -------------------------------------------------- */
  1095.  
  1096. .detalhes_imagem{
  1097. padding-right: 0px;
  1098. padding-left: 0px;
  1099. color: #fff;
  1100. }
  1101.  
  1102. .detalhes_texto{
  1103. color: #fff;
  1104. }
  1105.  
  1106. .detalhes_video{
  1107. position: relative;
  1108. width: 100%;
  1109. padding-bottom: 56.25%;
  1110.  
  1111. }
  1112.  
  1113. .detalhes_video iframe{
  1114. position: absolute;
  1115. width: 100%;
  1116. height: 100%;
  1117. border: none;
  1118. }
  1119.  
  1120. .detalhes_imagem{
  1121. width: 100%;
  1122. height: auto;
  1123. }
  1124.  
  1125. <!--Javascript-->
  1126.  
  1127. function validar_formcontato() {
  1128. var nome = formcontato.nome.value;
  1129. var email = formcontato.email.value;
  1130. var categoria = formcontato.categoria.value;
  1131. var telefone = formcontato.telefone.value;
  1132. var descricao = formcontato.descricao.value;
  1133.  
  1134. if (nome === "") {
  1135. alert("Campo nome é Obrigatorio");
  1136. formcontato.nome.focus();
  1137. return false;
  1138.  
  1139. } if (email === "") {
  1140. alert("Campo email é Obrigatorio");
  1141. formcontato.email.focus();
  1142. return false;
  1143.  
  1144. } if (categoria === "") {
  1145. alert("Campo categoria é Obrigatorio");
  1146. formcontato.categoria.focus();
  1147. return false;
  1148.  
  1149. } if (telefone === "") {
  1150. alert("Campo telefone é Obrigatorio");
  1151. formcontato.telefone.focus();
  1152. return false;
  1153.  
  1154. }
  1155. if (descricao === "") {
  1156. alert("Campo descricao é Obrigatorio");
  1157. formcontato.descricao.focus();
  1158. return false;
  1159.  
  1160. }else{
  1161.  
  1162. Swal.fire(
  1163. 'E-mail enviado',
  1164. 'em breve entraremos em contato',
  1165. 'success'
  1166. )
  1167. }
  1168. }
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!