<!------------------------------------------------------------------
SKEB [F2U]
COLOURS (Names provided by color-name.com):
- Magic Potion: #f14668
- Bright Gray: #E6ECF0
- Black: #000
- White: #fff
- Gray: #eee
- C. Black: #111
- Raisin Black: #222
BOOTSTRAP:
- btn-primary
- btn-outline-secondary
- bg-secondary
- bg-success
- bg-warning
- text-secondary
- text-white
-------------------------------------------------------------------->
<div class="container p-0" style="font-family:Helvetica;">
<!-- HEADER -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3 justify-content-center" style="min-height:170px;
background-image:url(https://images.unsplash.com/photo-1535350356005-fd52b3b524fb?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:cover;">
<!-- ICON (MOBILE) -->
<div class="hidden-md-up col-6 p-0 mx-auto">
<div class="card p-2 border-0" style="border-radius:100px; background-color:#fff;">
<div class="card border-0" style="height:150px; border-radius:100px;
background-image:url(https://images.unsplash.com/photo-1579187707643-35646d22b596?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
backgorund-position:center;"></div>
</div>
</div>
</div>
</div>
<!-- ARTIST INFORMATION -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3" style="background-color:#fff; color:#000;">
<div class="row no-gutters">
<!-- ICON (PC) -->
<div class="hidden-md-down col-md-2 p-0">
<div class="card p-2 border-0" style="border-radius:100px; background-color:#fff; margin-top:-50px;">
<div class="card border-0" style="height:150px; border-radius:100px;
background-image:url(https://images.unsplash.com/photo-1579187707643-35646d22b596?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
backgorund-position:center;"></div>
</div>
</div>
<!-- INFORMATION BOX -->
<div class="col-md-10 p-0">
<!-- NAME (PC) -->
<div class="hidden-md-down card rounded-0 border-0 bg-transparent p-1" style="font-size:20px;">
<span>
<b>NAME</b>
<i class="fas fa-badge-check text-secondary"></i>
</span>
</div>
<!-- NAME (MOBILE) -->
<div class="hidden-md-up card rounded-0 border-0 bg-transparent p-1 text-center" style="font-size:20px;">
<span>
<b>NAME</b>
<i class="fas fa-badge-check text-secondary"></i>
</span>
</div>
<!-- BIO -->
<div class="card rounded-0 p-1 border-0 bg-transparent">
<p>Write bio here! You can write as much as you'd like, in theory, but it looks better shorter (1-2 lines on PC). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec rutrum massa. Mauris posuere neque at facilisis aliquet.</p>
</div>
<!-- BUTTONS; Adjust 'col-5' or 'col-6' to make them look decent on mobile. -->
<div class="row no-gutters mt-1">
<!-- 1 -->
<div class="col-md-2 col-5 m-1" style="font-size:13px;">
<div class="row no-gutters">
<!-- TITLE -->
<div class="col p-0">
<div class="card p-1 border-0 text-center" style="background-color:#222; color:#fff; border-radius:5px 0px 0px 5px;">
<p>Request</p>
</div>
</div>
<!-- STATUS; 'Seeking' is #f14668, 'Stopped' is #eee. -->
<div class="col p-0">
<div class="card p-1 h-100 border-0 text-center" style="background-color:#f14668; color:#fff; border-radius:0px 5px 5px 0px;">
<p>Seeking</p>
</div>
</div>
</div>
</div>
<!-- 2 -->
<div class="col-md-2 col-5 m-1" style="font-size:13px;">
<div class="row no-gutters">
<!-- TITLE -->
<div class="col p-0">
<div class="card p-1 border-0 text-center" style="background-color:#222; color:#fff; border-radius:5px 0px 0px 5px;">
<p>Hidden</p>
</div>
</div>
<!-- STATUS; 'OK' is #f14668, 'NG' is #eee. -->
<div class="col p-0">
<div class="card p-1 h-100 border-0 text-center" style="background-color:#eee; color:#000; border-radius:0px 5px 5px 0px;">
<p>NG</p>
</div>
</div>
</div>
</div>
<!-- 3 -->
<div class="col-md-2 col-5 m-1" style="font-size:13px;">
<div class="row no-gutters">
<!-- TITLE -->
<div class="col p-0">
<div class="card p-1 border-0 text-center" style="background-color:#222; color:#fff; border-radius:5px 0px 0px 5px;">
<p>NSFW</p>
</div>
</div>
<!-- STATUS; 'OK' is #f14668, 'NG' is #eee. -->
<div class="col p-0">
<div class="card p-1 h-100 border-0 text-center" style="background-color:#f14668; color:#fff; border-radius:0px 5px 5px 0px;">
<p>OK</p>
</div>
</div>
</div>
</div>
<!-- 4 (Brand) -->
<div class="col-md-2 col-6 m-1" style="font-size:13px;">
<div class="row no-gutters">
<!-- TITLE -->
<div class="col p-0">
<div class="card p-1 border-0 h-100 justify-content-center text-center" style="background-color:#222; color:#fff; border-radius:5px 0px 0px 5px;">
<i class="fab fa-x-twitter"></i>
</div>
</div>
<!-- USERNAME -->
<div class="col p-0">
<div class="card p-1 pl-2 pr-2 border-0 text-center" style="background-color:#111; color:#fff; border-radius:0px 5px 5px 0px;">
<a href="" class="text-reset">usernamehere</a>
</div>
</div>
</div>
</div>
<!-- 5 (Extra Link) -->
<div class="col-md-2 col-5 m-1" style="font-size:13px;">
<div class="row no-gutters">
<!-- TITLE -->
<div class="col p-0">
<div class="card p-1 border-0 h-100 justify-content-center text-center" style="background-color:#222; color:#fff; border-radius:5px 0px 0px 5px;">
<i class="fas fa-link"></i>
</div>
</div>
<!-- LINK -->
<div class="col p-0">
<div class="card p-1 pl-2 pr-2 border-0 text-center" style="background-color:#eee; color:#111; border-radius:0px 5px 5px 0px;">
<a href="/" class="text-reset">website.name</a>
</div>
</div>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE. -->
</div>
</div>
</div>
</div>
</div>
<!-- FOCAL SECTION -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3" style="background-color:#E6ECF0">
<div class="row no-gutters">
<!-- SIDEBAR -->
<div class="col-md-4 p-1">
<div class="card border-0 p-4" style="position:sticky; top:0px; background-color:#fff; color:#000; font-size:13px;">
<!-- REQUEST BUTTON -->
<a href="/" class="btn btn-primary" style="font-size:16px;">
<span>
<i class="fas fa-paper-plane mr-1"></i>
<b>New request</b>
</span>
</a>
<hr class="ml-n4 mr-n4 mb-4" style="border:0.5px solid #E6ECF0;">
<!-- INFORMATION -->
<span>
<b>Genre</b>
<span class="pull-right">Artwork</span>
</span>
<span>
<b>Min amount</b>
<span class="pull-right">USD$$$</span>
</span>
<hr class="ml-n2 mr-n2" class="border:1px solid #E6ECF0">
<span>
<b>Genre</b>
<span class="pull-right">Video</span>
</span>
<span>
<b>Min amount</b>
<span class="pull-right">USD$$$</span>
</span>
<hr class="ml-n2 mr-n2" class="border:1px solid #E6ECF0">
<span>
<b>Will draw</b>
<span class="pull-right">
Item
<br>Item
<br>Item
</span>
</span>
<span>
<b>Won't draw</b>
<span class="pull-right">
Item
<br>Item
<br>Item
</span>
</span>
<hr class="ml-n2 mr-n2" class="border:1px solid #E6ECF0">
<span>
<b>Response expiration days</b>
<i class="fas fa-info-circle tooltipster" title="The maximum amount of days it'll take to accept a request before being automatically denied."></i>
<span class="pull-right">##</span>
</span>
<span>
<b>Complete expiration days</b>
<i class="fas fa-info-circle tooltipster" title="The maximum amount of days it'll take to finish the request before it is completely refunded."></i>
<span class="pull-right">##</span>
</span>
<hr class="ml-n2 mr-n2" class="border:1px solid #E6ECF0">
<span>
<b>Response average days</b>
<i class="fas fa-info-circle tooltipster" title="The amount of days it takes for the artist to respond to a request."></i>
<span class="pull-right">##</span>
</span>
<span>
<b>Complete average days</b>
<i class="fas fa-info-circle tooltipster" title="The amount of days it takes to complete a request, on average."></i>
<span class="pull-right">##</span>
</span>
</div>
</div>
<!-- GALLERY -->
<div class="col-md-8 p-1">
<div class="card border-0 p-2" style="background-color:#fff; color:#000;">
<!-- TAB NAVIGATION -->
<ul class="nav row no-gutters text-center">
<li class="col-auto mr-1">
<a class="btn btn-outline-secondary rounded-0 border-0" style="border-radius:5px 5px 0px 0px;" data-toggle="tab" href="#portfolio">Portfolio</a>
</li>
<li class="col-auto">
<a class="btn btn-outline-secondary active rounded-0 border-0" style="border-radius:5px 5px 0px 0px;" data-toggle="tab" href="#works">Works</a>
</li>
</ul>
<hr class="ml-n3 mr-n3" style="border:0.5px solid #E6ECF0; margin-top:-1px;">
<div class="tab-content">
<!-- PORTFOLIO GALLERY -->
<div class="tab-pane fade" id="portfolio">
<div class="row no-gutters">
<div class="col-md-4 p-1">
<div class="card" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://images.unsplash.com/photo-1550895030-823330fc2551?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/gray-concrete-surface--odUkx8C2gg" class="btn rounded-0 border-0 h-100"></a>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://images.unsplash.com/photo-1529998274859-64a3872a3706?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/flight-of-birds-h2ZTEoRz0wY" class="btn rounded-0 border-0 h-100"></a>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://images.unsplash.com/photo-1484503793037-5c9644d6a80a?q=80&w=2865&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/ocean-with-wave-T9Gsevu_N8Y" class="btn rounded-0 border-0 h-100"></a>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE. -->
</div>
</div>
<!-- WORKS GALLERY -->
<div class="tab-pane fade active show" id="works">
<div class="row no-gutters">
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0; font-size:13px;
background-image:url(https://images.unsplash.com/photo-1550895030-823330fc2551?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/gray-concrete-surface--odUkx8C2gg" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-success text-white border-0 text-center p-1" style="position:absolute;">Artwork</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://images.unsplash.com/photo-1529998274859-64a3872a3706?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/flight-of-birds-h2ZTEoRz0wY" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-success text-white border-0 text-center p-1" style="position:absolute;">Artwork</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://64.media.tumblr.com/dd008b064a98336518ef5307828d030b/tumblr_mwvh17b8Ob1rsq9eyo2_r1_500.gif);
background-size:cover;
background-position:center;">
<a href="https://64.media.tumblr.com/dd008b064a98336518ef5307828d030b/tumblr_mwvh17b8Ob1rsq9eyo2_r1_500.gif" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-warning text-white border-0 text-center p-1" style="position:absolute;">Video</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0; font-size:13px;
background-image:url(https://images.unsplash.com/photo-1550895030-823330fc2551?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/gray-concrete-surface--odUkx8C2gg" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-success text-white border-0 text-center p-1" style="position:absolute;">Artwork</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://images.unsplash.com/photo-1529998274859-64a3872a3706?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/flight-of-birds-h2ZTEoRz0wY" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-success text-white border-0 text-center p-1" style="position:absolute;">Artwork</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://64.media.tumblr.com/dd008b064a98336518ef5307828d030b/tumblr_mwvh17b8Ob1rsq9eyo2_r1_500.gif);
background-size:cover;
background-position:center;">
<a href="https://64.media.tumblr.com/dd008b064a98336518ef5307828d030b/tumblr_mwvh17b8Ob1rsq9eyo2_r1_500.gif" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-warning text-white border-0 text-center p-1" style="position:absolute;">Video</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0; font-size:13px;
background-image:url(https://images.unsplash.com/photo-1550895030-823330fc2551?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/gray-concrete-surface--odUkx8C2gg" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-success text-white border-0 text-center p-1" style="position:absolute;">Artwork</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://images.unsplash.com/photo-1529998274859-64a3872a3706?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size:cover;
background-position:center;">
<a href="https://unsplash.com/photos/flight-of-birds-h2ZTEoRz0wY" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-success text-white border-0 text-center p-1" style="position:absolute;">Artwork</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card p-2" style="height:200px; border:3px solid #E6ECF0;
background-image:url(https://64.media.tumblr.com/dd008b064a98336518ef5307828d030b/tumblr_mwvh17b8Ob1rsq9eyo2_r1_500.gif);
background-size:cover;
background-position:center;">
<a href="https://64.media.tumblr.com/dd008b064a98336518ef5307828d030b/tumblr_mwvh17b8Ob1rsq9eyo2_r1_500.gif" class="btn rounded-0 border-0 h-100"></a>
<!-- IDENTIFICATION TAG -->
<div class="card w-50 bg-warning text-white border-0 text-center p-1" style="position:absolute;">Video</div>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE. -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT; DON'T REMOVE OR TAMPER. -->
<p class="text-center mt-2" style="font-family:monospace; font-size:10px;"><a href="/itemlabel">code by itemlabel.</a></p>
</div>
