lexicon-aesthetic

<!-- CUSTOM FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Permanent Marker" rel="stylesheet" />

<style>

/* CHANGE CSS */

    .background { background-color:#4C2B1A; }
    .content { background-color:#E3AE7A; }
    .main-title { font-size:40px; font-family:'Permanent Marker'; }
    .sub-title {
        margin-top:50px;word-spacing:10px;
        font-style:italic;text-indent:30px;
        color:#666606;}

    p { font-family:serif;
        color:#99710f   }
    b { color:#708732       }

    a {text-decoration:none;}
    a:hover {text-decoration:underline;}

    .highlight {
        background-color:#D0842E;
        color:rgb(240,240,240);
        font-weight:bold    }
    .h02 {
        width:100%;
        text-indent:30px;
        font-family:serif;  }

    .hr01 {
        border-width:2px 0px 0px 0px;
        border-style:dashed;
        border-color:#BE9083;
        margin:0px;         }

    .credits {
        color:#708732;
        font-family:courier;
        font-size:12px
    }

    .lex-filter {   filter:sepia(30%)   }
    .content-img {  filter:sepia(50%); }

    ::selection {background-color:#e3a78f}

/* ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ ❀ */

    .lex {
        -webkit-mask-image:url(https://images.vexels.com/media/users/3/139197/isolated/preview/5aecde8d1d89d062d6c2464aaa1213d8-hexagon-shape-by-vexels.png);
        -webkit-mask-size:150px;
        width:150px;
        height:150px;
        position:absolute;
            }
    .lex-title {margin:0px 0px 20px 60px;}

    .h01 {height:300px}
    .aes1 {position:absolute; float:left; width:250px; height:350px; }
    .aes2 {position:relative; float:right; z-index:6; width:305px; height:200px;}

    .img1 {left:0px} .img2 {left:100px;top:60px;} .img3 {left:200px;} .img4 {left:-3px;top:115px;}

@media only screen and (max-width: 550px){
    .lex    {
        width:100px;
        height:100px;
        -webkit-mask-size:100px;
        position:relative;
    }
    .lex-title {margin:0px}

    .h01 {height:auto}

    .aes1 {
        position:relative;
        width:100%;
        height:auto
    }
    .aes2 {
        float:none;
        width:90%;
        height:auto;
        margin-left:auto;
        margin-left:auto
    }


    .img1, .img2, .img3, .img4 {
        left:0px;
        top:0px
    }

    }

</style>

<body>


<div style="max-width:600px;margin-left:auto;margin-right:auto" class="background">
<div style="width:95%; margin-left:auto; margin-right:auto; overflow:hidden;border-radius:0px 0px 30px 30px" class="content">
    <div class="h01">
        <div class="aes1">

    <!-- HEADER -->

        <center>
        <img src="https://i.pinimg.com/564x/c6/5d/e5/c65de520b5e836c5daa37dd83ce3b9b2.jpg" class="lex lex-filter img1" style="z-index:2"/>
        <img src="https://i.pinimg.com/564x/9b/b5/47/9bb54790ea8836f11e874ee53b1c0948.jpg" class="lex lex-filter img2" style="z-index:3;"/>
         <img src="https://i.pinimg.com/564x/06/a9/ed/06a9ed8dba3505dc0974ce04ddd18be0.jpg" class="lex lex-filter img3" style="z-index:4"/>
        <img src="https://i.pinimg.com/564x/fa/e6/39/fae6398e70f7d3b02b976c0f3e357ec8.jpg" class="lex lex-filter img4" style="z-index:5;"/>
        </center>
        </div>
        <div style="padding:10px;" class="aes2">
            <p style="line-height:90%;text-align:center;" class="lex-title main-title">Aesthetic Coding Lover</p>
            <p class="sub-title">“Sometimes I feel like giving up but I just can't because it isn't in my blood...”
― anonymous</p>
        </div>
    </div>
</div>
<br>


<div style="width:95%; margin-left:auto;margin-right:auto;overflow:hidden;border-radius:30px 30px 0px 0px" class="content">
    <div style="padding:20px 10px">

    <!-- CONTENT -->

    <center>
        <img src="https://i.imgur.com/ADQ7GmJ.jpg" style="border-radius:30px;width:100%" class="content-img"/></center><br>
            <p style="margin:5px 0px"><span class="highlight">&nbsp; Full Name. &nbsp;</span> Jane Love</p>
            <p style="margin:5px 0px"><span class="highlight">&nbsp; Nicknames. &nbsp;</span> Kawaii, Nephy</p>
            <p style="margin:5px 0px"><span class="highlight">&nbsp; Appearance. &nbsp;</span> Depending on use (black, blue, or pink)</p>
            <p style="margin:5px 0px"><span class="highlight">&nbsp; Personality &nbsp;</span> Weird AF, cute, introvert</p>
            <p style="margin:5px 0px"><span class="highlight">&nbsp; Relations. &nbsp;</span> Married to Pizza </p>
            <p style="margin:5px 0px"><span class="highlight">&nbsp; Interests. &nbsp;</span> Magic, Aesthetic, Coding, Slurpees</p>
            <p style="margin:5px 0px"><span class="highlight">&nbsp; Miscellaneous. &nbsp;</span> May eat your food, beware</p>
    <br>
    <div class="highlight h02">
        Extra Information
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>

Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet. <b>(S2E10)</b></p>
    <br>
    <hr class="hr01">

    <!-- CREDITS / DO NOT REMOVE -->
<br>
        <span class="credits">&copy; Written by <b style="color:#73700a">xoxo</b>
            <br>Coding by kawaii-lau @ <a target="_blank" href="https://kawaii-lau.tumblr.com" style="color:#708732;">https://kawaii-lau.tumblr.com</a></span>
    </div>

</div>
</div>
</body>