(1.5/12) AIO-Page Yeri

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--

**    Yeri (AIO-Page) -Page by Caro / baechys@tumblr

------------------------------------------------------------------------

Script/s used:

- Fullpage.js
- SMT-Tooltips
- Masonry

------------------------------------------------------------------------

Instructions:

- Read the annotations i made throughout the code carefully!
- Knowledge of HTML and CSS is recommended for further customization!
- Please do not remove this text!

------------------------------------------------------------------------

Special Thanks:

To Bev (magnusthemes.tumblr.com) for helping me install fullpage.js and general love and support!

------------------------------------------------------------------------

Any questions?

Please visit baechys.tumblr.com/faq

------------------------------------------------------------------------

CREDIT TO HTTP://BAECHYS.TUMBLR.COM
-->

<head>

<!------------------------- General HTML ------------------------->

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

<!------------------------- Imported Fonts ------------------------->

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">

<!------------------------- SCRIPTS! DONT TOUCH! ------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.css" rel="stylesheet">

<link href="https://static.tumblr.com/d70w4cr/D4Wp3aaa7/crdstyle.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.js"></script>

<script>
$(document).ready(function(){
	$('#fullpage').fullpage({
		navigation: true,
		navigationPosition: 'right',
		navigationTooltips: [],
        slidesNavigation:true,
        controlArrows:false,
		showActiveTooltip: false,
		keyboardScrolling:true,
		navigationTooltips: ['About', 'Navigation', 'Blogroll'],
		showActiveTooltip: false,
		normalScrollElements: '.abtcont, .tagscont, .brcont'
	});
});
</script>

<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>

<script type="text/javascript">
$(window).load(function () {
$('.tagscont').masonry({
itemSelector : ".tags",
},
function() { $('.tagscont').masonry({ appendedContent: $(this) }); }
);
});
</script>

<script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>
<style type="text/css">

/* ----------------- basic settings ----------------- */

body{
    margin:0px;
    padding:0px;
    font-family: 'open sans', arial, sans-serif;
    font-size:12px; /* change font size */
    color:#666666; /* change body font color */
}

b, strong{
    color:#555; /* bold text color */
}

a{
    color:#baaae6; /* links color color */
    text-decoration:none;
}

a:hover{
    color:#fbafea; /* links hover color */
    -moz-transition-duration: 0.5s; /* links hover transition */
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

h1, h2, h3, h4, h5, h6{
    font-family:'montserrat', sans-serif;
    margin:5px 0px;
    line-height:150%;
}

blockquote{
    margin:10px 0;
    padding:0 0 0 10px;
    border-left:1px solid #666666;
}

underlined{
    border-bottom:1px solid #666666;
}

pre{
    overflow:auto;
    background-color:#eee;
    display:block;
    padding:5px;
}
/* ----------------- scrollbar ----------------- */

::-webkit-scrollbar-thumb:vertical {
    background-color: #ffffff;
    width:6px;
    height:auto;
    }


::-webkit-scrollbar-thumb:horizontal {
    background-color: #ffffff;
    height:6px;
    }

::-webkit-scrollbar {
    height:6px;
    width:6px;
    }

::selection {
        background-color:#fbafea;
        color:white;}

/* ----------------- tooltips ----------------- */

#s-m-t-tooltip {
    max-width:150px;
    padding:5px 10px 5px 10px;
    margin:20px 14px 7px 10px;
    border:2px solid #899afe; /* tooltips border color */
    background-color:#fff; /* tooltips background color */
    font-style: normal;
    font-size:12px; /* tooltips font size */
    line-height:150%;
    color:#888; /* tooltips text color */
    letter-spacing:0px;
    text-transform:none;
    z-index:999999999;
    border-radius:5px;
}

/* ----------------- FULLPAGE RELATED STUFF! ----------------- */
  /* ----------------- TOUCH AT OWN RISK! ----------------- */

#fp-nav ul, .fp-slidesNav ul {background:rgba(255,255,255,0.25); padding:3px 0; border-radius:20px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {background:rgba(255,255,255,0.6); border-radius:10px;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span {background:#fff;}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
    padding:0px 10px;
    font-family:'open sans', arial, sans-serif;
    letter-spacing:0.5px;
}

/* ----------------- FULLPAGE-SLIDES ----------------- */

.section, .slide {
  background:#eee;
  text-align:center;
}

/* About Section */

/* HOW TO EDIT THE GRADIENTS */
/* IF YOU WANT EACH SLIDE TO BE ONE COLOR, remove ANYTHING that comes after "background: (hexcode);" and change the existing hexcode to the color you'd like to have! */

/* IF YOU WANT A GRADIENT i'd recommend you to choose at least 4 colors that go nicely with eachothewr, theres a site named gradienty.tumblr.com so you can use that to get inspiration and the hexcodes to insert into the theme!

So this is essentially how you insert the 4 colors you've gotten:

.section.one {
    background: #color 1;
    background: -webkit-linear-gradient( #color 1, #color 2);
    background: -o-linear-gradient( #color 1, #color 2);
    background: -moz-linear-gradient( #color 1, #color 2);
    background: linear-gradient( #color 1, #color 2);
}

.section.two {
    background: #color 2;
    background: -webkit-linear-gradient( #color 2, #color 3);
    background: -o-linear-gradient( #color 2, #color 3);
    background: -moz-linear-gradient( #color 2, #color 3);
    background: linear-gradient( #color 2, #color 3);
}

.section.three {
    background: #color 3;
    background: -webkit-linear-gradient(#color 3, #color 4);
    background: -o-linear-gradient(#color 3, #color 4);
    background: -moz-linear-gradient(#color 3, #color 4);
    background: linear-gradient(#color 3, #color 4);
}

*/


.section.one {
    background: #cabeec;
    background: -webkit-linear-gradient(#cabeec, #fbafea);
    background: -o-linear-gradient(#cabeec, #fbafea);
    background: -moz-linear-gradient(#cabeec, #fbafea);
    background: linear-gradient(#cabeec, #fbafea);
}

/* Navigation Section */

.section.two {
    background: #fbafea;
    background: -webkit-linear-gradient(#fbafea, #f9abc0);
    background: -o-linear-gradient(#fbafea, #f9abc0);
    background: -moz-linear-gradient(#fbafea, #f9abc0);
    background: linear-gradient(#fbafea, #f9abc0);
}

/* Blogroll Section */

.section.three {
    background: #f9abc0;
    background: -webkit-linear-gradient(#f9abc0, #f9bdb8);
    background: -o-linear-gradient(#f9abc0, #f9bdb8);
    background: -moz-linear-gradient(#f9abc0, #f9bdb8);
    background: linear-gradient(#f9abc0, #f9bdb8);
}

/* ----------------- Content-containers ----------------- */

.cont{
    text-align:left;
    width:900px;
    height:600px;
    margin:0 auto;
    background-color:rgba(255,255,255,0.3); /* change 0.3 to any opacity you want! */
    border-radius:15px; /* remove this line if you want square corners */
}

/* ----------------- About-section ----------------- */

/* Information Sidebar */

.leftside{
    padding-top:20px;
    margin-left:20px;
    float:left;
}

.sideimg{
    width:300px;
    height:360px;
    background-color:#fb969e;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.sideimg img{
    max-width:300px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

/* About Box */

.infobox{
    width:280px;
    height:180px;
    padding:10px;
    background-color:#fff;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
.abt{
    padding:0px 10px 10px 0px;
    line-height:300%;
    float:left;
    width:240px;
    font-size:12px;
}

.abt b{
    padding:2px 5px;
    border-radius:5px;
    letter-spacing:0.50px;
    margin:0px 7px 0px 0px;
    font-weight:400;
    font-size:12px; /* label font-size */
    background-color:#cabeec; /* change background-color of the labels saying name, age etc */
    color:#fff; /* label text color */
}

/* Navigation Section */

.rightside{
    padding-top:20px;
    width:540px;
    float:right;
    padding-right:20px;
}

/* Hello-Text */

.hello{
    font-family:'montserrat', sans-serif;
    color:#fff;
    font-size:35px;
    font-weight:600;
    margin-top:-10px;
}

/* Content-container */

.abtcont{
    padding:10px;
    height:385px;
    overflow-y:scroll;
    margin-top:10px;
    border-top-left-radius:10px; /* remove this and the following line if you don't want rounded corners */
    border-top-right-radius:10px;
    background-color:#fff; /* background-color of the box */
    font-size:12px; /* font-size*/
    color:#666; /* text-color */
}


.abtcont::-webkit-scrollbar-thumb {
    height:6px;
    width:6px;
    background-color:#baaae6; /* about-box scrollbar color */
    }
/* Quote-box */

.quote{
    border-bottom-left-radius:10px; /* remove this and the following line if you don't want rounded corners */
    border-bottom-right-radius:10px;
    padding:10px;
    height:93px;
    background-color:#fbafea; /* background-color of the quote box */
    color:#fff; /* text-color of the quote box */
}

.quote h2{
    font-weight:600;
    line-height:150%;
    margin:0px;
}


/* ----------------- Tags/Links-section ----------------- */

.helloo{
    padding-top:20px;
    margin-left:20px;
    font-family:'montserrat', sans-serif;
    color:#fff;
    font-size:30px;
    font-weight:600;
    margin-top:-10px;
}

.tagscont{
    padding:0px 5px;
    margin-top:10px;
    height:530px;
    overflow-y:scroll;
}

.tags{
    width:250px;
    margin:19.7px;
    float:left;
    background-color:rgba(255,255,255,0.5);
    border-radius:10px;
}

.tagslabel{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background-color:#fff;
    padding:10px;
    text-align:center;
    font-family:'montserrat', sans-serif;
    font-weight:600;
    font-size:120%;
    text-transform:uppercase; /* remove this line or change uppercase to lowercase if you don't want uppercase text */
    color:#fbafea; /* tags label text color */
}

.tags ul{
    list-style-type:none;
    margin-left:-40px;
}

.tags li{
    background-color:#fff;
    line-height:150%;
    border-radius:5px;
    margin:10px;
    width:220px;
    padding:5px;
}

.tags li a{
    font-weight:bold;
    color:#899afe; /* tags link color */
    text-transform:uppercase; /* remove this line or change uppercase to lowercase if you don't want uppercase text */
}

.tags li a:hover{
    color:#fbafea; /* tags link hover color */
}


/* ----------------- Blogroll-section ----------------- */

.brcont{
    margin-top:10px;
    height:490px;
    padding:20px;
    overflow-y:scroll;
}

.followed{
    width:64px;
    height:64px;
    padding:10px;
    background-color:rgba(255,255,255,0.5);
    float:left;
    margin:11.3px;
    border-radius:10px;
}

.follavi{
    margin:0 auto;
    height:64px;
    width:64px;
    border-radius:100%;
}

</style>
</head>
<body>

<div id="fullpage">
<div class="section one">

    <div class="cont">

     <div class="leftside">
     <div class="sideimg">
         <img src="https://static.tumblr.com/d70w4cr/iN1p38g6f/yeripage.png"/> <!-- replace link between the quotation-marks with a link to your own imnage! -->
     </div>
     <div class="infobox">
     <div class="abt">

<!-- start editing your information here! You can remove some lines but don't add more lines unless you know how to change the box's height! -->

     <b>Name:</b> Caroline <br>
     <b>Age:</b> 19 <br>
     <b>Pronouns:</b> She/Her <br>
     <b>Location:</b> Germany <br>
     <b>Languages:</b> German, English
    </div> <!-- abt end -->
    </div>
    </div> <!-- left side -->


    <div class="rightside">
     <div class="hello">Hello!</div>
     <div class="abtcont">

     <!-- This is your aqbout-box! Expess yourself however you want because the box will scroll, use as many words as you like!

     Just remove the text until where it says </div> <-- about text box end -> and you should be alright"
     -->

     <p>
     <b >Bold text </b>, <i> Italic text </i>, <underlined> underlined text </underlined>, <strike> Crossed out text </strike>, <a href="/"> This is a link </a>
     </p>

     <p>
    <ul>
        <li> Unsorted list </li>
        <li> Unsorted list </li>
        <li> Unsorted list </li>
    </ul>

    <ol>
        <li> Sorted list </li>
        <li> Sorted list </li>
        <li> Sorted list </li>
    </ol>

    <blockquote>
    This is a paragraph in a blockquote, you could use this to emphasize     quotes in a long paragraph
    </blockquote>
     </p>

     <p>
     This is just a normal paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     </p>

     </div> <!-- about text box end -->

     <div class="quote">

     <!-- Here goes your quote! Please keep it somewhat short, this box doesnt scroll but if you're confident enough in your CSS-editing abilities, you should be able to change the height easily if you want to have a longer quote! Just make sure to change the height of the about content box aswell and it's gonne be fine! -->

     <h2>
     "Put a quote here, it should be two lines maximum or else it will break!"
     </h2>
     <br> - Caroline Baechys
     </div>
    </div><!-- right side end -->

    </div><!-- container end -->
  </div><!-- section one -->

<div class="section two">
   <div class="cont">

       <div class="helloo">Tags & Links</div>

    <div class="tagscont">
<!--
Want more link-boxes than these? No problem! The just copy the following ->
    <div class="tags">
    <div class="tagslabel"> Title </div>
    <ul>
    <li> <a href="/"> LINK </a> </li>
    <li> <a href="/"> LINK </a> </li>
    <li> <a href="/"> LINK </a> </li>
    <li> <a href="/"> LINK </a> </li>
    <li> <a href="/"> LINK </a> </li>
    </ul>
    </div>

And just paste it anywhere you want as long as it's BEFORE the tag saying "tags container end"!
-->

    <div class="tags">
    <div class="tagslabel"> Navigation </div>
    <ul>
    <li> <a href="/"> HOME </a> </li>
    <li> <a href="/"> ASK </a> </li>
    <li> <a href="/"> CREATIONS </a> </li>
    <li> <a href="/"> MY FAVES </a> </li>
    <li> <a href="/"> ARCHIVE </a> </li>
    </ul>
    </div><!-- tags end -->

    <div class="tags">
    <div class="tagslabel"> Red Velvet </div>
    <ul>
    <li> <a href="/"> #Irene </a> </li>
    <li> <a href="/"> #Seulgi </a> </li>
    <li> <a href="/"> #Wendy </a> </li>
    <li> <a href="/"> #Joy </a> </li>
    <li> <a href="/"> #Yeri </a> </li>
    </ul>
    </div><!-- tags end -->

    <div class="tags">
    <div class="tagslabel">Odd Eye Circle</div>
    <ul>
    <li> <a href="/"> #Jinsoul </a> </li>
    <li> <a href="/"> #Kim Lip </a> </li>
    <li> <a href="/"> #Choerry </a> </li>
    </ul>
    </div><!-- tags end -->

    <div class="tags">
    <div class="tagslabel"> twice </div>
    <ul>
    <li> <a href="/"> #MOMO </a> </li>
    <li> <a href="/"> #SANA </a> </li>
    <li> <a href="/"> #MINA </a> </li>
    <li> <a href="/"> #NAYEON </a> </li>
    <li> <a href="/"> #JIHYO </a> </li>
    <li> <a href="/"> #JEONGYEON </a> </li>
    <li> <a href="/"> #DAHYUN </a> </li>
    <li> <a href="/"> #CHAEYOUNG </a> </li>
    <li> <a href="/"> #TZUYU </a> </li>
    </ul>
    </div><!-- tags end -->

    <div class="tags">
    <div class="tagslabel"> Blackpink </div>
    <ul>
    <li> <a href="/"> #Jennie </a> </li>
    <li> <a href="/"> #Rosé </a> </li>
    <li> <a href="/"> #Lisa </a> </li>
    <li> <a href="/"> #Jisoo </a> </li>
    </ul>
    </div><!-- tags end -->


    <div class="tags">
    <div class="tagslabel">Soloists</div>
    <ul>
    <li> <a href="/"> #Sunmi </a> </li>
    <li> <a href="/"> #Suzy </a> </li>
    <li> <a href="/"> #Jessica </a> </li>
    <li> <a href="/"> #IU </a> </li>
    <li> <a href="/"> #Chungha </a> </li>
    <li> <a href="/"> #Lim Kim </a> </li>
    </ul>
    </div><!-- tags end -->

    </div><!-- tags container end -->

   </div><!-- container end -->
</div><!-- section two -->

  <div class="section three">
      <div class="cont">

      <div class="helloo">Blogroll</div>

    <!-- This is just a good old blogroll! But PLEASE keep in mind that the people you're following will ONLY show up if you're using this page on your main-blog, otherwise this won't show up if you're using a sideblog! -->

    {block:Following}
    <div class="brcont">
    {block:Followed}
    <div class="followed">
    <div class="follavi">
    <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}"></a>
    </div><!-- followed avi end -->
    </div><!-- followed end -->
    {/block:Followed}
    </div><!-- blogroll cont end -->
    {/block:Following}

      </div><!-- container end -->
  </div><!-- section three -->
</div>

<!-- i hope you feel bad if you remove my credits smh i release this page for free and a lot of frustration and hard work went into this thing so please leave them in, thanks ♡ -->
<div id="c"><a href="http://baechys.tumblr.com" title="Made with Love by Caroline">BCHYS</a></div>

</body>
</html>