433 lines
39 KiB
HTML
433 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Evelyn Template</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i|PT+Serif:700" rel="stylesheet">
|
|
<link rel="stylesheet" href="dist/css/style.css">
|
|
<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
</head>
|
|
<body class="is-boxed has-animations">
|
|
<div class="body-wrap boxed-container">
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<div class="site-header-inner">
|
|
<div class="brand header-brand">
|
|
<h1 class="m-0">
|
|
<a href="#">
|
|
<!-- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
|
<title>Evelyn</title>
|
|
<defs>
|
|
<radialGradient cy="0%" fx="50%" fy="0%" r="100%" id="logo-gradient">
|
|
<stop stop-color="#FFF" offset="0%"/>
|
|
<stop stop-color="#FFF" stop-opacity=".24" offset="100%"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<path d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm0-10a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" fill="url(#logo-gradient)" fill-rule="evenodd"/>
|
|
</svg> -->
|
|
<img class="logo" src="./dist/images/logo_white.png" />
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
<ul class="header-links list-reset m-0">
|
|
<li>
|
|
<a href="#">Login</a>
|
|
</li>
|
|
<li>
|
|
<a class="button button-sm button-shadow" href="#">Signup</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero text-light text-center">
|
|
<div class="container-sm">
|
|
<div class="hero-inner">
|
|
<h1 class="hero-title h2-mobile mt-0 is-revealing">The new standard in donations</h1>
|
|
<p class="hero-paragraph is-revealing">Join the greatest network of donors and charities for worldwide impact every day of the year</p>
|
|
<form id="email-form" class="hero-cta is-revealing">
|
|
<input name="email" class="email-input" placeholder="Enter email" />
|
|
<button class="button button-secondary button-shadow" href="#">Join List</button>
|
|
</form>
|
|
<div id="popup">replace text dynamically</div>
|
|
<div class="hero-media">
|
|
<video autoplay muted loop>
|
|
<source src="./dist/images/video.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="clients section">
|
|
<div class="container">
|
|
<div class="clients-inner section-inner has-top-divider">
|
|
<div class="container-sm">
|
|
<ul class="list-reset mb-0">
|
|
<li>
|
|
<span class="screen-reader-text">Instagram</span>
|
|
<svg width="132" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.262 1.5C6.103 1.5 4.6 2.768 3.714 3.612 1.765 5.397 0 8.68 0 11.313c0 3.744 3.085 5.157 3.866 5.157.257 0 .476-.137.476-.498 0-.282-.173-.517-.346-.758-.714-1.127-.944-2.203-.944-3.654 0-3.025 1.352-5.797 2.474-7.066.206-.23.674-.725.813-.725.14 0 .174.116.174.477l-.13 19.798c0 3.095-.866 4.324-.866 5.053 0 .32.134.403.39.403 1.215 0 2.426-1.527 2.769-2.085C9.739 25.52 10 24.041 10 19.773V3.137c0-.45-.122-.645-.537-.922-.606-.398-1.301-.715-2.2-.715zm36.842 0c-.592 0-.846.31-.874 1.266L43.1 6.728l-3.47-.12c-.211-.005-.306.061-.398.246-.295.551-.45.984-.45 1.704 0 .586.266.648.503.648l3.611.104-.01 7.569c0 1.605-1.016 3.688-2.816 5.42 0 0 .155-.523.146-1.071 0-1.554-1.001-2.961-2.336-3.957l-3.258-2.447c.683-.788 1.84-2.353 1.84-3.674 0-1.024-.645-1.454-1.847-1.454-1.697 0-3.665 1.552-3.665 3.853 0 .839.374 1.594.942 2.172a127.313 127.313 0 0 1-2.719 4.834c-.623 1.066-1.676 2.7-2.299 2.7-.46 0-.672-.722-.672-3.495 0-2.304.164-4.808.246-7.212 0-.551-.09-1.06-.807-1.558-.659-.422-1.473-1.01-2.312-1.01-1.864 0-3.134 1.712-4.005 3.386-.901 1.736-1.389 3.199-2.077 5.32l.076-7.303c.024-.52-.108-.722-.525-.9-.542-.229-1.339-.493-2.046-.493-.59 0-.662.254-.662.874l-.08 8.763-.009 3.38c0 3.047.382 3.555 2.193 3.555 1.003 0 1.324-.117 1.344-.95.028-.55.291-1.883.648-3.22 1.043-3.948 2.28-7.07 4.41-9.45.223-.23.395-.148.36.18 0 0-.337 5.342-.337 7.527 0 3.886.599 5.913 2.536 5.913 1.9 0 3.767-2.438 4.786-4.084l3.27-5.459c2.118 1.802 3.596 3.2 3.596 4.9 0 1.056-.668 2.09-1.685 2.09-1.27 0-2.083-1.339-2.941-1.339-.713 0-1.627 1.373-1.627 2.153 0 .736 1.609 1.778 4.496 1.778 4.262 0 6.548-2.92 7.92-6.154.263 3.838 1.795 6.08 4.184 6.08 1.567 0 3.378-1.977 4.201-4.391 0 0 .082.627.707 1.91.862 1.678 2.17 2.447 3.797 2.447 2.022 0 3.752-1.224 4.809-3.278.16 1.557 1.469 3.27 3.574 3.27 1.321 0 2.526-1.01 3.317-2.675 0 0 1.024 2.75 3.987 2.75 1.664 0 3.634-1.54 4.105-2.657l.052 1.626-4.396 4.047c-1.276 1.237-2.634 3.014-2.634 4.982 0 2.503 2.367 3.942 4.45 3.942 2.165 0 3.602-1.37 4.388-2.517.99-1.485 1.41-4.283 1.41-7.019l-.099-4.113c2.963-3.251 5.281-7.745 6.314-10.925l2.249-.06c.435-.029.414.143.353.396-.395 1.668-.74 3.556-.74 5.437 0 3.107.717 4.46 1.747 5.564.896.926 1.787 1.238 2.725 1.238 1.834 0 2.985-1.512 3.35-2.465.861 1.677 2.13 2.458 3.756 2.458 2.022 0 3.752-1.224 4.809-3.278.16 1.556 1.469 3.27 3.574 3.27 1.573 0 2.485-.906 3.202-2.613.015.55.036 1.135.052 1.684.019.284.246.463.45.537.668.253 1.255.38 1.782.38 1.375 0 1.674-.283 1.674-1.18 0-1.48.043-3.818.464-5.695.447-1.869 1.122-3.985 2.053-5.457.084-.152.29-.112.298.072.134 3.15.345 8.482 1.174 9.863.409.658 1.041 1.138 1.988 1.138.443 0 .988-.189 1.127-.307.14-.11.212-.232.203-.458 0-4.027 1.258-7.925 2.518-10.546.034-.078.133-.084.13.018l-.071 2.902c0 4.765.344 7.775 2.728 9.223a3.2 3.2 0 0 0 4.407-1.377c.446-.85.863-2.486.863-3.413 0-.359.004-.943-.585-.943-.323 0-.517.238-.594.597-.188.779-.342 1.446-.633 2.216-.279.735-.694 1.162-1.187 1.162-.579 0-.872-.454-1.04-.735-.739-1.125-.798-3.708-.798-5.864l.178-5.55c0-.458-.192-1.008-.902-1.413-.476-.274-1.68-.79-2.419-.79-.684 0-1.016.388-1.262.956-.464 1.02-2.012 5.023-2.427 8.277-.015.086-.122.104-.13-.005a81.283 81.283 0 0 1-.323-6.945c0-.565-.139-1.374-1.34-1.898-.584-.242-1.067-.39-1.657-.39-.732 0-.89.358-1.152.832-.829 1.53-1.402 3.523-2.261 6.04l.013-5.757c0-.27-.165-.622-.639-.717-1.174-.27-1.718-.392-2.18-.392-.337 0-.522.268-.522.558l-.063 9.815c-.227 1.201-1.148 4.07-2.453 4.07-1.071 0-1.571-1.085-1.571-5.615l.194-7.362c0-.465-.306-.66-.751-.858-.638-.252-1.145-.353-1.792-.353-.813 0-1.092.389-.928 1.322-.893-1.207-1.786-1.874-3.365-1.874-3.168 0-5.556 3.805-5.556 9.334-.031 1.55.344 3.092.344 3.092-.287 1.286-.96 2.335-1.892 2.335-1.174 0-1.923-1.658-1.923-4.53 0-2.883 1.1-6.133 1.1-7.014 0-1.024-.673-1.672-1.862-1.672-.596 0-2.808.5-3.941.665 0 0 .128-.54.118-.963 0-1.01-.474-1.643-1.653-1.643-1.44 0-2.497 1.027-2.497 2.778 0 .786.454 1.513 1.054 1.903-.78 3.243-2.045 5.655-3.911 8.35l.157-10.911c0-.355-.095-.575-.79-.845a4.397 4.397 0 0 0-1.724-.342c-1.095 0-1.023.781-.964 1.366-.502-.887-1.599-1.94-3.292-1.94-4.612 0-6.029 7.022-5.334 12.01 0 .608-.595 2.766-1.938 2.766-1.071 0-1.571-1.084-1.571-5.614l.196-7.362c0-.465-.308-.66-.754-.858-.637-.252-1.142-.353-1.79-.353-.813 0-1.092.389-.927 1.322-.894-1.207-1.789-1.874-3.367-1.874-3.168 0-5.588 3.48-5.588 9.009 0 2.11-1.82 5.33-3.097 5.33-.71 0-1.464-1.299-1.464-4.619.004-2.263.313-9.968.313-9.968l4.455-.072c.213-.002.336-.234.415-.377.204-.414.303-.69.303-1.186 0-.448-.09-.611-.664-.643l-4.44-.267.188-4.13c.013-.26-.144-.43-.43-.558-.859-.335-1.913-.66-2.58-.66zm12.661 11c1.11 0 2.235 1.082 2.235 4.92 0 4.832-1.646 7.08-2.912 7.08C54.9 24.5 54 22.709 54 19.19c0-3.556.88-6.69 2.765-6.69zm43 0c1.11 0 2.235 1.082 2.235 4.92 0 4.832-1.646 7.08-2.912 7.08C97.9 24.5 97 22.709 97 19.19c0-3.556.88-6.69 2.765-6.69zm-26.864 0c1.455 0 2.099 1.594 2.099 4.686 0 4.66-1.303 7.314-2.886 7.314-1.01 0-2.173-1.764-2.112-5.233 0-2.218.68-6.767 2.899-6.767zM76 27.5v1.843c0 6.113-1.752 7.157-3.16 7.157-.533 0-1.84-.375-1.84-1.887 0-2.115 2.377-4.52 3.116-5.263L76 27.5z" fill="#93A2B3" fill-rule="nonzero"/>
|
|
</svg>
|
|
</li>
|
|
<li>
|
|
<span class="screen-reader-text">Dell</span>
|
|
<svg width="132" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M40.405 20.317c0-3.065-2.053-4.807-4.96-4.807h-1.779v9.617h1.729c2.703 0 5.01-1.455 5.01-4.81zm31.646 3.46L58.945 34l-11.978-9.342c-1.729 4.113-5.905 6.97-10.715 6.97H26V9.006h10.252c5.374 0 9.247 3.386 10.711 6.993l11.982-9.332 4.438 3.46-10.981 8.55 2.11 1.635 10.978-8.544 4.444 3.45-10.98 8.559 2.108 1.64 10.99-8.561v-7.85h7.966v16.02h7.947v6.63H72.05v-7.879zm26.005 1.251H106v6.628H90.082V9.006h7.974v16.022z" fill="#93A2B3" fill-rule="nonzero"/>
|
|
</svg>
|
|
</li>
|
|
<li>
|
|
<span class="screen-reader-text">Unilever</span>
|
|
<svg width="132" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="#93A2B3" fill-rule="nonzero">
|
|
<path d="M18.106 9.105c-1.146.384-2.394 2.07-2.037 4.63.163 1.157.757 2.72.961 3.418.362 1.223.79 3.138.223 7.12-.718 4.987-2.431 8.434-6.288 8.355-2.572 0-4.934-2.147-5.214-7.665-.289-5.212.075-7.429.857-12.024.355-2.077.496-3.836-1.072-3.528-1.997.455-2.57 1.301-3.214 3.68C1.109 17.534.9 20.673 1.036 23.816c.29 6.665 3.071 11.033 9.36 11.182 7.283.157 10.213-7.43 10.494-13.713.217-4.6.144-7.813-.498-10.265-.499-1.608-1.001-2.302-2.286-1.915zM126.935 18c-7.219 0-8.75 10.897-9.902 10.897-1.92 0-1.305-8.732-2.692-8.732-1.229-.003-1.83 1.472-1.996 2.162-.952 3.974-3.837 9.818-8.141 9.818-.996 0-2.762-.389-2.762-1.393 0-1.083 6.761-1.232 6.761-6.413 0-1.929-1.765-4.638-4.377-4.638-3.455 0-6.826 3.79-6.826 9.043 0 4.71 2.909 6.256 5.825 6.256 5.069 0 8.14-4.175 9.752-7.65.77 2.32 1.224 7.65 3.151 7.65.764 0 1.306-.387 2.228-2.469 2.298-5.18 4.526-11.132 7.599-11.132 1.149 0 .461 2.092 3.225 2.092 1.302 0 2.22-1.082 2.22-2.323 0-1.781-1.61-3.168-4.065-3.168zm-24.112 4.796c1.615 0 2.079 1.922 1.691 3.086-.385 1.157-1.765 2.476-3.913 2.86-.462-1.161-.693-5.946 2.222-5.946zM96.574 16.853c-1.727 0-2.999 1.9-2.999 4.153 0 2.045.525 2.187.525 3.598 0 1.898-1.047 4.368-2.323 4.368-2.984 0-3.737-11.138-5.533-11.138-1.047 0-1.572 1.195-1.87 2.044-1.654 4.443-3.888 9.307-8.155 9.307-.829 0-1.795-.357-2.321-.847 2.99-1.761 5.013-3.599 5.013-5.85 0-1.908-1.348-4.798-3.667-4.798-2.918 0-6.287 4.162-6.287 9.094 0 .92.153 1.553.304 2.042-.228.287-1.13.64-1.875.64-2.02 0-4.161-2.024-4.417-3.213 1.509-3.066 4.519-6.62 3.967-15.135-.207-3.24-2.001-5.24-4.244-5.112-3.06.178-5.853 6.606-5.407 13.438.086 1.337.705 5.006 1.574 6.82-1.519 2.292-3.447 2.634-4.568 2.634-1.577 0-3.968-.846-3.966-4.296 1.127-2.895.378-6.205-1.196-6.205-2.243 0-2.992 3.73-3.067 6.34-.746 1.555-1.572 2.822-2.697 2.822-3.365 0-3.661-9.87-6.135-9.87-2.02 0-5.491 6.273-6.543 6.273-.595 0-1.122-1.776-1.5-3.52-.104-.488-.204-1.079-.54-1.108-.668-.058-1.499.48-1.806 1.238-.31.748-.866 3.098-1.47 5.242-.362 1.235-1.254 3.845-1.36 4.821-.077.705.238 1.231.986 1.305 1.86.18 8.716-7.762 10.886-7.762 2.773 0 3.44 7.822 6.588 7.822 1.87 0 3.59-4.506 4.715-4.506 1.27 0 1.868 4.506 5.46 4.506 4.494 0 5.987-2.75 7.336-2.75 1.118 0 2.318 2.68 5.086 2.68 1.72 0 3.223-.494 5.015-1.625C71.129 31.436 72.397 32 73.601 32c7.4 0 9.496-6.273 11-6.273 1.345 0 1.046 6.202 4.87 6.202 5.081 0 8.529-8.388 8.529-12.9-.002-1.195-.38-2.176-1.426-2.176zm-34.579 5.993c-.446.03-.925-.437-1.119-3.466-.304-4.643.386-9.059 1.875-9.143 1.124-.073 1.63.816 1.76 2.787.287 4.365-1.69 9.775-2.516 9.822zm10.855 4.158c-.305-.36-.97-1.198-.97-2.967 0-2.255 1.565-2.958 2.245-2.958.816 0 1.495.988 1.495 2.181 0 1.41-.604 3.106-2.77 3.744z"/>
|
|
</g>
|
|
</svg>
|
|
</li>
|
|
<li>
|
|
<span class="screen-reader-text">Uber</span>
|
|
<svg width="132" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M31.045 9h4.038v12.86c0 6.765-4.306 9.14-10.553 9.14C18.306 31 14 28.625 14 21.86V9.514c0-.358.178-.515.535-.515h4.039v12.658c0 4.055 1.784 5.735 5.956 5.735 4.195 0 5.98-1.68 5.98-5.735V9.515c0-.358.178-.515.535-.515zm45.714 3.517v5.422h10.218c.178 0 .245.09.178.269l-1.115 2.778c-.112.246-.268.358-.602.358h-6.002c-1.963 0-2.677.605-2.677 1.927v3.83H90.59c.179 0 .246.09.179.27l-1.16 2.89c-.112.246-.268.358-.603.358H73.86c-1.16 0-1.607-.403-1.607-1.277V10.501c0-1.053.58-1.501 2.097-1.501h16.242c.179 0 .246.09.179.246l-1.16 2.913c-.112.246-.268.358-.603.358H76.76zM63.93 24.637c0 4.324-3.034 5.982-7.295 5.982H45.346c-1.182 0-1.606-.403-1.606-1.277V10.501c0-1.053.557-1.501 2.097-1.501h9.17c4.015 0 7.897.695 7.897 5.489 0 2.06-.736 3.808-2.499 4.727 2.432.65 3.525 2.845 3.525 5.421zm-15.75-6.63h7.161c2.365 0 3.034-.92 3.034-2.801 0-1.882-.67-2.778-3.034-2.778h-7.162v5.578zM59.4 24.233c0-1.994-.691-2.98-3.235-2.98H50.88c-1.963 0-2.7.605-2.7 1.927v4.01h7.987c2.544 0 3.235-.985 3.235-2.957zm59.346 6.385h-4.105c-.335 0-.469-.134-.603-.358l-4.35-7.886h-3.994c-1.963 0-2.7.605-2.7 1.926v6.318H99.07c-.357 0-.535-.18-.535-.515V10.5c0-1.053.58-1.501 2.097-1.501h9.214c5.377 0 8.612 1.411 8.612 6.654 0 4.055-1.941 5.645-4.35 6.273l4.84 8.311c.09.135.09.381-.2.381zm-4.82-14.876c0-2.195-.602-3.27-3.413-3.27h-7.518v6.541h7.518c2.811 0 3.414-1.053 3.414-3.27z" fill="#93A2B3" fill-rule="nonzero"/>
|
|
</svg>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features section text-center">
|
|
<div class="container">
|
|
<div class="features-inner section-inner has-top-divider">
|
|
<h2 class="section-title mt-0">Product features</h2>
|
|
<div class="features-wrap">
|
|
<div class="feature is-revealing">
|
|
<div class="feature-inner">
|
|
<div class="feature-icon">
|
|
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path fill="#84E482" d="M48 16v32H16z"/>
|
|
<path fill="#0EB3CE" d="M0 0h32v32H0z"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title h3-mobile">Lorem Ipsum</h4>
|
|
<p class="text-sm">often arouses curiosity due to its resemblance to classical latin</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature is-revealing">
|
|
<div class="feature-inner">
|
|
<div class="feature-icon">
|
|
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path fill="#84E482" d="M48 16v32H16z"/>
|
|
<path fill="#0EB3CE" d="M0 0v32h32z"/>
|
|
<circle fill="#02C6A4" cx="29" cy="9" r="4"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title h3-mobile">Lorem Ipsum</h4>
|
|
<p class="text-sm">often arouses curiosity due to its resemblance to classical latin</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature is-revealing">
|
|
<div class="feature-inner">
|
|
<div class="feature-icon">
|
|
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path fill="#0EB3CE" d="M0 0h32v32H0z"/>
|
|
<path fill="#84E482" d="M16 16h32L16 48z"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title h3-mobile">Lorem Ipsum</h4>
|
|
<p class="text-sm">often arouses curiosity due to its resemblance to classical latin</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature is-revealing">
|
|
<div class="feature-inner">
|
|
<div class="feature-icon">
|
|
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path d="M32 40H0c0-8.837 7.163-16 16-16s16 7.163 16 16z" fill="#84E482" style="mix-blend-mode:multiply"/>
|
|
<path fill="#03C5A4" d="M12 8h8v8h-8z"/>
|
|
<path fill="#0EB3CE" d="M32 0h16v48H32z"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title h3-mobile">Lorem Ipsum</h4>
|
|
<p class="text-sm">often arouses curiosity due to its resemblance to classical latin</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features-extended section">
|
|
<div class="container">
|
|
<div class="features-extended-inner section-inner has-top-divider">
|
|
<div class="features-extended-header text-center">
|
|
<div class="container-sm">
|
|
<h2 class="section-title mt-0">Meet Evelyn</h2>
|
|
<p class="section-paragraph">Lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-extended">
|
|
<div class="feature-extended-image is-revealing">
|
|
<svg width="480" height="360" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-1">
|
|
<feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter"/>
|
|
<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter"/>
|
|
<feColorMatrix values="0 0 0 0 0.12 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.2 0" in="shadowBlurOuter"/>
|
|
</filter>
|
|
</defs>
|
|
<path fill="#F6F8FA" d="M0 220V0h200zM480 140v220H280z"/>
|
|
<path fill="#FFF" d="M40 50h400v260H40z" style="mix-blend-mode:multiply;filter:url(#dropshadow-1)"/>
|
|
<path fill="#FFF" d="M40 50h400v260H40z"/>
|
|
<path fill="#FFF" d="M103 176h80v160h-80zM320 24h88v88h-88z" style="mix-blend-mode:multiply;filter:url(#dropshadow-1)"/>
|
|
<path fill="#FFF" d="M103 176h80v160h-80zM320 24h88v88h-88z"/>
|
|
<path fill="#FFF" d="M230.97 198l16.971 16.971-16.97 16.97L214 214.972z" style="mix-blend-mode:multiply;filter:url(#dropshadow-1)"/>
|
|
<path fill="#02C6A4" d="M230.97 198l16.971 16.971-16.97 16.97L214 214.972z"/>
|
|
<path fill="#FFF" d="M203 121H103v100z" style="mix-blend-mode:multiply;filter:url(#dropshadow-1)"/>
|
|
<path fill="#84E482" d="M203 121H103v100z"/>
|
|
<circle fill="#FFF" cx="288" cy="166" r="32" style="mix-blend-mode:multiply;filter:url(#dropshadow-1)"/>
|
|
<circle fill="#0EB3CE" cx="288" cy="166" r="32" style="mix-blend-mode:multiply"/>
|
|
</svg>
|
|
</div>
|
|
<div class="feature-extended-body">
|
|
<h3 class="mt-0">Discover</h3>
|
|
<p>Where text is visible, people tend to focus on the textual content rather than upon overall presentation</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-extended">
|
|
<div class="feature-extended-image is-revealing">
|
|
<svg width="480" height="360" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-2">
|
|
<feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter"/>
|
|
<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter"/>
|
|
<feColorMatrix values="0 0 0 0 0.12 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.2 0" in="shadowBlurOuter"/>
|
|
</filter>
|
|
</defs>
|
|
<path fill="#F6F8FA" d="M480 140v220H280zM0 220V0h200z"/>
|
|
<path fill="#FFF" d="M40 50h400v260H40z" style="mix-blend-mode:multiply;filter:url(#dropshadow-2)"/>
|
|
<path fill="#FFF" d="M40 50h400v260H40z"/>
|
|
<path fill="#FFF" d="M86.225 161l62.226 62.225-62.226 62.225L24 223.225zM296 176h80v160h-80z" style="mix-blend-mode:multiply;filter:url(#dropshadow-2)"/>
|
|
<path fill="#FFF" d="M86.225 161l62.226 62.225-62.226 62.225L24 223.225zM296 176h80v160h-80z"/>
|
|
<path fill="#FFF" d="M245.092 218l9.378 22.092-22.093 9.378L223 227.378z" style="mix-blend-mode:multiply;filter:url(#dropshadow-2)"/>
|
|
<path fill="#02C6A4" d="M245.092 218l9.378 22.092-22.093 9.378L223 227.378z"/>
|
|
<path fill="#FFF" d="M270 96H170v100z" style="mix-blend-mode:multiply;filter:url(#dropshadow-2)"/>
|
|
<path fill="#84E482" d="M270 96H170v100z"/>
|
|
<circle fill="#FFF" cx="296" cy="177" r="32" style="mix-blend-mode:multiply;filter:url(#dropshadow-2)"/>
|
|
<circle fill="#0EB3CE" cx="296" cy="177" r="32" style="mix-blend-mode:multiply"/>
|
|
</svg>
|
|
</div>
|
|
<div class="feature-extended-body">
|
|
<h3 class="mt-0">Discover</h3>
|
|
<p>Where text is visible, people tend to focus on the textual content rather than upon overall presentation</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-extended">
|
|
<div class="feature-extended-image is-revealing">
|
|
<svg width="480" height="360" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter x="-500%" y="-500%" width="1000%" height="1000%" filterUnits="objectBoundingBox" id="dropshadow-3">
|
|
<feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter"/>
|
|
<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter" result="shadowBlurOuter"/>
|
|
<feColorMatrix values="0 0 0 0 0.12 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.2 0" in="shadowBlurOuter"/>
|
|
</filter>
|
|
</defs>
|
|
<path fill="#F6F8FA" d="M480 140v220H280zM0 220V0h200z"/>
|
|
<path fill="#FFF" d="M40 50h400v260H40z" style="mix-blend-mode:multiply;filter:url(#dropshadow-3)"/>
|
|
<path fill="#FFF" d="M40 50h400v260H40z"/>
|
|
<path fill="#FFF" d="M72 248h88v88H72zM180 24h80v160h-80z" style="mix-blend-mode:multiply;filter:url(#dropshadow-3)"/>
|
|
<path fill="#FFF" d="M72 248h88v88H72zM180 24h80v160h-80z"/>
|
|
<path fill="#FFF" d="M277.664 261.919l-18.113 15.745-15.746-18.113 18.113-15.745z" style="mix-blend-mode:multiply;filter:url(#dropshadow-3)"/>
|
|
<path fill="#02C6A4" d="M277.664 261.919l-18.113 15.745-15.746-18.113 18.113-15.745z"/>
|
|
<path fill="#FFF" d="M315 129H215v100z" style="mix-blend-mode:multiply;filter:url(#dropshadow-3)"/>
|
|
<path fill="#84E482" d="M315 129H215v100z"/>
|
|
<circle fill="#FFF" cx="318" cy="219" r="32" style="mix-blend-mode:multiply;filter:url(#dropshadow-3)"/>
|
|
<circle fill="#0EB3CE" cx="318" cy="219" r="32" style="mix-blend-mode:multiply"/>
|
|
</svg>
|
|
</div>
|
|
<div class="feature-extended-body">
|
|
<h3 class="mt-0">Discover</h3>
|
|
<p>Where text is visible, people tend to focus on the textual content rather than upon overall presentation</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="pricing section">
|
|
<div class="container">
|
|
<div class="pricing-inner section-inner has-top-divider">
|
|
<h2 class="section-title mt-0 text-center">Pricing</h2>
|
|
<div class="pricing-tables-wrap">
|
|
<div class="pricing-table is-revealing">
|
|
<div class="pricing-table-inner">
|
|
<div class="pricing-table-main">
|
|
<div class="pricing-table-header">
|
|
<div class="pricing-table-title mt-12 mb-16 text-secondary">Lorem ipsum</div>
|
|
<div class="pricing-table-price mb-24 pb-32"><span class="pricing-table-price-currency h3">$</span><span class="pricing-table-price-amount h1">29</span></div>
|
|
</div>
|
|
<ul class="pricing-table-features list-reset text-xs mb-56">
|
|
<li>
|
|
<span class="list-icon">
|
|
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3.3L5 9.6 1.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" fill="#00C6A7" fill-rule="nonzero"/>
|
|
</svg>
|
|
</span>
|
|
<span>Sed do eiusmod tempor cesa.</span>
|
|
</li>
|
|
<li>
|
|
<span class="list-icon">
|
|
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3.3L5 9.6 1.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" fill="#00C6A7" fill-rule="nonzero"/>
|
|
</svg>
|
|
</span>
|
|
<span>Sed do eiusmod tempor cesa.</span>
|
|
</li>
|
|
<li>
|
|
<span class="list-icon">
|
|
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3.3L5 9.6 1.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" fill="#00C6A7" fill-rule="nonzero"/>
|
|
</svg>
|
|
</span>
|
|
<span>Sed do eiusmod tempor cesa.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pricing-table-cta">
|
|
<a class="button button-secondary button-block" href="#">Get started now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pricing-table is-revealing">
|
|
<div class="pricing-table-inner">
|
|
<div class="pricing-table-main">
|
|
<div class="pricing-table-header">
|
|
<div class="pricing-table-title mt-12 mb-16 text-primary">Lorem ipsum</div>
|
|
<div class="pricing-table-price mb-24 pb-32"><span class="pricing-table-price-currency h3">$</span><span class="pricing-table-price-amount h1">129</span></div>
|
|
</div>
|
|
<ul class="pricing-table-features list-reset text-xs mb-56">
|
|
<li>
|
|
<span class="list-icon">
|
|
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3.3L5 9.6 1.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" fill="#00A2B8" fill-rule="nonzero"/>
|
|
</svg>
|
|
</span>
|
|
<span>Sed do eiusmod tempor cesa.</span>
|
|
</li>
|
|
<li>
|
|
<span class="list-icon">
|
|
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3.3L5 9.6 1.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" fill="#00A2B8" fill-rule="nonzero"/>
|
|
</svg>
|
|
</span>
|
|
<span>Sed do eiusmod tempor cesa.</span>
|
|
</li>
|
|
<li>
|
|
<span class="list-icon">
|
|
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3.3L5 9.6 1.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" fill="#00A2B8" fill-rule="nonzero"/>
|
|
</svg>
|
|
</span>
|
|
<span>Sed do eiusmod tempor cesa.</span>
|
|
</li>
|
|
<li>
|
|
<span class="list-icon">
|
|
<svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3.3L5 9.6 1.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" fill="#00A2B8" fill-rule="nonzero"/>
|
|
</svg>
|
|
</span>
|
|
<span>Sed do eiusmod tempor cesa.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pricing-table-cta">
|
|
<a class="button button-primary button-block" href="#">Get started now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="site-footer-inner">
|
|
<div class="brand footer-brand">
|
|
<a href="#">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
|
<title>Evelyn</title>
|
|
<defs>
|
|
<radialGradient cy="0%" fx="50%" fy="0%" r="100%" id="logo-gradient-footer">
|
|
<stop stop-color="#00A2B8" offset="0%"/>
|
|
<stop stop-color="#00F9D2" offset="100%"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<path d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm0-10a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" fill="url(#logo-gradient-footer)" fill-rule="evenodd"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<ul class="footer-links list-reset">
|
|
<li>
|
|
<a href="#">Contact</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">About us</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">FAQ's</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Support</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="footer-social-links list-reset">
|
|
<li>
|
|
<a href="#">
|
|
<span class="screen-reader-text">Facebook</span>
|
|
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z" fill="#0EB3CE"/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="screen-reader-text">Twitter</span>
|
|
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z" fill="#0EB3CE"/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<span class="screen-reader-text">Google</span>
|
|
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" fill="#0EB3CE"/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="footer-copyright">© 2018 Evelyn, all rights reserved</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script src="dist/js/main.min.js"></script>
|
|
<script src="dist/js/added.js"></script>
|
|
</body>
|
|
</html>
|