Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
- Thank you for using my code!
- ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
- Rules to Follow:
- ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
- ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
- ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#4770).
- ✶ If you like to share this code, send to your friends the link of my blog, https://kawaii-lau.tumblr.com , and support me!
- If you like a custom code, check out my blog to see if requests are open!
- XOXO, Lauren.
- ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
- 2021 © Coding by Kawaii-Lau
- ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
- 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.
- HOW TO CUSTOMIZE YOUR OWN POKEMON CARD:
- 1.) take note of the following html elements and css properties:
- ✶ ` --card-color-center ` (root css property): gradient inner color of card
- ✶ ` --card-color-edge ` (root css property): gradient outer color of card
- ✶ ` class="pokemon-type" ` (class property, found in html): the circle of pokemon type
- ✶ ` class="pkmn-typ-mask" ` (class property, found in html): the symbol of pokemon type
- ✶ ` class="header-lesson-image" ` (class property, found in html): Pokemon image/gif
- you can ignore the rest if you want
- 2.) Search/Find (Ctrl + F) on the code, type in one of the above properties, and find all the highlighted text:
- 3.) Edit the properties the way you want them:
- ✶ 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.
- ✶ 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)".
- ✶ For ` class="header-lesson-image" `, you can replace the src in <img> with the pokemon you want to use.
- 4.) Repeat instructions on every element you see in the code result until you are happy with your card!
- -->
- <!--CUSTOM FONTS-->
- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
- <html>
- <style>
- :root {
- --card-color-center:#caf5b0; /* LIGHT COLOR */
- --card-color-edge:#7AC74C; /* DARK COLOR */
- --card-border:#f5f76a; /* BORDER */
- --card-height:810px; /* CARD BOX HEIGHT */
- --card-content-adjust:-795px; /* ADJUST CONTENTS if they go below the card (--card-height + 15px for best fit)*/
- }
- /* CUSTOM SCROLLBAR */
- ::-webkit-scrollbar {
- width:4px; height:3px;
- background-color:transparent;
- }
- ::-webkit-scrollbar-thumb {
- background-color:black
- }
- /* DEFAULT PARAGRAPH CSS*/
- p, h1, h2, h3, h4, h5, h6 {
- font-family:'Arial';
- margin:5px 0px;
- }
- /* MAIN BOX */
- .main-box {
- margin:0px auto;
- width:480px; height:var(--card-height);
- background:radial-gradient(var(--card-color-center) 10%, var(--card-color-edge) 89%);
- border:10px solid var(--card-border);
- border-radius:20px;
- box-sizing:border-box;
- }
- .texture-overlay { /* Gives the card a more realistic feeling than just solid */
- position: relative;
- z-index: 3;
- width:100%; height:100%;
- background-color:rgba(255, 255, 255, 0.5);
- -webkit-mask-size: 100% 100%;
- -webkit-mask-image: url(https://i.imgur.com/KyYLC5P.png);
- }
- .not-txtovrly { /* Card contents */
- padding:10px;
- position:relative;
- z-index:5;
- top:var(--card-content-adjust); left:0px;
- }
- /* HEADER */
- .lesson-no {
- /*BOX*/
- background:linear-gradient(#e3e3e3, #d9d9d9, #f2f2f2, #e3e3e3);
- box-shadow:0px 0px 2px black;
- border-radius:30px 30px 70px 10px;
- box-sizing:border-box;
- padding:3px 10px;
- margin:-10px 10px 0px -10px;
- /*TEXT*/
- letter-spacing:-1px;
- text-transform:uppercase;
- text-shadow:1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
- color:black;
- font-family:'Roboto Mono', monospace;
- font-style:italic;
- font-size:11px;
- }
- .lesson-name {
- flex-grow:1;
- }
- .pokemon-type { /* TYPE CIRCLE */
- width:35px; height:35px;
- border-radius:100%;
- border:2px solid white;
- margin:0px 5px;
- padding:4px;
- box-sizing:border-box;
- }
- .pkmn-typ-mask { /* TYPE SYMBOL */
- -webkit-mask-size:100% 100%;
- background-color:black;
- width:100%; height:100%;
- }
- .header-lesson-image {
- width:90%;
- border:5px ridge #d9d9d9;
- margin-bottom:-15px;
- }
- .image-subtitle {
- background:linear-gradient(#e3e3e3, #d9d9d9, #f2f2f2, #e3e3e3);
- width:95%;
- box-shadow:0px 0px 2px black;
- border-radius:30px 30px 70px 30px;
- box-sizing:border-box;
- padding:0px 10px;
- position:relative;
- z-index:7;
- }
- .info-header { /* Header below the box for lesson rpg & Assignments */
- width:95%;
- margin:0px auto;
- display:flex;
- flex-direction:row;
- align-items:flex-end;
- }
- .info-box { /* box for lesson rpg & Assignments */
- width:95%; height:180px;
- overflow:auto;
- margin:0px auto 10px;
- box-sizing:border-box;
- padding:5px 10px
- }
- </style>
- <body class="b0dy">
- <div class="main-box">
- <div class="texture-overlay"></div>
- <div class="not-txtovrly">
- <!--✷✷ HEADER SECTION ✷✷-->
- <section style="display:flex; flex-direction:row; align-items:center; width:100%; margin-bottom:10px;">
- <div class="lesson-no">
- Year 1, Week 1
- </div><!--END OF LESSON NO.-->
- <div class="lesson-name">
- <p style="font-size:18px;"><b>Fiesty Little Bulbasaur</b></p>
- </div><!--END OF LESSON NAME-->
- <div class="lesson-type">
- <div style="display:flex; flex-direction:row; align-items:flex-end;">
- <p style="font-size:10px;">
- <b>HP<span style="font-size:20px;">70</span></b></p>
- <div class="pokemon-type" style="background-color:#7AC74C;"><!--type circle color-->
- <div class="pkmn-typ-mask" style="-webkit-mask-image:url(https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/grass.svg);"><!--type symbol image--></div>
- </div><!--POKEMON TYPE-->
- </div><!--end of flexbox-->
- </div><!--END OF LESSON TYPE-->
- </section>
- <!--✷✷ HEADER IMAGE SECTION ✷✷-->
- <section style="margin-bottom:10px;">
- <center>
- <img src="https://i.gifer.com/8XbY.gif" class="header-lesson-image" style="height:200px;"/><!--Header Image-->
- <div class="image-subtitle">
- <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>
- </div>
- </center>
- </section>
- <!--✷✷ LESSON RPG n ASSIGNMENT SECTION ✷✷-->
- <section>
- <div class="info-header">
- <div class="pokemon-type" style="background-color:#7AC74C; margin-right:20px"><!--type circle color-->
- <div class="pkmn-typ-mask" style="-webkit-mask-image: url(https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/grass.svg);"><!--type symbol image--></div>
- </div><!--POKEMON TYPE-->
- <p style="font-size:16px"><b> The Lesson </b></p>
- </div><!--END OF INFO HEADER-->
- <div class="info-box" style="height:140px;">
- <!--✷LESSON RPG✷-->
- <p style="font-size:12px; text-align:justify">
- Bulbasaur (フシギダネ Fushigidane ) is a Grass/Poison-type Pokémon introduced in Generation I. It evolves into Ivysaur starting at level 16. It is one of the three Starter Pokémon that can be chosen in the Kanto region.<br><br>Bulbasaur resembles a small amphibian/frog , but bears three claws on each of its feet and has no tail. It also has large, red eyes and small, sharp teeth. Its skin is a light, turquoise color with dark, green spots. It has three claws on all four of its legs. Its most notable feature, however, is the aforementioned bulb on its back, which according to its entry in the Pokédex, was planted there at birth.<br><br>
- Bulbasaur has a "bulb" on its back that grows steadily larger as it matures. This bulb contains a seed which uses photosynthesis to supply Bulbasaur with energy. Its bulb is also used to store the energy that the seed absorbs, which can be used when it is necessary. It is assumed that when a Bulbasaur collects enough energy in its bulb, it will evolve into an Ivysaur.
- <br><br> - Pokemon WIKI
- </p>
- </div><!--END OF LESSON RPG-->
- <!-- assignment div: header-->
- <div class="info-header">
- <div class="pokemon-type" style="background-color:#7AC74C; margin-right:-1px"><!--type circle color-->
- <div class="pkmn-typ-mask" style="-webkit-mask-image: url(https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/grass.svg);"><!--type symbol image--></div>
- </div><!--POKEMON TYPE-->
- <div class="pokemon-type" style="background-color:lightgray; margin-right:20px"><!--type circle color-->
- <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>
- </div><!--POKEMON TYPE-->
- <p style="font-size:16px"><b> The Assignment </b></p>
- </div><!--END OF INFO HEADER-->
- <div class="info-box" style="font-size:12px; text-align:justify; height:100px;">
- <!--✷LESSON ASSIGNMENT✷-->
- <p>Let's learn more about bulbasaur. Put more instructions in this place holder here.</p>
- <div style="margin-left:20px;">
- <p>✷ Task #1</p>
- <p>✷ Task #2</p>
- <p>✷ Task #3</p>
- <p>✷ Task #4</p>
- </div>
- <p><b>Requirements on this lesson</b></p>
- <p>✷ Don't plagiarize</p>
- <p>✷ State all of your sources, even your imagination counts</p>
- <p>✷ Ask permission if you are going to use another user on the site</p>
- <p>✷ If you are going out to Starbucks, I'll pay you to a buy me caramel mocha frappaccino ♡</p>
- </div> <!--END OF LESSON ASSIGNMENT-->
- </section>
- <br>
- <!--✷✷ SIGNATURE SECTION ✷✷-->
- <section style="padding:0px 10px;">
- <p style="text-align:justify"><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>
- <br>
- <center>
- <img src="https://fontmeme.com/permalink/210719/1be7762fe91455d24414c0eff399a2bb.png" style="width:90%;"/>
- </center>
- </section>
- </div>
- </div>
- <!-- ♡CREDITS !!removing this or stealing my codes will send you the thirteen circles of hell, so don't forget that ♡♡♡-->
- <center style="font-family:'Arial'; color:black; font-size:12px">
- 2021 © 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>
- </center>
- </body>
- </html>
- <!--
- ✷✷ POKEMON TYPE SYMBOLS and COLOR HEXES MASTERLIST ✷✷
- CREDITS TO duiker10 on GITHUB for POKEMON SYMBOLS SVGs. Masterlist link: https://github.com/duiker101/pokemon-type-svg-icons/tree/master/icons
- ✷✷Direct links and hex colors✷✷
- ✷ Energy: https://cdn.pixabay.com/photo/2012/04/12/19/56/six-pointed-star-30398_960_720.png
- Hex Color: #D3D3D3
- ✷ Bug:
- https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/bug.svg
- Hex Color: #A6B91A
- ✷ Dark: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/dark.svg
- Hex Color: #705746
- ✷ Dragon: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/dragon.svg
- Hex Color: #6F35FC
- ✷ Electric: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/electric.svg
- Hex Color: #F7D02C
- ✷ Fairy: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fairy.svg
- Hex Color: #D685AD
- ✷ Fighting: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fighting.svg
- Hex Color: #C22E28
- ✷ Fire: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/fire.svg
- Hex Color: #EE8130
- ✷ Flying: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/flying.svg
- Hex Color: #A98FF3
- ✷ Ghost: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ghost.svg
- Hex Color: #735797
- ✷ Grass: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/grass.svg
- Hex Color: #7AC74C
- ✷ Ground: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ground.svg
- Hex Color: #E2BF65
- ✷ Ice: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/ice.svg
- Hex Color: #96D9D6
- ✷ Normal: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/normal.svg
- Hex Color: #A8A77A
- ✷ Poison: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/poison.svg
- Hex Color: #A33EA1
- ✷ Psychic: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/psychic.svg
- Hex Color: #F95587
- ✷ Rock: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/rock.svg
- Hex Color: #B6A136
- ✷ Steel: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/steel.svg
- Hex Color: #B7B7CE
- ✷ Water: https://raw.githubusercontent.com/duiker101/pokemon-type-svg-icons/5781623f147f1bf850f426cfe1874ba56a9b75ee/icons/water.svg
- Hex Color: #6390F0
- -->
Add Comment
Please, Sign In to add comment