CUSTOM 018 | RavioliRobott
created by:SparklyCodes
HTMLCustom ColorsCharacterMiscellaneous
Copy
<!--
F2U - CHARACTER CODE: CUSTOM 018 | RavioliRobott
by SparklyCodes @ Toyhou.se
Make sure to read all the rules and instructions!
-- TOS --
1. Turn WYSIWYG off when coding. Even after you're done.
1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
3. Use on TH only.
4. Do not redistribute.
5. Do not remove credit.
6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
7. Free to use as reference, credit in this case isn't required but appreciated!
-- RESOURCES --
#2881F5 >> accent
#ffffff >> white
#161616 >> text
#E3E3E5 >> light gray
#F0F5FA >> light blue backgrounds
-->
<div class="mx-auto p-1 row no-gutters" style="max-width: 1000px; background: #ffffff; color: #161616;">
<!-- ............................. LEFT - intro -->
<div class="p-3 col-lg-4 flex-column justify-content-around">
<!-- rating -->
<div class="flex-row">
<h1 class="display-1" style="font-weight: 900">
4.0
</h1>
<h3>/5</h3>
</div>
<div>
<p class="my-0">Overall quality based on <u>40 ratings</u></p>
<h1 class="my-1 display-4" style="font-weight: 900">BIG TEXT</h1>
<p class="my-0">Professor in the <u style="font-weight: 500">XYZ department</u> at <u style="font-weight: 500">XYZ university</u></p>
</div>
<!-- row -->
<div class="mt-3 row no-gutters text-center">
<div class="col">
<h1 class="mb-2 display-4" style="font-weight: 900;">90%</h1>
<p>Would take again</p>
</div>
<div class="col-auto">
<div class="h-100" style="border-left: 2px solid"></div>
</div>
<div class="col">
<h1 class="mb-2 display-4" style="font-weight: 900;">3.5</h1>
<p>Level of Difficulty</p>
</div>
</div>
</div>
<!-- ............................. RIGHT - rating bars -->
<div class="p-3 col-lg-8"> <div class="p-3" style="background: #F0F5FA;">
<h1>Rating Distribution</h1>
<!-- CHANGE BAR WIDTH:
locate 'width:' property and change its value -->
<!-- AWESOME -->
<div class="mb-3 row no-gutters align-items-center font-weight-bold">
<!-- title -->
<div class="col-lg-2 col-sm-3 text-sm-right text-center">
Awesome 5
</div>
<!-- bar -->
<div class="px-2 col">
<div class="progress rounded-0" style="background: #E3E3E5; height: 40px;">
<div class="h-100 progress-bar" style="background: #2881F5; width: 100%;"></div>
</div>
</div>
<!-- number of reviews -->
<div class="col-1 text-center">
25
</div>
</div>
<!-- GREAT -->
<div class="mb-3 row no-gutters align-items-center font-weight-bold">
<!-- title -->
<div class="col-lg-2 col-sm-3 text-sm-right text-center">
Great 4
</div>
<!-- bar -->
<div class="px-2 col">
<div class="progress rounded-0" style="background: #E3E3E5; height: 40px;">
<div class="h-100 progress-bar" style="background: #2881F5; width: 80%;"></div>
</div>
</div>
<!-- number of reviews -->
<div class="col-1 text-center">
16
</div>
</div>
<!-- GOOD -->
<div class="mb-3 row no-gutters align-items-center font-weight-bold">
<!-- title -->
<div class="col-lg-2 col-sm-3 text-sm-right text-center">
Good 3
</div>
<!-- bar -->
<div class="px-2 col">
<div class="progress rounded-0" style="background: #E3E3E5; height: 40px;">
<div class="h-100 progress-bar" style="background: #2881F5; width: 40%;"></div>
</div>
</div>
<!-- number of reviews -->
<div class="col-1 text-center">
9
</div>
</div>
<!-- OK -->
<div class="mb-3 row no-gutters align-items-center font-weight-bold">
<!-- title -->
<div class="col-lg-2 col-sm-3 text-sm-right text-center">
Ok 2
</div>
<!-- bar -->
<div class="px-2 col">
<div class="progress rounded-0" style="background: #E3E3E5; height: 40px;">
<div class="h-100 progress-bar" style="background: #2881F5; width: 10%;"></div>
</div>
</div>
<!-- number of reviews -->
<div class="col-1 text-center">
4
</div>
</div>
<!-- AWFUL -->
<div class="row no-gutters align-items-center font-weight-bold">
<!-- title -->
<div class="col-lg-2 col-sm-3 text-sm-right text-center">
Awful 1
</div>
<!-- bar -->
<div class="px-2 col">
<div class="progress rounded-0" style="background: #E3E3E5; height: 40px;">
<div class="h-100 progress-bar" style="background: #2881F5; width: 2%;"></div>
</div>
</div>
<!-- number of reviews -->
<div class="col-1 text-center">
1
</div>
</div>
</div> </div>
<!-- ............................. LEFT - tags -->
<div class="p-3 col-lg-4">
<!-- faux buttons -->
<div class="w-100 row no-gutters text-center">
<span class="p-3 px-4 col" style="background: #2881F5; color: #ffffff; font-size: 1.1em; border-radius: 30px;">
Rate <i class="ml-2 fa-solid fa-arrow-right"></i>
</span>
<span class="ml-3 p-3 px-4 col" style="border: 2px solid; font-size: 1.1em; border-radius: 30px; font-weight: 500;">
Compare
</span>
</div>
<!-- faux tags -->
<div class="mt-3 mx-n1 w-100 row no-gutters overflow-auto" style="max-height: 120px;">
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
GET READY TO READ
</span>
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
CARING
</span>
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
AMAZING
</span>
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
LOTS OF HOMEWORK
</span>
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
ACCESSIBLE OUTSIDE CLASS
</span>
</div>
</div>
<!-- ............................. RIGHT - links -->
<div class="p-3 col-lg-8">
<h3 class="ml-3 mt-lg-5">Check out similar professors on XYZ university</h3>
<div class="p-2 py-4 row no-gutters" style="background: #F0F5FA;">
<!-- professor -->
<div class="p-1 col-sm-4">
<a href="CHARLINK" class="btn btn-outline-secondary border-0 justify-content-center align-items-center">
<span class="mr-2 mb-0 py-1 px-2 d-inline-block" style="background: #2881F5; color: #ffffff; font-weight: 900; font-size: 1.5em;">
5.00
</span>
<span style="color: #161616;">
Name Here
</span>
</a>
</div>
<!-- professor -->
<div class="p-1 col-sm-4">
<a href="CHARLINK" class="btn btn-outline-secondary border-0 justify-content-center align-items-center">
<span class="mr-2 mb-0 py-1 px-2 d-inline-block" style="background: #2881F5; color: #ffffff; font-weight: 900; font-size: 1.5em;">
5.00
</span>
<span style="color: #161616;">
Name Here
</span>
</a>
</div>
<!-- professor -->
<div class="p-1 col-sm-4">
<a href="CHARLINK" class="btn btn-outline-secondary border-0 justify-content-center align-items-center">
<span class="mr-2 mb-0 py-1 px-2 d-inline-block" style="background: #2881F5; color: #ffffff; font-weight: 900; font-size: 1.5em;">
5.00
</span>
<span style="color: #161616;">
Name Here
</span>
</a>
</div>
</div>
</div>
<!-- ............................. BOTTOM - details -->
<div class="p-3 col-12">
<!-- ............ NAV BUTTONS -->
<ul class="pb-3 nav nav-pills row no-gutters text-center" style="font-size: 1.1em; font-weight: 500;">
<li class="mr-2 col-auto nav-item">
<a style="border-radius: 0; border: 2px solid; color: #161616; background: none;" data-toggle="tab" class="w-100 nav-link active" href="#courses">All Courses</a>
</li>
<li class="ml-2 col-auto nav-item">
<a style="border-radius: 0; border: 2px solid; color: #161616; background: none;" data-toggle="tab" class="w-100 nav-link" href="#info">Info</a>
</li>
</ul>
<!-- ............ NAV CONTENT -->
<div class="tab-content">
<!-- COURSES -->
<div class="tab-pane fade show active" id="courses">
<!-- COURSE -->
<div class="p-2 row no-gutters" style="background: #F0F5FA;">
<!-- course stat colors - replace hex codes
7AF8BE - green
FFF894 - yellow
FF876E - red
-->
<!-- STATS -->
<div class="p-lg-2 col-lg-auto row no-gutters">
<!-- stat -->
<div class="p-1 col-lg-12 col-6 text-center flex-column align-items-center">
<small style="font-weight: bold;">QUALITY</small>
<h1 class="mt-2 p-2 display-4 d-inline-block" style="font-weight: 900;
background: #7AF8BE;">5.0
</h1>
</div>
<!-- stat -->
<div class="p-1 col-lg-12 col-6 text-center flex-column align-items-center">
<small style="font-weight: bold;">DIFFICULTY</small>
<h1 class="mt-2 p-2 display-4 d-inline-block" style="font-weight: 900;
background: #7AF8BE;">3.0
</h1>
</div>
</div>
<!-- ABOUT -->
<div class="p-2 col-lg">
<h4 style="font-weight: 900">CLASS1A</h4>
<div class="my-2 ml-n2 row no-gutters" style="font-weight: 500;">
<p class="m-0 px-2 col-sm-auto">
For Credit: <b>Yes</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Attendance: <b>Not Mandatory</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Would Take Again: <b>Yes</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Grade: <b>A</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Textbook: <b>Yes</b>
</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
<!-- faux tags -->
<div class="mt-3 mx-n1 w-100 row no-gutters">
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
A TAG
</span>
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
A TAG
</span>
<!-- add more here -->
</div>
</div>
</div>
<!-- COURSE -->
<div class="mt-4 p-2 row no-gutters" style="background: #F0F5FA;">
<!-- course stat colors - replace hex codes
7AF8BE - green
FFF894 - yellow
FF876E - red
-->
<!-- STATS -->
<div class="p-lg-2 col-lg-auto row no-gutters">
<!-- stat -->
<div class="p-1 col-lg-12 col-6 text-center flex-column align-items-center">
<small style="font-weight: bold;">QUALITY</small>
<h1 class="mt-2 p-2 display-4 d-inline-block" style="font-weight: 900;
background: #FFF894;">2.0
</h1>
</div>
<!-- stat -->
<div class="p-1 col-lg-12 col-6 text-center flex-column align-items-center">
<small style="font-weight: bold;">DIFFICULTY</small>
<h1 class="mt-2 p-2 display-4 d-inline-block" style="font-weight: 900;
background: #FF876E;">5.0
</h1>
</div>
</div>
<!-- ABOUT -->
<div class="p-2 col-lg">
<h4 style="font-weight: 900">CLASS1B</h4>
<div class="my-2 ml-n2 row no-gutters" style="font-weight: 500;">
<p class="m-0 px-2 col-sm-auto">
For Credit: <b>Yes</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Attendance: <b>Not Mandatory</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Would Take Again: <b>Yes</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Grade: <b>A</b>
</p>
<p class="m-0 px-2 col-sm-auto">
Textbook: <b>Yes</b>
</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
<!-- faux tags -->
<div class="mt-3 mx-n1 w-100 row no-gutters">
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
A TAG
</span>
<span class="m-1 p-1 px-2 col-auto" style="background: #E3E3E5; font-weight: 500; border-radius: 30px;">
A TAG
</span>
<!-- add more here -->
</div>
</div>
</div>
<!-- ADD MORE COURSES ABOVE HERE -->
</div>
<!-- INFORMATION -->
<div class="tab-pane fade" id="info"> <div class="p-2" style="background: #F0F5FA;">
<!-- row -->
<div class="row no-gutters">
<!-- LEFT -->
<div class="p-2 col-lg-auto">
<!-- image -->
<img src="IMAGE_LINK" style="max-height: 150px; max-width: 150px;">
</div>
<!-- RIGHT -->
<div class="p-2 col-lg">
<h4 class="mb-3">NAME</h4>
<p class="m-1">
Pronouns: <b>They/them</b>
</p>
<p class="m-1">
Pronouns: <b>Jan 01st</b>
</p>
<p class="m-1">
Offered Classes: <b>CLASS1A, CLASS1B, CLASS1C</b>
</p>
</div>
</div>
<div class="p-2 overflow-auto" style="max-height: 300px;">
<p>This box will eventually scroll. Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
<p>Curabitur mattis pretium sodales. Nam pulvinar feugiat risus eget commodo. Sed id risus iaculis, venenatis metus dictum, feugiat leo. Aenean tempor rhoncus arcu, in ultricies sapien tempor et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam sollicitudin odio nec sem ultrices sagittis. Vestibulum accumsan augue hendrerit feugiat lacinia. Vivamus porttitor libero eu nulla rhoncus dapibus.</p>
<p>Pellentesque fermentum orci et tincidunt interdum. Pellentesque imperdiet risus metus, sit amet gravida augue feugiat vitae. Integer aliquet convallis nisl, et tincidunt magna varius vitae. Sed congue quam lectus, vel hendrerit mi tempor vitae. Nulla vel suscipit arcu. Aliquam vitae euismod elit. Vivamus a felis rhoncus, bibendum urna id, malesuada enim. Etiam a ex non lectus tempus aliquam. Praesent dapibus aliquam ultricies. Vestibulum tincidunt arcu sit amet enim malesuada bibendum at et dui. Aenean tristique augue a libero condimentum vulputate. Etiam iaculis faucibus blandit. Phasellus facilisis elit at vestibulum auctor. Quisque tellus libero, varius sed iaculis quis, lobortis ac dolor.</p>
</div>
</div> </div>
</div>
</div>
<!-- ..................... CREDITS - do not touch -->
<div class="col-12 text-center">
<a href="/SparklyCodes" title="Code by SparklyCodes" data-toggle="tooltip" style="color: #2881F5;">
<i class="fa-solid fa-code"></i>
</a>
<a href="/RavioliRobott" title="Custom for RavioliRobott" data-toggle="tooltip" style="color: #2881F5;">
<i class="fa-solid fa-crop"></i>
</a>
</div>
</div>