API tools faq
paste
Mephistia

personal website html

Mephistia
Feb 24th, 2021
2,054
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!--
  5.        This website design and illustration artworks are protected under Copyright (c) 2021 Julia Stefanello. All rights reserved.
  6.  
  7.        ----
  8.  
  9.        Includes other software licensed under the MIT license:
  10.  
  11.            - Animate On Scroll Library, Copyright (c) 2015 Michał Sajnóg
  12.                https://github.com/michalsnik/aos
  13.            
  14.            - Masonry, Copyright © 2021 David DeSandro
  15.                https://masonry.desandro.com/
  16.  
  17.            - SimpleLightbox, Copyright (c) 2018 Damir Brekalo
  18.                https://dbrekalo.github.io/simpleLightbox/
  19.  
  20.  
  21.            The MIT License (MIT)
  22.  
  23.            Permission is hereby granted, free of charge, to any person obtaining a copy
  24.            of this software and associated documentation files (the "Software"), to deal
  25.            in the Software without restriction, including without limitation the rights
  26.            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  27.            copies of the Software, and to permit persons to whom the Software is
  28.            furnished to do so, subject to the following conditions:
  29.  
  30.            The above copyright notice and this permission notice shall be included in all
  31.            copies or substantial portions of the Software.
  32.  
  33.            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  34.            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  35.            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  36.            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  37.            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  38.            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  39.            SOFTWARE.
  40.  
  41.  
  42.        
  43.        Includes other software licensed under the Apache License Version 2.0. For license details see http://www.apache.org/licenses/
  44.  
  45.            - Remix Icon, Remix Design © 2020
  46.                https://github.com/Remix-Design/RemixIcon
  47.  
  48.  
  49.        Includes other software licensed under the CC BY-NC 3.0 License. For license details see https://creativecommons.org/licenses/by-nc/3.0/
  50.  
  51.            - MixItUp, Copyright 2014-2018 KunkaLabs Limited
  52.  
  53.        
  54.        Includes fonts licensed under the Open Font License. For license details see http://scripts.sil.org/OFL
  55.  
  56.            - Sen, Copyright 2015 The Sen Project Authors
  57.                https://github.com/philatype/Sen
  58.            
  59.            - Capriola, Copyright (c) 2012 by Sorkin Type Co, with Reserved Font Name "Capriola"
  60.                https://www.sorkintype.com
  61.  
  62.  
  63.    -->
  64.     <meta charset="UTF-8">
  65.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  66.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  67.     <title>Mephistia / Julia Stefanello Portfolio</title>
  68.     <link rel="stylesheet" href="assets/css/style.css">
  69.     <link rel="preconnect" href="https://fonts.gstatic.com">
  70.     <link href="https://fonts.googleapis.com/css2?family=Capriola&family=Sen:wght@400;700&display=swap" rel="stylesheet">
  71.     <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
  72.     <link rel="stylesheet" href="assets/css/simpleLightbox.min.css">
  73.    
  74. </head>
  75. <body>
  76.     <header class="flex flex-center-all">
  77.         <div>
  78.             <img src="assets/img/illustration/ChibiOC.webp" alt="Mephistia Avatar" data-aos="fade-up">
  79.             <h1 data-aos="fade-up">Hi, I'm <span class="accent-color">Mephistia</span></h1>
  80.             <h3 data-aos="fade-up">A brazilian freelance artist, web designer and game development student. A.k.a. Julia Stefanello in real life.</h3>
  81.             <a href="#content" data-aos="fade-up">
  82.                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
  83.             </a>
  84.         </div>
  85.        
  86.     </header>
  87.     <div class="main-wrap">
  88.         <main id="content" class="flex">
  89.             <div class="sidebar">
  90.                 <nav>
  91.                     <ul>
  92.                         <li><a href="index.html">Work</a></li>
  93.                         <ul>
  94.                             <li><button type="button" data-filter="all" autofocus>All</button></li>
  95.                             <li><button type="button" data-filter=".illustration">Illustration</button></li>
  96.                             <li><button type="button" data-filter=".web-design">Web Design</button></li>
  97.                         </ul>
  98.                         <li><a href="about.html">About</a></li>
  99.                         <li><a href="commissions.html">Commissions</a></li>
  100.                         <li><span class="hr"></span></li>
  101.                         <li>
  102.                             <div class="flex flex-center-all">
  103.                                 <a href="https://twitter.com/_mephistia">                                
  104.                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/></svg>
  105.                                 </a>
  106.                                 <a href="https://instagram.com/_mephistia">
  107.                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.25a1.25 1.25 0 0 0-2.5 0 1.25 1.25 0 0 0 2.5 0zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/></svg>
  108.                                 </a>
  109.  
  110.                                 <a href="https://mephistia-arts.tumblr.com/">
  111.                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M6.27 7.63A5.76 5.76 0 0 0 10.815 2h3.03v5.152h3.637v3.636h-3.636v5.454c0 .515.197 1.207.909 1.667.474.307 1.484.458 3.03.455V22h-4.242a4.545 4.545 0 0 1-4.546-4.545v-6.667H6.27V7.63z"/></svg>
  112.                                 </a>
  113.  
  114.                                 <a href="https://ko-fi.com/mephistia">
  115.                                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734c4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09c-.443-.441-3.368-3.049-4.034-3.954c-.709-.965-1.041-2.7-.091-3.71c.951-1.01 3.005-1.086 4.363.407c0 0 1.565-1.782 3.468-.963c1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" fill="#626262"/></svg>
  116.                                 </a>
  117.  
  118.                             </div>
  119.                         </li>
  120.                     </ul>
  121.                 </nav>
  122.             </div>
  123.                 <section class="gallery-wrapper">
  124.                     <div class="gallery">
  125.                         <div class="gutter-sizer"></div>
  126.                         <article class="mix illustration">
  127.                             <a href="assets/img/illustration/DeerOC.webp" title="The Runic Seer, original artwork">
  128.                                 <img src="assets/img/illustration/DeerOC.webp" alt="The Runic Seer, original artwork">
  129.                             </a>
  130.                         </article>
  131.                         <article class="mix illustration">
  132.                             <a href="assets/img/illustration/SirFish.webp" title="Sir Fish, original artwork">
  133.                                 <img src="assets/img/illustration/SirFish.webp" alt="Sir Fish, original artwork">
  134.                             </a>
  135.                         </article>
  136.                         <article class="mix illustration">
  137.                             <a href="assets/img/illustration/ArthurSkulls.webp" title="Skulls, Red Dead Redemption fanart (Rockstar Games)">
  138.                                 <img src="assets/img/illustration/ArthurSkulls.webp" alt="Skulls, Red Dead Redemption fanart (Rockstar Games)">
  139.                             </a>
  140.                         </article>
  141.                         <article class="mix illustration">
  142.                             <a href="assets/img/illustration/BananaFishstick.webp" title="Peely and Fishstick, Fortnite fanart (Epic Games)">
  143.                                 <img src="assets/img/illustration/BananaFishstick.webp" alt="Peely and Fishstick, Fortnite fanart (Epic Games)">
  144.                             </a>
  145.                         </article>
  146.                         <article class="mix illustration">
  147.                             <a href="assets/img/illustration/ChibiOC.webp" title="Cute chibi-styled Runic Seer icon, original artwork">
  148.                                 <img src="assets/img/illustration/ChibiOC.webp" alt="Cute chibi-styled Runic Seer icon, original artwork">
  149.                             </a>
  150.                         </article>
  151.                         <article class="mix illustration">
  152.                             <a href="assets/img/illustration/JohnWickMarston.webp" title="John Wick/Marston fanart (Red Dead Redemption, Rockstar Games and John Wick, Lions Gate Entertainment)">
  153.                                 <img src="assets/img/illustration/JohnWickMarston.webp" alt="John Wick/Marston fanart (Red Dead Redemption, Rockstar Games and John Wick, Lions Gate Entertainment)">
  154.                             </a>                            
  155.                         </article>
  156.                         <article class="mix illustration">
  157.                             <a href="assets/img/illustration/DeerPoster.webp" title="Deer skull tattoo design, original artwork">
  158.                                 <img src="assets/img/illustration/DeerPoster.webp" alt="Deer skull tattoo design, original artwork">
  159.                             </a>
  160.                         </article>
  161.                         <article class="mix illustration">
  162.                             <a href="assets/img/illustration/Caleb.webp" title="Caleb, original artwork">
  163.                                 <img src="assets/img/illustration/Caleb.webp" alt="Caleb, original artwork">
  164.                             </a>
  165.                         </article>
  166.                         <article class="mix illustration">
  167.                             <a href="assets/img/illustration/JohnModern.webp" id="teste" title="Modern John Marston fanart (Red Dead Redemption, Rockstar Games)">
  168.                                 <img src="assets/img/illustration/JohnModern.webp" alt="Modern John Marston fanart (Red Dead Redemption, Rockstar Games)">
  169.                             </a>
  170.                         </article>
  171.                         <article class="mix illustration">
  172.                             <a href="assets/img/illustration/CharlesVaneComm.webp" title="Charles Vane fanart (Black Sails, Starz), commissioned work">
  173.                                 <img src="assets/img/illustration/CharlesVaneComm.webp" alt="Charles Vane fanart (Black Sails, Starz), commissioned work">
  174.                             </a>
  175.                         </article>
  176.                         <article class="mix illustration">
  177.                             <a href="assets/img/illustration/ArthurAnimals.webp" title="Arthur Morgan and honor animals fanart (from Red Dead Redemption, Rockstar Games)">
  178.                                 <img src="assets/img/illustration/ArthurAnimals.webp" alt="Arthur Morgan and honor animals fanart (from Red Dead Redemption, Rockstar Games)">
  179.                             </a>
  180.                         </article>
  181.                         <article class="mix illustration">
  182.                             <a href="assets/img/illustration/ArthurComm.webp" title="Arthur Morgan fanart (Red Dead Redemption, Rockstar Games) & original character from client, commissioned work">
  183.                                 <img src="assets/img/illustration/ArthurComm.webp" alt="Arthur Morgan fanart (Red Dead Redemption, Rockstar Games) & original character from client, commissioned work">
  184.                             </a>
  185.                         </article>
  186.                         <article class="mix illustration">
  187.                             <a href="assets/img/illustration/TrapperComm.webp" title="The Trapper fanart (from Dead by Daylight, Behaviour Interactive), commissioned">
  188.                                 <img src="assets/img/illustration/TrapperComm.webp" alt="The Trapper fanart (from Dead by Daylight, Behaviour Interactive), commissioned">
  189.                             </a>
  190.                         </article>
  191.                     </div>  
  192.                 </section>                
  193.         </main>
  194.     </div>
  195.    
  196.     <footer class="flex">
  197.         <nav>
  198.             <ul>
  199.                 <li><a href="index.html">Work</a></li>
  200.                 <li><a href="about.html">About</a></li>
  201.                 <li><a href="commissions.html">Commissions</a></li>
  202.             </ul>
  203.         </nav>
  204.         <span>Copyright © 2021 Julia Stefanello</span>
  205.     </footer>
  206.    
  207.     <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
  208.     <script src="assets/js/mixitup.min.js"></script>
  209.     <script src="assets/js/masonry.pkgd.min.js"></script>
  210.     <script src="assets/js/simpleLightbox.min.js"></script>
  211.     <script>
  212.         AOS.init({
  213.             delay: 50,
  214.             duration: 500
  215.         });
  216.  
  217.         const gallery = document.querySelector('.gallery');
  218.  
  219.         function modifyLinks(){
  220.             const a = document.querySelector('#teste');
  221.             a.setAttribute('title', 'olha o <a href="https://pudim.com.br" class="accent-color">testeaa</a>');
  222.         }
  223.  
  224.         window.onload = function() {
  225.  
  226.             // modify links for web design caption
  227.             modifyLinks();
  228.  
  229.  
  230.             // active link on menu
  231.             const menu = document.querySelector('nav');
  232.             const path = window.location.pathname.split('/').pop();
  233.             if (path.length > 0){
  234.                 menu.querySelector(`a[href="${path}"]`).classList.add('active-link')
  235.             }
  236.  
  237.             // Masonry
  238.             const msnry = new Masonry(gallery, {
  239.                 itemSelector: 'article',
  240.                 percentPosition: true,
  241.                 isAnimated: true,
  242.                 gutter: '.gutter-sizer'
  243.             });
  244.  
  245.             // MixItUp Filter
  246.             const mix = mixitup(gallery, {
  247.                 load: {
  248.                     filter: 'all'
  249.                 },
  250.                 animation: {
  251.                     duration: 300
  252.                 },
  253.                 callbacks: {
  254.                     onMixEnd: function(state){
  255.                         reloadMasonry(msnry);
  256.                     }
  257.                 }
  258.             });
  259.  
  260.             // SimpleLightbox
  261.             const lb = new SimpleLightbox({
  262.                 elements: '.gallery a'
  263.             });
  264.         }
  265.        
  266.         // Masonry
  267.         function reloadMasonry(elem){
  268.             elem.reloadItems();
  269.             elem.layout();
  270.         }
  271.        
  272.                    
  273.     </script>
  274.  
  275. </body>
  276. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!