{About:3} à propos

<!--
   // Page:About

    à propos

    by espoirthemes //

    + edits to the code are allowed
    + send questions to espoirthemes.com/contact
    + customizing instructions are throughout code
    + please do not move or remove the credit
-->

<!DOCTYPE html>
<html>
    <head>

    <!--
    ** Change font Part 1 **

    go to google fonts to change the font below. Replace the line below this with the new link from google fonts
    -->
        <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

        <!-- do not remove this line, it keeps the page responsive -->
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <!-- you can change the favicon and title here. right now it is just the tumblr defaults -->
        <link rel="shortcut icon" href="{Favicon}" />
        <title> {Title} </title>
    </head>

    <style type="text/css">
       body {
           margin:0;
           /* ** Change font Part 2 **

           When using google fonts, you have 2 steps. The link, and the CSS. Below is where you need to replace the css for the font-family
           */
           font-family:Quicksand;
           /* background color */
           background:white;
           /* to add a background image, change it to
           background:url(imageurl) center center fixed;
           to make it full, add the next line too,
           background-size:cover;
           */
           line-height:160%;
       }

       /* link in the description */

      .text  a {
           padding:2px 8px;
           color:crimson; /* change color */
           text-decoration:none; /* keep this line if you don't want the default underline */
           border-radius:4px; /* rounded corners */
           transition:.6s;
           border:2px solid crimson; /* border */
       }

       /* hover effect */

       .text a:hover {
           background:crimson;
           color:white;
       }


       /* container */

       main {
           background:white; /* main background */
           width:40%; /* width is set to 40% width of the screen for larger screen sizes */
           overflow:hidden;
           position:relative;
           border-radius:8px; /* rounded corners */
           margin:100px auto; /* positioning. right now it is 100px from the top, and auto is to center it */

       }

       /* keeps the header image from overflowing */

       main img {
           max-width:100%;
       }
       /* description */
       .text {
           background:#f8f8f8; /* background */
          padding:40px; /* spacing */
          margin-top:-10px;
       }

       /* links */

       nav {
           background:crimson;
           padding:20px;
       }

       nav a {
           text-decoration:none;
           color:white;
           margin:10px;
           /* this adds the numbers to the links */
         counter-increment: dec;

}

/* numbers for links part 2 */
nav a::before {
    content: counters(dec, ".",decimal-leading-zero) " ";

}

/* Heart icon */
/* I would not edit this unless you know CSS */

.icon {
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    margin-left:-70px;
    width:100px;
    top:20%;
    margin-top:-50px;
}

svg {
  height: 140px;
  width: 140px;
}
path {
  fill: url(#bg-image);
}


@media (max-width:800px){
    main {
        width:80%;
    }
    }

    #egg { opacity:.6;right:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border:2px solid pink;  z-index:4;

            }
 #egg:hover   { animation-name: egg;
    animation-duration: 1s;
    animation-iteration-count: infinite;}
    @keyframes egg{
        0%{}
        10%{transform:rotate(20deg)}
        80%{transform:rotate(-20deg)}
        100%{}
    }


    </style>
<body>

<!-- Content start -->
    <main>

    <!-- Heart Icon and Header image -->
    <div class="im">
<!-- heart icon -->
    <div class="icon">
    <svg viewBox='0 0 100 100'>
  <defs>
    <pattern id='bg-image' width='1' height='1' patternUnits='objectBoundingBox'>
      <image xlink:href='{PortraitURL-128}' width='72' height='72' />
    </pattern>
  </defs>
  <path stroke="crimson" stroke-width="5" d='M50,90 L20,60
           A15,15 0 0,1 50,30
           A15,15 0 0,1 80,60 z' />
</svg>

</div>
<!-- heart icon end -->

        <!-- header image. replace url with the image you want -->
        <img src="https://images.unsplash.com/photo-1516414559093-91c1c3d7359c?ixlib=rb-0.3.5&s=708848c0c25158c5176732af5739e81f&auto=format&fit=crop&w=1350&q=80">
        </div>

        <!-- header and icon end -->

        <!-- about section -->
        <div class="text">

        <!-- replace this text with your own -->
        à propos is an about page to accompany
        <!-- this is how you add a link to the about -->
        <a href="http://bectheme.tumblr.com">Bec</a>.

        <!-- to create space between paragraphs, wrap your paragrpahs in <p> </p> like I did below -->
        <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, blandit in finibus id, tincidunt vitae nunc. Vivamus pretium, mauris sit amet hendrerit finibus, risus felis consectetur metus, at vehicula tellus lacus non erat.

           </p>
        </div>

        <!-- about end -->

        <!-- navigation -->
        <nav>
        <!-- to remove a link, remove everything between <a href=" and </a>
        to add a link, copy and paste
        <a href="url">name</a>
        and fill in with new information
        -->
            <a href="/">Home</a> <a href="/ask">Ask</a> <a href="/archive">Archive</a>
        </nav>
        <!-- end content-->

    </main>

      <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>

</body>
</html>