1. <!doctype html>
  2. <html lang="pt-br">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport content="width=device-width, initial-scale=1.0">
  6. <title>Párabola dos Dois Irmãos</title>
  7. <link rel="stylesheet href="assets/css/boot.css">
  8. <link rel="stylesheet href="assets/css/style.css">
  9. <link rel="shortcut icon href="assets/images/favicon.png"/>
  10. <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700;900&display=swap rel="stylesheet">
  11. <script src="https://kit.fontawesome.com/5847469.js crossorigin="anonymous"></script>

  13. <style>
  14. [data-anime] {
  15. opacity: 0;
  16. transition: 1s;
  17. }
  18. [data-anime="left"] {
  19. transform: translate3d(-50px, 0, 0);
  20. }
  21. [data-anime="right"] {
  22. transform: translate3d(50px, 0, 0);
  23. }
  24. [data-anime="top"] {
  25. transform: translate3d(0, -50px, 0);
  26. }
  27. [data-anime="bottom"] {
  28. transform: translate3d(0, 50px, 0);
  29. }
  30. [data-anime].animate {
  31. opacity: 1;
  32. transform: translate3d(0px, 0px, 0px);
  33. }
  34. .fade {
  35. -webkit-animation-name: fade;
  36. -webkit-animation-duration: 1.5s;
  37. animation-name: fade;
  38. animation-duration: 1.5s;
  39. }
  40. @-webkit-keyframes fade {
  41. from {
  42. opacity: .4
  43. }
  44. to {
  45. opacity: 1
  46. }
  47. }
  48. @keyframes fade {
  49. from {
  50. opacity: .4
  51. }
  52. to {
  53. opacity: 1
  54. }
  55. }
  56. @keyframes fadein {
  57. from {
  58. opacity: 0;
  59. }
  60. to {
  61. opacity: 1;
  62. }
  63. }
  64. @-moz-keyframes fadein {
  65. {
  66. opacity: 0;
  67. }
  68. to {
  69. opacity: 1;
  70. }
  71. }
  72. @-webkit-keyframes fadein {
  73. from {
  74. opacity: 0;
  75. }
  76. to {
  77. opacity: 1;
  78. }
  79. }
  80. @-ms-keyframes fadein {
  81. from {
  82. opacity: 0;
  83. }
  84. to {
  85. opacity: 1;
  86. }
  88. }
  89. @keyframes fadeout {
  90. from {
  91. opacity: 1;
  92. }
  93. to {
  94. opacity: 0.3;
  95. }
  96. }
  97. @-moz-keyframes fadeout {
  98. from {
  99. opacity: 1;
  100. }
  101. to {
  102. opacity: 0.3;
  103. }
  104. }
  105. @-webkit-keyframes fadeout {
  106. from {
  107. opacity: 1;
  108. }
  109. to {
  110. opacity: 0.3;
  111. }
  112. }
  113. @-ms-keyframes fadeout {
  114. from {
  115. opacity: 1;
  116. }
  117. to {
  118. opacity: 0.3;
  119. }
  120. }
  121. body {
  122. font-family: 'Roboto', sans serif;
  123. animation: fadein 3s;
  124. }
  125. ::-webkit-scrollbar-track {
  126. background-color: #F4F4F4;
  127. }
  128. ::-webkit-scrollbar {
  129. width: 6px;
  130. background: #F4F4F4;
  131. }
  132. ::-webkit-scrollbar-thumb {
  133. background: #dad7d7;
  134. }
  135. .intro {
  136. position: fixed;
  137. z-index: 999;
  138. }
  139. .intro img {
  140. height: 100%;
  141. }
  142. .intro-desc {
  143. position: absolute;
  144. z-index: 999;
  145. padding: 8%;
  146. color: #626261;
  147. display: flex;
  148. justify-content: space-between;
  149. align-items: flex-start;
  150. }
  151. .intro-desc p {
  152. margin-bottom: 8%;
  153. line-height: 1.5;
  154. }
  155. .intro-desc-center {
  156. flex-basis: 50%;
  157. width: 50%;
  158. text-align: center;
  159. padding-top: 10%;
  160. }
  161. .intro-desc-center h1 {
  162. text-transform: uppercase;
  163. color: #250d47;
  164. font-weight: 900;
  165. font-size: 4.3em;
  166. }
  167. .intro-desc-center p {
  168. font-family: 'Times New Roman', serif;
  169. text-transform: uppercase;
  170. color: #382c59;
  171. }
  172. .intro-desc-center p:first-of-type {
  173. letter-spacing: 20px;
  174. font-weight: bold;
  175. font-size: 1.5em;
  176. margin: 0;
  177. }
  178. .intro-desc-center p:last-of-type {
  179. margin-top: 5%;
  180. margin-bottom: 12%;
  181. letter-spacing: 5px;
  182. font-size: 1em;
  183. font-weight: 900;
  184. }
  185. .intro-desc-left,
  186. .intro-desc-right {
  187. flex-basis: 22%;
  188. width: 22%;
  189. font-size: 1.1em;
  190. }
  191. .intro-desc-left {
  192. padding-top: 2%;
  193. }
  194. .intro-desc-right {
  195. text-align: right;
  196. padding-top: 8%;
  197. }
  198. .intro-desc-center a {
  199. display: block;
  200. width: 220px;
  201. height: 70px;
  202. z-index: 1;
  203. margin-top: 32% !important;
  204. font-weight: 900;
  205. }
  206. .intro-desc-center a:after {
  207. content: '';
  208. background: linear-gradient(120deg, #382c59, #b253e8, #382c59);
  209. background-size: 400% 400%;
  210. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  211. -moz-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  212. -webkit-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  213. animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  214. }
  215. .intro-desc-center a > span {
  216. display: block;
  217. background: linear-gradient(120deg, #382c59, #b253e8, #382c59);
  218. background-size: 400% 400%;
  219. -webkit-background-clip: text;
  220. -webkit-text-fill-color: transparent;
  221. -moz-animation: gradient 3s ease-in-out infinite;
  222. -webkit-animation: gradient 3s ease-in-out infinite;
  223. animation: gradient 3s ease-in-out infinite;
  224. }
  225. .absolute-centering, body:after, .intro-desc-center a, .intro-desc-center a:after {
  226. position: absolute;
  227. top: 0;
  228. left: 0;
  229. right: 0;
  230. bottom: 0;
  231. margin: auto;
  232. }
  233. .text-formatting, .intro-desc-center a {
  234. text-transform: uppercase;
  235. text-decoration: none;
  236. text-align: center;
  237. line-height: 70px;
  238. font-size: 1em;
  239. }
  240. .intro-desc-center a:hover {
  241. background-color: #e4e0e6;
  242. }
  243. .intro-desc-center a i {
  244. margin-right: 5px;
  245. }
  246. @-moz-keyframes gradient {
  247. 0% {
  248. background-position: 14% 0%;
  249. }
  250. 50% {
  251. background-position: 87% 100%;
  252. }
  253. 100% {
  254. background-position: 14% 0%;
  255. }
  256. }
  257. @-webkit-keyframes gradient {
  258. 0% {
  259. background-position: 14% 0%;
  260. }
  261. 50% {
  262. background-position: 87% 100%;
  263. }
  264. 100% {
  265. background-position: 14% 0%;
  266. }
  267. }
  268. @keyframes gradient {
  269. 0% {
  270. background-position: 14% 0%;
  271. }
  272. 50% {
  273. background-position: 87% 100%;
  274. }
  275. 100% {
  276. background-position: 14% 0%;
  277. }
  278. }
  279. @-moz-keyframes border {
  280. 0% {
  281. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  282. }
  283. 25% {
  284. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  285. }
  286. 50% {
  287. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  288. }
  289. 75% {
  290. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  291. }
  292. 100% {
  293. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  294. }
  295. }
  296. @-webkit-keyframes border {
  297. 0% {
  298. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  299. }
  300. 25% {
  301. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  302. }
  303. 50% {
  304. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  305. }
  306. 75% {
  307. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  308. }
  309. 100% {
  310. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  311. }
  312. }
  313. @keyframes border {
  314. 0% {
  315. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  316. }
  317. 25% {
  318. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  319. }
  320. 50% {
  321. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  322. }
  323. 75% {
  324. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  325. }
  326. 100% {
  327. -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  328. }
  329. }
  330. .content-02-img {
  331. opacity: 0;
  332. transition: 1s;
  333. }
  334. .content-01,
  335. .content-02,
  336. .content-03,
  337. .content-04 {
  338. margin: -.3% 0 0 0;
  339. }
  340. .content-02, .content-03 {
  341. position: relative;
  342. }
  343. .content-03-hover {
  344. position: absolute;
  345. top: 0;
  346. left: 0;
  347. opacity: 0;
  348. transition: .3s;
  349. }
  350. .content-03-hover img {
  351. transition: .3s;
  352. }
  353. .content-03-btn {
  354. position: absolute;
  355. top: 0;
  356. left: 0;
  357. right: 0;
  358. bottom: 50%;
  359. overflow: hidden;
  360. }
  361. :root {
  362. --gray: #e0e5ec;
  363. --size: 25vw;
  364. --scalingFactor: calc(100 / 25); /*related to size*/
  365. }
  366. .dot, .trigger {
  367. position: absolute;
  368. top: 50%;
  369. left: 50%;
  370. transform: translate(-50%, -50%);
  371. height: var(--size);
  372. width: var(--size);
  373. margin: 10px;
  374. background: rgba(255, 255, 255, .5);
  375. box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5);
  376. border-radius: 50%;
  377. transition: .3s;
  378. }
  379. .dot, .trigger:hover {
  380. background: rgba(255, 255, 255, .8);
  381. }
  382. .trigger {
  383. z-index: 3;
  384. display: flex;
  385. align-items: center;
  386. justify-content: center;
  387. cursor: pointer;
  388. color: #1e1043;
  389. font-weight: 900;
  390. }
  391. .trigger:before {
  392. content: 'Clique aqui e Trabalhe na Vinha!';
  393. }
  394. #trigger:checked + .trigger + .dots > .dot {
  395. animation-name: wave;
  396. animation-timing-function: ease-in-out;
  397. animation-duration: 2s;
  398. animation-fill-mode: forwards;
  399. }
  400. .dot {
  401. opacity: 1;
  402. transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  403. }
  404. .dot:nth-of-type(2) {
  405. z-index: 1;
  406. animation-delay: .5s;
  407. }
  408. .dot:nth-of-type(3) {
  409. z-index: 2;
  410. animation-delay: 1s;
  411. }
  412. @keyframes wave {
  413. 0% {
  414. opacity: 1;
  415. transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
  416. }
  417. 100% {
  418. opacity: 0;
  419. transform: translate3d(-50%, -50%, 0) scale3d(var(--scalingFactor), var(--scalingFactor), 1);
  420. }
  421. }
  422. </style>

  424. </head>
  425. <body>

  427. <section class="intro">

  429. <div class="intro-desc">
  430. <div class="intro-desc-left">
  431. <p> Um homem tinha dois filhos, e, dirigindo-se ao primeiro, disse: Filho, vai trabalhar hoje na minha vinha.</p>
  432. <p>Ele, porém, respondendo, disse: Não quero. Mas depois, arrependendo-se, foi.</p>
  433. <p>E, dirigindo-se ao segundo, falou-lhe de igual modo; e, respondendo ele, disse: Eu vou, senhor; e não foi.</p>
  434. </div>

  436. <div class="intro-desc-center">
  437. <p>Parábola</p>
  438. <h1>Os Dois Filhos</h1>
  439. <p>Mateus 21:28-32</p>
  440. <a class="introducao href="#ilustracao"><span><i class="far fa-images"></i> Ver Ilustração</a></span></a>
  441. </div>

  443. <div class="intro-desc-right">
  444. <p>Qual dos dois fez a vontade do pai? Disseram-lhe eles: O primeiro. Disse-lhes Jesus: Em verdade vos digo que os publicanos e as meretrizes entram adiante de vós no reino de Deus.</p>
  445. <p>Porque João veio a vós no caminho da justiça, e não o crestes, mas os publicanos e as meretrizes o creram; vós, porém, vendo isto, nem depois vos arrependestes para o crer.</p>
  446. </div>
  447. </div>

  449. <img src="assets/images/introducao-bg.png"/>
  450. </section>

  452. <section class="container">
  453. <div class="content">

  455. <div class="content-01">
  456. <img src="assets/images/imagem-03.png"/>
  457. </div>

  459. <div class="content-02">
  460. <div class="content-03-hover">
  461. <img src="assets/images/imagem-04.png"/>
  462. </div>
  463. <img src="assets/images/imagem-08.png"/>
  464. </div>

  466. <div id="ilustracao class="content-03">
  467. <div class="content-03-btn">

  469. <input id="trigger type="checkbox hidden>
  470. <label class="trigger for="trigger"></label>
  471. <div class="dots">
  472. <div class="dot"></div>
  473. <div class="dot"></div>
  474. <div class="dot">
  475. </div>
  476. </div>
  477. </div>

  479. <div class="content-03-hover">
  480. <img src="assets/images/imagem-05.png"/>
  481. </div>

  484. <img src="assets/images/imagem-09.png"/>
  485. </div>

  487. <div class="content-04">
  488. <img src="assets/images/imagem-06.png"/>
  489. </div>
  490. </div>

  492. </section>
  493. <script src="assets/js/jquery.js"></script>
  494. <script src="assets/js/script.js"></script>
  495. </body>
  496. </html>
  497.  
  498. <script>
  499. $(function () {
  500. var timeEffect = 900;
  501. var buttonIntro = $(".introducao");
  502. var buttonColor = $(".trigger");

  504. buttonIntro.on("click", function () {
  505. $(".intro").fadeOut(timeEffect);
  506. });

  508. buttonColor.on("click", function () {
  509. $(".content-03-btn").fadeOut(3000, function () {
  510. $(".content-03-hover").css("opacity", "1");
  511. });

  513. })
  514. });
  515. </script>