Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--THEME #4: AFTERIMAGE by @nonspace.
- Don't steal.
- Don't claim as your own.
- Don't use as base code.
- Editing for personal use is fine!-->
- <html>
- <head>
- <title>{Title}</title>
- <link rel="icon" type="image/png" href="{Favicon}">
- <!--FONTS-->
- <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128|Libre+Barcode+39+Text" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&subset=cyrillic,greek,hebrew,latin-ext,vietnamese" rel="stylesheet">
- <!--FONT AWESOME ICONS-->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
- <!--JQUERY-->
- <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
- <!--ISOTOPE PLUGIN https://isotope.metafizzy.co/ (for filtering)-->
- <script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
- <style type="text/css">
- /*SET GROUP COLORS*/
- /*This is where you can set the colours for every group. These will
- apply to:
- the triangles on the front card
- info card: traits & character data background
- the group legend at the bottom
- /*WANT MORE GROUPS/COLOURS?*/
- /*This will require a bit of knowledge of mostly CSS. You can add more
- variables as seen below. You'll also have to add these variables to
- the respective style groups at the bottom of the style, there's a
- headline. If you're having trouble with this let me know!
- Quick guide: https://nonspace.tumblr.com/post/167013254044/hi-there-im-trying-to-use-your-afterimage-theme */
- :root {
- /*GROUP 1*/
- --g1: #ff9600;
- /*GROUP 2*/
- --g2: #f7136f;
- /*GROUP 3*/
- --g3: #ff9600;
- /*GROUP 4*/
- --g4: #247677;
- /*GROUP 5*/
- --g5: #ff9600;
- /*ADDITIONAL COLOURS
- --g6: #ff9600;
- --g7: #ff9600;
- --g8: #ff9600;
- --g9: #ff9600;
- --g10: #ff9600;*/
- }
- html,
- body {
- padding: 0px;
- margin: 0px;
- font-family: 'Arimo', Helvetica, sans-serif;
- min-height: 100%;
- }
- body {
- overflow: auto;
- background: -webkit-linear-gradient(left top, #f1f1f1, #d6d9d6);
- /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
- /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
- /* For Firefox 3.6 to 15 */
- background: linear-gradient(to bottom right, #f1f1f1, #d6d9d6);
- /* Standard syntax */
- }
- #container {
- position: relative;
- margin: 5% auto;
- width: 891px;
- height: auto;
- vertical-align: center;
- }
- /*HEADER*/
- header {
- margin: 0px;
- position: relative;
- height: 150px;
- background: rgba(255, 255, 255, 0.3);
- }
- h1 {
- font-family: Helvetica, sans-serif;
- font-size: 50px;
- margin: 10px 0px;
- }
- header .sub {
- font-size: 30px;
- font-family: 'Libre Barcode 128';
- }
- article#desc {
- float: left;
- height: 100%;
- width: auto;
- left: 0;
- right: 0;
- margin: 0px auto;
- text-align: left;
- padding-left: 20px;
- }
- /*LINKS*/
- nav a {
- font-family: 'Helvetica';
- text-decoration: none;
- text-transform: uppercase;
- font-size: 11px;
- padding: 0 15px;
- color: #000;
- }
- nav a:first-child {
- padding-left: 0px;
- }
- article#desctxt {
- float: right;
- width: 450px;
- max-height: 96px;
- margin: 25px 17px;
- padding-right: 15px;
- text-align: justify;
- line-height: 140%;
- font-size: 12px;
- overflow-y: scroll;
- }
- article#desctxt b {
- text-transform: uppercase;
- }
- /*NEXT & PREV ARROWS*/
- #prev,
- #next {
- color: #cccccc;
- font-size: 25px;
- padding: 13px 10px;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -ms-transition: all 0.5s ease;
- transition: all 0.5s ease;
- }
- #prev:hover,
- #next:hover {
- color: #7a7a7a;
- font-size: 25px;
- padding: 13px 10px;
- cursor: pointer;
- }
- #next {
- float: right;
- }
- #prev {
- float: left;
- }
- /*CHARACTER CARD GALLERY*/
- #gallery {
- position: relative;
- padding: 45px 0px 20px;
- overflow-x: auto;
- overflow-y: hidden;
- height: 380px;
- white-space: nowrap;
- margin: 0px 0px 25px 0px;
- }
- #gallery-track {
- position: relative;
- width: auto;
- }
- /*CHARACTER BOXES*/
- .cbox {
- position: relative;
- height: 370px;
- width: 175px;
- display: inline-block;
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
- }
- .cbox:last-child {
- margin-right: -2px;
- }
- .cbox img {
- height: 370px;
- width: 175px;
- -webkit-filter: grayscale(100%);
- filter: grayscale(100%);
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- /*CHARACTER NAME*/
- .cname {
- position: absolute;
- height: 90px;
- width: 195px;
- right: 0;
- transform: rotate(-90deg) translate(0, -100%);
- transform-origin: 100% 0;
- display: table;
- z-index: 2;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .cname span {
- font-family: Helvetica;
- line-height: 78%;
- color: rgba(0, 0, 0, 0.4);
- font-weight: bold;
- text-transform: uppercase;
- display: table-cell;
- vertical-align: bottom;
- /*padding-bottom: 0px; adjust for positioning*/
- }
- .triangle {
- position: absolute;
- width: 0px;
- height: 0px;
- bottom: 0px;
- border-style: solid;
- border-width: 87.5px 87.5px 87.5px 87.5px;
- border-color: transparent transparent transparent transparent;
- z-index: 1;
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- /*CONTENT CARD TAB NAVIGATION*/
- .cfooter {
- position: absolute;
- top: -30px;
- width: 895px;
- height: 17;
- z-index: 2;
- right: 0;
- left: -180;
- text-align: center;
- }
- .cfooter a {
- color: #dbdbdb;
- margin: 0 2px;
- }
- /*CONTENT CARDS*/
- .ccard {
- position: relative;
- display: none;
- background: rgba(255, 255, 255, 0.3);
- width: 715px;
- height: 370px;
- padding: 0;
- vertical-align: top;
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
- transition-delay: 0s, 0s, 0.5s;
- }
- .ccontent {
- position: relative;
- width: 680px;
- height: 340px;
- margin: 15px auto;
- display: none;
- }
- /*BIO(1ST) TAB*/
- .cbio {
- position: relative;
- width: 510px;
- height: 305px;
- }
- .headline {
- position: relative;
- width: 440px;
- height: 80px;
- }
- .headline p {
- margin: 0;
- color: #7a7a7a;
- font-size: 12px;
- text-align: justify;
- word-wrap: break-word;
- white-space: normal;
- overflow: hidden;
- width: 440px;
- }
- h2 {
- font-family: helvetica;
- font-size: 30px;
- margin: 0;
- font-weight: normal;
- }
- /*first part of title*/
- h2 span {
- font-style: italic;
- font-weight: normal;
- color: #7a7a7a;
- }
- .flavorimg {
- position: absolute;
- top: 0;
- right: 3px;
- width: 180px;
- height: 340px;
- background-position: bottom right;
- background-size: 110%;
- background-repeat: no-repeat;
- -webkit-filter: grayscale(100%);
- filter: grayscale(100%);
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
- }
- .biocontent {
- position: relative;
- height: 240px;
- font-size: 14px;
- text-align: justify;
- line-height: 145%;
- margin-top: 20px;
- word-wrap: break-word;
- white-space: normal;
- overflow-y: auto;
- overflow-x: hidden;
- width: 450px;
- padding-right: 22px;
- }
- /*GRID LINKS*/
- .clinks {
- display: grid;
- position: absolute;
- right: 0;
- top: 0px;
- height: 80px;
- padding: 5px;
- width: 180px;
- grid-template-rows: repeat(2, 1fr);
- grid-template-columns: repeat(3, 1fr);
- grid-gap: 2px;
- }
- .clinks a {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 20px;
- color: #7a7a7a;
- background: #dbdbdb;
- text-decoration: none;
- }
- /*TRAITS*/
- .ctraits {
- height: 320px;
- position: absolute;
- right: 0;
- top: 105px;
- width: 180px;
- font-family: helvetica;
- text-align: left;
- line-height: 130%;
- font-size: 17px;
- padding-right: 5px;
- color: #fff;
- }
- .ctraits span {
- padding: 3px 10px;
- }
- .ctraits p {
- margin: 15px 0px;
- }
- /*INFO(2ND) TAB*/
- .cell1,
- .cell2 {
- height: auto;
- width: 200px;
- padding: 0 0 0 0;
- margin: 0;
- font-size: 14px;
- overflow: hidden;
- }
- .cell1 {
- float: left;
- }
- .cell2 {
- float: right;
- }
- .cell1 ul,
- .cell2 ul {
- margin: 0;
- padding: 0;
- }
- .cell1 li:first-child,
- .cell2 li:first-child {
- margin: 0;
- }
- .cell1 li,
- .cell2 li {
- list-style-type: none;
- text-align: left;
- color: #fff;
- line-height: 180%;
- margin: 5.7px 0 0 0;
- padding-left: 5px;
- }
- .cell1 p,
- .cell2 p {
- padding: 0.3px;
- }
- .cell1 span,
- .cell2 span {
- color: #000;
- background: #ecedec!important;
- line-height: 186%;
- margin: -1px;
- padding: 0px 15px 0px;
- float: right;
- }
- /*CONNECTIONS(3RD) TAB*/
- .con {
- width: 83px;
- height: 83px;
- float: left;
- background-size: 110%;
- background-position: center center;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -ms-transition: all 0.5s ease;
- transition: all 0.5s ease;
- margin: 0 1px 2px 1px;
- }
- .navcon {
- position: absolute;
- top: 0px;
- right: 0px;
- height: 340px;
- width: 180px;
- padding-right: 0px;
- overflow-x: hidden;
- overflow-y: auto;
- /*display: grid;
- grid-template-rows: repeat(2, 1fr);
- grid-template-columns: repeat(2, 1fr);
- grid-gap: 2px;*/
- }
- .connections {
- height: 340px;
- margin: 0px 0;
- width: 450px;
- padding-right: 40px;
- overflow-x: hidden;
- overflow-y: auto;
- display: none;
- }
- .connections .cbio {
- padding-right: 30px;
- }
- /*CONNECTION NAME*/
- .connections span {
- font-weight: bold;
- font-size: 14px;
- text-transform: uppercase;
- }
- /*GROUP SELECTION STYLES*/
- footer {
- position: relative;
- margin: 0px;
- padding: 0px;
- width: auto;
- height: 50px;
- background: rgba(255, 255, 255, 0.3);
- }
- #legend {
- position: relative;
- width: auto;
- height: 50px;
- margin: 0 auto;
- text-align: center;
- }
- /*GROUP LINK SQUARES*/
- .square {
- position: relative;
- height: 10px;
- font-size: 9px;
- padding: 5px 5px;
- display: inline-block;
- margin: 15px 5px;
- border-radius: 5px;
- color: #fff;
- font-family: helvetica;
- text-transform: uppercase;
- }
- /*ACTIVE STYLES*/
- /*CONTENT CARD*/
- .ccard.active {
- display: inline-block;
- margin: 0px 0px;
- }
- /*CONTENT CARD INNER TABS*/
- .ccontent.active,
- .connections.active {
- display: block;
- }
- /*CARD CONTENT NAV*/
- .cfooter a.active {
- color: #cccccc;
- }
- /*CONNECTIONS NAV*/
- .con.active {
- -webkit-filter: grayscale(0%);
- filter: grayscale(0%);
- }
- /*GROUP COLOURS*/
- /*LEGEND & TRAITS & INFO DATA*/
- /*GROUP 1*/
- #legend .g1,
- .ctraits.g1 span,
- .cell1.g1 li,
- .cell2.g1 li {
- background: var(--g1);
- }
- /*GROUP 2*/
- #legend .g2,
- .ctraits.g2 span,
- .cell1.g2 li,
- .cell2.g2 li {
- background: var(--g2);
- }
- /*GROUP 3*/
- #legend .g3,
- .ctraits.g3 span,
- .cell1.g3 li,
- .cell2.g3 li {
- background: var(--g3);
- }
- /*GROUP 4*/
- #legend .g4,
- .ctraits.g4 span,
- .cell1.g4 li,
- .cell2.g4 li {
- background: var(--g4);
- }
- /*GROUP 5*/
- #legend .g5,
- .ctraits.g5 span,
- .cell1.g5 li,
- .cell2.g5 li {
- background: var(--g5);
- }
- /*TRIANGLE*/
- /*GROUP 1*/
- .triangle.g1 {
- border-color: transparent var(--g1) var(--g1) transparent;
- }
- /*GROUP 2*/
- .triangle.g2 {
- border-color: transparent var(--g2) var(--g2) transparent;
- }
- /*GROUP 3*/
- .triangle.g3 {
- border-color: transparent var(--g3) var(--g3) transparent;
- }
- /*GROUP 4*/
- .triangle.g4 {
- border-color: transparent var(--g4) var(--g4) transparent;
- }
- /*GROUP 5*/
- .triangle.g5 {
- border-color: transparent var(--g5) var(--g5) transparent;
- }
- /*HOVER STYLES*/
- .triangle:hover,
- .cname:hover,
- .con:hover,
- .cbox:hover > img,
- .flavorimg:hover,
- .square:hover {
- cursor: pointer;
- }
- .cbox:hover,
- .cbox:hover img {
- z-index: 3;
- -webkit-transform: scale(1.05);
- -moz-transform: scale(1.05);
- -ms-transform: scale(1.05);
- -o-transform: scale(1.05);
- transform: scale(1.05);
- }
- .cbox:hover .triangle {
- transform: scale(1.05);
- -webkit-transform-origin: 50% 100%;
- -moz-transform-origin: 50% 100%;
- -o-transform-origin: 50% 100%;
- -ms-transform-origin: 50% 100%;
- transform-origin: 45% 0%;
- }
- .clinks a i {
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -ms-transition: all 0.5s ease;
- transition: all 0.5s ease;
- }
- .clinks a:hover i {
- -webkit-transform: scale(1.3);
- -moz-transform: scale(1.3);
- -ms-transform: scale(1.3);
- -o-transform: scale(1.3);
- transform: scale(1.3);
- }
- .flavorimg:hover,
- .con:hover {
- background-size: 100%;
- }
- .cbox:hover > img,
- .flavorimg:hover,
- .con:hover {
- -webkit-filter: grayscale(0%);
- filter: grayscale(0%);
- }
- /*SCROLLBAR STYLES*/
- ::-webkit-scrollbar {
- width: 5px;
- height: 5px;
- }
- ::-webkit-scrollbar-track {
- border-radius: 1px;
- background-color: #f8f8f8;
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 1px;
- background-color: #ddd;
- }
- article#desctxt::-webkit-scrollbar-track {
- border-radius: 1px;
- background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
- }
- article#desctxt::-webkit-scrollbar-thumb {
- border-radius: 1px;
- background: -webkit-linear-gradient(top, #ddd, #eee 100%);
- /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%); if transparent*/
- }
- .biocontent::-webkit-scrollbar-track,
- .connections::-webkit-scrollbar-track,
- .navcon::-webkit-scrollbar-track {
- border-radius: 1px;
- width: 10px!important;
- background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
- }
- .biocontent::-webkit-scrollbar-thumb,
- .connections::-webkit-scrollbar-thumb,
- .navcon::-webkit-scrollbar-thumb {
- border-radius: 1px;
- width: 10px!important;
- background: -webkit-linear-gradient(top, #ddd, #eee 100%);
- /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%); if transparent*/
- }
- </style>
- </head>
- <body>
- <div id="container">
- <!--HEADER-->
- <header>
- <!--TITLE & LINKS-->
- <article id="desc">
- <h1>afterimage.</h1>
- <span class="sub">sdkjglskjdglsjkglsjglskjdlgjsklj</span>
- <!--HEADER LINKS-->
- <!--enter URL for your about page-->
- <nav>
- <a href="/">
- <i class="fa fa-home" aria-hidden="true"></i>
- Home</a>
- <a href="/YOURABOUTPAGE">
- <i class="fa fa-user" aria-hidden="true"></i>
- About</a>
- <a href="/ask">
- <i class="fa fa-envelope" aria-hidden="true"></i>
- Message</a>
- <!--CREDIT, DON'T CHANGE!!!-->
- <a href="https://nonspace.tumblr.com">
- <i class="fa fa-copyright" aria-hidden="true"></i>
- NNSPC</a>
- </nav>
- </article>
- <!--DESCRIPTION-->
- <article id="desctxt">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <b>dolore magna</b> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- </article>
- </header>
- <!--HOW TO ADD GROUPS-->
- <!--To add a group (g1-g5) you need to add the respective group as a
- second class to the cbox (class="cbox GROUPNUMBER").
- You can add several groups to one card, however, the first group
- determines the card colour.-->
- <!--TABS & TAB LINKS-->
- <!--The href attribute in the cbox div is what links you to the
- corresponding ccard (content card).
- You can link to these tabs using the URL
- (http://YOURURL.com/YOURPAGE/#TABNAME) so if you want to change them
- to the character name you need to edit the cbox href and give the
- right ccard div the id.
- For example:
- Your character's name is Musterman.
- In the cbox:
- <div class="cbox g1" href="#MUSTERMAN">
- take note to not leave out the hashtag(#)
- In the ccard:
- <div class="ccard" id="MUSTERMAN">
- <!--CHARACTER CARDS-->
- <section id="gallery">
- <div id="gallery-track">
- <!--CHARACTER ONE-->
- <div class="cbox g1" href="#c1">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c1">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c1p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c1p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c1p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c1p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ responsible</span><p />
- <span>+ smart</span><p />
- <span>+ adventurous</span><p />
- <br />
- <span>- aggressive</span><p />
- <span>- petty</span><p />
- <span>- lazy</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c1p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent c1p2-->
- <!--PAGE 3-->
- <div class="ccontent" id="c1p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c1con1" style="background-image:
- url('http://placehold.it/83x83');"></div>
- <div class="con" href="#c1con2" style="background-image:
- url('http://placehold.it/83x83');"></div>
- <div class="con" href="#c1con3" style="background-image:
- url('http://placehold.it/83x83');"></div>
- <div class="con" href="#c1con4" style="background-image:
- url('http://placehold.it/83x83');"></div>
- <div class="con" href="#c1con5" style="background-image:
- url('http://placehold.it/83x83');"></div>
- <div class="con" href="#c1con6" style="background-image:
- url('http://placehold.it/83x83');"></div>
- <div class="con" href="#c1con7" style="background-image:
- url('http://placehold.it/83x83');"></div>
- <div class="con" href="#c1con8" style="background-image:
- url('http://placehold.it/83x83');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c1con1">
- <span>CONNECTION NAME :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c1con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent c1p3-->
- </div> <!--ccard-->
- <!--CHARACTER THREE-->
- <div class="cbox g2" href="#c2">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c2">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c2p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c2p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c2p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c2p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c2p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c2p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c2con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c2con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c2con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c2con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c2con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c2con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c2con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c2con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c2con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c2con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER TWO-->
- <div class="cbox g3" href="#c3">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c3">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c3p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c3p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c3p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c3p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c3p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c3p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c3con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c3con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c3con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c3con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c3con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c3con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c3con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c3con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c3con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c3con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER FOUR-->
- <div class="cbox g4" href="#c4">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c4">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c4p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c4p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c4p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c4p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c4p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c4p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c4con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c4con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c4con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c4con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c4con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c4con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c4con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c4con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c4con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c4con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER FIVE-->
- <div class="cbox g5" href="#c5">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c5">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c5p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c5p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c5p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c5p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c5p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c5p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c5con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c5con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c5con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c5con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c5con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c5con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c5con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c5con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c5con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c5con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER SIX-->
- <div class="cbox g2" href="#c6">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c6">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c6p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c6p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c6p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c6p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c6p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c6p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c6con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c6con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c6con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c6con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c6con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c6con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c6con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c6con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c6con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c6con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER SEVEN-->
- <div class="cbox g3" href="#c7">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c7">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c7p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c7p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c7p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c7p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c7p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c7p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c7con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c7con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c7con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c7con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c7con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c7con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c7con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c7con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c7con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c7con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER EIGHT-->
- <div class="cbox g4" href="#c8">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c8">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c8p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c8p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c8p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c8p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c8p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c8p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c8con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c8con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c8con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c8con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c8con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c8con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c8con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c8con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c8con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c8con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER NINE-->
- <div class="cbox g5" href="#c9">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c9">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c9p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c9p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c9p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c9p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c9p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c9p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c9con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c9con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c9con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c9con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c9con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c9con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c9con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c9con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c9con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c9con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- <!--CHARACTER TEN-->
- <div class="cbox g2" href="#c10">
- <div class="cname">
- <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
- change the opacity of the names in the CSS-->
- <span style="font-size: 55px;">
- FIRST <br />
- LASTN
- </span>
- </div> <!--cname-->
- <div class="triangle"></div>
- <!--The image is 175x370px but because it zooms to 105% ideally
- you can use an image that's ~ 183.75x388.5-->
- <img src="https://placehold.it/175x370"></img>
- </div> <!--cbox-->
- <div class="ccard" id="c10">
- <!--INNER TAB NAVIGATION-->
- <div class="cfooter">
- <a href="#c10p1" class="active">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c10p2">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- <a href="#c10p3">
- <i class="fa fa-stop" aria-hidden="true"></i></a>
- </div>
- <div class="ccontent active" id="c10p1">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">short</span>bio</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- </div><!--biocontent-->
- </div><!--cbio-->
- <div class="clinks">
- <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
- http://fontawesome.io/icons/-->
- <a href="#">
- <i class="fa fa-hashtag" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-book" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-instagram" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pencil" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-music" aria-hidden="true"></i></a>
- <a href="#">
- <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
- </div><!--clinks-->
- <div class="ctraits">
- <!--span is needed for the style-->
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <span>+ positive trait</span><p />
- <br />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- <span>- negative trait</span><p />
- </div><!--ctraits-->
- </div><!--ccontent-->
- <!--PAGE 2-->
- <div class="ccontent" id="c10p2">
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">the</span>title</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <!--LEFT DATA-->
- <ul class="cell1">
- <li> Full name: <span> - </span> </li>
- <li> Nickname: <span> - </span> </li>
- <li> Age: <span> - </span> </li>
- <li> D.o.B: <span> - </span> </li>
- <li> Gender: <span> - </span> </li>
- <li> Pronouns: <span> - </span> </li>
- <li> Sexuality: <span> - </span> </li>
- <li> Species: <span> - </span></li>
- </ul>
- <!--RIGHT DATA-->
- <ul class="cell2">
- <li> Occupation: <span> - </span> </li>
- <li> Nationality: <span> - </span> </li>
- <li> Residence: <span> - </span> </li>
- <li> Education: <span> - </span> </li>
- <li> Height: <span> - </span> </li>
- <li> Alignment: <span> - </span> </li>
- <li> Jung Type: <span> - </span> </li>
- <li> Affiliation: <span> - </span></li>
- </ul>
- </div><!--biocontent-->
- </div><!--cbio-->
- <!--You can put another picture of your character or a flavour
- picture or whatever you like. Dimensions are: 165x340-->
- <div class="flavorimg" style="background-image:
- url('https://placehold.it/180x340');">
- </div>
- </div> <!--ccontent-->
- <!--PAGE 3-->
- <div class="ccontent" id="c10p3">
- <!--CONNECTION IMAGES/NAVIGATION-->
- <div class="navcon">
- <div class="con" href="#c10con1" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c10con2" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c10con3" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c10con4" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c10con5" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c10con6" style="background-image:
- url('http://placehold.it/84x84');"></div>
- <div class="con" href="#c10con7" style="background-image:
- url('http://placehold.it/50x50');"></div>
- <div class="con" href="#c10con8" style="background-image:
- url('http://placehold.it/50x50');"></div>
- </div>
- <div class="cbio">
- <div class="headline">
- <h2><span class="h2front">social</span>connections</h2>
- <p />Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua.
- </div><!--headline-->
- <div class="biocontent">
- <div class="connections active" id="c10con1">
- <span>Connection name :: </span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
- </div><!--connections-->
- <!--ADD CONNECTION INFO-->
- <!--Add as many connection info text fields as you like. If
- you need less than 12, remove them from the navigation
- above as well. To add new info:
- copy the follow div .connections
- change the id to id="c#con# (replace hashtags with the right numbers.
- c# = card number, con# = connection number.
- Make sure only the first connection div has the class
- 'active' see above.
- You can also change these to names but then you need to
- edit the 'href' in the navigation (.clinks .navcon) as well
- .-->
- <div class="connections" id="c10con2">
- <span>Connection Name :: </span> CONNECTIONS TEXT
- </div>
- </div><!--biocontent-->
- </div><!--cbio-->
- </div> <!--ccontent-->
- </div> <!--ccard-->
- </div> <!--gallery-track-->
- </section>
- <footer>
- <div id="legend">
- <!--PREVIOUS ARROW-->
- <div id="prev">
- <i class="fa fa-chevron-left" aria-hidden="true"></i></div>
- <!--GROUP LEGEND-->
- <!--The 'g#' in the 'square' class sets the color for the group
- (see variables at the top of CSS).
- The data-filter is for sorting on click. You can add several
- groups to a link: group AND group, group OR group etc. You can
- read more here: https://isotope.metafizzy.co/filtering.html
- Adding multiple filters: https://nonspace.tumblr.com/post/166045257594/hi-im-using-your-page-theme-after-image-and-i -->
- <div class="square" data-filter="*" style="background: #7a7a7a;"> all</div>
- <div class="square g1" data-filter=".g1">group</div>
- <div class="square g2" data-filter=".g2">group</div>
- <div class="square g3" data-filter=".g3">group</div>
- <div class="square g4" data-filter=".g4">group</div>
- <div class="square g5" data-filter=".g5">group</div>
- <!--ADDITIONAL GROUPS
- <div class="square g6" data-filter=".g6">group</div>
- <div class="square g7" data-filter=".g7">group</div>
- <div class="square g8" data-filter=".g8">group</div>
- <div class="square g9" data-filter=".g9">group</div>
- <div class="square g10" data-filter=".g10">group</div>-->
- <!--NEXT ARROW-->
- <div id="next">
- <i class="fa fa-chevron-right" aria-hidden="true"></i></div>
- </div><!--legend-->
- </footer>
- </div><!--container-->
- <script type="text/javascript">
- $(document).ready(function() {
- /*TRIANGLE COLOR*/
- $('.cbox').each(function() {
- var groupClass = $(this).attr('class').split(" ")[1];
- $(this).find('.triangle').addClass(groupClass);
- });
- /*CBOX CARDS*/
- $('.cbox').on('click', function(e) {
- var currentAttrValue = $(this).attr('href');
- var groupClass = $(this).attr('class').split(" ")[1];
- if ($('.ccard' + currentAttrValue).hasClass('active')) {
- $('.ccard' + currentAttrValue).removeClass('active');
- }
- else {
- window.location.hash = $(this).attr('href');
- $('.ccard' + currentAttrValue).addClass('active').siblings('.ccard').removeClass('active');
- }
- /*TRAIT COLOURS*/
- $(currentAttrValue).find('.ctraits, .cell1, .cell2').addClass(groupClass);
- /*SCROLL LEFT*/
- $('#gallery').animate({
- scrollLeft: $(this).position().left
- }, 800);
- e.preventDefault();
- });
- /*CARD TABS & ACTIVE LINKS*/
- $('.cfooter a').on('click', function(e) {
- var currentAttrValue = $(this).attr('href');
- $('.ccontent' + currentAttrValue).fadeIn(600).siblings('.ccontent').hide();
- $(this).addClass('active').siblings().removeClass('active');
- e.preventDefault();
- });
- /*CONNECTION TABS*/
- $('.con').on('click', function(e) {
- var currentAttrValue = $(this).attr('href');
- $('.connections' + currentAttrValue).fadeIn(600).siblings('.connections').hide();
- $(this).addClass('active').siblings().removeClass('active');
- e.preventDefault();
- });
- /*ISOTOPE*/
- /*NO LAYOUT*/
- Isotope.Item.prototype._create = function() {
- // assign id, used for original-order sorting
- this.id = this.layout.itemGUID++;
- // transition objects
- this._transn = {
- ingProperties: {},
- clean: {},
- onEnd: {}
- };
- this.sortData = {};
- };
- Isotope.prototype.arrange = function(opts) {
- // set any options pass
- this.option(opts);
- this._getIsInstant();
- // just filter
- this.filteredItems = this._filter(this.items);
- // flag for initalized
- this._isLayoutInited = true;
- };
- /*FILTER*/
- var $grid = $('#gallery-track').isotope({
- itemSelector: '.cbox',
- stagger: 30,
- layoutMode: 'none'
- });
- $('.square').on('click', function() {
- $('.ccard').each(function() {
- $(this).removeClass('active');
- });
- $('#gallery').animate({
- scrollLeft: 0
- }, 800);
- var filterValue = $(this).attr('data-filter');
- $grid.isotope({
- filter: filterValue
- });
- e.preventDefault();
- });
- //ARROW SCROLL//
- var $boxes = $(".cbox"),
- $slides = $('#gallery'),
- pos = 0;
- $("#next").on('click', function() {
- var $nextBox = $boxes.first();
- if ($boxes.length > ++pos) {
- $nextBox = $($boxes[pos]);
- } else(pos = 0)
- $slides.animate({
- scrollLeft: $nextBox.position().left - 4
- }, 500);
- });
- $("#prev").click(function() {
- var $nextBox = $boxes.last();
- if ($boxes.length > --pos && pos > -1) {
- $nextBox = $($boxes[pos]);
- } else(pos = $boxes.length - 1)
- $slides.animate({
- scrollLeft: $nextBox.position().left - 4
- }, 500);
- });
- /*HASH SCRIPT*/
- var hash = $.trim(window.location.hash);
- if (hash) {
- //time out to prevent jumping of div
- setTimeout(function() {
- $('.cbox[href$="' + hash + '"]').trigger('click');
- }, 800);
- }
- }); //DOCUMENT READY
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment