Digital Ita Bag

my collection | templates | assets (& extra colors) | f2u graphics

Easy Templates

Credit optional. Feel free to customize to your heart's desire, including the bag part assets.

Note: Switching around elements and widths will require repositioning some elements (e.g. zipper pull, L side handle).

---

Bag Template 01

HTML:

<!-- itabag container --> <div style="max-width: 800px; min-width: 500px; margin: auto; "> <!-- bag handle / top --> <div style="margin:auto; max-width: 85%; height: 130px; background-image: url(img/ita/parts/handle_01_grey_silver.png); background-size: 100% 100%;"></div> <div style="height:0px;"> <img src="img/ita/parts/sideL_01_grey_silver.png" style="position: relative; left: -145px; top: 10px; height: 590px; z-index: 1;"> </div> <!-- itabag main body --> <div style="height: 600px; background-color: #686868; border-radius: 50px; border: 5px solid black"> <!-- zipper and keychain --> <div style="max-width: 90%; position: relative; top: 3%; height: 30px; background-image: url(img/ita/parts/zip_silver.png); background-repeat: round; margin: auto; z-index: 3;"> <img src="img/ita/parts/zipper_02_silver.png" style="position: relative; left: -50px; top: -5px; filter: drop-shadow(5px 5px 5px #444);"> </div> <!-- centered itabag header --> <div style="position: relative; top: 3%; height: 80px; z-index:2;"><p align="center"> <span style="color: white;"> TITLE </span> </p></div> <!-- main itabag window --> <div style="max-width: 70%; height: 320px; border-radius: 30px; position: relative; margin: auto; overflow: auto; top: 10px; border: 40px solid transparent; border-image: url(img/ita/f2u/border_fr_03_grey.png) 40 round;"> <div style="background-color: lavender; padding: 20px;"> <!-- your bag contents here --> <p>TEXT HERE</p> <p> <img src="img/dw/an_miou_01.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_01.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_02.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <p> <img src="img/dw/cupipara_claris.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/icon_ryuki.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <p> <img src="img/dw/icon_varibari_hibari.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/icon_varibari_kasuga.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/tsumugi_icon.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <!-- end of your bag contents --> </div> </div> <!-- end of bag window --> <p align="center">template by <a href="https://tophatcats.neocities.org" style="color:#AAA">tophatcats</a></p> </div> <!-- end of itabag body --> </div> <!-- end of itabag container -->

Images (no hotlinking please!):

• handle_01_grey_silver.png
• sideL_01_grey_silver.png
• zip_silver.png
• zipper_02_silver.png
• border_fr_03_grey.png

---

Bag Template 02

HTML:

<!-- itabag container --> <div style="max-width: 650px; min-width: 500px; margin: auto; "> <!-- bag handle / top --> <div style="margin:auto; max-width: 75%; height: 130px; background-image: url(img/ita/parts/handle_02_blue_silver.png); background-size: 100% 100%;"></div> <!-- itabag main body --> <div style="height: 700px; background-color: #2A8093; border-radius: 100px 100px 40px 40px; border: 5px solid black"> <!-- zipper and keychain --> <div style="max-width: 85%; position: relative; top: 3%; height: 30px; background-image: url(img/ita/parts/zip_silver.png); background-repeat: round; margin: auto; z-index: 3;"> <img src="img/ita/parts/zipper_04_silver.png" style="position: relative; left: -50px; top: -5px; filter: drop-shadow(5px 5px 5px #444);"> </div> <!-- centered itabag header --> <div style="position: relative; top: 3%; height: 80px; z-index:2;"><p align="center"> <span style="color: white;"> TITLE </span> </p></div> <!-- main itabag window --> <div style="max-width: 70%; height: 460px; position: relative; margin: auto; overflow: auto; border: 5px solid black; border-radius: 30px; background-color: #8ABDC9; padding: 10px;"> <!-- your bag contents here --> <p>TEXT HERE</p> <p> <img src="img/dw/an_miou_01.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_01.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_02.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <p> <img src="img/dw/cupipara_claris.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/icon_ryuki.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <p> <img src="img/dw/icon_varibari_hibari.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/icon_varibari_kasuga.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/tsumugi_icon.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <p> <img src="img/dw/an_miou_01.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_01.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_02.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <!-- end of your bag contents --> </div> <!-- end of bag window --> <p align="center">template by <a href="https://tophatcats.neocities.org" style="color:#AAA">tophatcats</a></p> </div> <!-- end of itabag body --> </div> <!-- end of itabag container -->

Images (no hotlinking please!):

• handle_02_blue_silver.png
• zip_silver.png
• zipper_04_silver.png

---

Bag Template 03

HTML:

<!-- itabag container --> <div style="max-width: 800px; min-width: 500px; margin: auto; "> <!-- bag handle / top --> <div style="margin:auto; max-width: 85%; height: 130px; background-image: url(img/ita/parts/handle_01_pink_silver.png); background-size: 100% 100%;"></div> <div style="height:0px;"> <img src="img/ita/parts/sideL_01_pink_silver.png" style="position: relative; left: -116px; top: 10px; height: 480px; z-index: 1;"> </div> <!-- itabag main body --> <div style="height: 500px; background-color: #D07A9A; border-radius: 50px; border: 5px solid black; z-index: 2;"> <!-- zipper and keychain --> <div style="max-width: 90%; position: relative; top: 3%; height: 30px; background-image: url(img/ita/parts/zip_silver.png); background-repeat: round; margin: auto; z-index: 4;"> <img src="img/ita/parts/zipper_05_silver.png" style="position: relative; left: -100px; top: -5px; filter: drop-shadow(5px 5px 5px #444);"> </div> <!-- centered itabag header --> <div style="position: relative; top: 3%; height: 80px; z-index:2;"><p align="center"> <span style="color: white;"> TITLE </span> </p></div> <!-- main itabag window --> <div style="max-width: 70%; height: 250px; border-radius: 30px; position: relative; margin: auto; border: 40px solid transparent; border-image: url(img/ita/f2u/border_fr_01_pink.png) 40 round;"> <div style="background-color: #DFB9C1; padding: 20px; border: dashed 5px black; overflow: auto; height: 230px; padding: 10px;"> <!-- your bag contents here --> <p>TEXT HERE</p> <p> <img src="img/dw/an_miou_01.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_01.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/an_nino_02.png" style="border-radius: 10%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <p> <img src="img/dw/cupipara_claris.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/icon_ryuki.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <p> <img src="img/dw/icon_varibari_hibari.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/icon_varibari_kasuga.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> <img src="img/dw/tsumugi_icon.png" style="border-radius: 50%; border: 2px solid black; filter: drop-shadow(5px 5px 5px gray)"> </p> <!-- end of your bag contents --> </div> </div> <!-- end of bag window --> <p align="center">template by <a href="https://tophatcats.neocities.org" style="color:#EEE">tophatcats</a></p> </div> <!-- end of itabag body --> </div> <!-- end of itabag container -->

Images (no hotlinking please!):

• handle_01_pink_silver.png
• sideL_01_pink_silver.png
• zip_silver.png
• zipper_05_silver.png
• border_fr_01_pink.png

---