API tools faq
paste
Advertisement
NecromancerCoding

Volcán Salitre y Lava - Página HTML

NecromancerCoding
Nov 9th, 2021
1,216
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>Volcán, Salitre y Lava</title>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  6. <link rel="shortcut icon" type="image/x-icon" href="https://illiweb.com/fa/favicon/discussion.ico" />
  7. <meta name="language" content="es" />
  8. <meta name="description" content="Foro privado Love makes people" />
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  10. <link href="https://fonts.googleapis.com/css?family=Rye:400|Montserrat:400,400i,700,700i,900,900i|Fira+Sans:400,400i,700,700i,900,900i&display=swap" rel="stylesheet" />
  11. <script src="https://static.tumblr.com/zd7jnbb/TDPpnlgj3/jquery.style-my-tooltips.js"></script><link href="https://static.tumblr.com/zd7jnbb/nzwpnlgii/style-my-tooltips.css" />
  12. <script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0 });});})(jQuery);</script>
  13. <script>
  14. jQuery(function($) {
  15.  
  16.     var $nav = $('body');
  17.     var $win = $(window);
  18.     var logoH = $win.height() - 10;
  19.  
  20.     $win.on("scroll", function () {
  21.         if ($(this).scrollTop() > logoH ) {
  22.             $nav.addClass("doch");
  23.         } else {
  24.             $nav.removeClass("doch");
  25.         }
  26.     }).on("resize", function(){ // If the user resizes the window
  27.        logoH = $(this).height(); // you'll need the new height value
  28.     });
  29.  
  30. });
  31. </script>
  32. <style>
  33. :root {
  34. --dbckg:#fafafa;
  35. --dbckg:#f5f5f5;
  36. --accent1:#112a31;
  37. --accent2:#86798d;
  38. --text:#777;
  39. --title:#111;
  40. --font-size:13px;
  41. --header:url(https://i.imgur.com/qDu4piP.png);
  42. }
  43. /*Cuerpo*/
  44. html, body { scroll-behavior: smooth;font:var(--font-size) 'Fira Sans', sans-serif;color:var(--text); }
  45. body {
  46. background-size:cover;
  47. background-position:center;
  48. background:var(--dbckg)!important;
  49. padding:0;
  50. margin:0;
  51. }
  52. a, a:hover{
  53. text-decoration:none!important;
  54. }
  55. a { color:var(--accent1); }
  56. a:hover { color:var(--accent2); }
  57. *::selection{
  58. background:var(--accent1);
  59. color:white;
  60. text-shadow:none;
  61. }
  62. ::-webkit-scrollbar {
  63. width: 3px;
  64. height: 3px;
  65. }
  66. ::-webkit-scrollbar-thumb {
  67. background: var(--accent1);
  68. }
  69. ::-webkit-scrollbar-track {
  70. background:transparent;
  71. }
  72. body#phpbb::-webkit-scrollbar {
  73. background:var(--dbckg1);
  74. width:11px;
  75. }
  76. body#phpbb::-webkit-scrollbar-thumb {
  77. background:var(--accent1);
  78. border:3px solid var(--bbckg0);
  79. }
  80. body#phpbb::-webkit-scrollbar-track {
  81. background:var(--accent1);
  82. border:5px solid var(--bbckg0);
  83. }
  84. ::-webkit-scrollbar-button {
  85. width: 0px;
  86. height: 0px;
  87. }
  88. ::-webkit-scrollbar-corner {
  89. background: transparent;
  90. }
  91. /*Tooltip*/
  92. #s-m-t-tooltip{
  93. display:block;
  94. position: absolute!important;
  95. /* basic */
  96. max-width:300px;
  97. z-index: 999;
  98. margin:14px 14px 7px 12px;
  99. /* style and design */
  100. padding:15px;
  101. background:var(--bbckg0);
  102. -moz-border-radius:5px;
  103. -webkit-border-radius:5px;
  104. border-radius:5px;
  105. border:var(--bborder1);
  106. /* font */
  107. font-family:Raleway, sans-serif;
  108. font-size:10px;
  109. font-weight:900;
  110. text-transform:uppercase;
  111. line-height:12px;
  112. color:var(--btext);
  113. }
  114. nav {
  115.     position: fixed;
  116.     top: 0;
  117.     left: 0;
  118.     width: 100%;
  119.     text-align: right;
  120.     padding: 20px;
  121.     box-sizing: border-box;
  122.     z-index: 9999;
  123.     transition: .5s;
  124.     background:transparent;
  125. }
  126.  
  127. body.doch nav {
  128.     background: var(--accent2);
  129.   text-align:center;
  130. }
  131.  
  132. h1 {
  133.     margin: 0;
  134.     color: white;
  135.     font: 4.45rem 'Rye';
  136.     text-align: justify;
  137.     text-align-last: center;
  138.     line-height: 4rem;
  139. }
  140.  
  141. header, footer, article {
  142.     display: flex;
  143.     justify-content: center;
  144.     align-items: center;
  145. }
  146.  
  147. header {
  148.     flex-direction: column;
  149.     background-image: var(--header);
  150.     height: 100vh;
  151.     background-size: cover;
  152.     background-position: center bottom;
  153.     align-items: flex-start;
  154.     box-sizing: border-box;
  155.     padding: 0 0 0 30vh;
  156.     isolation: isolate;
  157.     position: relative;
  158. }
  159.  
  160. nav a {color: rgba(255,255,255,0.75);font-size: 12px;font-family: 'Montserrat';font-weight: 700;margin-left: 20px;transition: .2s;}
  161.  
  162. nav a:hover {
  163.     color: white;
  164. }
  165.  
  166. .desc {
  167.     width: 277px;
  168.     text-align: justify;
  169.     color: white;
  170.     height: 15vh;
  171.     overflow: auto;
  172.     margin-top: 2vh;
  173.     line-height: 1.1rem;
  174.     padding-right: 5px;
  175. }
  176.  
  177. .desc::-webkit-scrollbar-thumb { background:var(--accent2); }
  178.  
  179. h2 {
  180.     margin: 0;
  181.     font: 5rem 'Montserrat';
  182.     font-weight: 700;
  183.     color: var(--title);
  184. }
  185.  
  186. article:nth-of-type(even) {
  187.     background: var(--accent1);
  188. }
  189.  
  190. article {
  191.     padding: 10vh;
  192. }
  193.  
  194. .infobody p {
  195.     color: var(--text);
  196.     margin: 0;
  197.     text-align: justify;
  198. }
  199.  
  200. .infobody {
  201.     margin-right: 10vh;
  202.     width: 50vw;
  203. }
  204.  
  205. .infobody>a {
  206.     font: 1.2rem 'Montserrat';
  207.     border: 1px solid var(--accent2);
  208.     margin-top: 1vh;
  209.     display: block;
  210.     width: fit-content;
  211.     padding: .5rem 1rem;
  212.     position: relative;
  213.     overflow: hidden;
  214.     isolation: isolate;
  215.     transition: .5s;
  216.     background: rgba(0,0,0,0.025);
  217.     border-radius: 999px;
  218. }
  219.  
  220. article.info-section {
  221.     justify-content: space-between;
  222. }
  223.  
  224. .infoimage {
  225.     padding: 20px;
  226.     background: linear-gradient(180deg, var(--accent2), var(--accent1));
  227.     border-radius: 10px;
  228. }
  229.  
  230. .infoimage img {
  231.     border-radius: 10px;
  232. }
  233.  
  234. .infobody>a:after {content: '';background: linear-gradient(90deg, var(--accent1), var(--accent2));inset: 0;width: 110%;height: 110%;position: absolute;z-index: -1;top: 100%;transition: .5s;}
  235.  
  236. .infobody>a:hover:after {
  237.     top: 0;
  238. }
  239.  
  240. .infobody>a:hover {color: white;}
  241.  
  242. article.info-section-left .infobody {
  243.     margin-right: 0;
  244.     margin-left: 10vh;
  245.     text-align: right;
  246. }
  247.  
  248. article.info-section-left .infobody>a {
  249.     margin: 1vh 0 0 auto;
  250. }
  251.  
  252. article.info-section-left .infobody p {
  253.     text-align-last: right;
  254. }
  255.  
  256. .stat {
  257.     background: var(--dbckg);
  258.     margin-right: 5vw;
  259.     border-radius: 40px;
  260.     text-align: center;
  261.     width: 12vw;
  262.     padding: 10vh 0;
  263. }
  264.  
  265. .stat:last-of-type { margin:0; }
  266.  
  267. .stat b {
  268.     font: 3.5rem 'Rye';
  269.     display: block;
  270.     color: var(--title);
  271. }
  272.  
  273. .stat i {
  274.     font:1rem 'Montserrat';
  275.     font-weight:700;
  276.     color:var(--accent2);
  277. }
  278.  
  279. header:before {content: '';inset: 0;background: radial-gradient(transparent, rgba(0,0,0,0.75));position: absolute;z-index: -1;}
  280.  
  281. .member {
  282.     background: var(--dbckg);
  283.     margin-right: 5vw;
  284.     border-radius: 40px;
  285.     text-align: center;
  286.     min-width:10vw;
  287.     width: 15vw;
  288.     padding: 4vh 0;
  289.     box-sizing: border-box;
  290. }
  291.  
  292. .member:last-of-type { margin-right:0; }
  293.  
  294. .member img {
  295.     width: 10vw;
  296.     height: 10vw;
  297.     border-radius: 100%;
  298.     margin-bottom: 2vh;
  299. }
  300.  
  301. .member span b {
  302.     font: 1.5rem 'Montserrat';
  303.     font-weight: 700;
  304.     display: block;
  305.     color: var(--accent2);
  306.     line-height: 2rem;
  307. }
  308.  
  309. .member span i {
  310.     color: var(--title);
  311.     font-weight: 700;
  312.     font-style: normal;
  313. }
  314.  
  315. footer {
  316.   background:var(--dbckg2);
  317.   justify-content:space-between;
  318.   padding:5vh 10vh;
  319. }
  320.  
  321. .footerlinks { width:40vw; }
  322.  
  323. .footerlinks a {
  324.   font:1rem 'Montserrat';
  325.   font-weight:700;
  326.   color:var(--accent2);
  327.   margin-right:2rem;
  328.   line-height:2rem;
  329. }
  330.  
  331. .footerlinks a:hover { color:var(--accent1); }
  332.  
  333. .footernecro svg { width:10vh;height:10vh;display:block; }
  334. </style>
  335. </head>
  336. <body>
  337. <nav>
  338. <a href="/">BACK</a>
  339. <a href="#top">TOP</a>
  340. <a href="#ambi">THE ISLANDS</a>
  341. <a href="#stats">STATISTICS</a>
  342. <a href="#data">MUST-SEE LOCATIONS</a>
  343. <a href="#pnjs">TOUR GUIDES</a>
  344. </nav>
  345. <header>
  346. <h1>VOLCÁN<br/>SALITRE<br/>Y LAVA</h1>
  347. <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus viverra faucibus. Etiam imperdiet tempor dui consequat commodo. Pellentesque habitant morbi tristique senectus et netus
  348. et malesuada fames ac turpis egestas. In iaculis viverra lorem, vel volutpat nisi blandit at. Nullam magna tellus, molestie a justo et, condimentum rutrum metus. In vulputate consectetur massa, id molestie
  349. lectus volutpat vel. Donec mollis leo urna, at auctor risus pretium a. Aenean in elit eu sapien vulputate tempus in ac eros. Sed vel lectus egestas, efficitur libero sed, bibendum lectus. Suspendisse non
  350. varius sem. Duis bibendum viverra nisl, ac placerat magna elementum ultricies. Maecenas tristique augue velit, a condimentum dolor placerat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  351. Vestibulum rutrum lectus sit amet aliquet viverra. Praesent et metus sollicitudin, finibus tortor non, euismod sapien. Nulla lobortis tristique ipsum et molestie.</div>
  352. </header>
  353. <section id="body">
  354. <article class="info-section info-section-right" id="ambi">
  355. <div class="infobody">
  356. <h2>THE ISLANDS</h2>
  357. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus viverra faucibus. Etiam imperdiet tempor dui consequat commodo. Pellentesque habitant morbi tristique senectus et netus
  358. et malesuada fames ac turpis egestas. In iaculis viverra lorem, vel volutpat nisi blandit at. Nullam magna tellus, molestie a justo et, condimentum rutrum metus. In vulputate consectetur massa, id molestie
  359. lectus volutpat vel. Donec mollis leo urna, at auctor risus pretium a. Aenean in elit eu sapien vulputate tempus in ac eros. Sed vel lectus egestas, efficitur libero sed, bibendum lectus. Suspendisse non
  360. varius sem. Duis bibendum viverra nisl, ac placerat magna elementum ultricies. Maecenas tristique augue velit, a condimentum dolor placerat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  361. Vestibulum rutrum lectus sit amet aliquet viverra. Praesent et metus sollicitudin, finibus tortor non, euismod sapien. Nulla lobortis tristique ipsum et molestie.</p>
  362. <a href="">LEER MÁS</a>
  363. </div>
  364. <div class="infoimage"><img src="https://via.placeholder.com/400"/></div>
  365. </article>
  366. <article id="stats" class="stats-section">
  367. <div class="stat"><b>123</b><i>LOREM IPSUM</i></div>
  368. <div class="stat"><b>456</b><i>DOLOR SIT AMET</i></div>
  369. <div class="stat"><b>789</b><i>CONSECTETUR ADIPISCING</i></div>
  370. <div class="stat"><b>147</b><i>NULLA TEMPUS</i></div>
  371. </article>
  372. <article class="info-section info-section-left" id="data">
  373. <div class="infoimage"><img src="https://via.placeholder.com/400"/></div>
  374. <div class="infobody">
  375. <h2>MUST-SEE LOCATIONS</h2>
  376. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus viverra faucibus. Etiam imperdiet tempor dui consequat commodo. Pellentesque habitant morbi tristique senectus et netus
  377. et malesuada fames ac turpis egestas. In iaculis viverra lorem, vel volutpat nisi blandit at. Nullam magna tellus, molestie a justo et, condimentum rutrum metus. In vulputate consectetur massa, id molestie
  378. lectus volutpat vel. Donec mollis leo urna, at auctor risus pretium a. Aenean in elit eu sapien vulputate tempus in ac eros. Sed vel lectus egestas, efficitur libero sed, bibendum lectus. Suspendisse non
  379. varius sem. Duis bibendum viverra nisl, ac placerat magna elementum ultricies. Maecenas tristique augue velit, a condimentum dolor placerat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  380. Vestibulum rutrum lectus sit amet aliquet viverra. Praesent et metus sollicitudin, finibus tortor non, euismod sapien. Nulla lobortis tristique ipsum et molestie.</p>
  381. <a href="">LEER MÁS</a>
  382. </div>
  383. </article>
  384. <article class="member-section" id="pnjs">
  385. <div class="member"><img src="https://via.placeholder.com/200"/><span><b>NAME SURNAME</b><i>OCCUPATION</i></span></div>
  386. <div class="member"><img src="https://via.placeholder.com/200"/><span><b>NAME SURNAME</b><i>OCCUPATION</i></span></div>
  387. <div class="member"><img src="https://via.placeholder.com/200"/><span><b>NAME SURNAME</b><i>OCCUPATION</i></span></div>
  388. <div class="member"><img src="https://via.placeholder.com/200"/><span><b>NAME SURNAME</b><i>OCCUPATION</i></span></div>
  389. </article>
  390. </section>
  391. <footer>
  392. <div class="footerlinks">
  393. <a href="">Lorem ipsum</a>
  394. <a href="">Lorem ipsum</a>
  395. <a href="">Lorem ipsum</a>
  396. <a href="">Lorem ipsum</a>
  397. <a href="">Lorem ipsum</a>
  398. <a href="">Lorem ipsum</a>
  399. </div>
  400. <!--Crédito, no borrar-->
  401. <div class="footernecro">
  402. <a href="https://necromancercoding.tumblr.com/">
  403. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve" fill="#111111;">
  404. <style type="text/css">path{fill:url(#MyGradient)}</style>
  405. <defs>
  406. <linearGradient id="MyGradient" gradientTransform="rotate(90)">
  407. <stop offset="0%" stop-color="var(--accent2)"/>
  408. <stop offset="100%" stop-color="var(--accent1)"/>
  409. </linearGradient>
  410. </defs>
  411. <g>
  412. <path d="M1103.7,35c-32.7,0-59.4,26.6-59.4,59.4v867.6L917.5,834.6c48.6-65.6,77.4-146.8,77.4-234.6   c0-217.7-177.2-394.9-394.9-394.9c-87.2,0-167.9,28.4-233.4,76.5L138.3,52.4c-17-17.1-42.4-22.2-64.7-13   c-22.3,9.2-36.7,30.8-36.7,54.9v1011.3c0,32.7,26.6,59.4,59.4,59.4s59.4-26.6,59.4-59.4V238.1l126.9,127.3   c-48.6,65.6-77.4,146.8-77.4,234.6c0,217.7,177.2,394.9,394.9,394.9c87.2,0,167.9-28.4,233.4-76.5l228.3,229.2   c11.2,11.3,26.2,17.5,42.1,17.5c7.8,0,15.5-1.5,22.7-4.5c22.3-9.2,36.7-30.8,36.7-54.9V94.3C1163.1,61.6,1136.5,35,1103.7,35z    M794.5,795.3c-1.4,1.4-2.8,2.9-4.1,4.5C740.9,847,673.8,876.1,600,876.1c-152.3,0-276.1-123.9-276.1-276.1   c0-74.6,29.8-142.4,78.1-192.2c1.2-1,2.4-2.1,3.5-3.2c1.1-1.1,2.2-2.3,3.3-3.5c49.7-47.8,117.1-77.2,191.3-77.2   c152.3,0,276.1,123.9,276.1,276.1c0,74.2-29.4,141.6-77.2,191.3C797.4,792.5,795.9,793.9,794.5,795.3z"/>
  413. <path d="M731.9,468.1c-14.6-14.6-38.3-14.6-52.8,0L468.1,679c-7.1,7.1-10.9,16.4-10.9,26.4c0,10,3.9,19.4,10.9,26.4   c7.1,7.1,16.4,10.9,26.4,10.9s19.4-3.9,26.4-10.9L731.9,521C746.4,506.4,746.4,482.7,731.9,468.1z"/>
  414. <path d="M490.6,624.8c3.1,0,6.3-0.4,9.3-1.2c20-5.1,32-25.5,26.9-45.5l-17.7-68.8l69.2,17.4c9.7,2.4,19.7,1,28.3-4.2   c8.6-5.1,14.6-13.3,17.1-22.9c2.4-9.7,1-19.7-4.2-28.3s-13.3-14.6-22.9-17.1l-130.2-32.8c-12.7-3.2-26.4,0.6-35.6,9.9   c-9.3,9.3-13,23-9.7,35.7l33.3,129.6C458.7,613.3,473.6,624.8,490.6,624.8z"/>
  415. <path d="M745.6,603.2c-2.5-9.7-8.6-17.8-17.2-22.9c-8.6-5.1-18.6-6.5-28.3-4c-20,5.1-32,25.5-26.9,45.5l17.7,68.8l-69.2-17.4   c-9.7-2.4-19.7-1-28.3,4.2c-8.6,5.1-14.6,13.3-17.1,22.9c-2.4,9.7-1,19.7,4.2,28.3c5.1,8.6,13.3,14.6,22.9,17.1l130.1,32.8   c3,0.8,6.1,1.1,9.1,1.1c9.9,0,19.5-4,26.5-11c9.2-9.3,13-23,9.7-35.7L745.6,603.2z"/>
  416. </g>
  417. </svg>
  418. </a>
  419. </div>
  420. <!--Crédito, no borrar-->
  421. </footer>
  422. </body>
  423. </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!