API tools faq
paste
Kawaii-Lau

Charmander [Lesson]

Kawaii-Lau
Jul 19th, 2021 (edited)
774
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.16 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.   ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  3.     Thank you for using my code!
  4.   ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  5. Rules to Follow:
  6.  
  7. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  8. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  9. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#4770).
  10. ✶ If you like to share this code, send to your friends the link of my blog, https://kawaii-lau.tumblr.com , and support me!
  11.  
  12. If you like a custom code, check out my blog to see if requests are open!
  13. XOXO, Lauren.
  14.     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  15.       2021 © Coding by Kawaii-Lau
  16.     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  17.  
  18. NOTE: I added a masterlist of Pokemon Types and their symbols and hex colors to customize your own pokemon card! It's found at the bottom of the code template. Please note that these are not mine and credits goes to the user who made them.
  19. HOW TO CUSTOMIZE YOUR OWN POKEMON CARD:
  20.     1.) take note of the following html elements and css properties:
  21.             ✶ ` --card-color-center ` (root css property): gradient inner color of card
  22.             ✶ ` --card-color-edge ` (root css property): gradient outer color of card
  23.             ✶ ` class="pokemon-type" ` (class property, found in html): the circle of pokemon type
  24.             ✶ ` class="pkmn-typ-mask" ` (class property, found in html): the symbol of pokemon type
  25.             ✶ ` class="header-lesson-image" ` (class property, found in html): Pokemon image/gif
  26.         you can ignore the rest if you want
  27.     2.) Search/Find (Ctrl + F) on the code, type in one of the above properties, and find all the highlighted text:
  28.     3.) Edit the properties the way you want them:
  29.             ✶ For ` class="pokemon-type", go to style="background-color:#HEXCOLOR;", choose the hex color you want (Pokemon types' hex colors found in masterlist), and replace the placeholder hexcolor.
  30.             ✶ For ` class="pkmn-typ-mask", go to style="-webkit-mask-image:url(SVG-URL-LINK.svg);", choose the direct url link of the type of pokemon you want (masterlist found below the code) and replace the placeholder link between the parenthesis "(SVG-URL-LINK)".
  31.             ✶ For ` class="header-lesson-image" `, you can replace the src in <img> with the pokemon you want to use.
  32.     4.) Repeat instructions on every element you see in the code result until you are happy with your card!
  33. -->
  34.  
  35. <!--CUSTOM FONTS-->
  36. <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
  37.  
  38. <html>
  39.   <style>
  40.  
  41. :root {
  42.       --card-color-center:#e8ab72; /* LIGHT COLOR */
  43.       --card-color-edge:#f07e13; /* DARK COLOR */
  44.       --card-border:#f5f76a; /* BORDER */
  45.  
  46.      --card-height:790px; /* CARD BOX HEIGHT */
  47.       --card-content-adjust:-775px; /* ADJUST CONTENTS if they go below the card (--card-height + 15px for best fit)*/
  48.     }
  49.  
  50. /* CUSTOM SCROLLBAR */    
  51.  ::-webkit-scrollbar {
  52.    width:4px; height:3px;
  53.    background-color:transparent;
  54.     }
  55.  ::-webkit-scrollbar-thumb {
  56.    background-color:black  
  57.     }  
  58. /* DEFAULT PARAGRAPH CSS*/    
  59.     p, h1, h2, h3, h4, h5, h6 {
  60.       font-family:'Arial';
  61.       margin:5px 0px;
  62.     }
  63.  
  64. /* MAIN BOX */    
  65.     .main-box {
  66.       margin:0px auto;
  67.       width:480px; height:var(--card-height);
  68.       background:radial-gradient(var(--card-color-center) 10%, var(--card-color-edge) 89%);
  69.       border:10px solid var(--card-border);
  70.       border-radius:20px;
  71.       box-sizing:border-box;
  72.     }
  73.     .texture-overlay { /* Gives the card a more realistic feeling than just solid */
  74.       position: relative;
  75.       z-index: 3;
  76.       width:100%; height:100%;
  77.       background-color:rgba(255, 255, 255, 0.5);
  78.      
  79.       -webkit-mask-size: 100% 100%;
  80.       -webkit-mask-image: url(https://i.imgur.com/KyYLC5P.png);
  81.     }
  82.     .not-txtovrly { /* Card contents */
  83.       padding:10px;
  84.       position:relative;
  85.       z-index:5;
  86.       top:var(--card-content-adjust); left:0px;
  87.     }
  88.  
  89. /* HEADER */    
  90.     .lesson-no {
  91. /*BOX*/      
  92.       background:linear-gradient(#e3e3e3, #d9d9d9, #f2f2f2, #e3e3e3);
  93.       box-shadow:0px 0px 2px black;
  94.       border-radius:30px 30px 70px 10px;
  95.       box-sizing:border-box;
  96.       padding:3px 10px;
  97.       margin:-10px 10px 0px -10px;
  98. /*TEXT*/      
  99.       letter-spacing:-1px;
  100.       text-transform:uppercase;
  101.       text-shadow:1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
  102.       color:black;
  103.       font-family:'Roboto Mono', monospace;
  104.       font-style:italic;
  105.       font-size:11px;
  106.     }
  107.     .lesson-name {
  108.       flex-grow:1;
  109.     }
  110.     .pokemon-type { /* TYPE CIRCLE */
  111.       width:35px; height:35px;
  112.       border-radius:100%;
  113.       border:2px solid white;
  114.       margin:0px 5px;
  115.       padding:2px;
  116.       box-sizing:border-box;
  117.     }
  118.     .pkmn-typ-mask { /* TYPE SYMBOL */
  119.       -webkit-mask-size:100% 100%;
  120.       background-color:black;
  121.       width:100%; height:100%;
  122.     }
  123.    
  124.     .header-lesson-image {
  125.       width:90%;
  126.       border:5px ridge #d9d9d9;
  127.       margin-bottom:-15px;
  128. }
  129.     .image-subtitle {
  130.       background:linear-gradient(#e3e3e3, #d9d9d9, #f2f2f2, #e3e3e3);
  131.       width:95%;
  132.       box-shadow:0px 0px 2px black;
  133.       border-radius:30px 30px 70px 30px;
  134.       box-sizing:border-box;
  135.       padding:0px 10px;
  136.       position:relative;
  137.       z-index:7;
  138. }
  139.    
  140.     .info-header { /* Header below the box for lesson rpg & Assignments */
  141.      width:95%;
  142.       margin:0px auto;
  143.       display:flex;
  144.       flex-direction:row;  
  145.       align-items:flex-end;
  146. }
  147.     .info-box { /* box for lesson rpg & Assignments */
  148.      width:95%; height:180px;
  149.       overflow:auto;
  150.       margin:0px auto 10px;
  151.       box-sizing:border-box;
  152.       padding:5px 10px
  153. }
  154.   </style>
  155.  
  156.   <body class="b0dy">
  157.     <div class="main-box">
  158.       <div class="texture-overlay"></div>
  159.       <div class="not-txtovrly">
  160.        
  161.  <!--✷✷ HEADER SECTION ✷✷-->  
  162.       <section style="display:flex; flex-direction:row; align-items:center; width:100%; margin-bottom:10px;">
  163.           <div class="lesson-no">
  164.             Year 1, Week 1
  165.           </div><!--END OF LESSON NO.-->
  166.        
  167.         <div class="lesson-name">
  168.           <p style="font-size:18px;"><b>Cute Little Charmander </b></p>
  169.         </div><!--END OF LESSON NAME-->
  170.        
  171.         <div class="lesson-type">
  172.           <div style="display:flex; flex-direction:row; align-items:flex-end;">
  173.       <p style="font-size:10px;">
  174.         <b>HP<span style="font-size:20px;">70</span></b></p>
  175.      <div class="pokemon-type" style="background-color:orange;"><!--type circle color-->
  176.        <div class="pkmn-typ-mask" style="-webkit-mask-image:url(https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fire.svg);"><!--type symbol image--></div>
  177.      </div><!--POKEMON TYPE-->
  178.            
  179.           </div><!--end of flexbox-->
  180.         </div><!--END OF LESSON TYPE-->
  181.        
  182.       </section>
  183.  
  184. <!--✷✷ HEADER IMAGE SECTION ✷✷-->
  185.       <section style="margin-bottom:10px;">
  186.         <center>
  187.         <img src="https://i.pinimg.com/originals/27/75/ae/2775aeb45e4744cdb5bb07f82ee1f5bb.gif" class="header-lesson-image" style="height:200px;"/><!--Header Image-->
  188.         <div class="image-subtitle">
  189.           <p style="text-align:center; font-size:11px; font-family:'Roboto Mono', monospace; letter-spacing:-1px"> <i>FACT about the pokemon or Random Quote </i></p>
  190.         </div>
  191.         </center>
  192.       </section>
  193.  
  194. <!--✷✷ LESSON RPG n ASSIGNMENT SECTION ✷✷-->
  195.       <section>
  196.         <div class="info-header">
  197.           <div class="pokemon-type" style="background-color:orange; margin-right:20px"><!--type circle color-->
  198.           <div class="pkmn-typ-mask" style="-webkit-mask-image: url(https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fire.svg);"><!--type symbol image--></div>
  199.           </div><!--POKEMON TYPE-->
  200.          
  201.           <p style="font-size:16px"><b> The Lesson </b></p>
  202.         </div><!--END OF INFO HEADER-->
  203.        
  204.         <div class="info-box" style="height:140px;">
  205.   <!--✷LESSON RPG✷-->        
  206.           <p style="font-size:12px; text-align:justify">
  207.             Charmander (ヒトカゲ Hitokage ) is a Fire-type Pokémon. It evolves into a Charmeleon starting at level 16. It is one of the three Starter Pokémon that can be chosen in the Kanto region.<br><br> Charmander is a small, bipedal, dinosaur-like Pokémon. Most of its body is colored orange, while its underbelly is a pale light-yellow color. Charmander, like its evolved forms, has a flame that constantly burns on the end of its tail. However, If the flame on Charmander's tail goes out, Charmander's life will come to an end.<br><br>
  208.             Charmander is easily the most mild-mannered and well-behaved of its evolution line. Its feelings and emotions can be read by the flame on the tip of its tail. It flares up in a fury when Charmander is angry. The flame will flicker and grow small and dim If Charmander is sick or hurt. If it growls that means it's angry or is about to attack.
  209.             <br><br> - Pokemon WIKI
  210.           </p>
  211.         </div><!--END OF LESSON RPG-->
  212.        
  213.   <!-- assignment div: header-->  
  214.         <div class="info-header">
  215.           <div class="pokemon-type" style="background-color:orange; margin-right:-1px"><!--type circle color-->
  216.           <div class="pkmn-typ-mask" style="-webkit-mask-image: url(https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fire.svg);"><!--type symbol image--></div>
  217.           </div><!--POKEMON TYPE-->
  218.          
  219.           <div class="pokemon-type" style="background-color:lightgray; margin-right:20px"><!--type circle color-->
  220.           <div class="pkmn-typ-mask" style="-webkit-mask-image: url(https://cdn.pixabay.com/photo/2012/04/12/19/56/six-pointed-star-30398_960_720.png);"><!--type symbol image--></div>
  221.           </div><!--POKEMON TYPE-->
  222.          
  223.           <p style="font-size:16px"><b> The Assignment </b></p>
  224.         </div><!--END OF INFO HEADER-->
  225.        
  226.         <div class="info-box" style="font-size:12px; text-align:justify;height:100px;">
  227.          
  228.   <!--✷LESSON ASSIGNMENT✷-->
  229.           <p>Let's learn more about charmander. Put more instructions in this place holder here.</p>
  230.           <div style="margin-left:20px;">
  231.           <p>✷ Task #1</p>    
  232.           <p>✷ Task #2</p>
  233.           <p>✷ Task #3</p>
  234.           <p>✷ Task #4</p>
  235.           </div>
  236.          
  237.           <p><b>Requirements on this lesson</b></p>
  238.           <p>✷ Don't plagiarize</p>
  239.           <p>✷ State all of your sources, even your imagination counts</p>
  240.           <p>✷ Ask permission if you are going to use another user on the site</p>
  241.           <p>✷ If you have any takoyaki to share, please send them to me ♡</p>
  242.         </div> <!--END OF LESSON ASSIGNMENT-->
  243.       </section>
  244.        
  245.         <br>
  246. <!--✷✷ SIGNATURE SECTION ✷✷-->
  247.         <section style="padding:0px 10px;">
  248.           <p style="text-align:justify; font-size:14px"><b>If you find any bugs on my codes or questions on coding, don't hesitate to ask me on my Discord, <span style="color:#6caf37; text-shadow:0px 0px 3px black;">Kawaii-Lau#4770</span>.</b></p>
  249.           <br>
  250.           <center>
  251.             <img src="https://fontmeme.com/permalink/210719/1be7762fe91455d24414c0eff399a2bb.png" style="width:90%;"/>
  252.           </center>
  253.         </section>
  254.        
  255.       </div>
  256.     </div>
  257.    
  258. <!-- ♡CREDITS !!removing this or stealing my codes will send you the thirteen circles of hell, so don't forget that ♡♡♡-->    
  259.     <center style="font-family:'Arial'; color:black; font-size:12px">
  260.       2021 &copy; Coding by <a href="https://kawaii-lau.tumblr.com" target="_blank" style="text-decoration:none; color:var(--card-color-edge); "><b>Kawaii-Lau</b></a>
  261.     </center>
  262.   </body>
  263.  
  264. </html>
  265.  
  266. <!--
  267. ✷✷ POKEMON TYPE SYMBOLS and COLOR HEXES MASTERLIST ✷✷
  268.  
  269. CREDITS TO duiker10 on GITHUB for POKEMON SYMBOLS SVGs. Masterlist link: https://github.com/duiker101/pokemon-type-svg-icons/tree/master/icons
  270.  
  271. ✷✷Direct links and hex colors✷✷
  272.    ✷ Energy: https://cdn.pixabay.com/photo/2012/04/12/19/56/six-pointed-star-30398_960_720.png
  273. Hex Color: #D3D3D3
  274.    ✷ Bug:
  275. https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/bug.svg
  276. Hex Color: #A6B91A
  277.    ✷ Dark: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/dark.svg
  278. Hex Color: #705746
  279.    ✷ Dragon: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/dragon.svg
  280. Hex Color: #6F35FC
  281.    ✷ Electric: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/electric.svg
  282. Hex Color: #F7D02C
  283.    ✷ Fairy: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fairy.svg
  284. Hex Color: #D685AD
  285.    ✷ Fighting: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fighting.svg
  286. Hex Color: #C22E28
  287.    ✷ Fire: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fire.svg
  288. Hex Color: #EE8130
  289.    ✷ Flying: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/flying.svg
  290. Hex Color: #A98FF3
  291.    ✷ Ghost: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ghost.svg
  292. Hex Color: #735797
  293.    ✷ Grass: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/grass.svg
  294. Hex Color: #7AC74C
  295.    ✷ Ground: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ground.svg
  296. Hex Color: #E2BF65
  297.    ✷ Ice: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ice.svg
  298. Hex Color: #96D9D6
  299.    ✷ Normal: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/normal.svg
  300. Hex Color: #A8A77A
  301.    ✷ Poison: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/poison.svg
  302. Hex Color: #A33EA1
  303.    ✷ Psychic: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/psychic.svg
  304. Hex Color: #F95587
  305.    ✷ Rock: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/rock.svg
  306. Hex Color: #B6A136
  307.    ✷ Steel: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/steel.svg
  308. Hex Color: #B7B7CE
  309.     ✷ Water: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/water.svg
  310. Hex Color: #6390F0
  311. -->
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!