API tools faq
paste
Kawaii-Lau

Squirtle [Lesson]

Kawaii-Lau
Jul 19th, 2021 (edited)
1,153
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.36 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:#bccef5; /* LIGHT COLOR */
  43.       --card-color-edge:#6390F0; /* DARK COLOR */
  44.       --card-border:#f5f76a; /* BORDER */
  45.  
  46.       --card-height:810px; /* CARD BOX HEIGHT */
  47.       --card-content-adjust:-795px; /* 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:4px;
  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%;
  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>Bubbly Little Squirtle</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;">60</span></b></p>
  175.      <div class="pokemon-type" style="background-color:#6390F0;"><!--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/water.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/4e/03/04/4e030424bad3b4f7baada77901b3db19.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:#6390F0; 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/water.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.             Squirtle (ゼニガメ Zenigame ) is a Water-type Pokémon introduced in Generation I. It evolves into Wartortle starting at level 16. It is one of the three Starter Pokémon that can be chosen in Kanto region.<br><br>
  208.             Squirtle is a small, light-blue Pokémon with an appearance similar to a turtle. With its aerodynamic shape and grooved surface, Squirtle's shell helps it wade through the water very quickly. It also offers protection in battle. Like turtles, Squirtle has a shell that covers its body with holes that allow its limbs, tail, and head to be exposed. Unlike a turtle, Squirtle is ordinarily bipedal. <br><br>
  209.             Squirtle is usually well behaved, yet it has an underlying rebellious streak. It likes to be open with only a limited number of people and won’t advertise its secrets. It prefers to stay within a close knit group, but can still enjoy making new friends. Other Pokémon may regard it as difficult and hard to get along with, but only if they have previously gotten on its bad side.
  210.             <br><br> - Pokemon WIKI
  211.           </p>
  212.         </div><!--END OF LESSON RPG-->
  213.        
  214.   <!-- assignment div: header-->  
  215.         <div class="info-header">
  216.           <div class="pokemon-type" style="background-color:#6390F0; margin-right:-1px"><!--type circle color-->
  217.           <div class="pkmn-typ-mask" style="-webkit-mask-image: url(https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/water.svg);"><!--type symbol image--></div>
  218.           </div><!--POKEMON TYPE-->
  219.          
  220.           <div class="pokemon-type" style="background-color:lightgray; margin-right:20px"><!--type circle color-->
  221.           <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>
  222.           </div><!--POKEMON TYPE-->
  223.          
  224.           <p style="font-size:16px"><b> The Assignment </b></p>
  225.         </div><!--END OF INFO HEADER-->
  226.        
  227.         <div class="info-box" style="font-size:12px; text-align:justify; height:100px;">
  228.          
  229.   <!--✷LESSON ASSIGNMENT✷-->
  230.           <p>Let's learn more about bulbasaur. Put more instructions in this place holder here.</p>
  231.           <div style="margin-left:20px;">
  232.           <p>✷ Task #1</p>    
  233.           <p>✷ Task #2</p>
  234.           <p>✷ Task #3</p>
  235.           <p>✷ Task #4</p>
  236.           </div>
  237.          
  238.           <p><b>Requirements on this lesson</b></p>
  239.           <p>✷ Don't plagiarize</p>
  240.           <p>✷ State all of your sources, even your imagination counts</p>
  241.           <p>✷ Ask permission if you are going to use another user on the site</p>
  242.           <p>✷ Send me your cat photos if you have a cat ♡</p>
  243.         </div> <!--END OF LESSON ASSIGNMENT-->
  244.       </section>
  245.        
  246.         <br>
  247. <!--✷✷ SIGNATURE SECTION ✷✷-->
  248.         <section style="padding:0px 10px;">
  249.           <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 white;">Kawaii-Lau#4770</span>.</b></p>
  250.           <br>
  251.           <center>
  252.             <img src="https://fontmeme.com/permalink/210719/1be7762fe91455d24414c0eff399a2bb.png" style="width:90%;"/>
  253.           </center>
  254.         </section>
  255.        
  256.       </div>
  257.     </div>
  258.    
  259. <!-- ♡CREDITS !!removing this or stealing my codes will send you the thirteen circles of hell, so don't forget that ♡♡♡-->    
  260.     <center style="font-family:'Arial'; color:black; font-size:12px">
  261.       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>
  262.     </center>
  263.   </body>
  264.  
  265. </html>
  266.  
  267. <!--
  268. ✷✷ POKEMON TYPE SYMBOLS and COLOR HEXES MASTERLIST ✷✷
  269.  
  270. CREDITS TO duiker10 on GITHUB for POKEMON SYMBOLS SVGs. Masterlist link: https://github.com/duiker101/pokemon-type-svg-icons/tree/master/icons
  271.  
  272. ✷✷Direct links and hex colors✷✷
  273.    ✷ Energy: https://cdn.pixabay.com/photo/2012/04/12/19/56/six-pointed-star-30398_960_720.png
  274. Hex Color: #D3D3D3
  275.    ✷ Bug:
  276. https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/bug.svg
  277. Hex Color: #A6B91A
  278.    ✷ Dark: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/dark.svg
  279. Hex Color: #705746
  280.    ✷ Dragon: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/dragon.svg
  281. Hex Color: #6F35FC
  282.    ✷ Electric: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/electric.svg
  283. Hex Color: #F7D02C
  284.    ✷ Fairy: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fairy.svg
  285. Hex Color: #D685AD
  286.    ✷ Fighting: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fighting.svg
  287. Hex Color: #C22E28
  288.    ✷ Fire: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fire.svg
  289. Hex Color: #EE8130
  290.    ✷ Flying: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/flying.svg
  291. Hex Color: #A98FF3
  292.    ✷ Ghost: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ghost.svg
  293. Hex Color: #735797
  294.    ✷ Grass: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/grass.svg
  295. Hex Color: #7AC74C
  296.    ✷ Ground: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ground.svg
  297. Hex Color: #E2BF65
  298.    ✷ Ice: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ice.svg
  299. Hex Color: #96D9D6
  300.    ✷ Normal: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/normal.svg
  301. Hex Color: #A8A77A
  302.    ✷ Poison: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/poison.svg
  303. Hex Color: #A33EA1
  304.    ✷ Psychic: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/psychic.svg
  305. Hex Color: #F95587
  306.    ✷ Rock: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/rock.svg
  307. Hex Color: #B6A136
  308.    ✷ Steel: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/steel.svg
  309. Hex Color: #B7B7CE
  310.     ✷ Water: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/water.svg
  311. Hex Color: #6390F0
  312. -->
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!