Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- - commission for @mystxmomo 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
- - icon font by http://fontawesome.io/icons/
- - multiple popups https://jsfiddle.net/JKurcik/WGPhG/1124/
- - tabs within tabs https://stackoverflow.com/a/48081117
- - modified tabs + popups by https://egg.design/
- -->
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <title>{title}</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="{favicon}">
- <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=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
- <!-- normalize -->
- <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
- <style>
- :root {
- --background:#f5f5f5;
- --main-background:#fff;
- --popup-background:#fff;
- --text:#444;
- --links: #8cb3db;
- --links-hover: #36608c;
- --borders:#ccc;
- --icons: #3777bb;
- --accents: #d9e5ff;
- --popup-tabs-background:lightblue;
- --bio-links: lightblue
- }
- .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(--icons);}
- ::-webkit-scrollbar {width: 4px;margin:1rem 0}
- ::-webkit-scrollbar-track-piece{margin:0;}
- .popup .tab ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);width: 0;display: none;}
- .popup .tab ::-webkit-scrollbar {width:0;display: none;}
- .popup .tab ::-webkit-scrollbar-track-piece{margin:0;width: 0;display: none;}
- 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+ */
- * {margin: 0;padding: 0; box-sizing: border-box;word-break:break-word;}
- p {margin:1rem 0}
- body, figure{margin:0;padding:0}
- html{font: 16px 'Karla', sans-serif;background:var(--background)}
- body {font-size:1rem;color:var(--text);;}
- 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:0}
- hr {border:0;border-top:1px solid var(--borders);margin:0;}
- ol, ul, li {list-style-type:none;margin:0;padding:0;}
- button {border: none;outline: none;cursor: pointer;transition: 0.2s;background-color: transparent;font-family: inherit;color:var(--text)}
- /* main */
- main {
- width: 90vw;
- max-width: 60rem;
- min-height: 100vh;
- margin: auto;
- padding:5rem 0 0;
- background-color: var(--main-background);
- }
- /* title */
- h1 {
- position: relative;
- margin: 0;
- padding:4rem 0;
- text-align: center;
- text-transform: uppercase;
- font-weight: 700;
- letter-spacing: .06rem;
- }
- h1:after {
- content:'';
- position: absolute;
- inset:auto auto 45% auto;
- width: 1rem;
- margin-left: .7rem;
- aspect-ratio: 1 / 1;
- border-radius: 100%;
- background-color: var(--accents);
- }
- h1:before {
- content:'';
- position: absolute;
- inset:45% auto auto auto;
- width: 1rem;
- aspect-ratio: 1 / 1;
- margin-left:-2rem;
- border-radius: 100%;
- background-color: var(--accents);
- }
- /* main tabs */
- .main-tabs {
- text-align: center;
- }
- .main-tabs .tablinks {
- position: relative;
- margin-bottom: 5rem;
- padding: 1rem 1.5rem;
- border-bottom: 1px solid var(--borders);
- font-size: 1rem;
- text-transform: uppercase;
- font-weight: 700;
- letter-spacing: .03rem;
- }
- .relationship-tab-button {
- width: 47%;
- }
- .main-tabs .tablinks .fa-solid {
- margin-right: .8rem;
- color: var(--icons);
- }
- .main-tabs .active-tab{
- position: relative;
- border:1px solid var(--borders);
- border-bottom: 1px solid var(--background);
- }
- .active-tab {
- background-color: var(--accents);
- }
- /* tab content */
- .tabcontent {
- display: none;
- inset: 0;
- width: 100%;
- padding: 1rem;
- }
- .tabcontent.active {
- display: block;
- }
- #main-tab {
- display: none;
- }
- .tab-title {
- text-align: center;
- font-weight: 400;
- font-size: 1.7rem;
- }
- /* main characters */
- #main-characters-wrapper {
- display: flex;
- justify-content: space-evenly;
- flex-wrap: wrap;
- padding:5rem 0;
- }
- .main-character {
- position: relative;
- display: block;
- width: calc((100% / 3) - 4rem);
- z-index: 0;
- margin:0 2rem 4rem;
- }
- .main-character-image {
- width: 100%;
- }
- .main-character-name {
- position: absolute;
- inset: auto 0 10%;
- padding:.7rem .5rem;
- border-left: 0;
- border-right: 0;
- transition-duration: .3s;
- text-transform: capitalize;
- font-size: 1.1rem;
- font-weight: 600;
- font-family: 'Montserrat', sans-serif;
- line-height: 140%;
- background-color: rgba(255,255,255,.5);
- }
- .main-character:hover .main-character-name {
- opacity: 0;
- }
- /* popups */
- .popup {
- display: none;
- position: fixed;
- inset: 5vh auto;
- z-index: 99999;
- width: 90vw;
- max-width: 50rem;
- height: 90vh;
- overflow: auto;
- border: 1px solid var(--borders);
- border-radius: 4px;
- background:var(--popup-background);
- }
- .show {
- opacity: 1;
- transition: opacity 200ms ease-in-out;
- }
- .hide {
- opacity: 0;
- transition: opacity 200ms ease-in-out;
- z-index: -1;
- }
- .popup .tab {
- display: flex;
- justify-content: flex-end;
- height: 100%;
- transform: rotate(360deg);
- overflow: auto;
- writing-mode:vertical-rl;
- background:var(--popup-background);
- }
- .popup .tablinks {
- height: 25%;
- padding: .4rem 1.5rem;
- border-bottom: 1px solid var(--accents);
- border-left: 1px solid var(--borders);
- font: 600 .8rem 'montserrat', sans-serif;
- text-transform:uppercase;
- letter-spacing: .05rem;
- word-break: break-all;
- background-color: var(--popup-tabs-background);
- hyphens:auto;
- }
- .popup .tablinks:last-of-type {
- border-bottom: 0;
- }
- .popup .active-tab {
- background: var(--popup-background);
- border-left: 0;
- }
- .popup .cancel {
- position: fixed;
- inset:2rem 2rem auto auto;
- z-index: 999;
- cursor: pointer;
- }
- .popup .tabcontent {
- padding:2rem 0 2rem 2rem
- }
- /* main tab */
- .popup {
- display: flex;
- flex-flow: row;
- align-content: flex-start;
- }
- .popup .tab{
- position:sticky;
- top:0;
- align-self: flex-end;
- flex-shrink: 0;
- }
- .main-character-flex {
- display: flex;
- }
- figure.popup-main-character-image {
- width: 20rem;
- aspect-ratio: 1 / 1;
- flex-shrink: 0;
- }
- .main-character-bio {
- width: calc(100% - 21rem);
- height: 20rem;
- flex-shrink: 0;
- margin: 0 1rem;
- overflow: auto;
- padding-right: 1rem;
- }
- .main-character-bio p:first-of-type {
- margin-top: 0;
- }
- .popup-main-character-name {
- position:relative;
- margin: .8rem auto 1.8rem 3rem;
- font: 500 1.5rem 'montserrat', sans-serif;
- }
- .popup-main-character-name:before {
- content: '';
- position:absolute;
- inset: .4rem auto auto -2.5rem;
- width: .7rem;
- aspect-ratio: 1 / 1;
- border-radius: 100%;
- border:3px solid var(--popup-background);
- outline:1px solid var(--borders);
- background-color: lightblue;
- }
- .popup-main-character-links li {
- display: inline-block;
- margin:0 1rem 1rem 0;
- padding:.3rem .5rem;
- border: 1px solid var(--borders);
- border-radius: 4px;
- background-color: var(--accents);
- }
- .personality {
- width: 97%;
- margin:4rem 0 0;
- }
- .personality-title {
- margin-bottom: 2rem;
- font: 500 1.3rem 'montserrat', sans-serif;
- text-align: center;
- }
- .personality-title span {
- padding:0 .5rem;
- box-shadow: inset 0 -10px var(--accents);
- }
- .biography-tab-image-left,.biography-tab-image-right {
- width: auto;
- margin-bottom: 1rem;
- }
- .biography-tab-image-left {float: left;margin-right: 1rem;}
- .biography-tab-image-right {float: right;margin-left: 1rem;}
- /* biography and and backstory */
- .bio-backstory {
- margin-right: 2rem;
- }
- .bio-backstory h3 {
- margin-bottom: 2rem;
- font: 500 1.3rem 'montserrat', sans-serif;
- }
- .bio-backstory h3 span{
- padding:0 .5rem
- box-shadow: inset 0 -10px var(--accents);
- }
- /* relationships tab */
- .relationships-tab h3{
- font: 500 1.3rem 'montserrat', sans-serif;
- }
- .relationships-tab h3 span{
- padding:0 .5rem
- box-shadow: inset 0 -10px var(--accents);
- }
- .reationship-text {
- width: 97%;
- }
- .relationships-divider {
- width: 90%;
- max-width: 20rem;
- margin:6rem auto;
- }
- .relationship-character {
- display: flex;
- height: 15rem;
- overflow: auto;
- }
- figure.relationship-image {
- height: 15rem;
- flex-shrink: 0;
- aspect-ratio: 1 / 1;
- }
- img.relationship-image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .relationship-name {
- font:500 1.1rem 'montserrat', sans-serif;
- letter-spacing: .04rem;
- }
- .relationship-name::first-letter {
- font-weight: 900;
- font-size: 1.5rem;
- color: var(--accents);
- }
- .relationship-bio {
- width: 60%;
- height: 15rem;
- padding: 0 1rem;
- overflow: auto;
- }
- /* links, gallery and author's thoughts */
- .links-gallery h3{
- margin-bottom: 3rem;
- font:500 1.3rem 'montserrat', sans-serif;
- }
- .extra-notes {
- width: 95%;
- }
- .extra-notes-title {
- margin-top: 3rem;
- text-align: center;
- }
- .links-gallery span {
- padding:0 .5rem;
- box-shadow: inset 0 -10px var(--accents);
- }
- .links-tab-nav ul li {
- position: relative;
- margin: 0 1rem 1.5rem 0;
- padding-left: 1rem;
- }
- .links-tab-nav ul li a {
- margin-right: .5rem;
- font-size: 1.1rem;
- font-weight: 500;
- text-transform: uppercase;
- }
- .links-tab-nav ul li:before {
- content: '';
- position: absolute;
- inset: 6px auto auto -.3rem;
- width: .4rem;
- height: .4rem;
- margin-right: .5rem;
- border-radius: 100%;
- border: 2px solid var(--popup-background);
- outline: 1px solid var(--borders);
- background-color: var(--accents);
- }
- /* gallery */
- .gallery {
- display: flex;
- justify-content: space-between;
- width:95%;
- margin-top: 3rem;
- }
- figure.gallery-image {
- width: 30%;
- aspect-ratio: 1 / 1;
- }
- img.gallery-image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- /* minor character tab */
- .minor-flex {
- display: flex;
- justify-content: space-between;
- }
- .minor-character-wrapper {
- width: 47%;
- margin: 7rem 0 0;
- padding: 0 2rem
- }
- .character-name {
- margin:0 0;
- vertical-align: middle;
- font-family: 'Montserrat', sans-serif;
- font-weight: 600;
- }
- .character-name:before {
- content: '\f111';
- margin:0 1rem 0 0;
- border:3px solid var(--inner-background);
- vertical-align: middle;
- outline:1px solid var(--borders);
- border-radius: 100%;
- font-family: 'Font Awesome 5 Free';
- font-weight: 900;
- font-size: 1rem;
- color:var(--icons);
- }
- /* minor character subtitle */
- .character-subtitle {
- position: relative;
- margin:.7rem 0 1rem;
- padding-left: 2.2rem;
- font:400 1.1rem 'Karla', sans-serif;
- font-style: italic;
- color:var(--lighter-text);
- letter-spacing: .07rem;
- }
- .character-subtitle:before {
- content: '';
- position: absolute;left:0;top:50%;
- width:1.5rem;
- height:1px;
- background:var(--text);
- }
- .character-image-details-wrapper {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-between;
- margin-top: 4rem;
- }
- /* minor character image */
- figure.character-image{
- width:50%;
- border:7px solid var(--main-background);
- outline: 1px solid var(--borders);
- }
- img.character-image{
- width: 100%;
- height: auto;
- object-fit: cover;
- }
- /* character details */
- .character-details {
- width: 50%;
- aspect-ratio: 1 / 1;
- padding: 1rem;
- overflow:auto;
- list-style: none;
- }
- .character-details li{
- margin-bottom:1.3rem
- }
- .character-details li:last-of-type{
- margin-bottom:0
- }
- .character-details li:before {
- content: '\f111';
- font-family: 'Font Awesome 5 Free';
- font-weight: 900;
- margin-right: 1rem;
- font-size: .4rem;
- border:3px solid var(--inner-background);
- outline:1px solid var(--borders);
- border-radius: 100%;
- color:var(--icons);
- vertical-align: middle;
- }
- /* character about */
- .character-about {
- margin:3rem 0;
- line-height: 145%;
- }
- /* progress bars and stats */
- .links-and-stats-wrapper {
- display: flex;
- flex-flow: row wrap;
- justify-content:space-between;
- }
- .nav-stats-divider {
- width:1px;
- height:12rem;
- background-color: var(--borders);
- }
- /* character navigation */
- .character-navigation {
- flex-grow: 1;
- width:49%;
- height:12rem;
- padding: 1rem;
- overflow: auto;
- }
- /* tags */
- .character-tags {
- margin-top: 1.5rem;
- }
- .character-tags li{
- display: inline-block;
- margin:1rem 1rem 1rem 0;
- padding:.5rem;
- border:1px solid #eee;
- }
- /* links */
- .character-links {
- margin-bottom: 1.5rem;
- }
- .character-links li{
- margin:1rem 0;
- border-bottom: 1px solid #eee;
- padding-bottom: 1rem;
- }
- .character-links li:before{
- content: '\f111';
- margin-right: 1rem;
- font-family: 'Font Awesome 5 Free';
- font-weight: 900;
- font-size: .4rem;
- border:2px solid var(--inner-background);
- border-radius: 100%;
- outline:1px solid var(--borders);
- font-style: normal;
- color: var(--icons);
- }
- /* stats */
- .stats-wrapper {
- flex-grow: 1;
- width:49%;
- height:12rem;
- overflow: auto;
- list-style: none;
- padding: 0 2rem;
- }
- .stat-container {
- margin: 2rem 0;
- }
- .stats-name {
- font:600 .9rem 'Montserrat', sans-serif;
- text-transform: uppercase;
- margin-bottom: 1rem;
- }
- .stat-square {
- border-radius: 100%;
- width:1.1rem;
- max-width: 10%;
- background-color: #eee;
- aspect-ratio: 1 / 1;
- border:2px solid white;
- display: inline-block;}
- .stat-fill-1 .stat-square:nth-of-type(1),
- .stat-fill-2 .stat-square:nth-of-type(-n+2),
- .stat-fill-3 .stat-square:nth-of-type(-n+3),
- .stat-fill-4 .stat-square:nth-of-type(-n+4),
- .stat-fill-5 .stat-square:nth-of-type(-n+5),
- .stat-fill-6 .stat-square:nth-of-type(-n+6),
- .stat-fill-7 .stat-square:nth-of-type(-n+7),
- .stat-fill-8 .stat-square:nth-of-type(-n+8),
- .stat-fill-9 .stat-square:nth-of-type(-n+9),
- .stat-fill-10 .stat-square:nth-of-type(-n+10)
- {background:var(--icons);}
- /* gallery */
- .gallery {
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
- margin-top:2rem;
- }
- /* gallery images */
- figure.gallery-image {
- width: 9rem;
- margin:1rem 2rem;
- border:7px solid var(--inner-background);
- outline:1px solid var(--borders);
- aspect-ratio: 1 / 1;
- }
- img.gallery-image {
- width: 100%;
- object-fit: cover;
- aspect-ratio: 1 / 1;
- }
- /* music */
- .music-section {
- margin-top: 4rem;
- padding:0 2rem 2rem;
- }
- .music-section .song-image{
- width:6rem;
- height:6rem;
- object-fit: cover;
- margin-right: 2rem;
- border-radius: 100%;
- }
- .music-section div {margin:1rem 0}
- .song-name {
- font:700 1.2rem 'Montserrat', sans-serif;
- text-transform: uppercase;
- letter-spacing: .03rem;
- }
- .song-name:after {
- content: ' — ';
- font-weight: 400;
- color: var(--lighter-text);
- }
- .song-artist {
- text-transform: uppercase;
- font:600 .9rem 'Montserrat', sans-serif;
- letter-spacing: .04rem;
- font-style: italic;
- }
- .song-album {
- font-size: .9rem;
- color: var(--lighter-text);
- font-style: italic;
- letter-spacing: .03rem;
- }
- /* MEDIA */
- @media only screen and (min-width:0) and (max-width:900px) {
- .popup {
- display: block;
- }
- .popup .tab {
- display: flex;
- flex-flow: row;
- position: absolute;
- inset:0 0 auto 0;
- width: 100%;
- height: 5rem;
- transform: none;
- writing-mode:horizontal-tb;
- overflow: auto;
- background:var(--popup-background);
- }
- .popup .tablinks {
- width:25%;
- height: 100%;
- padding: .4rem 1.5rem;
- border-bottom: 1px solid var(--accents);
- border-left: 1px solid var(--borders);
- font: 600 .8rem 'montserrat', sans-serif;
- text-transform:uppercase;
- letter-spacing: .05rem;
- word-break: break-all;
- hyphens:auto;
- background-color: var(--popup-tabs-background);
- }
- .relationship-tab-button {
- width: auto;
- height:5rem!important;
- }
- .tabcontent {
- margin-top: 6rem;
- }
- .main-character-bio {
- flex-shrink: 0;
- width: calc(100% - 22rem);
- height: 20rem;
- margin: 0 1rem;
- padding-right: 1rem;
- overflow: auto;
- }
- .main-character-flex {
- display: block;
- }
- figure.popup-main-character-image {
- flex-shrink: 0;
- width: 20rem;
- aspect-ratio: 1 / 1;
- margin: auto;
- }
- .main-character-bio {
- width: 92%;
- height: 100%;
- flex-shrink: 0;
- margin: 2rem 1rem 0;
- padding-right: 0;
- overflow: auto;
- }
- .bio-backstory {
- width: 95%;
- margin-right: 0;
- padding-right: 2rem;
- }
- .personality {
- width:95%
- }
- .minor-flex {
- display: block;
- }
- .minor-character-wrapper {
- width: 100%;
- margin-bottom: 4rem;
- padding: 0 2rem;
- }
- }
- @media only screen and (min-width:0) and (max-width:1000px) {
- #main-characters-wrapper {
- display: block;
- padding:5rem 0;
- }
- .main-character {
- display: block;
- position: relative;
- width: 80%;
- margin:0 auto 4rem;
- flex-shrink: 0;
- z-index: 0;
- }
- }
- </style>
- </head>
- <body>
- <main>
- <h1>Character Masterlist</h1>
- <!-- character tabs -->
- <nav class="tab main-tabs">
- <button id="active-tab" class="active-tab tablinks" data-tab="main-character-tab"><i class="fa-solid fa-users"></i> main characters</button><button id="second-tab" class="tablinks" data-tab="minor-character-tab"><i class="fa-solid fa-list"></i> minor characters</button>
- </nav> <!-- character tabs -->
- <!-- main characterse tab -->
- <section id="main-character-tab" class="tabcontent active">
- <h2 class="tab-title">Main characters</h2>
- <section id="main-characters-wrapper">
- <!-- character start -->
- <button class="main-character" onClick="openPopup('character-one');"><figure class="main-character-image">
- <!-- main character image -->
- <img src="https://images.unsplash.com/photo-1561903288-c74f3f721e61?q=80&w=580&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="main-character-image">
- <span class="main-character-name">name Surname</span>
- </figure></button>
- <article id="character-one" class="popup hide"><i class="cancel fa-solid fa-x"></i>
- <section id="doel1" class="tabcontent active">
- <h3 class="popup-main-character-name">Character Name</h3>
- <div class="main-character-flex">
- <figure class="popup-main-character-image"><img src="https://images.unsplash.com/photo-1561903288-c74f3f721e61?q=80&w=580&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="main-character-image"></figure>
- <article class="main-character-bio">
- <p>bbb Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla illum quae nemo velit inventore iure quam facilis iste tenetur vero assumenda, unde, rerum sint ratione repellendus corrupti beatae consequatur excepturi!</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla illum quae nemo velit inventore iure quam facilis iste tenetur vero assumenda, unde, rerum sint ratione repellendus corrupti beatae consequatur excepturi!</p>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa officiis nobis, adipisci inventore dolor ad illum, unde sunt reprehenderit id nisi distinctio temporibus voluptas doloremque alias labore! Sunt, maxime accusamus?</p>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa officiis nobis, adipisci inventore dolor ad illum, unde sunt reprehenderit id nisi distinctio temporibus voluptas doloremque alias labore! Sunt, maxime accusamus?</p>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
- <nav class="popup-main-character-links"><ul>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- </ul></nav>
- </article>
- </div>
- <article class="personality">
- <h3 class="personality-title"><span>Personality</span></h3>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae porro rerum nisi quae. Eligendi omnis ut, nulla incidunt quod dolorum corrupti at ratione officiis facilis sit voluptates vitae. Magnam, tempora!</p>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae porro rerum nisi quae. Eligendi omnis ut, nulla incidunt quod dolorum corrupti at ratione officiis facilis sit voluptates vitae. Magnam, tempora!</p>
- </article>
- <div style="width: 1px;height: 2rem;"></div>
- </section>
- <section id="doel2" class="tabcontent bio-backstory">
- <h3><span>Biography & Backstory</span></h3>
- <!-- if you want the text to cut below an image add:
- <div style="clear: both;"></div>
- after the text you want to cut
- -->
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad tempora fugit nam incidunt, consequatur praesentium unde esse magnam labore suscipit ducimus ullam saepe adipisci iste tempore blanditiis, expedita omnis quo?</p>
- <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/300px_wide_placeholder.png" class="biography-tab-image-left">
- <p>111111111111 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad tempora fugit nam incidunt, consequatur praesentium unde esse magnam labore suscipit ducimus ullam saepe adipisci iste tempore blanditiis, expedita omnis quo?</p>
- <div style="clear: both;"></div>
- <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/450x300.jpg" class="biography-tab-image-right">
- <p>222222222Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad tempora fugit nam incidunt, consequatur praesentium unde esse magnam labore suscipit ducimus ullam saepe adipisci iste tempore blanditiis, expedita omnis quo?</p>
- <div style="clear:both;width: 1px;height: 2rem;"></div>
- </section>
- <section id="doel3" class="tabcontent relationships-tab">
- <h3 class="relationships-title"><span>Relationships</span></h3>
- <article class="reationship-text">
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate saepe laborum vero fuga voluptates alias quaerat vitae veniam ea tempora error rem ut aspernatur iusto dolores, animi officiis harum delectus.</p>
- </article>
- <hr class="relationships-divider" style="margin:4rem auto">
- <article class="relationship-character">
- <figure class="relationship-image"><img src="https://64.media.tumblr.com/2da9c2559b7af523c21003a55fe08530/12f7790505f5e288-33/s540x810/ab116b7faa54310a06eb338d6d269e032175bb57.pnj" alt="" class="relationship-image"></figure>
- <article class="relationship-bio">
- <h4 class="relationship-name">character name</h4>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- </article>
- </article>
- <hr class="relationships-divider">
- <article class="relationship-character">
- <figure class="relationship-image"><img src="https://64.media.tumblr.com/2da9c2559b7af523c21003a55fe08530/12f7790505f5e288-33/s540x810/ab116b7faa54310a06eb338d6d269e032175bb57.pnj" alt="" class="relationship-image"></figure>
- <article class="relationship-bio">
- <h4 class="relationship-name">character name</h4>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- </article>
- </article>
- <div style="width: 1px;height: 2rem;"></div>
- </section>
- <section id="doel4" class="tabcontent links-gallery">
- <h3><span>Links, gallery & author's thoughts</span></h3>
- <nav class="links-tab-nav"><ul>
- <li><a href="link">link name</a> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
- <li><a href="link">link name</a> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
- <li><a href="link">link name</a> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
- </ul></nav>
- <article class="gallery">
- <figure class="gallery-image"><img src="https://64.media.tumblr.com/589d9412e410a88f9de1c17afc2b3b2d/a6a6e21888a5ff52-85/s540x810/cde29e06d5d986098d19a03c0fffaf003bc8c4e6.jpg" alt="" class="gallery-image"></figure>
- <figure class="gallery-image"><img src="https://64.media.tumblr.com/589d9412e410a88f9de1c17afc2b3b2d/a6a6e21888a5ff52-85/s540x810/cde29e06d5d986098d19a03c0fffaf003bc8c4e6.jpg" alt="" class="gallery-image"></figure>
- <figure class="gallery-image"><img src="https://64.media.tumblr.com/589d9412e410a88f9de1c17afc2b3b2d/a6a6e21888a5ff52-85/s540x810/cde29e06d5d986098d19a03c0fffaf003bc8c4e6.jpg" alt="" class="gallery-image"></figure>
- </article>
- <article class="extra-notes">
- <h3 class="extra-notes-title"><span>Extra notes</span></h3>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat est optio, quae amet aperiam expedita consectetur voluptatibus architecto et. Unde iste culpa beatae dicta, eaque quo recusandae perferendis molestias vero.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat est optio, quae amet aperiam expedita consectetur voluptatibus architecto et. Unde iste culpa beatae dicta, eaque quo recusandae perferendis molestias vero.</p>
- <article class="extra-notes">
- <div style="width: 1px;height: 2rem;"></div>
- </section>
- <nav class="tab">
- <button class="tablinks active-tab" data-tab="doel1">main</button><button class="tablinks" data-tab="doel2">bio</button><button class="tablinks" data-tab="doel3" class="relationship-tab-button" lang="de">relationships</button><button class="tablinks" data-tab="doel4" lang="de">links<br>& gallery</button>
- </nav>
- </article>
- <!-- character end -->
- <!-- character start -->
- <button class="main-character" onClick="openPopup('character-two');"><figure class="main-character-image">
- <!-- main character image -->
- <img src="https://images.unsplash.com/photo-1561903288-c74f3f721e61?q=80&w=580&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="main-character-image">
- <span class="main-character-name">name Surname</span>
- </figure></button>
- <article id="character-two" class="popup hide"><i class="cancel fa-solid fa-x"></i>
- <section id="doel5" class="tabcontent active">
- <h3 class="popup-main-character-name">Character Name</h3>
- <div class="main-character-flex">
- <figure class="popup-main-character-image"><img src="https://images.unsplash.com/photo-1561903288-c74f3f721e61?q=80&w=580&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="main-character-image"></figure>
- <article class="main-character-bio">
- <p>bbb Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla illum quae nemo velit inventore iure quam facilis iste tenetur vero assumenda, unde, rerum sint ratione repellendus corrupti beatae consequatur excepturi!</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla illum quae nemo velit inventore iure quam facilis iste tenetur vero assumenda, unde, rerum sint ratione repellendus corrupti beatae consequatur excepturi!</p>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa officiis nobis, adipisci inventore dolor ad illum, unde sunt reprehenderit id nisi distinctio temporibus voluptas doloremque alias labore! Sunt, maxime accusamus?</p>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa officiis nobis, adipisci inventore dolor ad illum, unde sunt reprehenderit id nisi distinctio temporibus voluptas doloremque alias labore! Sunt, maxime accusamus?</p>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
- <nav class="popup-main-character-links"><ul>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- </ul></nav>
- </article>
- </div>
- <article class="personality">
- <h3 class="personality-title"><span>Personality</span></h3>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae porro rerum nisi quae. Eligendi omnis ut, nulla incidunt quod dolorum corrupti at ratione officiis facilis sit voluptates vitae. Magnam, tempora!</p>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae porro rerum nisi quae. Eligendi omnis ut, nulla incidunt quod dolorum corrupti at ratione officiis facilis sit voluptates vitae. Magnam, tempora!</p>
- </article>
- <div style="width: 1px;height: 2rem;"></div>
- </section>
- <section id="doel6" class="tabcontent bio-backstory">
- <h3><span>Biography & Backstory</span></h3>
- <!-- if you want the text to cut below an image add:
- <div style="clear: both;"></div>
- after the text you want to cut
- -->
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad tempora fugit nam incidunt, consequatur praesentium unde esse magnam labore suscipit ducimus ullam saepe adipisci iste tempore blanditiis, expedita omnis quo?</p>
- <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/300px_wide_placeholder.png" class="biography-tab-image-left">
- <p>111111111111 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad tempora fugit nam incidunt, consequatur praesentium unde esse magnam labore suscipit ducimus ullam saepe adipisci iste tempore blanditiis, expedita omnis quo?</p>
- <div style="clear: both;"></div>
- <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/450x300.jpg" class="biography-tab-image-right">
- <p>222222222Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad tempora fugit nam incidunt, consequatur praesentium unde esse magnam labore suscipit ducimus ullam saepe adipisci iste tempore blanditiis, expedita omnis quo?</p>
- <div style="clear:both;width: 1px;height: 2rem;"></div>
- </section>
- <section id="doel7" class="tabcontent relationships-tab">
- <h3 class="relationships-title"><span>Relationships</span></h3>
- <article class="reationship-text">
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate saepe laborum vero fuga voluptates alias quaerat vitae veniam ea tempora error rem ut aspernatur iusto dolores, animi officiis harum delectus.</p>
- </article>
- <hr class="relationships-divider" style="margin:4rem auto">
- <article class="relationship-character">
- <figure class="relationship-image"><img src="https://64.media.tumblr.com/2da9c2559b7af523c21003a55fe08530/12f7790505f5e288-33/s540x810/ab116b7faa54310a06eb338d6d269e032175bb57.pnj" alt="" class="relationship-image"></figure>
- <article class="relationship-bio">
- <h4 class="relationship-name">character name</h4>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- </article>
- </article>
- <hr class="relationships-divider">
- <article class="relationship-character">
- <figure class="relationship-image"><img src="https://64.media.tumblr.com/2da9c2559b7af523c21003a55fe08530/12f7790505f5e288-33/s540x810/ab116b7faa54310a06eb338d6d269e032175bb57.pnj" alt="" class="relationship-image"></figure>
- <article class="relationship-bio">
- <h4 class="relationship-name">character name</h4>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero dignissimos, ut autem officia delectus necessitatibus facere harum dolores labore repudiandae voluptatem, assumenda nobis ea quis nesciunt temporibus unde pariatur?</p>
- </article>
- </article>
- <div style="width: 1px;height: 2rem;"></div>
- </section>
- <section id="doel8" class="tabcontent links-gallery">
- <h3><span>Links, gallery & author's thoughts</span></h3>
- <nav class="links-tab-nav"><ul>
- <li><a href="link">link name</a> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
- <li><a href="link">link name</a> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
- <li><a href="link">link name</a> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
- </ul></nav>
- <article class="gallery">
- <figure class="gallery-image"><img src="https://64.media.tumblr.com/589d9412e410a88f9de1c17afc2b3b2d/a6a6e21888a5ff52-85/s540x810/cde29e06d5d986098d19a03c0fffaf003bc8c4e6.jpg" alt="" class="gallery-image"></figure>
- <figure class="gallery-image"><img src="https://64.media.tumblr.com/589d9412e410a88f9de1c17afc2b3b2d/a6a6e21888a5ff52-85/s540x810/cde29e06d5d986098d19a03c0fffaf003bc8c4e6.jpg" alt="" class="gallery-image"></figure>
- <figure class="gallery-image"><img src="https://64.media.tumblr.com/589d9412e410a88f9de1c17afc2b3b2d/a6a6e21888a5ff52-85/s540x810/cde29e06d5d986098d19a03c0fffaf003bc8c4e6.jpg" alt="" class="gallery-image"></figure>
- </article>
- <article class="extra-notes">
- <h3 class="extra-notes-title"><span>Extra notes</span></h3>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat est optio, quae amet aperiam expedita consectetur voluptatibus architecto et. Unde iste culpa beatae dicta, eaque quo recusandae perferendis molestias vero.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat est optio, quae amet aperiam expedita consectetur voluptatibus architecto et. Unde iste culpa beatae dicta, eaque quo recusandae perferendis molestias vero.</p>
- <article class="extra-notes">
- <div style="width: 1px;height: 2rem;"></div>
- </section>
- <nav class="tab">
- <button class="tablinks active-tab" data-tab="doel5">main</button><button class="tablinks" data-tab="doel6">bio</button><button class="tablinks" data-tab="doel7" class="relationship-tab-button" lang="de">relationships</button><button class="tablinks" data-tab="doel8" lang="de">links<br>& gallery</button>
- </nav>
- </article>
- <!-- character end -->
- </section> <!-- main-characters-wrapper -->
- </section> <!-- main characters tab -->
- <!-- minor character tab -->
- <section id="minor-character-tab" class="tabcontent"><div class="minor-flex">
- <!-- character start-->
- <article class="minor-character-wrapper">
- <!-- character name -->
- <h2 class="character-name">character name</h2>
- <!-- character subtitle -->
- <h3 class="character-subtitle">character subtitle</h3>
- <!-- image and details start -->
- <div class="character-image-details-wrapper">
- <!-- character image -->
- <figure class="character-image"><img src="https://64.media.tumblr.com/c1b114cfbcc9eab10f0401fa6b510dfa/0a11ce2231135349-05/s540x810/b93eac1a90d44ee21f577c17ea1e9e4eb937b21e.gifv" alt="" class="character-image"></figure>
- <!-- character details start -->
- <article class="character-details">
- <li>item</li>
- <li>item</li>
- <li>item</li>
- </article>
- <!-- character details end -->
- </div>
- <!-- image and details end -->
- <!-- character about start -->
- <article class="character-about">
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum porro harum impedit accusamus explicabo quas. Consequatur, magni minus! Sunt quam eum ea incidunt accusamus quia consequatur! Error architecto laudantium quas?</p>
- </article>
- <!-- character about end -->
- <!-- links and stats wrapper start -->
- <section class="links-and-stats-wrapper">
- <!-- character links and tags start -->
- <article class="character-navigation">
- <nav class="character-links">
- <!-- character links -->
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- </nav>
- <nav class="character-tags">
- <!-- character tags -->
- <li><a href="">tag </a></li>
- <li><a href="">tag</a></li>
- <li><a href="">tag</a></li>
- </nav>
- </article>
- <!-- character links and tags end -->
- <!-- divider between the navigation and the stats -->
- <hr class="nav-stats-divider">
- <!-- stats start -->
- <article class="stats-wrapper">
- <li class="stat-container">
- <!-- stat name -->
- <div class="stats-name">stat name 1</div>
- <!-- change number of 'stat-fill-2' to fill the bar-->
- <div class="stats-value stat-fill-2"><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div></div>
- </li>
- <li class="stat-container">
- <!-- stat name -->
- <div class="stats-name">stat name 2</div>
- <!-- change number of 'stat-fill-4' to fill the bar-->
- <div class="stats-value stat-fill-4"><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div></div>
- </li>
- </article>
- <!-- stats end -->
- </section>
- <!-- progress bar and stats wrapper end -->
- <!-- gallery start -->
- <article class="gallery">
- <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
- <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
- <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
- </article>
- <!-- gallery end -->
- <!-- music section start -->
- <article class="music-section">
- <!-- song image -->
- <img class="song-image" src="music cover image url" align="left"></img>
- <!-- song name -->
- <span class="song-name">song name</span>
- <!-- song artist -->
- <div class="song-artist">artist</div>
- <!-- song album -->
- <div class="song-album">album</div>
- </article>
- <!-- music section end -->
- </article>
- <!-- character end -->
- </div> <!-- minor flex --></section>
- </main> <!-- wrapper -->
- <!-- 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>
- <!-- icons font -->
- <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
- <script src="https://unpkg.com/@phosphor-icons/web"></script>
- <script>
- // stores default active tabs for popups
- const defaultTabs = Array.from(document.querySelectorAll('.tabcontent.active'));
- // listens for clicks on tablinks and cancel buttons
- document.addEventListener('click', (e) => {
- if (e.target.closest('.tablinks')) {
- const tabId = e.target.dataset.tab;
- if (!tabId) return;
- const parent = e.target.closest('.popup, .main-tabs')?.parentElement;
- if (parent == null) return;
- const tablinks = parent.querySelectorAll('.tablinks');
- const tabcontents = parent.querySelectorAll('.tabcontent');
- if (tablinks.length === 0 || tabcontents.length === 0) return;
- // Remove this if you want to keep popups open when switching the main tabs
- if (e.target.parentElement.closest('.main-tabs')) {
- closePopup();
- }
- clearActiveStates(parent);
- addActiveStates(parent, tabId, e.target);
- }
- if (e.target.closest('.cancel')) {
- closePopup();
- }
- })
- // clears active states from from tabs when switching between popups or main tabs
- function clearActiveStates(parent) {
- const tablinks = parent.querySelectorAll('.tablinks');
- const tabcontents = parent.querySelectorAll('.tabcontent');
- for (const tablink of tablinks) {
- tablink.classList.remove('active-tab');
- }
- for (const content of tabcontents) {
- content.classList.remove('active');
- }
- }
- // adds active states to selected tab and tablink
- function addActiveStates(parent, tabId, tablink) {
- const tabcontent = parent.querySelector(`#${ tabId }`);
- if (tabcontent) tabcontent.classList.add('active');
- if (tablink) tablink.classList.add('active-tab');
- }
- // opens popup and sets default tab
- function openPopup(id) {
- // close any open popups first
- closePopup();
- const popup = document.getElementById(id)
- if (popup == null) return;
- popup.style.display = '';
- const defaultTab = defaultTabs.find(tab => tab.closest(`#${ id }`));
- // get default tab id and link
- const defaultTabId = defaultTab?.id;
- const defaultTabLink = popup.querySelector(`.tablinks[data-tab="${defaultTabId}"]`);
- clearActiveStates(popup);
- addActiveStates(popup, defaultTabId, defaultTabLink);
- // clear existing timeout so animations don't overlap
- clearTimeout(popup.dataset.timeoutId);
- // set timeout for animations
- popup.dataset.timeoutId = setTimeout(() => {
- popup.classList.remove('hide');
- popup.classList.add('show');
- }, 200);
- }
- // closes all open popups
- function closePopup() {
- const popups = document.querySelectorAll('.popup');
- for (const popup of popups) {
- popup.classList.remove('show');
- popup.classList.add('hide');
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment