southcodes/apple juice | character page.html

## apple juice | character page.html
<!--

    - character page 'apple juice' by skye southcodes.tumblr.com
    - modify as you please but please do not touch the credit
    - any errors? need help? have questions? let me know!
    southcodes.tumblr.com/inbox

    - normalize css by https://github.com/necolas
    - fonts by google
    - slide in sidebar by https://stackoverflow.com/a/62432099
    - icon font by http://fontawesome.io/icons/

 -->
<!DOCTYPE html>
<html>
<head>
	<title>{title}</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="{favicon}">
    <meta name="description" content="{MetaDescription}"/>

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Karla:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">

    <!-- normalize -->
    <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">

<style>
:root {
    --background:#fafafa;
    --boxes-background: #fff;
    --text:#333;
    --links: #8cb3db;
    --links-hover: #36608c;
    --borders:#eee;
    --icons: rgb(223, 155, 166);
    --selected-tab: rgb(237, 246, 250)
}

* {box-sizing: border-box;}

.tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
.tmblr-iframe:hover {opacity:.8;}

::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
::-webkit-scrollbar {width:6px}
::-webkit-scrollbar-track-piece{margin:5px 0;}

pre {font-family:consolas;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4- */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;}      /* Internet Explorer 5.5+ */

body, figure{margin:0;padding:0}
html{font: 14px 'Karla', sans-serif;}
body {font-size:14px;color:var(--text);background:var(--background);}
a {text-decoration: none;color:var(--links);word-break:break-word;}
a:hover {color:var(--links-hover);}
blockquote {margin:0;padding:0;}
img {max-width:100%;height: auto;display: block;margin: .7rem 0}
hr {border:0;border-top:1px solid var(--borders);margin:0;}
.divider {margin:1.5rem 0}

/* sidebar */

#hamburger-checkbox {display: none;}

.hamburger {
    font-size: 1rem;
    position: fixed;top:1.5rem;left:1.5rem;
    z-index: 99999999;
    cursor: pointer;
    background-color: var(--boxes-background);
    border: 1px solid var(--borders);
    border-radius: 5px;
    padding: .5rem;
    display: none;
}
.hamburger .fa-bars {
    color: var(--icons);
    font-size: 1.3rem;
}

#hamburger-checkbox:checked~#sidebar-navigation {
    transition: 2s ease;
    transform: translateX(0px);
}

#sidebar-navigation {
    position: fixed;left:0;top:0;bottom:0;
    width: 18rem;
    border-right: 1px solid var(--borders);
    height: 100vh;
    overflow: auto;
    transform: translateX(0);
    transition: 2s ease;
    background:var(--boxes-background);
    z-index: 999999;
}
.active {
    transition-duration: .7s;
    background-color: var(--selected-tab);
}

.tablinks-header {
    padding: 1.5rem;
    margin: 1rem 1rem 2rem;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.tablinks-header .navigation-image {
    margin: auto;
    width: 7rem;
    height: 7rem;
    border: .5rem solid transparent;
    outline: 1px solid var(--borders);
}

.tablinks-header .navigation-character {
    padding: 0;
    margin: 2rem 0 0;
    width: calc(100% );
}

.tablinks-character {
    padding: 1rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    margin:1rem 1rem 2rem;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}
.tablinks:after,.tablinks-header:after {
    content:'';
    position: absolute;left:0;right:0;
    bottom:-1rem;
    width: 100%;
    height: 1px;
    background-color: var(--borders);
}
.tablinks:last-of-type:after {display: none;}

.navigation-image {
    width:5rem;
    height:5rem;
    margin:0;
    display: block;
    border-radius: 100%;
    object-fit: cover;
}

.navigation-character {
    padding: 1rem;
    width: calc(100% - 5rem);
}

.navigation-character-name {
    font:600 1rem 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.navigation-character-subtitle {
    font-size: .95rem;
    font-style: italic;
    color:#aaa;
    letter-spacing: .04rem;
}

/* main wrappers */

main {
    width: calc(100% - 18rem);
    margin-left: 18rem;
    height: 100vh;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}
.wrapper {
    width: 45rem;
    max-width: 100%;
    margin:auto;
    height: 100%;
    overflow: auto;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

.tabcontent {
    width: 90%;
    height: 80vh;
    display: none;
    animation: fadeEffect 1s;
}
@keyframes fadeEffect {from {opacity: 0;}to {opacity: 1;}}

/* header introduction */

figure.header-image {
    display: inline-block;
    vertical-align:middle
}

.header-image {
    width: 15rem;
    height: 15rem;
    border-radius: 100%;
    margin:0 auto ;
}
img.header-image {
    width: 15rem;
    height: 15rem;
    display: block;
    margin:0 auto;
    border:15px solid var(--boxes-background);
    outline: 1px solid var(--borders);
}

#header-inside {
    width:calc(100% - 18rem);
    display:inline-block;
    vertical-align:middle;
    margin-left:2rem
}

#page-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

#header-navigation {
    margin:0 auto 0;
}

#header-navigation li{
    list-style: none;
    display: inline-block;
    vertical-align:middle;
    margin: 0 2rem 0 0
}

#header-navigation li a{
    color: var(--icons);
}

#page-description {
    line-height: 160%;
    letter-spacing: .03rem;
    padding: 2rem;
    background-color: var(--boxes-background);
    border: 1px solid var(--borders);
    margin-top: 3rem;
}

#header-links {
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--boxes-background);
    border: 1px solid var(--borders);
    text-align: center;
}

#header-links li {
    list-style: none;
    display: inline-block;

}

#header-links li:after {
    content: '\f111';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color:var(--icons);
    font-size: .5rem;
    margin:0 1.5rem;
    vertical-align: middle;
}

#header-links li:last-of-type:after {
    display: none;
}

/* characters */

/* character image */
.character-image {
    display: block;
    margin:0;
}
img.character-image {
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    border:.7rem solid var(--boxes-background);
    outline:1px solid var(--borders)

}
figure.character-image {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

/* character names */

#name-wrapper {width: calc(100% - 12rem);}

.character-name {
    font:500 2rem 'Montserrat', sans-serif;
}

.character-name-subtitle {
    margin-top: 1rem;
    font:400 .95rem 'Karla';
    font-style: italic;
    letter-spacing: .04rem;
    color:#aaa
}

/* details and info */

.details-info {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.details-info li {
    list-style: none;
    margin-bottom: 1.5rem;
}

.details-info li:last-of-type {
    margin-bottom: 0;
}
.details-info .fa-solid {
    color: var(--icons);
    margin-right: 1rem;
}

.character-details,.character-info {
    flex-grow: 1;
    margin:0 .5rem 2rem;
    /* max-width: calc(50% - 1rem); */
    padding: 2rem;
    background-color: var(--boxes-background);
    border: 1px solid var(--borders);
    max-height: 12rem;
    overflow: auto;
}

.character-details .no-icon {
    vertical-align:middle
}
.character-details .no-icon:before {
    content: '\f111';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 1rem;
    font-size: .5rem;
    vertical-align:middle;
    color: var(--icons);
}

/* character info */

/* progress bars */

.progress-bars-wrapper {

    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 600;
}

.progress-bar {
    width: 100%;
    height: 3px;
    background-color: #eee;
    position: relative;
    margin:1rem 0 2rem;
}

.progress-bar:last-of-type {
    margin-bottom: 0;
}

.progress-bar-fill {
    position: absolute;top:0;bottom:0;left:0;
    background-color: var(--icons);
}


/* biography */

.character-bio {
    padding: 2rem;
    background-color: var(--boxes-background);
    border: 1px solid var(--borders);
    margin-bottom: 2rem;
}

/* gallery */

.character-gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 2rem;
    background-color: var(--boxes-background);
    border: 1px solid var(--borders);
}

figure.gallery-image {
    width:8rem;
    height: 8rem;
}
img.gallery-image {
    width: 100%;
    height: 100%;
    display: block;
    margin:0;
    object-fit:cover
}


/* MEDIA */

@media only screen and (min-width:0) and (max-width:776px) {

    .hamburger {
        display: block;
    }

    main {
        width: 90%;
        margin-left:auto;
        margin-right:auto;
    }

    .wrapper {
        padding-right: 0
    }

    .tabcontent,.wrapper {
        width: 100%;
    }

    #sidebar-navigation {
        transform: translateX(-18rem);}
}

@media only screen and (min-width:500px) and (max-width:650px) {

    figure.gallery-image {
        width:6rem;
        height: 6rem;
    }
}


@media only screen and (min-width:0px) and (max-width:500px) {

    figure.gallery-image {
        width:4rem;
        height: 4rem;
    }
}

</style>


</head>
<body>

    <input type="checkbox" id="hamburger-checkbox">
    <label class="hamburger" for="hamburger-checkbox"><i class="fa-solid fa-bars"></i></label>


        <!--

            remember the ids of the character element and the characters sidebar links has to be the same to connect them

            example:

                the character sidebar links:

                <div class="tablinks tablinks-header" onclick="openCharacter(event, 'UNIQUE-ID')">

                the character element:

                <div id="defaultOpen" class="tablinks tablinks-character" onclick="openCharacter(event, 'UNIQUE-ID')">

         -->


    <nav id="sidebar-navigation">

        <!-- introduction sidebar button start -->
        <div id="defaultOpen"  class="tablinks tablinks-header" onclick="openCharacter(event, 'Introduction')">

                <!-- sidebar image -->
                <img src="IMAGE URL" alt="" class="navigation-image">

                <div class="navigation-character">
                    <div class="navigation-character-name">

                        <!-- sidebar title  -->
                        introduction
                    </div>
                </div>

        </div>

        <!-- introduction sidebar button end -->


        <!-- character sidebar button start -->

        <div class="tablinks tablinks-character" onclick="openCharacter(event, 'Character-One')">

                <!-- sidebar image -->
                <img src="IMAGE URL" alt="" class="navigation-image">

                <div class="navigation-character">

                    <!-- sidebar title -->
                    <p class="navigation-character-name">name</p>

                    <!-- sidebar subtitle -->
                    <p class="navigation-character-subtitle">subtitle</p>
                </div>

        </div>

        <!-- character sidebar button end -->


        <!-- character sidebar button start -->

        <div class="tablinks tablinks-character" onclick="openCharacter(event, 'Character-Two')">

                <!-- sidebar image -->
                <img src="IMAGE URL" alt="" class="navigation-image">

                <div class="navigation-character">

                    <!-- sidebar title -->
                    <p class="navigation-character-name">name</p>

                    <!-- sidebar subtitle -->
                    <p class="navigation-character-subtitle">subtitle</p>
                </div>

        </div>

        <!-- character sidebar button end -->

    </nav>


<main>

   <!-- introduction section start -->

    <div id="Introduction" class="tabcontent"><div class="wrapper">

            <!-- introduction image -->
            <figure class="header-image"><img src="IMAGE URL" alt="" class="header-image"></figure>

            <div id="header-inside">

                <h1 id="page-title">
                    <!-- page title -->
                    title
                </h1>

                <article id="header-navigation">

                    <!-- home link -->
                    <li><a href="/"><i class="fa-solid fa-home"></i></a></li>

                    <!-- inbox link -->
                    <li><a href="ask"><i class="fa-solid fa-envelope"></i></a></li>

                    <!-- dashboard link -->
                    <li><a href="https://www.tumblr.com/"><i class="fa-brands fa-tumblr"></i></a></li>
                </article>
            </div>

            <article id="page-description">
               <!-- page description -->
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel, ullam, harum atque nesciunt earum sit, reiciendis ea iure dicta quibusdam aut hic aperiam itaque. Reprehenderit cum magnam officia cupiditate? Beatae.</p>
            </article>

            <article id="header-links">
                <!-- links -->
                <li><a href="">link 1</a></li>

                <li><a href="">link 2</a></li>

                <li><a href="">link 3</a></li>
            </article>

    </div></div>
    <!-- introduction section end -->


      <!-- character start -->
      <div id="Character-One" class="tabcontent"><div class="wrapper">

        <figure class="character-image">

            <!-- character image -->
            <img src="IMAGE URL" alt="" class="character-image">

            <div id="name-wrapper">

                <div class="character-name">
                    <!-- character name -->
                    name
                </div>

                <div class="character-name-subtitle">
                    <!-- character subtitle -->
                    subtitle
                </div>
            </div>
        </figure>

        <section class="details-info">

            <!-- details start -->
            <article class="character-details">

                <li><i class="fa-solid fa-user"></i> name</li>

                <li><i class="fa-solid fa-calendar"></i> age</li>

                <li><i class="fa-solid fa-location"></i> location</li>

                <li><i class="fa-solid fa-transgender"></i> gender</li>

                <li class="no-icon">another thing</li>

            </article>
            <!-- details end -->

            <!-- info start -->
            <article class="character-info">

                <!-- likes start -->
                <div class="character-likes">

                    <!-- likes -->
                    <li><i class="fa-solid fa-thumbs-up"></i> likes</li>
                    <li><i class="fa-solid fa-thumbs-up"></i> likes</li>
                    <li><i class="fa-solid fa-thumbs-up"></i> likes</li>


                <hr class="divider">


                    <!-- dislikes -->
                    <li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
                    <li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
                    <li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
                </div>
                <!-- likes end -->


                <hr class="divider">


                <!-- progress bars start -->
                <div class="progress-bars-wrapper">

                    <!--
                        change the % number in /style="width: 60%;"/ to fill the bars
                     -->

                    stat 1
                    <div class="progress-bar"><div class="progress-bar-fill" style="width: 60%;"></div></div>

                    stat 2
                    <div class="progress-bar"><div class="progress-bar-fill" style="width: 30%;"></div></div>
                </div>
                <!-- progress bars end -->


            </article>
            <!-- info end -->

        </section>
        <!-- details and info -->

        <!-- bio start -->
        <article class="character-bio">

            <!-- character bio -->
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, beatae molestias quisquam, exercitationem placeat odit laboriosam eos ad ipsa quaerat illo laudantium debitis omnis repudiandae tenetur blanditiis. Architecto, id repudiandae!</p>
        </article>
        <!-- bio end -->

        <!-- gallery start -->
        <article class="character-gallery">

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

        </article>


      </div></div>
      <!-- character end -->


      <!-- character start -->
    <div id="Character-Two" class="tabcontent"><div class="wrapper">

        <figure class="character-image">

            <!-- character image -->
            <img src="IMAGE URL" alt="" class="character-image">

            <div id="name-wrapper">

                <div class="character-name">
                    <!-- character name -->
                    name
                </div>

                <div class="character-name-subtitle">
                    <!-- character subtitle -->
                    subtitle
                </div>
            </div>
        </figure>

        <section class="details-info">

            <!-- details start -->
            <article class="character-details">

                <li><i class="fa-solid fa-user"></i> name</li>

                <li><i class="fa-solid fa-calendar"></i> age</li>

                <li><i class="fa-solid fa-location"></i> location</li>

                <li><i class="fa-solid fa-transgender"></i> gender</li>

                <li class="no-icon">another thing</li>

            </article>
            <!-- details end -->

            <!-- info start -->
            <article class="character-info">

                <!-- likes start -->
                <div class="character-likes">

                    <!-- likes -->
                    <li><i class="fa-solid fa-thumbs-up"></i> likes</li>
                    <li><i class="fa-solid fa-thumbs-up"></i> likes</li>
                    <li><i class="fa-solid fa-thumbs-up"></i> likes</li>


                <hr class="divider">


                    <!-- dislikes -->
                    <li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
                    <li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
                    <li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
                </div>
                <!-- likes end -->


                <hr class="divider">


                <!-- progress bars start -->
                <div class="progress-bars-wrapper">

                    <!--
                        change the % number in /style="width: 60%;"/ to fill the bars
                     -->

                    stat 1
                    <div class="progress-bar"><div class="progress-bar-fill" style="width: 60%;"></div></div>

                    stat 2
                    <div class="progress-bar"><div class="progress-bar-fill" style="width: 30%;"></div></div>
                </div>
                <!-- progress bars end -->


            </article>
            <!-- info end -->

        </section>
        <!-- details and info -->

        <!-- bio start -->
        <article class="character-bio">

            <!-- character bio -->
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, beatae molestias quisquam, exercitationem placeat odit laboriosam eos ad ipsa quaerat illo laudantium debitis omnis repudiandae tenetur blanditiis. Architecto, id repudiandae!</p>
        </article>
        <!-- bio end -->

        <!-- gallery start -->
        <article class="character-gallery">

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

            <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

        </article>


      </div></div>
      <!-- character end -->


</main>


<!-- do not touch -->
<div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>


<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->

<!-- icons font -->
<script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>

<script>
// $( document ).ready(function() {
// });

function openCharacter(evt, characterName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(characterName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
</script>
</body>
</html>
	<!--

	- character page 'apple juice' by skye southcodes.tumblr.com
	- modify as you please but please do not touch the credit
	- any errors? need help? have questions? let me know!
	southcodes.tumblr.com/inbox

	- normalize css by https://github.com/necolas
	- fonts by google
	- slide in sidebar by https://stackoverflow.com/a/62432099
	- icon font by http://fontawesome.io/icons/

	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>{title}</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" href="{favicon}">
	<meta name="description" content="{MetaDescription}"/>

	<!-- fonts -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Karla:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">

	<!-- normalize -->
	<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">

	<style>
	:root {
	--background:#fafafa;
	--boxes-background: #fff;
	--text:#333;
	--links: #8cb3db;
	--links-hover: #36608c;
	--borders:#eee;
	--icons: rgb(223, 155, 166);
	--selected-tab: rgb(237, 246, 250)
	}

	* {box-sizing: border-box;}

	.tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
	.tmblr-iframe:hover {opacity:.8;}

	::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
	::-webkit-scrollbar {width:6px}
	::-webkit-scrollbar-track-piece{margin:5px 0;}

	pre {font-family:consolas;
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4- */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word;} /* Internet Explorer 5.5+ */

	body, figure{margin:0;padding:0}
	html{font: 14px 'Karla', sans-serif;}
	body {font-size:14px;color:var(--text);background:var(--background);}
	a {text-decoration: none;color:var(--links);word-break:break-word;}
	a:hover {color:var(--links-hover);}
	blockquote {margin:0;padding:0;}
	img {max-width:100%;height: auto;display: block;margin: .7rem 0}
	hr {border:0;border-top:1px solid var(--borders);margin:0;}
	.divider {margin:1.5rem 0}

	/* sidebar */

	#hamburger-checkbox {display: none;}

	.hamburger {
	font-size: 1rem;
	position: fixed;top:1.5rem;left:1.5rem;
	z-index: 99999999;
	cursor: pointer;
	background-color: var(--boxes-background);
	border: 1px solid var(--borders);
	border-radius: 5px;
	padding: .5rem;
	display: none;
	}
	.hamburger .fa-bars {
	color: var(--icons);
	font-size: 1.3rem;
	}

	#hamburger-checkbox:checked~#sidebar-navigation {
	transition: 2s ease;
	transform: translateX(0px);
	}

	#sidebar-navigation {
	position: fixed;left:0;top:0;bottom:0;
	width: 18rem;
	border-right: 1px solid var(--borders);
	height: 100vh;
	overflow: auto;
	transform: translateX(0);
	transition: 2s ease;
	background:var(--boxes-background);
	z-index: 999999;
	}
	.active {
	transition-duration: .7s;
	background-color: var(--selected-tab);
	}

	.tablinks-header {
	padding: 1.5rem;
	margin: 1rem 1rem 2rem;
	position: relative;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	}

	.tablinks-header .navigation-image {
	margin: auto;
	width: 7rem;
	height: 7rem;
	border: .5rem solid transparent;
	outline: 1px solid var(--borders);
	}

	.tablinks-header .navigation-character {
	padding: 0;
	margin: 2rem 0 0;
	width: calc(100% );
	}

	.tablinks-character {
	padding: 1rem;
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	margin:1rem 1rem 2rem;
	border-radius: 4px;
	position: relative;
	cursor: pointer;
	}
	.tablinks:after,.tablinks-header:after {
	content:'';
	position: absolute;left:0;right:0;
	bottom:-1rem;
	width: 100%;
	height: 1px;
	background-color: var(--borders);
	}
	.tablinks:last-of-type:after {display: none;}

	.navigation-image {
	width:5rem;
	height:5rem;
	margin:0;
	display: block;
	border-radius: 100%;
	object-fit: cover;
	}

	.navigation-character {
	padding: 1rem;
	width: calc(100% - 5rem);
	}

	.navigation-character-name {
	font:600 1rem 'Montserrat', sans-serif;
	text-transform: uppercase;
	}

	.navigation-character-subtitle {
	font-size: .95rem;
	font-style: italic;
	color:#aaa;
	letter-spacing: .04rem;
	}

	/* main wrappers */

	main {
	width: calc(100% - 18rem);
	margin-left: 18rem;
	height: 100vh;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	}
	.wrapper {
	width: 45rem;
	max-width: 100%;
	margin:auto;
	height: 100%;
	overflow: auto;
	padding-right: 1rem;
	padding-bottom: 1rem;
	}

	.tabcontent {
	width: 90%;
	height: 80vh;
	display: none;
	animation: fadeEffect 1s;
	}
	@keyframes fadeEffect {from {opacity: 0;}to {opacity: 1;}}

	/* header introduction */

	figure.header-image {
	display: inline-block;
	vertical-align:middle
	}

	.header-image {
	width: 15rem;
	height: 15rem;
	border-radius: 100%;
	margin:0 auto ;
	}
	img.header-image {
	width: 15rem;
	height: 15rem;
	display: block;
	margin:0 auto;
	border:15px solid var(--boxes-background);
	outline: 1px solid var(--borders);
	}

	#header-inside {
	width:calc(100% - 18rem);
	display:inline-block;
	vertical-align:middle;
	margin-left:2rem
	}

	#page-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	}

	#header-navigation {
	margin:0 auto 0;
	}

	#header-navigation li{
	list-style: none;
	display: inline-block;
	vertical-align:middle;
	margin: 0 2rem 0 0
	}

	#header-navigation li a{
	color: var(--icons);
	}

	#page-description {
	line-height: 160%;
	letter-spacing: .03rem;
	padding: 2rem;
	background-color: var(--boxes-background);
	border: 1px solid var(--borders);
	margin-top: 3rem;
	}

	#header-links {
	margin-top: 3rem;
	padding: 2rem;
	background-color: var(--boxes-background);
	border: 1px solid var(--borders);
	text-align: center;
	}

	#header-links li {
	list-style: none;
	display: inline-block;

	}

	#header-links li:after {
	content: '\f111';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color:var(--icons);
	font-size: .5rem;
	margin:0 1.5rem;
	vertical-align: middle;
	}

	#header-links li:last-of-type:after {
	display: none;
	}

	/* characters */

	/* character image */
	.character-image {
	display: block;
	margin:0;
	}
	img.character-image {
	width: 10rem;
	height: 10rem;
	border-radius: 100%;
	border:.7rem solid var(--boxes-background);
	outline:1px solid var(--borders)

	}
	figure.character-image {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	}

	/* character names */

	#name-wrapper {width: calc(100% - 12rem);}

	.character-name {
	font:500 2rem 'Montserrat', sans-serif;
	}

	.character-name-subtitle {
	margin-top: 1rem;
	font:400 .95rem 'Karla';
	font-style: italic;
	letter-spacing: .04rem;
	color:#aaa
	}

	/* details and info */

	.details-info {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	}

	.details-info li {
	list-style: none;
	margin-bottom: 1.5rem;
	}

	.details-info li:last-of-type {
	margin-bottom: 0;
	}
	.details-info .fa-solid {
	color: var(--icons);
	margin-right: 1rem;
	}

	.character-details,.character-info {
	flex-grow: 1;
	margin:0 .5rem 2rem;
	/* max-width: calc(50% - 1rem); */
	padding: 2rem;
	background-color: var(--boxes-background);
	border: 1px solid var(--borders);
	max-height: 12rem;
	overflow: auto;
	}

	.character-details .no-icon {
	vertical-align:middle
	}
	.character-details .no-icon:before {
	content: '\f111';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 1rem;
	font-size: .5rem;
	vertical-align:middle;
	color: var(--icons);
	}

	/* character info */

	/* progress bars */

	.progress-bars-wrapper {

	text-transform: uppercase;
	font-size: .9rem;
	font-weight: 600;
	}

	.progress-bar {
	width: 100%;
	height: 3px;
	background-color: #eee;
	position: relative;
	margin:1rem 0 2rem;
	}

	.progress-bar:last-of-type {
	margin-bottom: 0;
	}

	.progress-bar-fill {
	position: absolute;top:0;bottom:0;left:0;
	background-color: var(--icons);
	}


	/* biography */

	.character-bio {
	padding: 2rem;
	background-color: var(--boxes-background);
	border: 1px solid var(--borders);
	margin-bottom: 2rem;
	}

	/* gallery */

	.character-gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 2rem;
	background-color: var(--boxes-background);
	border: 1px solid var(--borders);
	}

	figure.gallery-image {
	width:8rem;
	height: 8rem;
	}
	img.gallery-image {
	width: 100%;
	height: 100%;
	display: block;
	margin:0;
	object-fit:cover
	}


	/* MEDIA */

	@media only screen and (min-width:0) and (max-width:776px) {

	.hamburger {
	display: block;
	}

	main {
	width: 90%;
	margin-left:auto;
	margin-right:auto;
	}

	.wrapper {
	padding-right: 0
	}

	.tabcontent,.wrapper {
	width: 100%;
	}

	#sidebar-navigation {
	transform: translateX(-18rem);}
	}

	@media only screen and (min-width:500px) and (max-width:650px) {

	figure.gallery-image {
	width:6rem;
	height: 6rem;
	}
	}


	@media only screen and (min-width:0px) and (max-width:500px) {

	figure.gallery-image {
	width:4rem;
	height: 4rem;
	}
	}

	</style>


	</head>
	<body>

	<input type="checkbox" id="hamburger-checkbox">
	<label class="hamburger" for="hamburger-checkbox"><i class="fa-solid fa-bars"></i></label>


	<!--

	remember the ids of the character element and the characters sidebar links has to be the same to connect them

	example:

	the character sidebar links:

	<div class="tablinks tablinks-header" onclick="openCharacter(event, 'UNIQUE-ID')">

	the character element:

	<div id="defaultOpen" class="tablinks tablinks-character" onclick="openCharacter(event, 'UNIQUE-ID')">

	-->


	<nav id="sidebar-navigation">

	<!-- introduction sidebar button start -->
	<div id="defaultOpen" class="tablinks tablinks-header" onclick="openCharacter(event, 'Introduction')">

	<!-- sidebar image -->
	<img src="IMAGE URL" alt="" class="navigation-image">

	<div class="navigation-character">
	<div class="navigation-character-name">

	<!-- sidebar title -->
	introduction
	</div>
	</div>

	</div>

	<!-- introduction sidebar button end -->


	<!-- character sidebar button start -->

	<div class="tablinks tablinks-character" onclick="openCharacter(event, 'Character-One')">

	<!-- sidebar image -->
	<img src="IMAGE URL" alt="" class="navigation-image">

	<div class="navigation-character">

	<!-- sidebar title -->
	<p class="navigation-character-name">name</p>

	<!-- sidebar subtitle -->
	<p class="navigation-character-subtitle">subtitle</p>
	</div>

	</div>

	<!-- character sidebar button end -->



	<!-- character sidebar button start -->

	<div class="tablinks tablinks-character" onclick="openCharacter(event, 'Character-Two')">

	<!-- sidebar image -->
	<img src="IMAGE URL" alt="" class="navigation-image">

	<div class="navigation-character">

	<!-- sidebar title -->
	<p class="navigation-character-name">name</p>

	<!-- sidebar subtitle -->
	<p class="navigation-character-subtitle">subtitle</p>
	</div>

	</div>

	<!-- character sidebar button end -->

	</nav>


	<main>

	<!-- introduction section start -->

	<div id="Introduction" class="tabcontent"><div class="wrapper">

	<!-- introduction image -->
	<figure class="header-image"><img src="IMAGE URL" alt="" class="header-image"></figure>

	<div id="header-inside">

	<h1 id="page-title">
	<!-- page title -->
	title
	</h1>

	<article id="header-navigation">

	<!-- home link -->
	<li><a href="/"><i class="fa-solid fa-home"></i></a></li>

	<!-- inbox link -->
	<li><a href="ask"><i class="fa-solid fa-envelope"></i></a></li>

	<!-- dashboard link -->
	<li><a href="https://www.tumblr.com/"><i class="fa-brands fa-tumblr"></i></a></li>
	</article>
	</div>

	<article id="page-description">
	<!-- page description -->
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel, ullam, harum atque nesciunt earum sit, reiciendis ea iure dicta quibusdam aut hic aperiam itaque. Reprehenderit cum magnam officia cupiditate? Beatae.</p>
	</article>

	<article id="header-links">
	<!-- links -->
	<li><a href="">link 1</a></li>

	<li><a href="">link 2</a></li>

	<li><a href="">link 3</a></li>
	</article>

	</div></div>
	<!-- introduction section end -->


	<!-- character start -->
	<div id="Character-One" class="tabcontent"><div class="wrapper">

	<figure class="character-image">

	<!-- character image -->
	<img src="IMAGE URL" alt="" class="character-image">

	<div id="name-wrapper">

	<div class="character-name">
	<!-- character name -->
	name
	</div>

	<div class="character-name-subtitle">
	<!-- character subtitle -->
	subtitle
	</div>
	</div>
	</figure>

	<section class="details-info">

	<!-- details start -->
	<article class="character-details">

	<li><i class="fa-solid fa-user"></i> name</li>

	<li><i class="fa-solid fa-calendar"></i> age</li>

	<li><i class="fa-solid fa-location"></i> location</li>

	<li><i class="fa-solid fa-transgender"></i> gender</li>

	<li class="no-icon">another thing</li>

	</article>
	<!-- details end -->

	<!-- info start -->
	<article class="character-info">

	<!-- likes start -->
	<div class="character-likes">

	<!-- likes -->
	<li><i class="fa-solid fa-thumbs-up"></i> likes</li>
	<li><i class="fa-solid fa-thumbs-up"></i> likes</li>
	<li><i class="fa-solid fa-thumbs-up"></i> likes</li>


	<hr class="divider">


	<!-- dislikes -->
	<li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
	<li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
	<li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
	</div>
	<!-- likes end -->


	<hr class="divider">


	<!-- progress bars start -->
	<div class="progress-bars-wrapper">

	<!--
	change the % number in /style="width: 60%;"/ to fill the bars
	-->

	stat 1
	<div class="progress-bar"><div class="progress-bar-fill" style="width: 60%;"></div></div>

	stat 2
	<div class="progress-bar"><div class="progress-bar-fill" style="width: 30%;"></div></div>
	</div>
	<!-- progress bars end -->


	</article>
	<!-- info end -->

	</section>
	<!-- details and info -->

	<!-- bio start -->
	<article class="character-bio">

	<!-- character bio -->
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, beatae molestias quisquam, exercitationem placeat odit laboriosam eos ad ipsa quaerat illo laudantium debitis omnis repudiandae tenetur blanditiis. Architecto, id repudiandae!</p>
	</article>
	<!-- bio end -->

	<!-- gallery start -->
	<article class="character-gallery">

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	</article>


	</div></div>
	<!-- character end -->





	<!-- character start -->
	<div id="Character-Two" class="tabcontent"><div class="wrapper">

	<figure class="character-image">

	<!-- character image -->
	<img src="IMAGE URL" alt="" class="character-image">

	<div id="name-wrapper">

	<div class="character-name">
	<!-- character name -->
	name
	</div>

	<div class="character-name-subtitle">
	<!-- character subtitle -->
	subtitle
	</div>
	</div>
	</figure>

	<section class="details-info">

	<!-- details start -->
	<article class="character-details">

	<li><i class="fa-solid fa-user"></i> name</li>

	<li><i class="fa-solid fa-calendar"></i> age</li>

	<li><i class="fa-solid fa-location"></i> location</li>

	<li><i class="fa-solid fa-transgender"></i> gender</li>

	<li class="no-icon">another thing</li>

	</article>
	<!-- details end -->

	<!-- info start -->
	<article class="character-info">

	<!-- likes start -->
	<div class="character-likes">

	<!-- likes -->
	<li><i class="fa-solid fa-thumbs-up"></i> likes</li>
	<li><i class="fa-solid fa-thumbs-up"></i> likes</li>
	<li><i class="fa-solid fa-thumbs-up"></i> likes</li>


	<hr class="divider">


	<!-- dislikes -->
	<li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
	<li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
	<li><i class="fa-solid fa-thumbs-down"></i> dislikes</li>
	</div>
	<!-- likes end -->


	<hr class="divider">


	<!-- progress bars start -->
	<div class="progress-bars-wrapper">

	<!--
	change the % number in /style="width: 60%;"/ to fill the bars
	-->

	stat 1
	<div class="progress-bar"><div class="progress-bar-fill" style="width: 60%;"></div></div>

	stat 2
	<div class="progress-bar"><div class="progress-bar-fill" style="width: 30%;"></div></div>
	</div>
	<!-- progress bars end -->


	</article>
	<!-- info end -->

	</section>
	<!-- details and info -->

	<!-- bio start -->
	<article class="character-bio">

	<!-- character bio -->
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, beatae molestias quisquam, exercitationem placeat odit laboriosam eos ad ipsa quaerat illo laudantium debitis omnis repudiandae tenetur blanditiis. Architecto, id repudiandae!</p>
	</article>
	<!-- bio end -->

	<!-- gallery start -->
	<article class="character-gallery">

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	<figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>

	</article>


	</div></div>
	<!-- character end -->





	</main>


	<!-- do not touch -->
	<div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>


	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->

	<!-- icons font -->
	<script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>

	<script>
	// $( document ).ready(function() {
	// });

	function openCharacter(evt, characterName) {
	// Declare all variables
	var i, tabcontent, tablinks;

	// Get all elements with class="tabcontent" and hide them
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}

	// Get all elements with class="tablinks" and remove the class "active"
	tablinks = document.getElementsByClassName("tablinks");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}

	// Show the current tab, and add an "active" class to the button that opened the tab
	document.getElementById(characterName).style.display = "block";
	evt.currentTarget.className += " active";
	}

	document.getElementById("defaultOpen").click();
	</script>
	</body>
	</html>