Profile
<!-- Small Screen Profile by Exo-Comet -->
<!-- NOTE: Anytime you see a 'URLHERE' or 'LINKHERE', paste in the image url, YouTube url, etc -->
<!-- Content screen -->
<div id="carouselProfile" class="carousel carousel-fade slide" data-ride="false" data-touch="false" data-pause="true">
<div class="col-lg-6 col-md-8 mx-auto mb-3 px-0">
<div class="card p-2 bg-dark" style="border:5px solid rgba(255,255,255,0.2)">
<div class="card border-0 carousel-inner" style="height:300px;overflow:auto">
<!-- Carousel slide 1 - Basic Info -->
<div class="carousel-item py-1 px-2 active" style="transition:0.3s">
<div class="row mx-n1">
<div class="col-lg-3 col-md-4 align-items-center px-1 order-md-1">
<div class="mx-auto w-100 card bg-faded p-1 rounded-circle" style="max-width:200px">
<div class="rounded-circle" style="background:url('URLHERE') no-repeat;background-size:cover;padding-bottom:100%"></div>
</div>
</div>
<div class="col align-items-center px-1 text-md-left text-center px-1">
<div class="w-100">
<h1 class="font-weight-light display-3">Name</h1>
<p>"A little quote or something!"</p>
<p>Write a short description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<hr class="w-100 mt-3 mb-2" style="border-width:2px">
<h1 class="font-weight-light text-center mb-2">Basic Info</h1>
<div class="row mx-n1">
<div class="col-md px-1">
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Full Name</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Gender</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Sexuality</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
</div>
<div class="col px-1">
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Age</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Species</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Occupation</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
</div>
</div>
<!-- Link to reference sheet -->
<div class="bg-faded text-center py-1 px-2">
<a href="">Reference Sheet!</a>
</div>
</div>
<!-- ============ -->
<!-- Carousel slide 2 - Personality -->
<div class="carousel-item py-1 px-2" style="transition:0.3s">
<h1 class="font-weight-light display-3 text-center mb-1">Personality</h1>
<div class="d-flex justify-content-center flex-wrap">
<span class="badge badge-primary m-1">MBTI</span>
<span class="badge badge-primary m-1">Alignment</span>
</div>
<div class="d-flex justify-content-center flex-wrap mb-1">
<span class="badge badge-success m-1">trait</span>
<span class="badge badge-warning m-1">trait</span>
<span class="badge badge-danger m-1">trait</span>
</div>
<hr class="w-100 my-3" style="border-width:2px">
<div class="row mx-n2">
<div class="col-md align-items-center mb-md-0 mb-2 px-2">
<div class="w-100">
<div class="d-flex flex-wrap">
<span class="flex-fill text-left mx-2 my-1">stat</span>
<span class="flex-fill text-right mx-2 my-1">stat</span>
</div>
<div class="progress mb-1 rounded-0" style="height:5px;">
<div class="progress-bar w-50"></div>
</div>
<div class="d-flex flex-wrap">
<span class="flex-fill text-left mx-2 my-1">stat</span>
<span class="flex-fill text-right mx-2 my-1">stat</span>
</div>
<div class="progress mb-1 rounded-0" style="height:5px;">
<div class="progress-bar w-50"></div>
</div>
<div class="d-flex flex-wrap">
<span class="flex-fill text-left mx-2 my-1">stat</span>
<span class="flex-fill text-right mx-2 my-1">stat</span>
</div>
<div class="progress mb-1 rounded-0" style="height:5px;">
<div class="progress-bar w-50"></div>
</div>
<div class="d-flex flex-wrap">
<span class="flex-fill text-left mx-2 my-1">stat</span>
<span class="flex-fill text-right mx-2 my-1">stat</span>
</div>
<div class="progress mb-1 rounded-0" style="height:5px;">
<div class="progress-bar w-50"></div>
</div>
</div>
</div>
<div class="col align-items-center px-2">
<div class="w-100" style="background: url('URLHERE') no-repeat center;background-size:cover;padding-bottom:75%"></div>
</div>
</div>
<hr class="w-100 my-3" style="border-width:2px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<!-- ============ -->
<!-- Carousel slide 3 - Story -->
<div class="carousel-item py-1 px-2" style="transition:0.3s">
<h1 class="font-weight-light display-3 text-center mb-1">Story</h1>
<hr class="w-100 mt-2 mb-3" style="border-width:2px">
<blockquote class="blockquote d-flex justify-content-between align-items-center flex-wrap bg-faded">
<span class="flex-fill text-left mx-2 my-1 text-left">Header 1</span>
<span class="flex-fill text-left mx-2 my-1 text-right text-secondary"><i class="fas fa-bookmark"></i></span>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<blockquote class="blockquote d-flex justify-content-between align-items-center flex-wrap bg-faded">
<span class="flex-fill text-left mx-2 my-1 text-left">Header 2</span>
<span class="flex-fill text-left mx-2 my-1 text-right text-secondary"><i class="fas fa-bookmark"></i></span>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<!-- ============ -->
<!-- Carousel slide 4 - Design and Gallery -->
<div class="carousel-item py-1 px-2" style="transition:0.3s">
<h1 class="font-weight-light display-3 text-center mb-1">Design and Gallery</h1>
<hr class="w-100 mt-2 mb-3" style="border-width:2px">
<div class="row mx-n1">
<div class="col-md-5 mb-md-0 mb-2 px-1">
<div class="w-100" style="background: url('URLHERE') no-repeat center;background-size:cover;padding-bottom:150%"></div>
</div>
<div class="col-md px-1">
<!-- Colour palette - replaces the hex codes -->
<div class="d-flex mb-2">
<div class="flex-fill p-2" style="background:#000000;"></div>
<div class="flex-fill p-2" style="background:#3b3b3b;"></div>
<div class="flex-fill p-2" style="background:#777777;"></div>
<div class="flex-fill p-2" style="background:#b8b8b8;"></div>
<div class="flex-fill p-2" style="background:#ffffff;"></div>
</div>
<div class="card bg-faded p-1 border-0 mb-2" style="border-width:2px">
<div class="card p-1" style="border-width:2px">
<div class="bg-faded d-flex flex-wrap mb-1">
<!-- Link to the designer of the character -->
<span class="flex-fill text-left mx-2 my-1 text-secondary">Designer</span>
<span class="flex-fill text-right mx-2 my-1"><a href="">Link</a></span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Worth</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Status</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
</div>
</div>
<div class="card bg-faded p-1 border-0 mb-2" style="border-width:2px">
<div class="card p-1" style="border-width:2px">
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Height</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Weight</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Build</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
<div class="bg-faded d-flex flex-wrap mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">Eye Colour</span>
<span class="flex-fill text-right mx-2 my-1">content</span>
</div>
</div>
</div>
<div class="card bg-faded p-1 border-0" style="border-width:2px">
<div class="card p-1" style="border-width:2px">
<h6 class="font-weight-normal mb-1">Design notes:</h6>
<ul class="mb-0">
<li>Notes</li>
<li>Notes</li>
<li>Notes</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="w-100 my-3" style="border-width:2px">
<!-- I've kept in the filler images - you can change the url('') to put in your own images. -->
<div class="table-responsive" style="overflow-x:auto;overflow-y:hidden;">
<div class="d-flex mx-n1">
<div class="col-auto text-center px-1">
<div class="m-1" style="width:150px">
<div class="w-100" style="background: url('https://images.unsplash.com/photo-1622276834268-a829d9bd551b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80') no-repeat center;background-size:cover;padding-bottom:100%"></div>
</div>
<a href="">Artist</a>
</div>
<div class="col-auto text-center px-1">
<div class="m-1" style="width:150px">
<div class="w-100" style="background: url('https://images.unsplash.com/photo-1587318685851-970aafff7089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80') no-repeat center;background-size:cover;padding-bottom:100%"></div>
</div>
<a href="">Artist</a>
</div>
<div class="col-auto text-center px-1">
<div class="m-1" style="width:150px">
<div class="w-100" style="background: url('https://images.unsplash.com/photo-1633322002053-beb184e6001d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80') no-repeat center;background-size:cover;padding-bottom:100%"></div>
</div>
<a href="">Artist</a>
</div>
<div class="col-auto text-center px-1">
<div class="m-1" style="width:150px">
<div class="w-100" style="background: url('https://images.unsplash.com/photo-1625420163017-fee19f67d928?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1178&q=80') no-repeat center;background-size:cover;padding-bottom:100%"></div>
</div>
<a href="">Artist</a>
</div>
</div>
</div>
</div>
<!-- ============ -->
<!-- Carousel slide 5 - Trivia -->
<div class="carousel-item py-1 px-2" style="transition:0.3s">
<h1 class="font-weight-light display-3 text-center mb-1">Trivia</h1>
<hr class="w-100 mt-2 mb-3" style="border-width:2px">
<div class="row mx-n1 mb-2">
<div class="col-md px-1 mb-md-0 mb-2">
<div class="card bg-faded border-0 p-2">
<h6 class="font-weight-normal mb-1">Likes:</h6>
<ul class="fa-ul mb-0">
<li><span class="fa-li"><i class="fas fa-check"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>content</li>
</ul>
</div>
</div>
<div class="col-md px-1">
<div class="card bg-faded border-0 p-2">
<h6 class="font-weight-normal mb-1">Dislikes:</h6>
<ul class="fa-ul mb-0">
<li><span class="fa-li"><i class="fas fa-times"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-times"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-times"></i></span>content</li>
</ul>
</div>
</div>
</div>
<div class="card bg-faded border-0 p-2 mb-2">
<h6 class="font-weight-normal mb-1">Other:</h6>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="card bg-faded border-0 p-2">
<h6 class="font-weight-normal mb-1">Playlist:</h6>
<!-- Music player. Insert the video ID for a youtube video in the LINKHERE part (eg D9G1VOjN_84) -->
<div class="d-flex flex-wrap align-items-center mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">
<a href="" style="position:relative;">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/LINKHERE?modestbranding=1" title="YouTube video player" frameborder="0" style="opacity:.001;position:absolute;left:0;top:0;z-index:999;"></iframe>
<i class="fas fa-play" style="position:relative;"></i>
</a>
</span>
<span class="flex-fill text-right mx-2 my-1">
Song / Artist
</span>
</div>
<hr class="w-100 my-0">
<div class="d-flex flex-wrap align-items-center mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">
<a href="" style="position:relative;">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/LINKHERE?modestbranding=1" title="YouTube video player" frameborder="0" style="opacity:.001;position:absolute;left:0;top:0;z-index:999;"></iframe>
<i class="fas fa-play" style="position:relative;"></i>
</a>
</span>
<span class="flex-fill text-right mx-2 my-1">
Song / Artist
</span>
</div>
<hr class="w-100 my-0">
<div class="d-flex flex-wrap align-items-center mb-1">
<span class="flex-fill text-left mx-2 my-1 text-secondary">
<a href="" style="position:relative;">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/LINKHERE?modestbranding=1" title="YouTube video player" frameborder="0" style="opacity:.001;position:absolute;left:0;top:0;z-index:999;"></iframe>
<i class="fas fa-play" style="position:relative;"></i>
</a>
</span>
<span class="flex-fill text-right mx-2 my-1">
Song / Artist
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- This part is the controller! It all uses custom colours, and you do not need to change anything in order for the profile to work. However, I have left a comment for where you can change the main colour of the controller and the buttons on top. -->
<!-- Note: the colour I have used is #64f5cc, so if you want to change it, you'll need to change all instances of it to your desired colour.-->
<div class="col-lg-5 col-md-7 px-0 mx-md-auto mx-1 mb-3">
<div class="card pb-1 rounded-0 border-0 ml-4" style="width:85%;background-color:#343a40">
<div class="row mx-0 justify-content-around">
<div class="col-1 px-0 mt-n1">
<!-- Main colour (button) -->
<div class="p-1" style="border-radius:5rem 5rem 0 0;background:#64f5cc"></div>
</div>
<div class="col-1 px-0 mt-n1">
<!-- Main colour (button) -->
<div class="p-1" style="border-radius:5rem 5rem 0 0;background:#64f5cc"></div>
</div>
</div>
</div>
<div class="p-5" style="border-radius:0 0 0 5rem;position:absolute;bottom:-4px;left:-4px;height:50%;z-index:1;background-color:#343a40"></div>
<!-- Main colour (controller) -->
<div class="card border-0 p-3" style="border-radius:2px 2px 5rem 5rem;box-shadow: inset 0px -5px 15px 5px rgba(0,0,0,0.1);background:#64f5cc;position:relative;z-index:999">
<div class="row mx-n1 pl-1">
<div class="col-auto pr-3 pl-md-3 pl-1">
<div style="width:7px;height:28px;background-color:#343a40"></div>
</div>
<div class="col-3 align-items-center px-1">
<div class="w-75 my-auto rounded-circle p-1" style="background-color:#343a40">
<div class="rounded-circle" style="padding-bottom:calc(100%-2px);border:2px solid rgba(255,255,255,0.25)"></div>
</div>
</div>
<div class="col-auto justify-content-center flex-column px-1">
<!-- Basic info btn -->
<a class="carousel-control-next mx-auto" href="" data-toggle="tooltip" data-placement="top" title="Basic Info" data-target="#carouselProfile" data-slide-to="0" style="position:static;width:auto;opacity:1;color:#343a40">
<span class="fa-stack fa-1x" style="position:relative;color:#343a40">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-caret-up fa-stack-2x fa-2x" style="bottom:2px;color:rgba(255,255,255,0.25)"></i>
</span>
</a>
<div class="d-flex">
<!-- Personality btn -->
<a class="carousel-control-next mr-3" href="" data-toggle="tooltip" data-placement="top" title="Personality" data-target="#carouselProfile" data-slide-to="1" style="position:static;width:auto;opacity:1;color:#343a40">
<span class="fa-stack fa-1x" style="position:relative">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-caret-left fa-stack-2x fa-2x" style="left:-2px;color:rgba(255,255,255,0.25)"></i>
</span>
</a>
<!-- Story btn -->
<a class="carousel-control-next ml-2" href="" data-toggle="tooltip" data-placement="top" title="Story" data-target="#carouselProfile" data-slide-to="2" style="position:static;width:auto;opacity:1;color:#343a40">
<span class="fa-stack fa-1x" style="position:relative">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-caret-right fa-stack-2x fa-2x" style="left:2px;color:rgba(255,255,255,0.25)"></i>
</span>
</a>
</div>
<!-- Trivia btn -->
<a class="carousel-control-next mx-auto" href="" data-toggle="tooltip" data-placement="top" title="Trivia" data-target="#carouselProfile" data-slide-to="4" style="position:static;width:auto;opacity:1;color:#343a40">
<span class="fa-stack fa-1x" style="position:relative;color:#343a40">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-caret-down fa-stack-2x fa-2x" style="bottom:-2px;color:rgba(255,255,255,0.25);"></i>
</span>
</a>
</div>
<div class="col pl-1 pr-0">
<!-- Design and Gallery btn -->
<a class="carousel-control-next mt-3" href="" data-toggle="tooltip" data-placement="top" title="Design and Gallery" data-target="#carouselProfile" data-slide-to="3" style="position:static;opacity:1;color:#343a40;min-width:2em">
<span class="fa-stack fa-1x">
<i class="fas fa-square fa-stack-2x" style=color:#343a40></i>
<i class="fas fa-circle fa-stack-1x" style="color:rgba(255,255,255,0.25)"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Credit, please do not remove! -->
<div class="text-center mt-3">
<a href="https://toyhou.se/Exo-Comet" data-toggle="tooltip" data-placement="top" title="Profile by Exo-Comet"><i class="fad fa-meteor"></i></a>
</div>
Recent Images
No images.