Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--PAGE THEME #10: Aperture 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>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <link rel="icon" type="image/png" href="{Favicon}">
- <title>{Title}</title>
- <!--FONTS-->
- <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Chivo:400,400i,700|Playfair+Display:400,400i,700,700i|Roboto+Slab:400,700|Source+Code+Pro:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i" rel="stylesheet">
- <!--FONT AWESOME-->
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" crossorigin="anonymous">
- <!--JQUERY-->
- <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
- <style>
- ::-webkit-scrollbar {
- width: 5px;
- border: 2px solid #f5f5f5;
- background-color: #acacac;
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 6px;
- background-color: #acacac;
- }
- ::-webkit-scrollbar:horizontal {
- height: 5px;
- }
- /*SETTINGS & COLORS*/
- :root {
- /*colors == change these per character == */
- --accentColorOne: 88,121,130; /*CHARACTER 1*/
- --accentColorTwo: 158,42,43;/*CHARACTER 2*/
- --accentColorThree: 224,159,62;/*CHARACTER 3*/
- --accentColorFour: 167,167,167;/*CHARACTER 4*/
- --accentColorFive: 187,200,209;/*CHARACTER 5*/
- --accentTextOne: #fff; /*text color*/
- --sidebar: #fff;
- --colorTextSidebar: #000;
- --colorSocial: #fff; /*dark back*/
- --colorSocialLight: #000;
- --colorTitle: #fff; /*dark*/
- --colorTitleLight: #646464; /*dark*/
- --colorTriangle: 121, 122, 124; /*ODD BARS*/
- --colorTriangleb:55, 55, 56;/*EVEN BARS*/
- /*fonts*/
- --fontSize: 14px;
- --lineHeight: 150%;
- --fontOne: 'Raleway';
- --fontTwo: 'Roboto Slab';
- --fontQuote: 'Playfair Display';
- /*grayscale*/
- --grayscalePortrait: 0%; /*0 - 100%*/
- --grayscaleThumbnails: 90%; /*0 - 100%*/
- }
- /*GENERAL*/
- *{
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- }
- h1, h2 {
- font-family: var(--fontTwo);
- font-weight: normal;
- }
- h1 {
- font-size: 10vh;
- color: var(--colorTitle);
- line-height: 8vh;
- }
- /*ANIMATION KEYFRAMES*/
- @-webkit-keyframes fadeIn {
- 0% { opacity: 0; }
- 20% { opacity: 0; }
- 40% { opacity: 0.3; }
- 60% { opacity: 0.5; }
- 80% { opacity: 0.9; }
- 100% { opacity: 1; }
- }
- @keyframes fadeIn {
- 0% { opacity: 0; }
- 20% { opacity: 0; }
- 40% { opacity: 0.3; }
- 60% { opacity: 0.5; }
- 80% { opacity: 0.9; }
- 100% { opacity: 1; }
- }
- body {
- font-family: var(--fontOne);
- font-size: var(--fontSize);
- color: #1e1e1e;
- }
- #wrapper {
- position: relative;
- width: 100%;
- height: 100vh;
- display: flex;
- overflow: hidden;
- }
- nav {
- min-width: 50px;
- max-width: 50px;
- height: 100%;
- background: #111;
- padding: 15px 0;
- }
- nav li {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 0 0 15px;
- }
- nav a i {
- width: 100%;
- margin: 0 auto;
- color: rgba(255,255,255,0.9);
- font-size: 18px;
- }
- main {
- position: relative;
- flex: 1;
- /*min-width: 850px;*/
- background: #f7f7f7;
- webkit-animation-duration: 0.8s;
- animation-name: fadeIn;
- animation-duration: 0.8s;
- }
- aside {
- position: relative;
- width: 150px;
- height: 100%;
- overflow-y: auto;
- }
- aside li {
- list-style-type: none;
- line-height: 100%;
- font-size: 0;
- }
- aside li img {
- width: 150px;
- height: 150px;
- }
- aside li img,
- .connections img,
- .popup-inner img {
- object-fit: cover;
- o-object-fit: cover;
- -webkit-filter: grayscale(var(--grayscaleThumbnails));
- filter: grayscale(var(--grayscaleThumbnails));
- }
- /*main content*/
- .tab {
- position: relative;
- display: none;
- width: 100%;
- height: 100%;
- webkit-animation-duration: 0.8s;
- animation-name: fadeIn;
- animation-duration: 0.8s;
- overflow-y: auto;
- }
- .tab.current {
- display: flex;
- flex-wrap: wrap;
- }
- .portrait-row {
- position: relative;
- flex: 1;
- display: flex;
- flex-direction: column;
- }
- .portrait-inner {
- position: relative;
- height: calc(100vh - 250px);
- }
- .portrait-inner img.big {
- height: 100%;
- width: 100%;
- object-fit: none
- ;
- o-object-fit: cover;
- -webkit-filter: grayscale(var(--grayscalePortrait));
- filter: grayscale(var(--grayscalePortrait));
- }
- .overlay {
- background: url(https://www.transparenttextures.com/patterns/graphy-dark.png);
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
- opacity: 0.4;
- }
- .triangle {
- position: absolute;
- width: 100%;
- height: 100%;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 250px 250px 0 0;
- border-color: rgb(var(--colorTriangle)) transparent transparent transparent;
- top: 0;
- opacity: 0.5
- }
- .title {
- position: absolute;
- top: 50px;
- left: 50px;
- }
- .title h1 {
- text-shadow: 5px 5px 0px rgba(17,17,17,0.5);
- letter-spacing: 10px
- }
- .links {
- position: absolute;
- top: 0;
- right: 0;
- text-align: right;
- margin: 15px 25px;
- z-index: 1;
- }
- .links a {
- color: var(--colorSocial);
- font-size: 25px;
- text-decoration: none;
- padding: 0 8px;
- opacity: 0.5;
- }
- .stats {
- position: absolute;
- bottom: 0;
- right: 0;
- height: 100%;
- padding: 0 15px;
- display: flex;
- }
- .bar {
- height: 100%;
- display: flex;
- margin: 0 0 0 20px;
- margin-top: auto;
- align-items: flex-end;
- }
- .bar div {
- position: relative;
- width: 50px;
- background: rgba(var(--colorTriangle),0.80);
- }
- .bar span {
- position: absolute;
- font-family: var(--fontTwo);
- text-transform: uppercase;
- letter-spacing: 2px;
- text-shadow: 2px 3px 0px rgba(17,17,17,0.5);
- left: 60px;
- bottom: 10px;
- -webkit-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
- transform: rotate(-90deg);
- transform-origin: bottom left;
- height: 50px;
- width: 100vh;
- color: var(--colorTitle);
- font-size: 2vh;
- opacity: 1;
- }
- .bar:nth-of-type(1) div {
- height: 5%;
- }
- .bar:nth-of-type(2) div {
- height: 5%;
- }
- .bar:nth-of-type(3) div {
- height: 5%;
- }
- .bar:nth-of-type(4) div {
- height: 5%;
- }
- .bar:nth-of-type(even) div {
- background: rgba(var(--colorTriangleb), 0.80);
- }
- /*connections*/
- .connections {
- position: absolute;
- left: 20px;
- bottom: 20px;
- max-width: 300px;
- display: flex;
- flex-wrap: wrap-reverse;
- }
- .connections img {
- width: 10vh;
- height: 10vh;
- object-fit: cover;
- o-object-fit: cover;
- margin: 10px 10px 0 0;
- border: 5px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .text-row {
- position: relative;
- height: 250px;
- display: flex;
- padding: 35px 50px;
- color: var(--accentTextOne);
- background: rgb(var(--accentColorOne));
- -webkit-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- }
- .text-row-two {
- position: relative;
- height: 250px;
- display: flex;
- padding: 35px 50px;
- color: var(--accentTextOne);
- background: rgb(var(--accentColorTwo));
- -webkit-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- }
- .text-row-three {
- position: relative;
- height: 250px;
- display: flex;
- padding: 35px 50px;
- color: var(--accentTextOne);
- background: rgb(var(--accentColorThree));
- -webkit-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- }
- .text-row-four {
- position: relative;
- height: 250px;
- display: flex;
- padding: 35px 50px;
- color: var(--accentTextOne);
- background: rgb(var(--accentColorFour));
- -webkit-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- }
- .text-row-five {
- position: relative;
- height: 250px;
- display: flex;
- padding: 35px 50px;
- color: var(--accentTextOne);
- background: rgb(var(--accentColorFive));
- -webkit-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- }
- .text-row-six {
- position: relative;
- height: 250px;
- display: flex;
- padding: 35px 50px;
- color: var(--accentTextOne);
- background: rgb(var(--accentColorSix));
- -webkit-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- }
- .text-row-seven {
- position: relative;
- height: 250px;
- display: flex;
- padding: 35px 50px;
- color: var(--accentTextOne);
- background: rgb(var(--accentColorSeven));
- -webkit-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- box-shadow: -1px -10px 0px 0px rgba(0,0,0,0.3);
- }
- .text-title li {
- list-style-type: none;
- font-family: var(--fontTwo);
- letter-spacing: 2px;
- padding: 3px 0px;
- font-size: calc(var(--fontSize) - 3px);
- }
- .text-title li:first-child {
- position: relative;
- padding-bottom: 10px;
- padding-top: 0;
- text-transform: uppercase;
- margin-bottom: 15px;
- font-size: var(--fontSize);
- }
- .text-title li:first-child:after {
- content: '';
- height: 2px;
- background: #fff;
- width: 40%;
- position: absolute;
- bottom: 0;
- left: 0;
- }
- .text-column {
- flex: 1;
- overflow-y: auto;
- }
- .text {
- position: relative;
- column-count: 2;
- padding-left: 35px;
- column-gap: 25px;
- overflow-y: scroll;
- font-size: calc(var(--fontSize) - 1px);
- line-height: var(--lineHeight);
- }
- .text p {
- margin-bottom: 15px;
- }
- /*info side*/
- .info-column {
- display: flex;
- flex-direction: column;
- width: 350px;
- background: rgb(var(--accentColorOne));
- z-index: 1;
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: -5px 0px 20px 0px rgba(0,0,0,0.2);
- height: 100vh;
- }
- .info-column-two {
- display: flex;
- flex-direction: column;
- width: 350px;
- background: rgb(var(--accentColorTwo));
- z-index: 1;
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: -5px 0px 20px 0px rgba(0,0,0,0.2);
- height: 100vh;
- }
- .info-column-three {
- display: flex;
- flex-direction: column;
- width: 350px;
- background: rgb(var(--accentColorThree));
- z-index: 1;
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: -5px 0px 20px 0px rgba(0,0,0,0.2);
- height: 100vh;
- }
- .info-column-four {
- display: flex;
- flex-direction: column;
- width: 350px;
- background: rgb(var(--accentColorFour));
- z-index: 1;
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: -5px 0px 20px 0px rgba(0,0,0,0.2);
- height: 100vh;
- }
- .info-column-five {
- display: flex;
- flex-direction: column;
- width: 350px;
- background: rgb(var(--accentColorFive));
- z-index: 1;
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: -5px 0px 20px 0px rgba(0,0,0,0.2);
- height: 100vh;
- }
- .info-column-six {
- display: flex;
- flex-direction: column;
- width: 350px;
- background: rgb(var(--accentColorSix));
- z-index: 1;
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: -5px 0px 20px 0px rgba(0,0,0,0.2);
- height: 100vh;
- }
- .info-column-seven {
- display: flex;
- flex-direction: column;
- width: 350px;
- background: rgb(var(--accentColorSix));
- z-index: 1;
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: -5px 0px 20px 0px rgba(0,0,0,0.2);
- height: 100vh;
- }
- .quote,
- .table,
- .traits,
- .links {
- width: 100%;
- }
- .quote {
- background: rgba(0,0,0,0.1);
- padding: 25px 25px;
- font-family: var(--fontQuote);
- background: var(--background);
- }
- .quote h3 {
- font-weight: normal;
- font-style: italic;
- font-size: calc(var(--fontSize) + 6px);
- color: rgba(255,255,255,0.8);
- }
- .table {
- position: relative;
- background: var(--sidebar);
- color: var(--colorTextSidebar);
- overflow-y: auto;
- flex-: 1;
- }
- .table table {
- width: 100%;
- /*border-collapse: collapse;*/
- }
- .table td {
- width: 50%;
- }
- .table td {
- padding: 5px 25px;
- list-style-type: none;
- line-height: calc(var(--fontSize) + 5px);
- }
- .table tr td:first-child {
- font-family: var(--fontTwo);
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: calc(var(--fontSize) - 2px);
- }
- .table tr td:nth-child(2) {
- background: rgba(0,0,0,0.03);
- }
- .table tr:nth-child(even) td:first-child {
- background: rgba(0,0,0,0.05);
- }
- .table tr:nth-child(odd) td:first-child {
- background: rgba(0,0,0,0);
- }
- /*POPUPS*/
- .popup {
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,0.5);
- position: fixed;
- z-index: 999;
- top: 0;
- bottom: 0;
- display: none;
- }
- .popup-inner {
- position: relative;
- width: 500px;
- height: 280px;
- display: flex;
- background: rgb(var(--accentColorOne));
- color: var(--accentTextOne);
- margin: auto;
- border: 10px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .popup-inner-two {
- position: relative;
- width: 500px;
- height: 280px;
- display: flex;
- background: rgb(var(--accentColorTwo));
- color: var(--accentTextOne);
- margin: auto;
- border: 10px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .popup-inner-three {
- position: relative;
- width: 500px;
- height: 280px;
- display: flex;
- background: rgb(var(--accentColorThree));
- color: var(--accentTextOne);
- margin: auto;
- border: 10px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .popup-inner-four {
- position: relative;
- width: 500px;
- height: 280px;
- display: flex;
- background: rgb(var(--accentColorFour));
- color: var(--accentTextOne);
- margin: auto;
- border: 10px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .popup-inner-five {
- position: relative;
- width: 500px;
- height: 280px;
- display: flex;
- background: rgb(var(--accentColorFive));
- color: var(--accentTextOne);
- margin: auto;
- border: 10px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .popup-inner-six {
- position: relative;
- width: 500px;
- height: 280px;
- display: flex;
- background: rgb(var(--accentColorSix));
- color: var(--accentTextOne);
- margin: auto;
- border: 10px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .popup-inner-seven {
- position: relative;
- width: 500px;
- height: 280px;
- display: flex;
- background: rgb(var(--accentColorSix));
- color: var(--accentTextOne);
- margin: auto;
- border: 10px solid rgba( var(--colorTriangle),0.5);
- -webkit-background-clip: padding-box; /* for Safari */
- background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
- }
- .popup-inner img {
- width: 200px;
- height: 260px;
- filter: grayscale(0);
- filter: grayscale(0);
- }
- .popup-inner-two img {
- width: 200px;
- height: 260px;
- filter: grayscale(0);
- filter: grayscale(0);
- }
- .popup-inner-three img {
- width: 200px;
- height: 260px;
- filter: grayscale(0);
- filter: grayscale(0);
- }
- .popup-inner-four img {
- width: 200px;
- height: 260px;
- filter: grayscale(0);
- filter: grayscale(0);
- }
- .popup-inner-five img {
- width: 200px;
- height: 260px;
- filter: grayscale(0);
- filter: grayscale(0);
- }
- .popup-inner-six img {
- width: 200px;
- height: 260px;
- filter: grayscale(0);
- filter: grayscale(0);
- }
- .popup-inner-seven img {
- width: 200px;
- height: 260px;
- filter: grayscale(0);
- filter: grayscale(0);
- }
- .con-desc {
- margin: 25px;
- overflow: hidden;
- }
- .con-text {
- height: 100%;
- overflow-y: auto;
- margin-bottom: 25px;
- }
- #nnspc {
- left: 45px;
- margin: 20px 0;
- transform: rotate(-90deg);
- transform-origin: bottom left;
- font-size: 19px;
- }
- #nnspc a {
- text-decoration: none;
- }
- /*HOVER*/
- .links a, aside img, .portrait-inner img {
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -ms-transition: all 0.5s ease;
- transition: all 0.5s ease;
- }
- .links a:hover {
- cursor: pointer;
- opacity: 1;
- }
- aside li img:hover,
- .portrait-inner:hover > img,
- .active img, img.active,
- .connections img:hover {
- cursor: pointer;
- -webkit-filter: grayscale(0%);
- filter: grayscale(0%);
- }
- /*media queries*/
- @media (max-width: 1036px) {
- .info-column {
- width: auto;
- height: auto;
- }
- nav {
- position: fixed;
- top: 0;
- min-width: 100%;
- height: 50px;
- z-index: 99;
- }
- aside {
- position: fixed;
- width: 100%;
- top: 50px;
- height: auto;
- z-index: 99;
- }
- aside ul {
- display: flex;
- flex-direction: row;
- }
- #wrapper {
- margin-top: 200px;
- height: auto;
- overflow-y: auto;
- flex-direction: column-reverse;
- }
- #nnspc {
- z-index: 9999;
- position: fixed !important;
- }
- }
- </style>
- <!--FALL BACK FOR NO JAVASCRIPT-->
- <noscript>
- <style type="text/css">
- #grid {
- display: flex;
- flex-flow: wrap;
- justify-content: space-between;
- width: 100%;
- }
- #nojs {
- width: 100%;
- height: 35px;
- background: red;
- color: #fff;
- line-height: 100%;
- text-align: center;
- padding: 10px;
- }
- </style>
- </noscript>
- </head>
- <body>
- <!--NO JS WARNING-->
- <noscript>
- <div id="nojs">Warning: Javascript is disabled. This will restrict functionality.</div>
- </noscript>
- <div id='wrapper'>
- <nav>
- <ul>
- <li><a href="/" title="home"><i class="fas fa-home"></i></a></li>
- <li><a href="/ask" title="message"><i class="far fa-envelope"></i></a></li>
- <li><a href="https://pleasantprefects.tumblr.com" title="join pleasant prefects"><i class="fas fa-bolt"></i></a></li>
- </ul>
- </nav>
- <main>
- <!--COPY PASTE THIS TAB FOR MORE TABS-->
- <!--CHARACTER1 -->
- <div class='tab'>
- <div class='portrait-row'>
- <div class='portrait-inner'>
- <!--MAIN IMAGE-->
- <img class='big' src='https://pmcwwd.files.wordpress.com/2018/10/ks-jg-02.jpg?crop=0px%2C384px%2C1366px%2C912px&resize=640%2C415'>
- <!--TITLE-->
- <div class='title'>
- <h1>Annie<br />Montfort</h1>
- </div>
- <!--LINKS-->
- <div class='links'>
- <a href='https://pleasantprefects.tumblr.com/' title="tag">
- <i class='fas fa-hashtag'></i>
- </a>
- <a href='/tagged/anniewriting' title="writing">
- <i class='fas fa-pen'></i>
- </a>
- <a href='https://www.pinterest.com/izzyhardin9/pp-annie/' title="pinterest">
- <i class='fab fa-pinterest'></i>
- </a>
- </div>
- <!--STATS-->
- <!--To change the height of the stat bars change the height of the div here, for each div in percentages 0-100-->
- <div class='stats'>
- <div class='bar'>
- <div style="height: 42%;">
- <span>int: 3</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 14%;">
- <span>dex: 1</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 70%;">
- <span>per: 5</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 0%;">
- <span>str: 0</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 56%;">
- <span>mag: 4</span>
- </div>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--Important: The connection links need to be in the same order as their respective popup or they will be wrong!-->
- <div class='connections'>
- <!--CONNECTION ONE-->
- <img src='https://m.media-amazon.com/images/M/MV5BYjAyMTJiOTQtMzU1Ny00MjRmLTg0YjMtOTQ0ZjEwZjM5MGU2XkEyXkFqcGdeQXVyNDQwNDcyNDc@._V1_SY1000_CR0,0,800,1000_AL_.jpg'>
- <!--CONNECTION TWO-->
- <img src='https://cdn.discordapp.com/attachments/524457265290412034/555618817066401823/unknown.png'>
- <!--CONNECTION THREE-->
- <img src='https://i.pinimg.com/564x/f4/fb/de/f4fbde2ecaf712c221cca7070614b782.jpg'>
- <!--CONNECTION Four-->
- <img src='https://i.pinimg.com/564x/24/fa/6e/24fa6ecada06d49fb20ac14badea10e4.jpg'>
- <!--COPY MORE HERE-->
- </div>
- </div>
- <!--TEXT-->
- <div class='text-row'>
- <div class='text-title'>
- <ul>
- <li>ABOUT</li>
- <li>Sixth Year</li>
- <li>Ravenclaw</li>
- <li>Prefect</li>
- <li>Vindication</li>
- </ul>
- </div>
- <div class='text-column'>
- <div class='text'>
- Insert Annie lore here!
- </div>
- </div>
- </div>
- </div>
- <div class='info-column'>
- <!--QUOTE-->
- <div class='quote'>
- <h3>Truth, like gold, is to be obtained not by its growth, but by washing away from it all that is not gold.<br>
- -Leo Tolstoy</h3>
- </div>
- <!--INFO TABLE-->
- <div class='table'>
- <table>
- <tr>
- <td>Full Name</td>
- <td>Anise Desdemona Montfort</td>
- </tr>
- <tr>
- <td>Age</td>
- <td>17</td>
- </tr>
- <tr>
- <td>DoB</td>
- <td>22 December</td>
- </tr>
- <tr>
- <td>Zodiac</td>
- <td>Capricorn</td>
- </tr>
- <tr>
- <td>Gender</td>
- <td>Female</td>
- </tr>
- <tr>
- <td>Orientation</td>
- <td>Lesbian</td>
- </tr>
- <tr>
- <td>Relationship</td>
- <td>Committed</td>
- </tr>
- <tr>
- <td>Face Claim</td>
- <td>Kiernan Shipka</td>
- </tr>
- <tr>
- <td>Height</td>
- <td>5'2"</td>
- </tr>
- <tr>
- <td>Weight</td>
- <td>115 lbs</td>
- </tr>
- <tr>
- <td>Hair Color</td>
- <td>Blonde</td>
- </tr>
- <tr>
- <td>Eye Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Wand</td>
- <td>9.5 inches; applewood; veela hair</td>
- </tr>
- <tr>
- <td>Boggart</td>
- <td>Disappointing Superbia</td>
- </tr>
- <tr>
- <td>Patronus</td>
- <td>Dove</td>
- </tr>
- <tr>
- <td>Amortentia</td>
- <td>Daisies, fresh parchment, pomegranate, ivory soap</td>
- </tr>
- <tr>
- <td>House</td>
- <td>Ravenclaw</td>
- </tr>
- <tr>
- <td>Best class</td>
- <td>Transfiguration</td>
- </tr>
- <tr>
- <td>Worst class</td>
- <td>History of Magic</td>
- </tr>
- <tr>
- <td>Electives</td>
- <td>Divination, Muggle Studies</td>
- </tr>
- <tr>
- <td>Alignment</td>
- <td>Lawful Neutral</td>
- </tr>
- </tr>
- <tr>
- <td>MBTI</td>
- <td>ENFJ</td>
- </tr>
- </table>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--CONNECTION POPUP ONE-->
- <div class="popup">
- <div class="popup-inner">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/originals/18/66/aa/1866aac971398aac2aed325128d55d0d.png">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Brighid Calhoun</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- gf!! one true love!!
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP TWO-->
- <div class="popup">
- <div class="popup-inner">
- <!--IMAGE-->
- <img src="https://static.tvtropes.org/pmwiki/pub/images/isaac_hempstead_wright.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Hadrian Werley</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- bff, worst boy
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/63/e7/1d/63e71d029aa581a6ced35d1a86c76d27.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Fiona Crawford</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- favorite child, mentee
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/fc/00/50/fc00509480cd411bd202095bbf81a079.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>keara parker</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- roommate
- </div>
- </div>
- </div>
- </div>
- </div>
- <!--END COPY HERE-->
- <!--COPY PASTE THIS TAB FOR MORE TABS-->
- <!--CHARACTER 2 -->
- <div class='tab'>
- <div class='portrait-row'>
- <div class='portrait-inner'>
- <!--MAIN IMAGE-->
- <img class='big' src='https://heightline.com/wp-content/uploads/Brendon-Urie-640x360.jpg'>
- <!--TITLE-->
- <div class='title'>
- <h1>Roscoe Castellaine</h1>
- </div>
- <!--LINKS-->
- <div class='links'>
- <a href='https://pleasantprefects.tumblr.com/' title="tag">
- <i class='fas fa-hashtag'></i>
- </a>
- <a href='/tagged/roscoewriting' title="writing">
- <i class='fas fa-pen'></i>
- </a>
- <a href='https://www.pinterest.com/izzyhardin9/pp-roscoe/' title="pinterest">
- <i class='fab fa-pinterest'></i>
- </a>
- </div>
- <!--STATS-->
- <!--To change the height of the stat bars change the height of the div here, for each div in percentages 0-100-->
- <div class='stats'>
- <div class='bar'>
- <div style="height: 28%;">
- <span>int: 2</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 42%;">
- <span>dex: 3</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 42%;">
- <span>per: 3</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 56%;">
- <span>str: 4</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 28%;">
- <span>mag: 2</span>
- </div>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--Important: The connection links need to be in the same order as their respective popup or they will be wrong!-->
- <div class='connections'>
- <!--CONNECTION ONE-->
- <img src='https://cdn.discordapp.com/attachments/524457265290412034/555826484187758592/unknown.png'>
- <!--CONNECTION TWO-->
- <img src='https://i.pinimg.com/564x/59/15/9c/59159cb8b5c06cebe9b0f4704b96e4d9.jpg'>
- <!--CONNECTION THREE-->
- <img src='https://i.pinimg.com/564x/c4/5f/1f/c45f1f0ac46d84053135619a044ab9d8.jpg'>
- <!--CONNECTION FOUR-->
- <img src='https://i.pinimg.com/564x/c3/05/0e/c3050e2a3308851c02e653112803dd0c.jpg'>
- <!--COPY MORE HERE-->
- </div>
- </div>
- <!--TEXT-->
- <div class='text-row-two'>
- <div class='text-title'>
- <ul>
- <li>ABOUT</li>
- <li>Seventh Year</li>
- <li>Gryffindor</li>
- <li>Chaser, Co-Captain</li>
- <li>Alliance</li>
- </ul>
- </div>
- <div class='text-column'>
- <div class='text'>
- Insert Roscoe lore here!
- </div>
- </div>
- </div>
- </div>
- <div class='info-column-two'>
- <!--QUOTE-->
- <div class='quote'>
- <h3>It takes courage to grow up and become who you really are. <br>
- -e.e. cummings</h3>
- </div>
- <!--INFO TABLE-->
- <div class='table'>
- <table>
- <tr>
- <td>Full Name</td>
- <td>Roscoe Demitrius Castellaine</td>
- </tr>
- <tr>
- <td>Age</td>
- <td>17</td>
- </tr>
- <tr>
- <td>DoB</td>
- <td>18 February</td>
- </tr>
- <tr>
- <td>Zodiac</td>
- <td>Pisces</td>
- </tr>
- <tr>
- <td>Gender</td>
- <td>Male</td>
- </tr>
- <tr>
- <td>Orientation</td>
- <td>Pansexual</td>
- </tr>
- <tr>
- <td>Relationship</td>
- <td>Committed</td>
- </tr>
- <tr>
- <td>Face Claim</td>
- <td>Brendon Urie</td>
- </tr>
- <tr>
- <td>Height</td>
- <td>6'0</td>
- </tr>
- <tr>
- <td>Weight</td>
- <td>153</td>
- </tr>
- <tr>
- <td>Hair Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Eye Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Wand</td>
- <td>11.5 inches; aspen; dragon heartstring</td>
- </tr>
- <tr>
- <td>Boggart</td>
- <td>Death Eaters</td>
- </tr>
- <tr>
- <td>Patronus</td>
- <td>Jack Russell Terrier</td>
- </tr>
- <tr>
- <td>Amortentia</td>
- <td>???</td>
- </tr>
- <tr>
- <td>House</td>
- <td>Gryffindor</td>
- </tr>
- <tr>
- <td>Best class</td>
- <td>Herbology</td>
- </tr>
- <tr>
- <td>Worst class</td>
- <td>Potions</td>
- </tr>
- <tr>
- <td>Electives</td>
- <td>Arithmancy</td>
- </tr>
- <tr>
- <td>Alignment</td>
- <td>Chaotic Good</td>
- </tr>
- </tr>
- <tr>
- <td>MBTI</td>
- <td>ESTP</td>
- </tr>
- </table>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--CONNECTION POPUP ONE-->
- <div class="popup">
- <div class="popup-inner-two">
- <!--IMAGE-->
- <img src="https://cdn.discordapp.com/attachments/524457265290412034/555826668720095264/unknown.png">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Arden Galloway</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- FAVORITE PERSON!! boyfriend, love of his life.
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP TWO-->
- <div class="popup">
- <div class="popup-inner-two">
- <!--IMAGE-->
- <img src="https://i-h2.pinimg.com/236x/02/f2/5b/02f25b99a097d729e276777978bd96d7.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Gemma Watts-Barrows</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- BFF, co-captain
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner-two">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/86/51/23/8651231cbc16cc5f7f21886e54d269b2.jpg?b=t">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Penny Thomas</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- frands
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP four-->
- <div class="popup">
- <div class="popup-inner-two">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/1b/c3/74/1bc374468a9fbfecef18087a9f9898ff.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Annie Montfort</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- cuz
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP five-->
- </div>
- <!--END COPY HERE-->
- <!--CHARACTER 3 -->
- <div class='tab'>
- <div class='portrait-row'>
- <div class='portrait-inner'>
- <!--MAIN IMAGE-->
- <img class='big' src='https://i.pinimg.com/564x/11/55/06/115506fc5e2cde9df932a94de31d3f1c.jpg'>
- <!--TITLE-->
- <div class='title'>
- <h1>Maeve <br /> Pierson</h1>
- </div>
- <!--LINKS-->
- <div class='links'>
- <a href='https://pleasantprefects.tumblr.com/' title="tag">
- <i class='fas fa-hashtag'></i>
- </a>
- <a href='/tagged/maevewriting' title="writing">
- <i class='fas fa-pen'></i>
- </a>
- <a href='https://www.pinterest.com/izzyhardin9/pp-maeve/' title="pinterest">
- <i class='fab fa-pinterest'></i>
- </a>
- </div>
- <!--STATS-->
- <!--To change the height of the stat bars change the height of the div here, for each div in percentages 0-100-->
- <div class='stats'>
- <div class='bar'>
- <div style="height: 28%;">
- <span>int: 2</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 14%;">
- <span>dex: 1</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 14%;">
- <span>per: 1</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 28%;">
- <span>str: 2</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 14%;">
- <span>mag: 1</span>
- </div>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--Important: The connection links need to be in the same order as their respective popup or they will be wrong!-->
- <div class='connections'>
- <!--CONNECTION ONE-->
- <img src='https://i.pinimg.com/564x/60/e3/a4/60e3a4d29a01345d6edb0ad17dfb4766.jpg'>
- <!--CONNECTION TWO-->
- <img src='https://i-h2.pinimg.com/564x/63/e7/1d/63e71d029aa581a6ced35d1a86c76d27.jpg'>
- <!--CONNECTION THREE-->
- <img src='https://i.pinimg.com/564x/09/4c/44/094c4412b0e18f38e2868cf4d456f7e5.jpg'>
- <!--CONNECTION FOUR-->
- <img src='https://i.pinimg.com/564x/75/ce/0d/75ce0d8bcf713cde7b2455cea958d6b9.jpg'>
- <!--COPY MORE HERE-->
- </div>
- </div>
- <!--TEXT-->
- <div class='text-row-three'>
- <div class='text-title'>
- <ul>
- <li>ABOUT</li>
- <li>First Year</li>
- <li>Hufflepuff</li>
- <li>Hogwarts</li>
- </ul>
- </div>
- <div class='text-column'>
- <div class='text'>
- Insert Maeve lore here!
- </div>
- </div>
- </div>
- </div>
- <div class='info-column-three'>
- <!--QUOTE-->
- <div class='quote'>
- <h3>The stars don't look bigger, but they do look brighter. <br>
- -Sally Ride</h3>
- </div>
- <!--INFO TABLE-->
- <div class='table'>
- <table>
- <tr>
- <td>Full Name</td>
- <td>Maeve Katherine Pierson</td>
- </tr>
- <tr>
- <td>Age</td>
- <td>11</td>
- </tr>
- <tr>
- <td>DoB</td>
- <td>30 May</td>
- </tr>
- <tr>
- <td>Zodiac</td>
- <td>Gemini</td>
- </tr>
- <tr>
- <td>Gender</td>
- <td>Female</td>
- </tr>
- <tr>
- <td>Orientation</td>
- <td>???</td>
- </tr>
- <tr>
- <td>Relationship</td>
- <td>???</td>
- </tr>
- <tr>
- <td>Face Claim</td>
- <td>Alexis Bledel</td>
- </tr>
- <tr>
- <td>Height</td>
- <td>4'6"</td>
- </tr>
- <tr>
- <td>Weight</td>
- <td>65</td>
- </tr>
- <tr>
- <td>Hair Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Eye Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Wand</td>
- <td>10.25 inches; red oak; unicorn hair</td>
- </tr>
- <tr>
- <td>Boggart</td>
- <td>Eleanor Selwyn deciding not to be her friend anymore</td>
- </tr>
- <tr>
- <td>Patronus</td>
- <td>Hedgehog</td>
- </tr>
- <tr>
- <td>Amortentia</td>
- <td>???</td>
- </tr>
- <tr>
- <td>House</td>
- <td>Hufflepuff</td>
- </tr>
- <tr>
- <td>Best class</td>
- <td>Astronomy</td>
- </tr>
- <tr>
- <td>Worst class</td>
- <td>Charms</td>
- </tr>
- <tr>
- <td>Electives</td>
- <td>N/A</td>
- </tr>
- <tr>
- <td>Alignment</td>
- <td>Neutral Good</td>
- </tr>
- </tr>
- <tr>
- <td>MBTI</td>
- <td>ISFJ</td>
- </tr>
- </table>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--CONNECTION POPUP ONE-->
- <div class="popup">
- <div class="popup-inner-three">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/a2/67/bb/a267bbbdb0fe4f5ab1be21d4f6562634.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Eleanor Selwyn</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- roomie, bff
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP TWO-->
- <div class="popup">
- <div class="popup-inner-three">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/ca/d2/87/cad28768d75b6b030f6f21e0f41c4a18.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Fiona Crawford</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- frenemy
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner-three">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/4a/33/f7/4a33f73336e591ee308317d85bc23517.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Rosalind O'Neill</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- bff
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP four-->
- <div class="popup">
- <div class="popup-inner-three">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/5b/dc/ec/5bdcec723cf26bfa48c50b2f7398bac2.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Louisa Pennington</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- bff
- </div>
- </div>
- </div>
- </div>
- <!--END COPY HERE-->
- </div>
- <!--CHARACTER 4 -->
- <div class='tab'>
- <div class='portrait-row'>
- <div class='portrait-inner'>
- <!--MAIN IMAGE-->
- <img class='big' src='https://images.indianexpress.com/2018/12/kit-harington-759.jpg'>
- <!--TITLE-->
- <div class='title'>
- <h1>Milo <br /> Ainsley</h1>
- </div>
- <!--LINKS-->
- <div class='links'>
- <a href='https://pleasantprefects.tumblr.com/' title="tag">
- <i class='fas fa-hashtag'></i>
- </a>
- <a href='/tagged/milowriting' title="writing">
- <i class='fas fa-pen'></i>
- </a>
- <a href='https://www.pinterest.com/izzyhardin9/pp-milo/' title="pinterest">
- <i class='fab fa-pinterest'></i>
- </a>
- </div>
- <!--STATS-->
- <!--To change the height of the stat bars change the height of the div here, for each div in percentages 0-100-->
- <div class='stats'>
- <div class='bar'>
- <div style="height: 70%;">
- <span>int: 5</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 28%;">
- <span>dex: 2</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 42%;">
- <span>per: 3</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 28%;">
- <span>str: 2</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 70%;">
- <span>mag: 5</span>
- </div>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--Important: The connection links need to be in the same order as their respective popup or they will be wrong!-->
- <div class='connections'>
- <!--CONNECTION ONE-->
- <img src='https://i.pinimg.com/564x/a3/c5/4c/a3c54cd46aeffa301cb28e1af6b6d0af.jpg'>
- <!--CONNECTION TWO-->
- <img src='https://i.pinimg.com/564x/c4/b8/3b/c4b83b1f2d6349999250d871df19018f.jpg'>
- <!--CONNECTION THREE-->
- <img src='https://i.pinimg.com/564x/4a/80/cf/4a80cf2142481b794c48308bf3fd3490.jpg'>
- <!--CONNECTION FOUR-->
- <img src='https://i.pinimg.com/564x/49/d2/d9/49d2d9f59168be6767791c47e1d4056e.jpg'>
- <!--COPY MORE HERE-->
- </div>
- <!--TEXT-->
- <div class='text-row-four'>
- <div class='text-title'>
- <ul>
- <li>ABOUT</li>
- <li>Muggle Studies Professor</li>
- <li>Ravenclaw</li>
- <li>Ghost</li>
- <li>Hogwarts</li>
- </ul>
- </div>
- <div class='text-column'>
- <div class='text'>
- Insert Milo lore here!
- </div>
- </div>
- </div>
- </div>
- <div class='info-column-four'>
- <!--QUOTE-->
- <div class='quote'>
- <h3>Deep into that darkness peering, long I stood there, wondering, fearing, doubting, dreaming dreams no mortal ever dared to dream before.
- <br>
- -Edgar Allan Poe</h3>
- </div>
- <!--INFO TABLE-->
- <div class='table'>
- <table>
- <tr>
- <td>Full Name</td>
- <td>Milo Tobias Ainsley</td>
- </tr>
- <tr>
- <td>Age at Death</td>
- <td>24</td>
- </tr>
- <tr>
- <td>DoB</td>
- <td>10 Feb</td>
- </tr>
- <tr>
- <td>Zodiac</td>
- <td>Aquarius</td>
- </tr>
- <tr>
- <td>Gender</td>
- <td>Male</td>
- </tr>
- <tr>
- <td>Orientation</td>
- <td>Gay</td>
- </tr>
- <tr>
- <td>Relationship</td>
- <td>Crushing</td>
- </tr>
- <tr>
- <td>Face Claim</td>
- <td>Kit Harington</td>
- </tr>
- <tr>
- <td>Height</td>
- <td>5'8"</td>
- </tr>
- <tr>
- <td>Weight</td>
- <td>idk he's a ghost</td>
- </tr>
- <tr>
- <td>Hair Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Eye Color</td>
- <td>Blue</td>
- </tr>
- <tr>
- <td>Wand</td>
- <td>10.25 inches; hazel; phoenix feather</td>
- </tr>
- <tr>
- <td>Boggart</td>
- <td>His books being set on fire</td>
- </tr>
- <tr>
- <td>Patronus</td>
- <td>Orca</td>
- </tr>
- <tr>
- <td>Amortentia</td>
- <td>old books, strawberry lollipops</td>
- </tr>
- <tr>
- <td>House</td>
- <td>Ravenclaw</td>
- </tr>
- <tr>
- <td>Favorite Branch of Magic</td>
- <td>Charms</td>
- </tr>
- <tr>
- <td>Least Favorite Branch of Magic</td>
- <td>Herbology</td>
- </tr>
- <tr>
- <td>Alignment</td>
- <td>Lawful Neutral</td>
- </tr>
- </tr>
- <tr>
- <td>MBTI</td>
- <td>ENTP</td>
- </tr>
- </table>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--CONNECTION POPUP ONE-->
- <div class="popup">
- <div class="popup-inner-four">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/d5/a1/f4/d5a1f4202c4957a314f581f27a076c01.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Atticus Kennedy</li>
- </ul
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- husband until milo died, rip
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP TWO-->
- <div class="popup">
- <div class="popup-inner-four">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/e4/00/94/e40094a82d1869a7734d8fe3e8310605.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Charlotte Ainsley-Kennedy</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- daughter who doesn't know him
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner-four">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/e2/6c/f1/e26cf1f124b55e93a1ac97649d056291.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Tabitha Faye</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- BFF
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP four-->
- <div class="popup">
- <div class="popup-inner-four">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/f3/07/40/f307408b6102c79b1bb7b83ae6ba9557.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Owen Cavanagh</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- office buddy
- </div>
- </div>
- </div>
- </div>
- <!--END COPY HERE-->
- </div>
- <!--CHARACTER 5 -->
- <div class='tab'>
- <div class='portrait-row'>
- <div class='portrait-inner'>
- <!--MAIN IMAGE-->
- <img class='big' src='https://images.perthnow.com.au/publication/1CA5DC13FB086ED44CDFCAA39FDBBA1D/bef873b7d01127a5f5baec4a40673980.jpeg'>
- <!--TITLE-->
- <div class='title'>
- <h1>Julia<br />Castellaine</h1>
- </div>
- <!--LINKS-->
- <div class='links'>
- <a href='https://pleasantprefects.tumblr.com/' title="tag">
- <i class='fas fa-hashtag'></i>
- </a>
- <a href='/tagged/juliawriting' title="writing">
- <i class='fas fa-pen'></i>
- </a>
- <a href='https://www.pinterest.com/izzyhardin9/pp=julia/' title="pinterest">
- <i class='fab fa-pinterest'></i>
- </a>
- </div>
- <!--STATS-->
- <!--To change the height of the stat bars change the height of the div here, for each div in percentages 0-100-->
- <div class='stats'>
- <div class='bar'>
- <div style="height: 42%;">
- <span>int: 3</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 42%;">
- <span>dex: 3</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 56%;">
- <span>per: 4</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 28%;">
- <span>str: 2</span>
- </div>
- </div>
- <div class='bar'>
- <div style="height: 42%;">
- <span>mag: 3</span>
- </div>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--Important: The connection links need to be in the same order as their respective popup or they will be wrong!-->
- <div class='connections'>
- <!--CONNECTION ONE-->
- <img src='https://i.pinimg.com/564x/a5/d7/76/a5d776aa4cdcf0b04bf8006d7a08521d.jpg'>
- <!--CONNECTION TWO-->
- <img src='https://i.pinimg.com/564x/0e/3a/d8/0e3ad87981219cd81f0425f9678f1812.jpg'>
- <!--CONNECTION THREE-->
- <img src='https://i.pinimg.com/564x/61/79/ab/6179abe768c70dfb67cc569168e07610.jpg?b=t'>
- <!--CONNECTION Four-->
- <img src='https://i.pinimg.com/564x/fe/4c/36/fe4c362a07826fc949fe064affd902d8.jpg?b=t'>
- <!--COPY MORE HERE-->
- </div>
- </div>
- <!--TEXT-->
- <div class='text-row-five'>
- <div class='text-title'>
- <ul>
- <li>ABOUT</li>
- <li>Barkeep, Excelsior Hall</li>
- <li>Slytherin</li>
- <li>Vindication</li>
- </ul>
- </div>
- <div class='text-column'>
- <div class='text'>
- Insert Julia lore here!
- </div>
- </div>
- </div>
- </div>
- <div class='info-column-five'>
- <!--QUOTE-->
- <div class='quote'>
- <h3>I am not altogether on anybody's side, because nobody is altogether on my side. <br>
- -J.R.R Tolkien</h3>
- </div>
- <!--INFO TABLE-->
- <div class='table'>
- <table>
- <tr>
- <td>Full Name</td>
- <td>Julia Castellaine
- </td>
- </tr>
- <tr>
- <td>Age</td>
- <td>25</td>
- </tr>
- <tr>
- <td>DoB</td>
- <td>17 April</td>
- </tr>
- <tr>
- <td>Zodiac</td>
- <td>Aries</td>
- </tr>
- <tr>
- <td>Gender</td>
- <td>Female</td>
- </tr>
- <tr>
- <td>Orientation</td>
- <td>Lesbian</td>
- </tr>
- <tr>
- <td>Relationship</td>
- <td>Single</td>
- </tr>
- <tr>
- <td>Face Claim</td>
- <td>Courtney Eaton</td>
- </tr>
- <tr>
- <td>Height</td>
- <td>5'10"</td>
- </tr>
- <tr>
- <td>Weight</td>
- <td>135 lbs</td>
- </tr>
- <tr>
- <td>Hair Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Eye Color</td>
- <td>Brown</td>
- </tr>
- <tr>
- <td>Wand</td>
- <td>10.25 inches; dogwood; unicorn hair</td>
- </tr>
- <tr>
- <td>Boggart</td>
- <td>???</td>
- </tr>
- <tr>
- <td>Patronus</td>
- <td>Dragonfly</td>
- </tr>
- <tr>
- <td>Amortentia</td>
- <td>earl grey tea, wood shavings, dark chocolate</td>
- </tr>
- <tr>
- <td>House</td>
- <td>Slytherin</td>
- </tr>
- <tr>
- <td>Favorite Branch of Magic</td>
- <td>Herbology</td>
- </tr>
- <tr>
- <td>Least Favorite Branch of Magic</td>
- <td>Divination</td>
- </tr>
- <tr>
- <td>Alignment</td>
- <td>True Neutral</td>
- </tr>
- </tr>
- <tr>
- <td>MBTI</td>
- <td>ESFP</td>
- </tr>
- </table>
- </div>
- </div>
- <!--CONNECTIONS-->
- <!--CONNECTION POPUP ONE-->
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner-five">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/47/7e/d5/477ed5add3095a68d761f94b3d794587.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Kathleen Kennedy</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- bff
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP TWO-->
- <div class="popup">
- <div class="popup-inner-five">
- <!--IMAGE-->
- <img src="https://i-h2.pinimg.com/236x/08/64/86/086486d777856a3032450d30eae1cd95.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Livinia Dermot</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- kiss buddy and friend, sort of boss
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner-five">
- <!--IMAGE-->
- <img src="https://i-h2.pinimg.com/236x/19/3c/c8/193cc8cfdb8ce672c213ff04a8e71d97.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Jacob Fawley</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- roommate that she totally doesn't hate
- </div>
- </div>
- </div>
- </div>
- <!--CONNECTION POPUP THREE-->
- <div class="popup">
- <div class="popup-inner-five">
- <!--IMAGE-->
- <img src="https://i.pinimg.com/564x/75/b7/cc/75b7ccdac9870e59a347fc6f90282ffe.jpg">
- <div class="con-desc">
- <div class='text-title'>
- <ul>
- <!--CONNECTION TITLE-->
- <li>Vanessa Ayres</li>
- </ul>
- </div>
- <!--CONNECTION TEXT-->
- <div class="con-text">
- BFF!
- </div>
- </div>
- </div>
- </div>
- </div>
- <!--END COPY HERE-->
- </main>
- <aside>
- <ul>
- <li>
- <img src='https://i.pinimg.com/564x/36/f9/f8/36f9f848fcca889ddf259b76fb83c546.jpg?b=tg'>
- </li>
- <li>
- <img src='https://i.pinimg.com/564x/30/19/76/3019768f45e0f37b81252922b084e0ae.jpg'>
- </li>
- <li>
- <img src='https://i.pinimg.com/564x/78/4c/28/784c286fd0d1cd7c72d81557b39227d5.jpg'>
- </li>
- <li>
- <img src='https://i.pinimg.com/564x/4b/e1/9a/4be19acc9a7ffbfa602f81c799c41d1f.jpg'>
- </li>
- <li>
- <img src='https://i.pinimg.com/564x/a9/cb/9a/a9cb9a82421168512f52900f9552acfe.jpg'>
- </li>
- </ul>
- </aside>
- </div>
- <script>
- $( document ).ready(function() {
- $('body').append(
- '<div id="nnspc" style="position: absolute; bottom: 0; padding: 10px; background: #181818;"><a style="font-family: helvetica; font-weight: bold; letter-spacing: -1px; color: #fff;" href="https://nonspace.tumblr.com">nonspace.</a></div>'
- );
- /*TABS*/
- $('.tab:first-of-type').addClass('current');
- $('aside li:first-of-type').addClass('active');
- $('aside li').on('click', function(e) {
- var currentAttrValue = ':nth-of-type(' + ($(this).index() + 1) + ')';
- window.location.hash = $(this).attr('data-tab');
- $('.tab' + currentAttrValue).addClass('current').siblings('.tab').removeClass('current');
- $(this).addClass('active').siblings('aside li').removeClass('active');
- });
- /*POPUP*/
- /*opens popup on click*/
- $(".connections img").on('click', function() {
- var currentIndex = $(this).index() + 3;
- var currentAttrValue = $(this).parents('.tab').index() + 1;
- var currentLoc = ".tab.current .popup:nth-of-type(" + currentIndex + ')';
- console.log(currentLoc);
- $(this).addClass('active').siblings('.connections img').removeClass('active');
- $('.popup').fadeOut();
- $(currentLoc).fadeIn().css('display', 'flex');
- $(document.body).addClass('noscroll'); /*noscroll on background*/
- });
- $(".popup").on('click', function() {
- $(this).fadeOut();
- $(document.body).removeClass('noscroll');
- $('.connections img').removeClass('active');
- });
- /*prevent closing popup by clicking on it*/
- $('.popup-inner').click(function (e) {
- e.stopPropagation();
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement