About Page 1 - Notebook (Revamp) - cactusthemes

<!DOCTYPE html>

<head>

<!--
                        ABOUT PAGE 1 - NOTEBOOK (revamp)
                              by cactusthemes
-->

<!-- CREDITS:   - Fade in on refresh by cyantists
                - Custom tumblr controls by cyantists
                - Tooltips by Manos Malihu
                - Cactus icon by smashicons (https://thenounproject.com/smashicons/)

-->


<title>{Title}</title>
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}">
<meta name="description" content="{MetaDescription}">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Nunito|Oxygen|PT+Sans|Rubik" rel="stylesheet">

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

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script src="https://static.tumblr.com/uxq3xua/JA1pt7glh/aboutbook.js"></script>

<style type="text/css">

:root {
    --body-background:#eee; /* background color body */
    --font-size:14px; /* font size for whole document */
    --font-family:Nunito; /* font family - you can choose between:
                                                    - Nunito
                                                    - Oxygen
                                                    - PT Sans
                                                    - Rubik */
    --text-color:#999; /* general color for text */
    --link-color:#444; /* color for links + darker color */
    --container-background:#fff; /* backround color book */
    --background-pages:#fafafa; /* background color fake pages */
    --accent-color:#b0a5ff; /* accent color */
    --rgb-middle-fold:238,238,238; /* rgb color for the fold in the middle */
}

/* DELETE THIS IF YOU WANT LIGHT TUMBLR CONTROLS */

div.status-indicator {
    filter:invert(1)!important;
}
iframe.iframe-controls--desktop {
    filter:invert(1) contrast(150%);
    -webkit-filter:invert(1) contrast(150%);
    -o-filter:invert(1) contrast(150%);
    -moz-filter:invert(1) contrast(150%);
    -ms-filter:invert(1) contrast(150%);
    opacity:.7!important;
}

/* END OF TUMBLR CONTROLS DELETE */

/* DELETE THIS IF YOU DON'T WANT A FADE IN EFFECT */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
   opacity:0;
   -webkit-animation:fadeIn ease-in 1;
   -moz-animation:fadeIn ease-in 1;
   animation:fadeIn ease-in 1;
   -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
   -webkit-animation-duration:1s;
   -moz-animation-duration:1s;
   animation-duration:1s;}
.fade-in.one {
   -webkit-animation-delay:0s;
   -moz-animation-delay:0s;
   animation-delay:0s;}
.fade-in.two {
   -webkit-animation-delay:0.8s;
   -moz-animation-delay:0.8s;
   animation-delay:0.8s;}

/* END OF FADE IN DELETE */

/* THIS IS THE REST OF THE CSS. PLEASE DON'T EDIT IT UNLESS YOU KNOW WHAT YOU'RE DOING */

body {
    background:var(--body-background);
    margin:0;
    font-size:var(--font-size);
    font-family:var(--font-family);
    color:var(--text-color);
}

::-webkit-scrollbar {
    width:12px;
    height:12px;
    background:var(--container-background);
}

::-webkit-scrollbar-thumb {
    background:var(--accent-color);
    border:3px solid var(--container-background);
    border-radius:15px;
}

::selection {
    background:var(--accent-color);
    color:var(--link-color);
}

::-moz-selection {
    background:var(--accent-color);
    color:var(--link-color);
}

iframe.iframe-controls--desktop {
    white-space:nowrap!important;
    z-index:99999999999999!important;
    top:10px!important;
    right:15px!important;
    transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    transform:scale(0.65);
    transform-origin:100% 0;
    -webkit-transform:scale(0.75);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.75);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.75);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.75);
    -ms-transform-origin:100% 0;
}

iframe.tmblr-iframe--app-cta-button, iframe.iframe-controls--phone-mobile {
    display:none!important;
}

#s-m-t-tooltip {
    max-width:300px;
    overflow-x:auto;
    margin:15px;
    padding:7px;
    background:var(--accent-color);
    color:var(--link-color);
    box-shadow:0 0 4px rgba(0,0,0,.2);
    border-radius:10px;
    height:auto;
    word-wrap:break-word;
    z-index:9999!important;
    text-transform:lowercase;
}

a {
    text-decoration:none;
    transition:all .5s ease-in-out;
}

section#container {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    height:100vh;
    width:100%;
    overflow:hidden;

}

article.container {
    width:65vw;
    height:85vh;
    background:var(--container-background);
    position:relative;
    border-radius:30px;
    box-shadow:0 0 8px rgba(0,0,0,0.2);
}

article.container::before, article.container::after {
    content:"";
    height:99%;
    position:absolute;
    width:98%;
    z-index:-1;
    background:var(--background-pages);
    box-shadow:0 0 8px rgba(0,0,0,0.2);
    top:4px;
}

article.container::before {
    border-radius:30px 0px 0px 30px;
    left:-15px;
}

article.container::after {
    border-radius:0px 30px 30px 0px;
    right:-15px;
}

article.container .facts {
    height:100%;
    width:50%;
    display:inline-block;
    padding:25px;
    box-sizing:border-box;
}

article.container .facts:before {
    content:'';
    position:absolute;
    width:10px;
    height:100%;
    background:linear-gradient(to right, rgba(var(--rgb-middle-fold),0), rgb(var(--rgb-middle-fold)), rgba(var(--rgb-middle-fold),0));
    margin-top:-25px;
    margin-left:calc(50% - 30px);
}

article.container .facts .img {
    height:52vh;
    background:var(--accent-color);
    border-radius:20px;
    overflow:hidden;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
}

article.container .facts .img img {
    border-radius:20px;
    max-width:100%;
    max-height:100%;
}

article.container .about {
    position:relative;
    margin-top:25px;
}

article.container .about .col {
    display:inline-block;
    position:absolute;
    width:50%;
    max-width:50%;
    overflow:hidden;
}

article.container .about .col:nth-of-type(2) {
    margin-left:50%;
}

article.container .about em {
    display:block;
    font-style:normal;
}

article.container .about em b {
    background:var(--accent-color);
    color:var(--link-color);
    text-transform:lowercase;
    padding:5px;
    border-radius:7px;
    line-height:35px;
    margin-right:5px;
    white-space:nowrap;
}

article.container .desc {
    position:absolute;
    width:50%;
    display:inline-block;
    padding:25px;
    box-sizing:border-box;
    height:100%;
}

article.container .desc h2, article.container h2.mob {
    text-align:center;
    text-transform:uppercase;
    margin:0;
    padding-bottom:10px;
}

article.container .desc .text {
    overflow:auto;
    max-height:calc(100% - 23px);
}

article.container .desc .text p:first-of-type {
    margin-top:0;
}

article.container .desc .text a {
    position:relative;
    display:inline-block;
    color:var(--link-color);
}

article.container .desc .text a:before, article.container .desc .text a:after {
    content:'';
    position:absolute;
    width:0%;
    height:3px;
    top:50%;
    margin-top:-0.5px;
    background:var(--accent-color);
}

article.container .desc .text a:before {
    left:0px;
}

article.container .desc .text a:after {
    right:2.5px;
    background:var(--accent-color);
    transition:width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

article.container .desc .text a:hover:before {
    background:var(--accent-color);
    width:100%;
    transition:width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

article.container .desc .text a:hover:after {
    background:transparent;
    width:100%;
    transition:0s;
}

section#container nav {
    position:absolute;
    top:12.5vh;
    margin-left:calc(32.5vw + 23px);
    z-index:0;
}

section#container nav a {
    display:block;
    background:var(--accent-color);
    padding:5px;
    margin-bottom:5px;
    position:relative;
    color:var(--link-color);
    height:20px;
    width:100%;
}

section#container nav a:last-of-type {
    margin-bottom:0px;
}

section#container nav a:after {
    content:'';
    position:absolute;
    top:0;
    width:0;
    height:0;
    border-right:12px solid transparent;
    border-top:15px solid var(--accent-color);
    border-bottom:15px solid var(--accent-color);
    right:-12px;
}

section#container nav a:hover {
    width:120%;
}

/* CREDIT. DO NOT TOUCH */

#credz {
    position:fixed;
    bottom:15px;
    right:20px;
    width:30px;
    height:30px;
    padding:7px;
    background:#fff;
    border-radius:50px;
    border:1px solid rgba(0,0,0,.1);
    background-image:url('https://static.tumblr.com/uxq3xua/6i1p5p058/cactus_icon_green.png');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:25px;
    transition:all .5s ease-in-out;
}

a[href="http://cactusthemes.tumblr.com"]:hover > #credz {
    transform:scale(1.1);
}

/* END OF CREDIT */

@media only screen and (max-width:984px) and (min-width:800px) {
    article.container {
        width:83vw;
    }

    section#container nav {
        margin-left:calc(41.5vw + 23px);
    }

    section#container nav a:hover {
        width:100%;
    }
}


@media only screen and (max-width: 799px) and (min-width:700px) {
    article.container {
        width:95vw;
    }

    section#container nav {
        display:none;
    }
}

@media only screen and (min-width:700px) {
    article.container h2.mob {
        display:none;
    }
}

@media only screen and (max-width:699px) {
    section#container {
        display:block;
        overflow:auto;
        height:auto;
        width:auto;
    }

    article.container {
        width:95%;
        height:auto;
        margin:auto;
    }

    article.container::before {
        left:-9px;
    }

    article.container::after {
        right:-9px;
    }

    article.container .facts {
        display:block;
        width:100%;
        height:auto;
    }

    article.container .facts:before {
        display:none;
    }

    article.container .facts .about {
        height:140px;
    }

    article.container .desc {
        position:relative;
        height:auto;
        width:100%;
        display:block;
        margin-top:-20px;
    }

    article.container .desc h2 {
        display:none;
    }

    article.container h2.mob {
        padding-bottom:20px;
    }

    section#container nav {
        display:none;
    }
}

</style>

</head>

<body>

<section id="container" class="fade-in one">

<article class="container">

<section class="facts fade-in two">

<h2 class="mob">about</h2>

<div class="img">
<img src=""> <!-- INSERT YOUR IMAGE HERE -->
</div>

<section class="about">

<article class="col">

<!-- START FACTS SECTION -->

<!-- ALL OF THESE ADHERE TO THE SAME FORMAT, PLEASE STICK TO IT -->

<em><b>name</b>name</em>

<em><b>age</b>age</em>

<em><b>pronouns</b>pronouns</em>

<em><b>location</b>location</em>

</article>

<article class="col">

<em><b>birthday</b>bday</em>

<em><b>mbti</b>mbti</em>

<em><b>star sign</b>star sign</em>

<em><b>occupation</b>occupation</em>

</article>

<!-- END FACTS SECTION -->

</section>

</section>

<section class="desc fade-in two">

<h2>about</h2> <!-- TEXT TITLE -->

<div class="text">

<!-- START OF DESCRIPTION -->

<p>This is where you put your description text! You can make this as long as you want, if it overflows a scrollbar appears automatically. This page was my first ever finished code, but I figured it needed a revamp so I wouldn't have to feel ashamed about it anymore. Now it's shaped like a book. Yay!</p>

<p>I hope you enjoy what I've put together! It was a fun exercise and it's always nice to revisit old codes. I actually coded this while I was on a train because I didn't really have anything better to do, haha.</p>

<ul>
<li>This is what</li>
<li>A list looks like</li>
</ul>

<ol>
<li>Or it looks like this</li>
<li>If you want numbers </li>
</ol>

<p><b>Maybe you want some bold text though?</b> <i>Or italic text?</i> <u>Maybe a little underline if you're feeling fancy</u></p>

<p><a href="/" title="with a title!">This</a> is what a link looks like by the way! I hope you like it ^^ Also, please be sure to put your paragraphs in a &lt;p&gt; &lt;/p&gt;. It'll look like this if you do, which I think/hope is what you want?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dui at eleifend facilisis. Praesent magna magna, eleifend non iaculis at, consectetur ut felis. Aliquam erat volutpat. Mauris porttitor magna mollis, ullamcorper enim convallis, pulvinar ipsum. Phasellus aliquam velit ante, nec tempus felis fermentum vitae. Aenean euismod iaculis dignissim. Proin id accumsan erat. Nulla consectetur diam nibh, a blandit nibh pulvinar eu. Nulla leo magna, blandit a dolor ac, fringilla porta eros. Etiam dignissim dui et sapien interdum, sit amet sollicitudin ligula lobortis.</p>

<!-- END OF DESCRIPTION -->

</div>

</section>

</article>

<nav class="fade-in two">

<!-- START LINKS -->

<a href="/">home</a>

<a href="/ask">ask</a>

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

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

<!-- END LINKS -->

</nav>

</section>

<!-- CREDIT. DO NOT TOUCH -->

<a href="https://cactusthemes.tumblr.com" title="by cactusthemes">
<div id="credz" class="fade-in two">
</div>
</a>

</body>

</html>