Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container-fluid my-1" style="color:#ffffff;width:460px;">
- <div class="container">
- <div class="card bg-faded rounded-0 p-1" style="background-color:#FFF;">
- <div class="card p-1 rounded-0 bg-faded" style="border:2px solid #000;background-color:#FFF;">
- <!--Nutrition label-->
- <p style="text-align: center; color:#000; font-family: arial black,avant garde;"><span style="font-size: 45px;"><strong>Nutrition Facts</strong></span></p>
- <div class="progress rounded-0" style="height:2px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"><br></div></div>
- <!--Servings-->
- <div class="card p-1 rounded-0 bg-faded" style="background-color:#FFF;">
- <p style="text-align: left; color:#000; font-family: arial;"><span style="font-size: 21px;"><strong># servings per container</strong></span></p>
- <div class="justify-content-between d-flex" style="text-align:left;font-family: arial black; color:#000;font-size: 21px;"><strong>Serving size</strong> (info)</div>
- </div>
- <div class="progress rounded-0" style="height:18px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="card p-1 rounded-0 bg-faded" style="background-color:#d5dc2a;">
- <!--Amount per serving-->
- <div class="row">
- <div class="col-7">
- <p style="text-align: left; color:#000; font-family: arial black;"><span style="font-size: 17px;"><strong>Amount per serving</strong></span></p>
- <!--Calories-->
- <a style="text-align: left; color:#000; font-family: arial black;"><span style="font-size: 33px;"><strong>Calories</strong></span></p>
- </div>
- <div class="col-5">
- <div class="card p-1 rounded-0 bg-faded" style="background-color:#d5dc2a; height:22px;">
- </div>
- <p style="text-align: right; color:#000; font-family: arial black;"><span style="font-size: 38px;"><strong>big #</strong></span></p>
- </div>
- </div>
- </div>
- <div class="progress rounded-0" style="height:10px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <!--Daily value (percentage doesn't change, it's part of the label)-->
- <p style="text-align: right; color:#000; font-family: arial black;"><span style="font-size: 17px;"><strong>% Daily Value*</strong></span></p>
- <div class="progress rounded-0" style="height:1px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <!--Name-->
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px;"><span style="font-family: arial black;"><strong>Name</strong><span style="font-family: arial;"> #mg</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <!--Age-->
- <div class="progress rounded-0" style="height:2px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px;"><span style="font-family: arial black;"><strong>Age</strong><span style="font-family: arial;"> #g</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <!--Height-->
- <div class="progress rounded-0" style="height:1px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px; font-family: arial; margin-left: 20px;">Height<span style="font-family: arial;"> #g</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <!--Weight-->
- <div class="progress rounded-0" style="height:1px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px; font-family: arial; margin-left: 20px;"><i>Weight</i><span style="font-family: arial;"> #g</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <!--Gender-->
- <div class="progress rounded-0" style="height:2px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px;"><span style="font-family: arial black;"><strong>Gender</strong><span style="font-family: arial;"> #g</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <!--Race-->
- <div class="progress rounded-0" style="height:1px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px; font-family: arial; margin-left: 20px;">Race<span style="font-family: arial;"> #g</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <!--Species-->
- <div class="progress rounded-0" style="height:1px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px; font-family: arial; margin-left: 20px;">Species<span style="font-family: arial;"> #g</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <!--Role-->
- <div class="progress rounded-0" style="height:2px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <div class="row">
- <div class="col-6">
- <p style="text-align: left; color:#000; font-size: 17px;"><span style="font-family: arial black;"><strong>Role</strong><span style="font-family: arial;"> #mg</span></p>
- </div>
- <div class="col-6">
- <p style="text-align: right; color:#000; font-size: 17px;font-family: arial black;"><strong>info</strong></p>
- </div>
- </div>
- <div class="progress rounded-0" style="height:18px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <!--Design details-->
- <!--Primary color-->
- <div class="justify-content-between d-flex" style="text-align:left;font-family: arial; color:#000;font-size: 18px;"><strong>Primary color #mg</strong> <strong>info</strong></div>
- <div class="progress rounded-0" style="height:2px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <!--Secondary color-->
- <div class="justify-content-between d-flex" style="text-align:left;font-family: arial; color:#000;font-size: 18px;"><strong>Secondary color #mg</strong> <strong>info</strong></div>
- <div class="progress rounded-0" style="height:2px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <!--Hair color (can change)-->
- <div class="justify-content-between d-flex" style="text-align:left;font-family: arial; color:#000;font-size: 18px;"><strong>Hair color #mcg</strong> <strong>info</strong></div>
- <div class="progress rounded-0" style="height:2px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <!--Eye color (can change)-->
- <div class="justify-content-between d-flex" style="text-align:left;font-family: arial; color:#000;font-size: 18px;"><strong>Eye color #mg</strong> <strong>info</strong></div>
- <div class="progress rounded-0" style="height:7px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #000;"></div></div>
- <!--Extra notes-->
- <div class="card my-1 rounded-0 bg-faded" style="background-color:#FFF;">
- <p style="color:#000; font-family: arial;"><span style="font-size: 13px;"><strong>* </strong>Extra notes about the character go down here because idk what else would go down here tbh. Write as much as you want, box doesn't scroll but it'll move down.</span></p>
- </div>
- </div>
- <p style="text-align: right;font-size: 9px;"><span style="color:#000;">Code by</span> <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></p>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement