Custom for im
created by:AnsuCodes
Custom ColorsHTMLCharacter
Copy
<!-- ===========================================================================
Commission and layout by imberrose. She gave me permission
to make it FTU :D
If you have questions, need help or notice something is
off feel free to contact me
My socials: https://linktr.ee/ansuperope
Can:
- edit / frakenstein
- share with friends and other people
- can move or edit credits as long as it's somewhere
Cannot:
- use for AI trianing / learning
- upload to mass distribute it / upload as
a template for others to use. (If you want to
do that please let me know first.)
- delete credits
CODE LINK:
https://stor8.vercel.app/166
- - -
Use "Ctrl" + "F" to find, edit and replace things easier
CUSTOM COLORS
- TEXT: #000000
FONTS
- HEADERS: 'Times New Roman'
- NAME: 'Brush Script MT'
JUMP TO FILL OUT
- GENERAL: LOREM
- IMAGE: LOREM_IMAGE
- - -
RESOURCES
Live Code Editor (Shows How Code will Look as You Type, Recommend Using)
https://th.circlejourney.net/
Help Thread
https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-?page=0
Get Hex Color
https://imagecolorpicker.com/
Bootstrap Colors
https://getbootstrap.com/docs/4.0/utilities/colors/
Web Safe Fonts
https://www.w3schools.com/csSref/css_websafe_fonts.php
Icons
https://fontawesome.com/search
Bootstrap Spacing (px, py, my, mx, etc.)
https://getbootstrap.com/docs/4.0/utilities/spacing/
Columns / Widths (col, col-12, etc.)
https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns
Background Size
https://www.w3schools.com/cssref/css3_pr_background-size.php
Background Position
https://www.w3schools.com/Css/css_positioning.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Image Size (object-fit)
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Image Position (object-position)
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
============================================================================ -->
<!-- START CODE ================================================================
= mx-auto
= can delete. Will center code if you give it a width
=
= max-width:900px;
= changes how wide the code is. If you want it to take the entire screen then
= delete
=
= py-3
= top and bottom spacing between background image and conteent / text
= can change to be 1-5 or delete
=
= px-4
= left and right spacing between background image and conteent / text
= can change to be 1-5 or delete
=
= background-position:center center;
= changes where image is zoomed in on. Can change to be top, right, bottom,
= left or center. Only workds if background-size is cover
============================================================================ -->
<div class="mx-auto py-3 px-4" style="color:#000000; max-width:900px; background-size:cover; background-repeat:no-repeat;
background-position:center center;
background-image:url('LOREM_IMAGE');">
<!-- HEADER / RECIPE NUMBER ============================================
= display-2
= font size. Can change to be 1-4 with 1 being biggest. If you don't
= like the sizes you can delete and use font-size instead
=
= text-capitalize
= makes first letter of each word uppercase. Can delete
======================================================================== -->
<div class="display-2 text-center text-capitalize" style="font-family:'Times New Roman'; font-size:#px;">recipe #LOREM_NUM</div>
<hr style="background-color:#000000; height:1px;">
<!-- CONTENT =========================================================== -->
<div class="row no-gutters">
<!-- ===== LEFT SIDE - IMAGE + STARS ===============================
= col-12
= do NOT touch. Will make image take up entire row for mobile and
= medium devices
=
= col-lg-3
= changes width for computer / large devices. Can change to be 1-12
= right side will automatically adjust based off of what you put
==================================================================== -->
<div class="col-12 col-lg-3">
<!-- ========== IMAGE =========================================
= height:300px;
= changes height of image. Can change but you might need to
= change ingredients and preperations height too
=
= object-position:center center;
= changes where image is zoomed in on. Can change to be top,
= right, bottom, left or center. Only works if object-fit
= is cover
=
= alt=""
= mainly for screen readers but also for when image doesn't load
= write a description inside the quotes or you can leave it
= blank if you want screen reader to ignore image or don't want
= to put a description. Please do NOT delete
================================================================ -->
<div class="justify-content-center" style="border:2px solid #000000">
<img style="height:300px; object-fit:cover; object-position:center center;"
alt=""
src="LOREM">
</div>
<!-- ========== END IMAGE ====================================== -->
<!-- ========== STARS ==========================================
= mt-2
= adds top spacing between stars and border of image. Can change
= to be 1-5 or delete
=
= display-4
= font size. Can change to be 1-4 with 1 being biggest. If you
= don't like the sizes you can delete and use font-size instead
=
= fa-star
= icon. Can change if you don't want a star icon
=
= fa-solid
= makes star filled
=
= fa-regular
= makes star empty
================================================================ -->
<div class="mt-2 row no-gutters justify-content-center display-4" style="font-size:#px;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<!-- ========== END STARS ====================================== -->
</div>
<!-- ===== END LEFT SIDE - IMAGE + STARS =========================== -->
<!-- ===== RIGHT SIDE - NAME + INGREDIENTS + PREPERATION ===========
= col-12
= do NOT touch. Will make image take up entire row for mobile and
= medium devices
=
= col-lg
= changes width for computer / large devices. I don't recommend
= touching. Will automatically adjust to take up remaining space
= based off of width of left side
==================================================================== -->
<div class="col-12 col-lg ml-lg-4">
<!-- ========== NAME ==========================================
= mt-3
= top spacing for mobile and medium devices between name and star
= can change to be 1-5 or delete
=
= font-weight-bold
= makes text bold. Can delete
=
= ml-3
= space between name and character name. Can change to be 1-5
= or delete
================================================================= -->
<div class="mt-3 mt-lg-0 row no-gutters align-items-end">
<div class="col-auto display-4 text-capitalize font-weight-bold" style="font-family:'Times New Roman'; font-size:#px;">name</div>
<div class="col mb-1 ml-3 px-2 text-center text-capitalize" style="border-bottom:2px solid #000000; font-family:'Brush Script MT'; font-size:18px;">LOREM</div>
</div>
<!-- ========== END NAME ====================================== -->
<!-- ========== INGREDIENTS + PREPERATION SECTION ============= -->
<div class="row no-gutters">
<!-- ===== LEFT - INGREDIENTS ==============================
= col-12
= do NOT touch. Will make image take up entire row for
= mobile and medium devices
=
= col-lg
= changes width for computer / large devices. I don't
= recommend touching. Will automatically adjust to take up
= remaining space based off of width of preperation
=
= mt-3
= top spacing between ingredients and name. Can change to be
= 1-5 or delete
============================================================ -->
<div class="col-12 col-lg mt-3">
<div class="col-auto text-center text-capitalize font-weight-bold" style="font-family:'Times New Roman'; font-size:25px; border-bottom:2px solid #000000;">ingredients</div>
<!-- ========== LIST / INFO ============================
= ml-1 pl-4
= adds spacing to the left of bullet point. Can change
= to 1-5 or delete
=
= pr-3
= right spacing after text
=
= mt-3
= spacing ontop of list. Can change to 1-5 or delete
=
= px-2
= left and right spacing of text
=
= border-bottom:1px solid #000000;
= change bottom line. Changes height, style of line and
= color in that order
======================================================== -->
<ul class="ml-1 pl-4 pr-3" style="overflow:auto; height:240px;">
<li class="mt-3 px-2" style="border-bottom:1px solid #000000;">LOREM</li>
<li class="mt-3 px-2" style="border-bottom:1px solid #000000;">LOREM</li>
<li class="mt-3 px-2" style="border-bottom:1px solid #000000;">LOREM</li>
<li class="mt-3 px-2" style="border-bottom:1px solid #000000;">LOREM</li>
<!-- ===== add more above here =====================
<li class="mt-3 px-2" style="border-bottom:1px solid #000000;">LOREM</li>
==================================================== -->
</ul>
<!-- ========== END LIST / INFO ======================== -->
</div>
<!-- ===== END LEFT - INGREDIENTS ========================== -->
<!-- line -->
<div class="col-12 col-lg-auto mt-3" style="border:1px solid #000000;"></div>
<!-- ===== RIGHT - PREPERATION =============================
= col-12
= do NOT touch. Will make image take up entire row for
= mobile and medium devices
=
= col-lg-7
= changes width for computer / large devices. Can change
= to be 1-12. Width of ingredients will change based off of
= what you put
=
= mt-lg-3
= top spacing between preperations and name. Can change to
= be 1-5 or delete
============================================================ -->
<div class="col-12 col-lg-7 mt-lg-3">
<div class="col-auto text-center text-capitalize font-weight-bold" style="font-family:'Times New Roman'; font-size:25px; border-bottom:2px solid #000000;">preperations</div>
<!-- ========== INFO ===================================
= px-3
= left and right spacing after text
=
= mt-3
= spacing ontop of paragraph. Can change to 1-5 or delete
======================================================== -->
<div class="px-3" style="overflow:auto; height:240px;">
<p class="mt-2">LOREM</p>
<p class="mt-2">LOREM</p>
<!-- ===== add more above here =====================
<p class="mt-2">LOREM</p>
==================================================== -->
</div>
<!-- ========== END INFO =============================== -->
</div>
<!-- ===== END RIGHT - PREPERATION ========================= -->
</div>
<!-- ========== END INGREDIENTS + PREPERATION SECTION ========= -->
</div>
<!-- ===== END RIGHT SIDE - NAME + INGREDIENTS + PREPERATION ======= -->
</div>
<!-- END CONTENT ======================================================= -->
<!-- CREDITS - FEEL FREE TO MOVE OR EDIT BUT DON'T DELETE ============== -->
<div class="mt-1 text-right" style="opacity:.3;">
<a href="https://toyhou.se/Ansuperope" data-toggle="tooltip" title="Code by Ansuperope" style="color:#000000;">
<i class="fa-solid fa-trash fa-2xs"></i>
</a>
<a href="https://toyhou.se/imberrose" data-toggle="tooltip" title="Commission and Layout by imberrose" style="color:#000000;">
<i class="fa-solid fa-table-layout fa-2xs"></i>
</a>
</div>
<!-- END CREDITS - FEEL FREE TO MOVE OR EDIT BUT DON'T DELETE ========== -->
</div>
<!-- END CODE ============================================================== -->