Profile
09 | F2U Code
code by ano_
thanks for using my code!
- You may not remove the credit however you may move it around and edit it
- You may edit and modify the code however you'd like
- You may use my codes as templates but it must be F2U and you must include credits (unless you heavily edited it)
- Please do not redistribute the code as your own
- Please consider bumping/ commenting on my coding thread or just favoriting any codes you use!
- Full Term of Service here
<!--Tip:
Ctrl+F to find keywords;
URL HERE is for images
# is for links-->
<div class="card" style="background-color:#b3aca5; color:#2d1a14">
<!--Shop Name-->
<div class="card py-3 border-0 text-white" style="background-color: #6d6166; letter-spacing:2px; text-align:center; line-height:2.5; border-radius: 3px 3px 0px 0px">
<i class="far fa-coffee-togo"></i>Shop Name
</div>
<!--Background Image-->
<div style="background:url(URL HERE); background-size:cover; background-attachment:fixed;">
<div class="container-fluid">
<div class="row flex-column-reverse flex-md-row">
<!--Character Image-->
<div class="col-md-6">
<img src="URL HERE" class="tooltipster" title="Art by User">
</div>
<div class="col-md-1">
</div>
<!--Menu-->
<div class="col-md-5"><br><br>
<div class="card border-0 p-2 mx-3 bg-white" style="letter-spacing:1px;">
<span class="px-2" style="letter-spacing:2px; border-bottom: 1px solid; font-weight: lighter; font-size: 18px">
<i class="fas fa-burger-soda"></i> Shop Menu</span>
<!--Image Carousel-->
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!--
Page 1
-->
<div class="carousel-item active p-2">
<span>Cappuccinos
<span style="float:right">
<i class="fas fa-coins"></i> 10</span>
<blockquote style="font-size:inherit; font-weight:300; color:#584d4d" class="py-1 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote></span>
<span>Espresso
<span style="float:right">
<i class="fas fa-coins"></i> 10</span>
<blockquote style="font-size:inherit; font-weight:300; color:#584d4d" class="py-1 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote></span>
<span>Pumpkin Latte
<span style="float:right">
<i class="fas fa-coins"></i> 10</span>
<blockquote style="font-size:inherit; font-weight:300; color:#584d4d" class="py-1 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote></span>
<!--Page Number-->
<span style="float:right; border-right: 3px solid; font-weight: 600" class="px-1">1
</span></div>
<!--
Page 2
-->
<div class="carousel-item p-2">
<span>Macchiatos
<span style="float:right">
<i class="fas fa-coins"></i> 10</span>
<blockquote style="font-size:inherit; font-weight:300; color:#584d4d" class="py-1 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote></span>
<span>Caffè Mocha
<span style="float:right">
<i class="fas fa-coins"></i> 10</span>
<blockquote style="font-size:inherit; font-weight:300; color:#584d4d" class="py-1 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote></span>
<span>Iced Coffee
<span style="float:right">
<i class="fas fa-coins"></i> 10</span>
<blockquote style="font-size:inherit; font-weight:300; color:#584d4d" class="py-1 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote></span>
<!--Page Number-->
<span style="float:right; border-right: 3px solid; font-weight: 600" class="px-1">2
</span>
</div></div>
<!--Carousel Controls-->
<a class="carousel-control-prev" href="#carouselIndicators" data-slide="prev" style="margin-left:-55px">
<i class="fal fa-angle-left fa-3x text-light d-lg-block d-none"></i></a>
<a class="carousel-control-next" href="#carouselIndicators" data-slide="next" style="margin-right:-55px">
<i class="fal fa-angle-right fa-3x text-light d-lg-block d-none"></i></a>
<!--Carousel Control (Mobile)-->
<a class="carousel-control-prev d-sm-block d-lg-none" href="#carouselIndicators" data-slide="prev" style="margin-left:-40px">
<i class="fal fa-angle-left fa-3x text-light"></i></a>
<a class="carousel-control-next d-sm-block d-lg-none" href="#carouselIndicators" data-slide="next" style="margin-right:-40px">
<i class="fal fa-angle-right fa-3x text-light"></i></a>
</div>
</div>
</div></div></div>
<span><i class="fas fa-triangle text-white" style="font-size:1.5em; position: absolute; margin-top:-18px; left:30%"></i></span>
<!--Text Box-->
<div class="card py-3 px-1 border-0 bg-white" style="border-radius: 15px 15px 3px 3px">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="container-fluid py-2 px-2" style="height:200px">
<!--
Beginning Text
-->
<span style="letter-spacing:2px">
<i class="fas fa-comment-dots"></i> Hi there! What would you like to order?
</span>
<!--Option 1-->
<a data-toggle="collapse" href="#one" style="letter-spacing:1px; color: inherit; white-space: normal; line-height: inherit" class="btn btn-block btn-outline-secondary border-0 text-left">
<i class="far fa-chevron-right"></i> Coffee pls!
</a>
<!--Option 2-->
<a data-toggle="collapse" href="#two" style="letter-spacing:1px; color: inherit; white-space: normal; line-height: inherit" class="btn btn-block btn-outline-secondary border-0 text-left">
<i class="far fa-chevron-right"></i> Not thristy, sorry
</a>
<!--
Text Box
Option 1
-->
<div id="one" class="collapse w-100" style="position:absolute; top:0; margin-left: -8px;">
<div class="card border-0 bg-white py-2 px-2" style="z-index:1; height: 130px">
<span style="letter-spacing:2px;">Great choice!</span>
<!--Option 1-->
<a href="#" class="btn btn-block btn-outline-secondary border-0 text-left" style="color:inherit; letter-spacing: 1px; white-space: normal; line-height: inherit">
<i class="fas fa-comment-dollar"></i> Please pay here at the checkout!
</a>
<!--Option 2 (Back to Shop)-->
<a data-toggle="collapse" href="#one" style="letter-spacing:1px; color: inherit; white-space: normal; line-height: inherit" class="btn btn-block btn-outline-secondary border-0 text-left">
<i class="far fa-chevron-right"></i> Back to Shop
</a>
</div></div>
<!--
Text Box
Option 2
-->
<div id="two" class="collapse w-100" style="position:absolute; top:0; margin-left: -8px;">
<div class="card border-0 bg-white py-2 px-2" style="z-index:1; height: 130px">
<span style="letter-spacing:2px">Oh ok :( Come back if you need anything...</span>
<!--Option 1 (Back to Shop)-->
<a data-toggle="collapse" href="#two" style="letter-spacing:1px; color: inherit; white-space: normal; line-height: inherit" class="btn btn-block btn-outline-secondary border-0 text-left">
<i class="far fa-chevron-right"></i> Back to Shop
</a>
</div></div></div>
<!--Color Palette
> Note: The Coffee Meter doesn't
show on mobile to make it look neater
* If you want it to show, remove
"hidden-sm-down" on the next line-->
<div class="container-fluid hidden-sm-down" style="position: absolute; bottom:0; right:0">
<div class="row no-gutters">
<div class="col-2 px-1 display-4" style="font-size: inherit; border-left: 1px solid;">
Coffee Meter</div>
<div class="col-2 p-1" style="background-color: #2d1a14; border-radius: 25px 0px 0px 25px">
<i class="fas fa-mug text-white px-1"></i>
</div>
<div class="col-2 p-1" style="background-color: #584d4d">
</div>
<div class="col-2 p-1" style="background-color: #6e5146">
</div>
<div class="col-2 p-1" style="background-color: #9c8884">
</div>
<div class="col-2 p-1" style="background-color: #B3ACA5; border-radius: 0px 25px 25px 0px">
</div>
</div></div></div>
<!--Image Box 1-->
<div class="col-md-3">
<i class="fas fa-square fa-3x text-light" style="position: absolute; z-index: 1; opacity: 0.6; right:43%; transform: rotate(3deg); margin-top: -10px;"></i>
<div class="card p-1 py-2 my-1 bg-white rounded-0" style="transform: rotate(2deg)">
<img src="URL HERE" class="tooltipster" title="Image by User">
<!--Caption-->
<span class="p-2 py-1">
<i class="fas fa-coffee-togo"></i> Coffee caption!
<!--Like Icon-->
<span class="badge pull-right" style="background-color:#584d4d;">
3 <i class="fas fa-heart"></i>
</span></span>
</div>
<br class="d-lg-none d-sm-block">
</div>
<!--Image Box 2-->
<div class="col-md-3">
<i class="fas fa-square fa-3x text-light" style="position: absolute; z-index: 1; opacity: 0.6; right:43%; transform: rotate(-1deg); margin-top: -10px;"></i>
<div class="card p-1 py-2 my-1 bg-white rounded-0" style="transform: rotate(-1deg)">
<img src="URL HERE" class="tooltipster" title="Image by User">
<!--Caption-->
<span class="p-2 py-1">
<i class="fas fa-coffee-togo"></i> Coffee caption~
<!--Likes Icon-->
<span class="badge pull-right" style="background-color:#584d4d;">
5 <i class="fas fa-heart"></i>
</span></span>
</div></div>
</div></div>
</div></div></div>
<!--Credits (do not remove)-->
<br>
<div class="card border-0 py-2 px-1" style="background-color:#6d6166; height:30px;">
<span style="letter-spacing:7px">
<a href="https://toyhou.se/ano_2/characters/folder:2215267">
<i class="fas fa-coffee pull-right text-white tooltipster" title="Code by ano_"></i>
</a>
<a href="#">
<i class="fas fa-bookmark pull-right text-white tooltipster" title="Images Credits"></i>
</a>
</span>
</div>