Skip to content

Instantly share code, notes, and snippets.

@roddyka

roddyka/css-site.markdown

Created April 2, 2020 18:10
Show Gist options
  • Save roddyka/5951017d00ce07583eb0cab6b3755a2d to your computer and use it in GitHub Desktop.
Save roddyka/5951017d00ce07583eb0cab6b3755a2d to your computer and use it in GitHub Desktop.
Download ZIP
Css Site
Raw
index.html
<div class="container">
<!--Header-->
<header class="header">
<div class="header-logo">
<svg id="logo" width="41" height="22" viewBox="0 0 41 22" fill="none">
<path d="M33.7857 18.6786C33.739 18.6552 33.6903 18.6252 33.6399 18.5889C31.7025 17.4062 27.6816 15.275 25.9746 15.5536C24.9235 17.4362 23.9189 19.5535 23.2857 21C18.4456 18.9651 7.21239 12.1163 1 1L39.268 6.25659C39.5365 6.25356 39.7837 6.28434 40 6.35714L39.268 6.25659C37.6925 6.27436 35.3842 7.45629 34.2857 8.14286C35.2571 10.2857 34.3571 16.0595 33.7857 18.6786Z" fill="white" />
<path d="M1 1L40 6.35714C38.5143 5.85714 35.5714 7.33929 34.2857 8.14286M1 1L29.3571 11.3571M1 1L34.2857 8.14286M1 1C7.21239 12.1163 18.4456 18.9651 23.2857 21C23.9189 19.5535 24.9235 17.4362 25.9746 15.5536M29.3571 11.3571C30.3571 13.5595 32.6429 18.1071 33.7857 18.6786M29.3571 11.3571C28.5217 11.4345 27.2158 13.3304 25.9746 15.5536M33.7857 18.6786C34.3571 16.0595 35.2571 10.2857 34.2857 8.14286M33.7857 18.6786C31.9116 17.5179 27.7257 15.2679 25.9746 15.5536" stroke="#FF8989" />
</svg>
<span class="header-letter">
Letter
</span>
</div>
<nav>
<ul class="menu">
<li class="menu-item">Plugins</li>
<li class="menu-item">Pricing</li>
<li class="menu-item">Log in</li>
<li class="menu-item">Free Trial</li>
</ul>
</nav>
</header>
<div class="container">
<section class="hero">
<div class="hero_container">
<svg id="waves" width="1440" height="488" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="wave1" d="M506.329 191.177c-57.905-82.817-183.788-78.873-229.105 0C243.116 250.54 84.696 291.744 0 259.173V476.5h1440V78.14c-57.7-78.365-229.98-132.117-338.67 12.051-92.63 122.865-244.276 240.635-295.048 105.165-42.957-114.62-162.964-90.264-198.894-34.179-29.53 46.095-43.153 112.818-101.059 30z" fill="#FFD6C0" />
<path id="wave3" d="M190.15 279.006C111.12 196.129 4.048 175.08-74.981 240.856c-41.608 34.63-85.335 74.729-136.019 82.862V488h1651V369.102c-58.99 27.431-112.8 15.294-146.09-15.887-108.04-101.179-248.32-155.257-384.847-74.209-50.222 29.813-94.325 82.877-152.96 0-58.635-82.877-186.102-78.931-231.99 0-45.888 78.93-254.934 82.877-333.963 0z" fill="#FFDBC8" />
<path id="wave5" d="M407.012 322.649C326.015 201.536 101.922 394.979 0 431.839V476.5h1440V336.782c-7.54 6.912-13.88 15.072-18.5 24.043-23.75 46.161-74.92 82.936-121.49 0-46.57-82.935-147.82-78.986-184.27 0-36.45 78.987-202.494 82.936-265.267 0-62.773-82.935-147.82-103.998-210.593-38.176-62.773 65.822-131.621 151.391-232.868 0z" fill="#FED6C1" />
<path id="wave2" class="hide" d="M1102 101c119.5-73 182.83-77.581 233.5 27 23.5 48.5 19.8 90.744 104.5 58.173V403.5H0V87C57.7 8.634 387.615-45.786 535 58.5c138.5 98 68 105 195.919 15.5C857.924-14.86 903.5 51.655 966 87c72.5 41 49.76 66.68 136 14z" fill="#FFD6C0" />
<path id="wave4" class="hide" d="M73 206.006C-92 142.5-101.471 113.724-180.5 179.5c-41.608 34.63-55.816 60.366-106.5 68.5l-9 167h1736V296.102c-58.99 27.431-231.2-41.42-264.5-72.602-108.04-101.178-219.469-98.542-356-17.494-50.223 29.813-193.257 53.561-279.5 0-109.5-68.006-144.14-42.396-225 0-133.5 69.994-135.125 41.134-242 0z" fill="#FFDBC8" />
<path id="wave6" class="hide" d="M821.988 322.649c80.997-121.113 305.092 72.33 407.012 109.19V476.5H-211V336.782c7.538 6.912 13.88 15.072 18.495 24.043 23.751 46.161 74.923 82.936 121.496 0 46.574-82.935 147.82-78.986 184.269 0 36.449 78.987 202.494 82.936 265.267 0 62.773-82.935 147.82-103.998 210.593-38.176 62.773 65.822 131.621 151.391 232.868 0z" fill="#FED6C1" />
</svg>
<img class="lamp" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/Group.png' alt=''>
<div class="hero_cta">
<h2 class="cta_title">Email for Designers</h2>
<p class="cta_description">
Dynamic email tool for creators that doesn’t cost a leg. Works with Sketch, Figma and XD. Easily import your content and send with your favorite API.
</p>
<button class="btn cta_btn">
Start Free Trial</button>
</div>
<div class="container_sun">
<img class="sun" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/sun.png' alt=''>
</div>
<svg id="planes" viewBox="0 0 1856 964" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="fly">
<g class="fly_right">
<path d="M1288.96 292.841c.13-.077.27-.175.42-.29 5.6-3.829 17.28-10.813 22.43-10.255 3.43 5.437 6.77 11.581 8.89 15.787 14.15-6.827 46.63-29.002 63.44-63.083l-113.53 21.731c-.81.034-1.54.165-2.17.416l2.17-.416c4.71-.198 11.79 2.954 15.19 4.824-2.57 6.533 1.04 23.579 3.16 31.286z" fill="#fff" />
<path d="M1384.14 235l-115.7 22.147c4.36-1.725 13.39 2.22 17.36 4.408M1384.14 235l-83.11 35.34m83.11-35.34l-98.34 26.555M1384.14 235c-16.81 34.081-49.29 56.256-63.44 63.083-2.12-4.206-5.46-10.35-8.89-15.787m-10.78-11.956c-2.64 6.716-8.75 20.618-12.07 22.501m12.07-22.501c2.51.098 6.71 5.535 10.78 11.956m-22.85 10.545c-2.12-7.707-5.73-24.753-3.16-31.286m3.16 31.286c5.41-3.754 17.57-11.117 22.85-10.545" stroke="#FF9E99" />
</g>
<g class="fly_right">
<path d="M1146.01 423.145c-27.71 39.122-92.06 122.57-127.84 143.387-5.96-11.363-15.94-31.971-22.837-50.269-4.539 3.714-14.271 6.934-18.57 8.08-4.36-6.571-7.1-16.573-8.761-27.016-4.693-2.454-20.49 9.225-27.801 15.37-1.197-6.965 16.578-37.618 25.614-52.073 11.323-11.724 124.845-29.871 180.195-37.479z" fill="#fff" />
<path d="M987.911 489.832c27.779-16.59 98.289-53.152 158.099-66.687m-158.099 66.687c.696 6.761 3.58 16.237 7.422 26.431m-7.422-26.431c-6.876 5.418-10.297 25.265-11.148 34.511m169.247-101.198c-27.71 39.122-92.06 122.57-127.84 143.387-5.96-11.363-15.94-31.971-22.837-50.269m150.677-93.118c-55.35 7.608-168.872 25.755-180.195 37.479m0 0c-9.036 14.455-26.811 45.108-25.614 52.073 7.311-6.145 23.108-17.824 27.801-15.37m-2.187-36.703c-.316 8.465.002 22.966 2.187 36.703m8.761 27.016c4.299-1.146 14.031-4.366 18.57-8.08m-18.57 8.08c-4.36-6.571-7.1-16.573-8.761-27.016" stroke="#FF8989" />
</g>
</g>
</svg>
</div>
</section>
<section class="two">
<div class="news_container">
<figure class="large_plane"><img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/Group%203.png' alt=''></figure>
<figure class="luggage">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/Group%205-1.png' alt=''>
</figure>
<article class="news news_1">
<h3>
Newsletter in minutes
</h3>
<p>
Emails are traditionally painfully slow to work with. We’ve made a drag and drop tool that automatically fetches data and easily copy or send HTML using your favorite API
</p>
</article>
<svg class="stairs" viewBox="0 0 200 165" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.064 133.773c3.02.176 13.05 7.626 17.687 11.329l114.202-56.55c-.336-3.619-11.904-9.533-17.645-12.037-8.082.57-79.53 38.41-114.244 57.258zM43.276 110.899c1.304-.042 18.497 9.601 19.483 10.96 35.794-18.43 108.749-55.59 114.216-56.786-.387-2.39-12.442-8.261-18.422-10.898-5.345.73-79.079 38.12-115.277 56.724z" fill="#FFF3EE" />
<path d="M79.056 157.016c1.116-2.223 2.817-7.719.695-11.914-4.638-3.703-14.667-11.153-17.687-11.329-.715 2.799-2.01 8.902-1.465 10.923 5.602 4.074 17.136 12.243 18.457 12.32zM42.63 121.988c.472 1.637 13.153 8.539 19.434 11.785 1.503-3.037 1.09-9.208.695-11.914-.986-1.359-18.179-11.002-19.483-10.96-1.305.043-1.238 9.042-.647 11.089zM43.276 110.899c-.305-2.898-.608-9.078.618-10.616.645-2.52-12.17-9.666-18.658-12.924-1.687 1.322-1.161 8.415-.688 11.796.068 2.087 12.513 8.699 18.728 11.744zM6.808 76.579c.45 2.015 12.473 8.026 18.428 10.78.856-3.185 2.185-9.863.646-11.089-1.538-1.226-12.917-7.854-18.414-11.015-2.79 1.14-1.224 8.806-.66 11.324z" fill="#FFF3EE" />
<path d="M79.75 145.102c2.123 4.195.422 9.691-.694 11.914 2.388 1.273 77.134-37.249 114.209-56.669 1.687-1.322 1.161-8.415.688-11.796L79.75 145.102zM62.064 133.773c34.714-18.848 106.162-56.688 114.244-57.258 1.969-2.915 1.265-8.843.667-11.442-5.467 1.196-78.422 38.356-114.216 56.786.394 2.706.808 8.877-.695 11.914zM43.276 110.899c36.198-18.604 109.932-55.994 115.277-56.724 1.437-1.905 1.066-8.815.702-12.032-6.634.087-113.828 56.217-115.36 58.14-1.227 1.538-.924 7.718-.62 10.616zM25.236 87.359c36.393-19.224 110.423-57.505 115.403-56.836 2.491-2.127 1.455-8.043.625-10.735-4.247-.247-78.69 37.552-115.382 56.482 1.539 1.226.21 7.904-.646 11.089z" fill="#FFF3EE" />
<path d="M79.056 157.016c1.116-2.223 2.817-7.719.695-11.914m-.695 11.914c-1.321-.077-12.855-8.246-18.457-12.32-.545-2.021.75-8.124 1.465-10.923m16.992 23.243c2.388 1.273 77.134-37.249 114.209-56.669 1.687-1.322 1.161-8.415.688-11.796M79.75 145.102c-4.637-3.703-14.666-11.153-17.686-11.329m17.687 11.329l114.202-56.55M62.064 133.772c34.714-18.848 106.162-56.688 114.244-57.258M62.064 133.773c-6.281-3.246-18.962-10.148-19.435-11.785-.59-2.047-.658-11.046.647-11.089m18.788 22.874c1.503-3.037 1.09-9.208.695-11.914m131.194-33.308c-.336-3.618-11.904-9.532-17.645-12.036m0 0c1.969-2.915 1.265-8.843.667-11.442m-133.7 45.826c1.305-.042 18.498 9.601 19.484 10.96m-19.483-10.96c36.198-18.604 109.932-55.994 115.277-56.724M43.276 110.899c-.305-2.898-.608-9.078.618-10.616m-.618 10.616c-6.215-3.045-18.66-9.657-18.728-11.744-.473-3.38-.999-10.474.688-11.796m37.523 34.5c35.794-18.43 108.749-55.59 114.216-56.786m0 0c-.387-2.39-12.442-8.261-18.422-10.898m0 0c1.437-1.905 1.066-8.815.702-12.032m-115.36 58.14c1.532-1.923 108.726-58.053 115.36-58.14m-115.36 58.14c.643-2.52-12.171-9.666-18.66-12.924m134.02-45.216c-.142-1.523-12.47-8.381-18.616-11.62M25.236 87.36c36.393-19.224 110.423-57.505 115.403-56.836M25.236 87.36c-5.955-2.754-17.978-8.765-18.428-10.78-.564-2.518-2.13-10.185.66-11.324m17.768 22.104c.856-3.185 2.185-9.863.646-11.089M140.64 30.523c2.491-2.127 1.455-8.043.625-10.735M7.468 65.255c5.497 3.16 16.876 9.79 18.414 11.015M7.468 65.255C44.152 45.77 118.458 6.955 122.21 7.552c6.079 2.761 18.4 9.074 19.053 12.236M25.882 76.27C62.573 57.34 137.017 19.541 141.264 19.79" stroke="#FF9E99" stroke-width="1.1" />
<path d="M62.064 133.773c3.02.176 13.05 7.626 17.687 11.329l114.202-56.55c-.336-3.619-11.904-9.533-17.645-12.037-8.082.57-79.53 38.41-114.244 57.258zM43.276 110.899c1.304-.042 18.497 9.601 19.483 10.96 35.794-18.43 108.749-55.59 114.216-56.786-.387-2.39-12.442-8.261-18.422-10.898-5.345.73-79.079 38.12-115.277 56.724z" fill="#fff" />
<path d="M79.056 157.016c1.116-2.223 2.817-7.719.695-11.914-4.638-3.703-14.667-11.153-17.687-11.329-.715 2.799-2.01 8.902-1.465 10.923 5.602 4.074 17.136 12.243 18.457 12.32zM42.63 121.988c.472 1.637 13.153 8.539 19.434 11.785 1.503-3.037 1.09-9.208.695-11.914-.986-1.359-18.179-11.002-19.483-10.96-1.305.043-1.238 9.042-.647 11.089zM43.276 110.899c-.305-2.898-.608-9.078.618-10.616.645-2.52-12.17-9.666-18.658-12.924-1.687 1.322-1.161 8.415-.688 11.796.068 2.087 12.513 8.699 18.728 11.744zM6.808 76.579c.45 2.015 12.473 8.026 18.428 10.78.856-3.185 2.185-9.863.646-11.089-1.538-1.226-12.917-7.854-18.414-11.015-2.79 1.14-1.224 8.806-.66 11.324z" fill="#fff" />
<path d="M79.056 157.016c1.116-2.223 2.817-7.719.695-11.914m-.695 11.914c-1.321-.077-12.855-8.246-18.457-12.32-.545-2.021.75-8.124 1.465-10.923m16.992 23.243c2.388 1.273 77.134-37.249 114.209-56.669 1.687-1.322 1.161-8.415.688-11.796M79.75 145.102c-4.637-3.703-14.666-11.153-17.686-11.329m17.687 11.329l114.202-56.55M62.064 133.772c34.714-18.848 106.162-56.688 114.244-57.258M62.064 133.773c-6.281-3.246-18.962-10.148-19.435-11.785-.59-2.047-.658-11.046.647-11.089m18.788 22.874c1.503-3.037 1.09-9.208.695-11.914m131.194-33.308c-.336-3.618-11.904-9.532-17.645-12.036m0 0c1.969-2.915 1.265-8.843.667-11.442m-133.7 45.826c1.305-.042 18.498 9.601 19.484 10.96m-19.483-10.96c36.198-18.604 109.932-55.994 115.277-56.724M43.276 110.899c-.305-2.898-.608-9.078.618-10.616m-.618 10.616c-6.215-3.045-18.66-9.657-18.728-11.744-.473-3.38-.999-10.474.688-11.796m37.523 34.5c35.794-18.43 108.749-55.59 114.216-56.786m0 0c-.387-2.39-12.442-8.261-18.422-10.898m0 0c1.437-1.905 1.066-8.815.702-12.032m-115.36 58.14c1.532-1.923 108.726-58.053 115.36-58.14m-115.36 58.14c.643-2.52-12.171-9.666-18.66-12.924m134.02-45.216c-.142-1.523-12.47-8.381-18.616-11.62M25.236 87.36c36.393-19.224 110.423-57.505 115.403-56.836M25.236 87.36c-5.955-2.754-17.978-8.765-18.428-10.78-.564-2.518-2.13-10.185.66-11.324m17.768 22.104c.856-3.185 2.185-9.863.646-11.089M140.64 30.523c2.491-2.127 1.455-8.043.625-10.735M7.468 65.255c5.497 3.16 16.876 9.79 18.414 11.015M7.468 65.255C44.152 45.77 118.458 6.955 122.21 7.552c6.079 2.761 18.4 9.074 19.053 12.236M25.882 76.27C62.573 57.34 137.017 19.541 141.264 19.79" stroke="#FF9E99" stroke-width="1.1" />
</svg>
<article class=" news news_2">
<h3>
Works with Sketch, Figma and XD
</h3>
<p>
Ever wanted to export your designs directly from your favorite design tool to your Email service? Now you can. From layers to HTML, to people’s inbox.
</p>
</article>
<!-- girl and paper planes-->
<div class="fly_container">
<svg class="fly" id="fly" viewBox="0 0 1500 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M296.124 852.336l-146.349 69.975-17.966-7.162-11.604-4.625c-19.236-24.513-27.406-48.761-30.007-68.303L61.067 854.43c-8.555 7.442-16.096 12.276-18.34 13.623-4.492 2.694-7.113 1.122-7.861 0-1.797 1.496-3.993-.624-4.866-1.871l51.466-62.491c46.1-24.573 140.323-73.493 148.408-72.595 8.085.898 16.095 7.858 19.089 11.226l47.161 110.014z" fill="#fff" />
<path d="M149.775 922.311l146.349-69.975-47.161-110.014m-99.188 179.989l-47.162-108.143m47.162 108.143l-17.967-7.162m117.155-172.827c-2.994-3.368-11.004-10.328-19.089-11.226-8.085-.898-102.308 48.022-148.408 72.595m167.497-61.369l-146.35 71.846m-21.147-10.477L30 866.182c.873 1.247 3.07 3.367 4.866 1.871m46.6-64.362c1.367.153 3.125.449 5.053.91m16.094 9.567c-1.916-3.671-6.222-6.229-10.667-7.911m-57.08 61.796c1.797-1.497 35.184-42.925 51.653-63.452m-51.653 63.452c.748 1.122 3.368 2.694 7.86 0 2.245-1.347 9.786-6.181 18.34-13.623m25.453-49.829c1.726.414 3.588.96 5.427 1.656m0 0c2.37 26.613 13.662 85.65 39.862 108.892M91.946 806.257c-2.92 19.955-18.04 37.002-30.88 48.173m30.88-48.173c-2.295 7.282-3.864 20.066-1.748 35.964m41.61 72.928l-11.603-4.625c-19.236-24.513-27.406-48.761-30.007-68.303M61.067 854.43l29.131-12.209" stroke="#FF8989" stroke-width="1.1" />
<path d="M208.5 831.263l1.5-11 1.1-5.985c2.4-8.515 9.3-4.95 9.3 0s-1.05 24.3-2.85 24.3c-1.44 0-9.05-5.98-9.05-7.315z" fill="#FFE6D9" />
<path d="M218.597 836.263l3.003-18.291c3.15-7.191 7.761-6.052 9.3 0 1.6 6.291-1.947 30.853-3.4 29.791-2.55-1.865-8.903-8.114-8.903-11.5z" fill="#FFE6D9" />
<path d="M229.634 848.382c-.453-1.534-.872-3.933-1.025-4.94-5.269-1.634-9.128-10.261-10.392-10.848-1.265-.587-3.08.553-3.704 1.668-.72.233-1.716 1.518-2.081 2.086-.456.709.387 2.575 1.512 4.018 1.124 1.443 5.687 6.417 7.033 9.024 1.345 2.607 8.082 10.525 9.791 10.492 1.368-.026 2.11-1.211 2.31-1.8 1.071-.047.277-2.316-.153-3.303-.613-1.408-2.725-4.48-3.291-6.397z" fill="#fff" />
<path d="M214.513 834.262c-.624 1.115.773 2.856 1.841 4.226 1.067 1.369 4.25 4.314 5.26 6.749 1.011 2.436 4.523 7.875 8.901 11.421 1.309 1.06 2.106 1.444 2.563 1.424m-18.565-23.82c.624-1.115 2.439-2.255 3.704-1.668 1.264.587 5.123 9.214 10.392 10.848.153 1.007.572 3.406 1.025 4.94.566 1.917 2.678 4.989 3.291 6.397.43.987 1.224 3.256.153 3.303m-18.565-23.82c-.72.233-1.716 1.518-2.081 2.086-.456.709.387 2.575 1.512 4.018 1.124 1.443 5.687 6.417 7.033 9.024 1.345 2.607 8.082 10.525 9.791 10.492 1.368-.026 2.11-1.211 2.31-1.8" stroke="#FF8989" stroke-width="1.1" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M201.568 831.038c.471-1.212 1.518-2.34 2.847-3.104-1.318 1.438 2.594 8.094 5.444 12.514 2.849 4.421 11.598 10.807 13.108 10.216-.166.899-.97 2.783-2.868 3.127-2.372.429-11.694-7.49-18.531-22.753z" fill="#fff" />
<path d="M219.148 835.69c.18 1.426.59 4.718.79 6.482.251 2.204 4.538 7.902 3.029 8.492-1.51.591-10.259-5.795-13.108-10.216-2.85-4.42-6.762-11.076-5.444-12.514 1.055-1.15 3.139-1.281 4.05-1.202 1.337 2.305 5.346 7.324 10.683 8.958z" fill="#fff" />
<path d="M222.967 850.664c1.509-.59-2.778-6.288-3.029-8.492-.2-1.764-.61-5.056-.79-6.482-5.337-1.634-9.346-6.653-10.683-8.958-.911-.079-2.995.052-4.05 1.202m18.552 22.73c-1.51.591-10.259-5.795-13.108-10.216-2.85-4.42-6.762-11.076-5.444-12.514m18.552 22.73c-.166.899-.97 2.783-2.868 3.127-2.372.429-11.694-7.49-18.531-22.753.471-1.212 1.518-2.34 2.847-3.104" stroke="#FF8989" stroke-width="1.1" />
<path d="M153.247 673.022c-.957-.439-6.553-4.971-8.909-10.381-2.278-8.304 5.628-13.499 9.866-15.059 13.695-6.652 14.726 9.65 15.168 11.331.442 1.681-1.105 4.752-1.473 5.337-.368.584-1.251 3.728-1.472 5.628-.221 1.901-1.767 3.948-4.565 4.533-2.798.585-7.658-.95-8.615-1.389z" fill="#FFE6D9" />
<path d="M135.415 657.797a3.963 3.963 0 0 1-.074-.993c.221-4.131 3.023-11.359 10.47-14.088.934-.91 3.628-3.201 6.931-5.09 4.129-2.36 7.447-3.097 9.659-1.548 1.769 1.239 2.458 3.312 2.58 4.194 3.82.39 9.105 2.307 10.47 4.288 1.475 2.139 1.844 3.171 1.696 4.056-.147.886-1.622 2.508-2.728 2.508s-13.345-8.334-21.677-2.729c-1.995 1.342-3.589 2.524-4.844 3.611-3.988 3.451-4.568 5.946-3.783 9.592.826 3.835-1.475 3.024-2.728 2.139v9.142c0 4.131-10.396 10.99-18.359 11.728-6.371.59-9.34-10.326-10.028-15.858 6.96 1.652 14.206-3.541 16.958-6.343a36.073 36.073 0 0 1 5.457-4.609z" fill="#fff" />
<path d="M141.387 663.737c-2.089-.934-6.223-3.629-6.046-6.933.221-4.131 3.023-11.359 10.47-14.088m-4.424 21.021c1.253.885 3.554 1.696 2.728-2.139-.785-3.646-.205-6.141 3.783-9.592m-6.511 11.731v9.142c0 4.131-10.396 10.99-18.359 11.728-6.371.59-9.34-10.326-10.028-15.858 6.96 1.652 14.206-3.54 16.958-6.343 6.312-6.55 14.59-9.663 17.94-10.4m-2.087-9.29c7.447-2.729 14.452-2.655 18.286-2.508.283.011.579.032.884.064m-19.17 2.444c.934-.91 3.628-3.201 6.931-5.09 4.129-2.36 7.447-3.097 9.659-1.548 1.769 1.239 2.458 3.312 2.58 4.194m0 0c3.82.39 9.105 2.307 10.47 4.288 1.475 2.139 1.844 3.171 1.696 4.056-.147.886-1.622 2.508-2.728 2.508s-13.345-8.334-21.677-2.729c-1.995 1.342-3.589 2.524-4.844 3.611" stroke="#FF8989" stroke-width="1.1" />
<path d="M201.352 808.573c0-4.791 2.32-24.991 6.569-34.123-17.037.754-52.471 1.358-57.913-2.264-6.803-4.529-13.767-15.202-13.605-23.127.129-6.339 3.077-15.148 4.535-18.76 8.476-.808 26.821-1.94 32.393 0 1.512 2.588 5.475 8.151 9.232 9.704 4.697 1.94 21.542 3.186 29.154 10.73 1.437.173 2.493.318 3.078.429 5.125.968 12.976 1.699 14.432 10.997 3.179 1.401 9.571 5.369 9.701 10.027.162 5.822 0 45.12 0 48.84 0 3.72-16.035.809-18.302-.97v-4.486c-6.942-.283-19.274-2.792-19.274-6.997z" fill="#fff" />
<path d="M155.839 745.501c15.501 1.326 45.537 3.989 55.878 5.232m7.613 14.337c-1.026.215-4.243 1.649-8.908 5.66-.896.77-1.73 2.063-2.501 3.72m0 0c-4.249 9.132-6.569 29.332-6.569 34.123 0 4.205 12.332 6.714 19.274 6.997m-12.705-41.12c-17.037.754-52.471 1.358-57.913-2.264-6.803-4.529-13.767-15.202-13.605-23.127.129-6.339 3.077-15.148 4.535-18.76 8.476-.808 26.821-1.94 32.393 0 1.512 2.588 5.475 8.151 9.232 9.704 4.697 1.94 21.542 3.186 29.154 10.73m0 0c1.437.173 2.493.318 3.078.429 5.125.968 12.976 1.699 14.432 10.997m0 0c.246 1.573.309 3.392.145 5.498-1.134 14.555-2.753 45.606-4.211 47.385-.375.458-2.132.627-4.535.528m8.601-53.411c3.179 1.401 9.571 5.369 9.701 10.027.162 5.822 0 45.12 0 48.84 0 3.72-16.035.809-18.302-.97v-4.486" stroke="#FF8989" stroke-width="1.1" />
<path d="M177.197 681.781c-.831-3.477-6.224-5.465-8.816-6.024-1.17-.284-3.707-.719-4.5-.192-.992.66.211 2.485 2.425 10.141 1.771 6.126.606 8.675-.198 9.185-4.811-6.966-12.591-18.643-15.255-20.33-3.33-2.108-3.204-1.98-8.504-.712-1.631.39-6.002.537-6.549 5.263-.437 3.78 1.953 17.912 3.844 23.48 1.398 5.845-1.562 20.708-.489 23.99 1.072 3.282 12.408 12.031 22.176 12.019 9.767-.012 16.501-5.9 16.023-7.899-.478-1.998-4.416-10.457-1.097-16.004 3.319-5.547 1.98-28.57.94-32.917z" fill="#fff" stroke="#FF8989" stroke-width="1.1" />
<path d="M181.929 652.066c0 2.351 1.477 4.019 3.037 4.019 1.457 0 2.834-1.442 3.017-3.56m-6.054-.459h6.624c0 .169-.007.336-.021.501l-.548-.047m-6.055-.454c0-2.16 1.261-3.767 2.678-3.991l.378-.028-3.056 4.019zm6.054.459l.001-.005m-.001.005l.001-.005m-.001.005v.004l.02-.467v.004c0 .154-.006.305-.019.454m-1.502 4.316c-.128.107-.262.19-.404.247-.89.358-3.173.843-5.649.97-1.229.063-2.483.037-3.615-.13-1.139-.168-2.114-.473-2.817-.938a2.794 2.794 0 0 1-.86-.859c-.942-1.538-.773-3.071-.213-4.334.574-1.293 1.526-2.226 1.992-2.49a2.12 2.12 0 0 1 .417-.137c.232-.059.531-.12.885-.182a48.666 48.666 0 0 1 2.585-.361 135.65 135.65 0 0 1 3.375-.345c-.844.956-1.349 2.328-1.349 3.789 0 2.696 1.736 5.119 4.137 5.119.544 0 1.053-.125 1.516-.349zm-13.422.827l.051.039a13.947 13.947 0 0 1-.422 1.91 26.59 26.59 0 0 0 .371-1.949zm-1.08 4.025c.048-.087.094-.181.139-.281l-.007.022c-.167.485-.342.973-.51 1.441-.317.882-.61 1.698-.781 2.313l-.045.174c.15-1.171.61-2.581 1.204-3.669zm-4.297 17.14c.081-.002.157-.013.23-.031l-.019.014c-.139.107-.205.117-.205.118h.002c-.461 0-.746-.123-1.009-.327-.231-.179-.433-.407-.706-.714-.09-.1-.186-.209-.294-.327a6.125 6.125 0 0 1-.403-.519c.518.553 1.111 1.1 1.718 1.551.193.145.426.241.686.235zM169.034 653.988c-2.111 0-3.946-1.989-3.946-4.607 0-2.618 1.835-4.607 3.946-4.607 2.11 0 3.945 1.989 3.945 4.607a5.084 5.084 0 0 1-.862 2.872c-.736 1.076-1.856 1.735-3.083 1.735zm-2.778-9.375c-1.381 1.033-2.268 2.809-2.268 4.768 0 2.948 2.008 5.483 4.685 5.693-.964.336-2.156.553-3.612.535-1.921-.023-3.12-.392-3.846-.837a2.707 2.707 0 0 1-.685-.582c-.388-.474-.442-.953-.388-1.248l.014-.08-.009-.081c-.479-4.174 2.814-7.018 3.788-7.842.069-.058.28-.151.7-.221a9.723 9.723 0 0 1 1.405-.104l.216-.001z" fill="#fff" stroke="#FF8989" stroke-width="1.1" />
<path d="M153.473 648.093c-.357 4.479-3.295 9.627-4.682 11.861-1.011.825 2.997 4.618 5.127 6.41.248.05 1.056.045 2.304-.368 1.561-.516 2.675-2.358 3.195-5.157.521-2.8 4.236-3.095 4.905-3.095.669 0 3.047.59 3.493-.294.446-.885-.298-1.548-1.189-1.99-.892-.442-3.642-.073-4.533 0-.892.074-.52-1.547 0-2.726s.599-4.321 1.114-5.599c.595-1.474 3.047-2.063 3.047-3.021 0-.679-4.681.074-5.87.81-1.189.737-4.236.885-5.202 1.106-.773.176-1.657 1.4-1.709 2.063z" fill="#fff" stroke="#FF8989" stroke-width="1.1" />
<path d="M121.851 699.733c-4.915-2.346-5.79-7.642-4.376-12.937.581-2.177 2.073-3.629 3.703-4.775 2.335-1.642 4.954-2.656 5.589-4.274.302-.77 2.124-2.618 4.646-4.92 4.684-4.276 11.78-10.116 16.026-13.514 4.915-3.084 10.504 5.63 8.147 7.507-2.356 1.877-8.147 11.865-10.167 14.814-2.02 2.95-7.407 9.385-10.235 14.814-2.828 5.43-8.417 5.631-13.333 3.285z" fill="#fff" stroke="#FF8989" stroke-width="1.1" />
<path d="M180.324 666.02c1.639 1.059 3.22 3.58 3.805 4.708 1.024.809 9.146-1.545 9.146-2.943 0-1.397-3.878-4.487-4.317-5.002-.439-.515-.731-3.237-.512-4.782.22-1.545-.658-2.648-1.097-1.618-.439 1.03-3.439.22-3.878.735-.439.515-2.415.883-3.586.515-1.17-.368-2.999.221-4.463 0-1.463-.22-2.853-1.765-3.512-2.28-.658-.515-2.122-1.03-3.146-.368s.219 1.692 1.024 2.133c.805.442 1.317 2.207 2.122 2.869.805.662 3.732 1.251 4.171 2.354.439 1.104 2.195 2.354 4.243 3.679zM178.129 647.702c.878 0 1.537.49 1.756.736.196.122.571.456.513.809-.074.441-.952.662-2.049 1.545-1.098.882-2.195.735-2.415.147-.219-.589 1.025-1.325 1.171-1.839.146-.515-1.975.441-3 .514-.585.043-.366-1.25-.585-1.912-.236-.712-.073-.809.878-.368.951.441 2.634.368 3.731.368z" fill="#fff" />
<path d="M180.324 666.02c1.639 1.059 3.22 3.58 3.805 4.708 1.024.809 9.146-1.545 9.146-2.943 0-1.397-3.878-4.487-4.317-5.002-.439-.515-.731-3.237-.512-4.782.22-1.545-.658-2.648-1.097-1.618-.439 1.03-3.439.22-3.878.735-.439.515-2.415.883-3.586.515-1.17-.368-2.999.221-4.463 0-1.463-.22-2.853-1.765-3.512-2.28-.658-.515-2.122-1.03-3.146-.368s.219 1.692 1.024 2.133c.805.442 1.317 2.207 2.122 2.869.805.662 3.732 1.251 4.171 2.354.439 1.104 2.195 2.354 4.243 3.679zM178.129 647.702c.878 0 1.537.49 1.756.736.196.122.571.456.513.809-.074.441-.952.662-2.049 1.545-1.098.882-2.195.735-2.415.147-.219-.589 1.025-1.325 1.171-1.839.146-.515-1.975.441-3 .514-.585.043-.366-1.25-.585-1.912-.236-.712-.073-.809.878-.368.951.441 2.634.368 3.731.368z" stroke="#FF8989" stroke-width="1.1" />
<path d="M177.984 697.167c1.362-5.602-.829-14.856-2.095-18.783 2.226-.72 13.42 4.908 13.486 3.665.065-1.244-4.714-8.705-6.547-10.734-1.466-1.623-.611-1.941 0-1.898 6.076-.262 8.205-2.989 8.511-4.319 1.309.916 5.106 7.068 9.82 15.053 4.713 7.985 6.481 9.424 3.6 13.744-2.304 3.456-18.81 3.622-26.775 3.272z" fill="#fff" stroke="#FF8989" stroke-width="1.1" />
<path id="ray" d="M1535.58 286L185.625 652.441c-8.963 2.159-8.988-2.665-13.034-4.14-3.237-1.18-4.525 2.33-4.764 4.232-.571 5.369 5.467 7.016 17.844 8.805L1538.41 964.993 1535.58 286z" fill="url(#paint0_linear)" fill-opacity=".5" />
<path class="path" id="motionPath" fill-rule="evenodd" clip-rule="evenodd" d="M470.957 807.07C532.213 841.07 749.324 820.243 749.324 820.243C807.613 822.741 1066.49 716.412 1030.8 633.651C1019.57 607.632 889.593 558.856 809.124 555.215C713.585 550.893 587.61 607.65 572.011 623.47C486.281 710.41 657.975 785.63 749.324 820.243C836.525 853.285 1077.55 846.472 1135.97 802.708C1381.73 618.588 842.693 336.779 472.721 560.722C376.55 618.934 403.154 769.438 470.957 807.07V807.07Z" stroke="black" stroke-width="1.22" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round" />
<g id="plane1" class="plane">
<path fill-rule="evenodd" clip-rule="evenodd" d="M636.51 618.306l49.805-31.087-34.913 3.075-14.892 28.012zm11.458-27.71l-18.451 1.625-7.692 4.681 5.29-10.994-8.873-17.963 68.073 19.274-36.335-.805-2.012 4.182z" fill="#fff" />
<path d="M636.51 618.306l-6.312-21.305-8.373-.099 7.692-4.681 18.451-1.625 3.434-.302-14.892 28.012z" fill="#fff" />
<path d="M649.98 586.414l36.335.805-34.913 3.075-3.434.302 2.012-4.182z" fill="#fff" />
<path d="M686.315 587.219l-49.805 31.087m49.805-31.087l-68.073-19.274 8.873 17.963m59.2 1.311l-36.335-.805m36.335.805l-34.913 3.075m-14.892 28.012l-6.312-21.305-8.373-.099m14.685 21.404l14.892-28.012m-29.577 6.608l7.692-4.681 18.451-1.625m-26.143 6.306l5.29-10.994m0 0l22.865.506m0 0l-2.012 4.182m0 0l3.434-.302" stroke="#FF8989" stroke-width="1.1" />
</g>
<g id="plane2" class="plane">
<path fill-rule="evenodd" clip-rule="evenodd" d="M507.31 571.091l43.692-47.294-36.043 13.353-7.649 33.941zm4.104-32.628l-19.048 7.057-6.783 7.177 2.416-13.161-14.583-16.435 77.586.696-38.669 9.66-.919 5.006z" fill="#fff" />
<path d="M507.31 571.091l-12.841-20.712-8.886 2.318 6.783-7.177 19.048-7.057 3.545-1.313-7.649 33.941zM512.333 533.457l38.669-9.66-36.043 13.353-3.545 1.313.919-5.006z" fill="#fff" />
<path d="M551.002 523.797l-43.692 47.294m43.692-47.294l-77.586-.696 14.583 16.435m63.003-15.739l-38.669 9.66m38.669-9.66l-36.043 13.353m-7.649 33.941l-12.841-20.712-8.886 2.318m21.727 18.394l7.649-33.941m-29.376 15.547l6.783-7.177 19.048-7.057m-25.831 14.234l2.416-13.161m0 0l24.334-6.079m0 0l-.919 5.006m0 0l3.545-1.313" stroke="#FF8989" stroke-width="1.1" />
</g>
<g id="plane3" class="plane">
<path fill-rule="evenodd" clip-rule="evenodd" d="M627.048 468.843L648.883 412l-26.994 24.347 5.159 32.496zm-7.814-30.102l-14.265 12.867-3.447 8.679-2.484-12.408-18.565-9.335L648.883 412l-30.593 22.021.944 4.72z" fill="#fff" />
<path d="M627.048 468.843l-18.531-13.702-6.995 5.146 3.447-8.679 14.265-12.867 2.655-2.394 5.159 32.496zM618.29 434.021L648.883 412l-26.994 24.347-2.655 2.394-.944-4.72z" fill="#fff" />
<path d="M648.883 412l-21.835 56.843M648.883 412l-68.41 26.544 18.565 9.335M648.883 412l-30.593 22.021M648.883 412l-26.994 24.347m5.159 32.496l-18.531-13.702-6.995 5.146m25.526 8.556l-5.159-32.496m-20.367 23.94l3.447-8.679 14.265-12.867m-17.712 21.546l-2.484-12.408m0 0l19.252-13.858m0 0l.944 4.72m0 0l2.655-2.394" stroke="#FF8989" stroke-width="1.1" />
</g>
<defs>
<linearGradient id="paint0_linear" x1="242.817" y1="658.144" x2="1184.42" y2="579.286" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFFA89" />
<stop offset="1" stop-color="#FF898C" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<article class=" news news_3">
<h3>So affordable. Small teams OK</h3>
<p>
Some email services cost hundreds or thousands to send to a not-so-large audience. We’ll make sure you can stop worrying bout costs and more about sending your beautiful content!
</p>
</article>
<figure class="furniture">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/furniture%20scene.png' alt=''>
</figure>
</div>
</section>
</div>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js"></script>
Raw
style.scss
$color-1: #ffe1d1;
$color-2: #ffdbca;
// :root {
// /* BASE COLORS */
// --color-1: #ffe1d1;
// --color-2: #ffdbca;
// }
body {
overflow-x: hidden;
font-family: Alegreya, serif;
}
//Header
.header {
font-weight: bold;
font-size: 20px;
//setting up first grid.
display: grid;
grid-template-columns: 20% 1fr;
@media (max-width: 768px) {
grid-template-columns: 1fr;
padding: 45px;
}
}
.header-logo {
align-self: center;
margin-left: 2rem;
}
#logo {
transition: all 0.5s ease-out;
}
#logo:hover {
transform: perspective(400px) translate3d(-10px, 0px, -10px) scale(0.93);
}
.header-letter {
font-size: 30px;
color: #6a4a39;
}
.menu {
font-size: 20px;
color: #000000;
opacity: 0.7;
list-style: none;
// setting up flexbox for menu
display: flex;
justify-content: flex-end;
&-item {
margin: 47px 45px;
position: relative;
}
@media (max-width: 768px) {
display: none;
}
}
// setting up line animation for menu items.
.menu-item::after {
content: "";
display: block;
width: 100%;
height: 3px;
background-color: #6a4a39;
position: absolute;
visibility: hidden;
transform-origin: left;
transform: scale(0);
transition: 0.25s ease-out;
}
.menu-item:hover::after {
visibility: visible;
transform: scale(1);
}
.menu-item:last-of-type {
color: #ff7676;
border-bottom: 4px solid #f8d1be;
}
//Hero section
.container {
background: linear-gradient(to left, $color-1, $color-2);
max-width: 1500px;
margin: 0 auto;
}
.hero_container {
position: relative;
min-height: 550px;
display: grid;
grid-template-areas:
"lamp title sun sun"
"lamp title sun sun";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, minmax(0px, auto));
border-bottom: 1px solid #ff8989;
@media (max-width: 768px) {
grid-template-areas:
"title"
"sun";
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
}
.hero_cta {
grid-area: title;
justify-self: end;
align-self: center;
font-family: Alegreya;
font-style: normal;
line-height: normal;
z-index: 3;
}
.lamp {
grid-area: lamp;
height: auto;
justify-self: start;
align-self: end;
position: absolute;
bottom: -350px;
@media (max-width: 960px) {
display: none;
}
}
//Hero Call to Action
.cta_title {
font-size: 60px;
line-height: 69px;
font-weight: bold;
}
.cta_description {
font-size: 20px;
color: #333333;
margin-bottom: 2rem;
}
.cta_btn {
width: 200px;
height: 44px;
position: absolute;
bottom: -23px;
cursor: pointer;
background: rgb(51, 51, 51);
box-shadow: rgba(255, 163, 148, 0.1) 0px 5px 10px;
border: none;
border-radius: 5px;
font-family: Alegreya;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #ffffff;
transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
&:hover {
transform: translateY(-3px);
opacity: 0.7;
}
}
@media (max-width: 768px) {
.hero_cta {
justify-self: center;
align-self: end;
margin-top: 4rem;
}
.cta_title {
font-size: 40px;
text-align: center;
}
.cta_description {
max-width: 280px;
}
.cta_btn {
position: relative;
width: 100%;
}
}
//Waves
.hide {
visibility: hidden;
}
#waves {
justify-self: end;
max-width: 1500px;
width: 100%;
grid-column: 1/5;
align-self: end;
grid-row: 2/2;
}
//Sun
.container_sun {
grid-area: sun;
align-self: end;
justify-self: start;
@media (max-width: 768px) {
justify-self: center;
}
img {
max-width: 400px;
min-width: 200px;
width: 100%;
@media (max-width: 768px) {
max-width: 600px;
}
}
}
// Plane SVG
#planes {
width: 100%;
transform-style: preserve-3d;
grid-area: sun;
justify-self: end;
align-self: end;
@media (max-width: 768px) {
display: none;
}
}
.fly_right {
opacity: 0;
transform-origin: center center 0px;
transform: translate(-500px, 300px);
animation: fly_right 3s ease-out 0.8s 1 forwards;
}
@keyframes fly_right {
10% {
opacity: 1;
}
100% {
transform: perspective(800px) translateZ(-3em) translateX(-200px) scale(2);
opacity: 1;
}
}
//second section
.two {
background: #fff;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/Group%202-1.png");
background-repeat: no-repeat;
background-position: 35% 0;
background-size: cover;
}
.news_container {
display: grid;
grid-template-columns: repeat(6, minmax(100px, auto));
grid-template-rows: repeat(6, 320px);
grid-gap: 20px;
}
.large_plane {
max-width: 700px;
min-width: 300px;
width: 100%;
grid-column: 2/5;
grid-row: 1/3;
align-self: center;
justify-self: center;
img {
width: 100%;
}
}
.luggage {
min-width: 300px;
grid-column: 5/7;
grid-row: 1/3;
justify-self: center;
align-self: center;
img {
width: 100%;
}
}
.fly_container {
max-width: 1000px;
width: 100%;
grid-column: 2/7;
grid-row: 2/6;
align-self: center;
justify-self: end;
}
.stairs {
max-width: 300px;
grid-column: 1/4;
grid-row: 3/5;
align-self: center;
justify-self: center;
}
.path {
visibility: hidden;
}
.news {
max-width: 265px;
h3 {
font-weight: bold;
line-height: 35px;
font-size: 30px;
}
p {
font-size: 20px;
margin-top: 50px;
}
}
.news_1 {
grid-column: 2/3;
grid-row: 2/4;
align-self: center;
justify-self: center;
}
.news_2 {
grid-column: 5/7;
grid-row: 2/4;
align-self: start;
justify-content: center;
margin-top: 5.5rem;
}
.news_3 {
grid-column: 3/4;
grid-row: 5/7;
align-self: center;
justify-self: center;
}
.furniture {
grid-column: 4/6;
grid-row: 5/7;
align-self: center;
justify-self: start;
img {
width: 100%;
}
}
@media (max-width: 768px) {
.news_container {
grid-template-columns: 1fr 1fr;
margin: 0px 20px;
}
.large_plane {
display: none;
}
.luggage {
grid-column: 1/3;
grid-row: 1/2;
}
.fly_container {
grid-column: 1/3;
grid-row: 4;
width: 600px;
align-self: center;
justify-self: center;
svg {
height: 500px;
max-width: 600px;
}
}
.stairs {
display: none;
}
.news_1 {
grid-column: 2;
grid-row: 3;
margin-top: 0;
}
.news_2 {
grid-column: 1;
}
.news_3 {
grid-column: 1;
}
.furniture {
grid-column: 2;
}
}
@media (max-width: 420px) {
.two {
background-position: center;
}
.news_container {
display: flex;
flex-direction: column;
}
.news_container * {
justify-self: center;
align-self: center;
}
.luggage {
margin-top: 15rem;
}
.fly_container {
svg {
height: 300px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment