Blob
by Milan Gladiš
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145676438-1"></script>
<meta charset="UTF-8">
<title>Blob concept</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/png" href="./favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300|Roboto:500,700&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<div id="app">
<section class="promo">
<div class="container">
<div class="relative">
<div class="-blob" style="transform: translate(380px, 140px)">
<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M19.3975 110.5C-29.1025 212 14.3975 332.5 138.898 357C263.398 381.5 354.363 357 384.898 271C415.432 185 424.398 71.4999 336.397 21.9999C248.397 -27.5 67.8975 8.9999 19.3975 110.5Z" fill="rgba(140,20,247, 0.2)" stroke="rgba(140,20,247, 1)" stroke-width="2"/>
</svg>
</div>
<div class="-blob" style="transform: scale(-1) translate(-300px)">
<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M19.3975 110.5C-29.1025 212 14.3975 332.5 138.898 357C263.398 381.5 354.363 357 384.898 271C415.432 185 424.398 71.4999 336.397 21.9999C248.397 -27.5 67.8975 8.9999 19.3975 110.5Z" fill="rgba(140,20,247, 0.2)" stroke="rgba(140,20,247, 1)" stroke-width="2"/>
</svg>
</div>
</div>
</div>
</section>
</div>
<script src="./app.js"></script>
</body>
</html>
CSS
a,body,div,footer,form,h1,h2,h3,h4,header,html,img,label,li,nav,p,span,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;list-style:none}footer,header,menu,nav{display:block}body{line-height:1}li,ol,ul{list-style:none}*{-webkit-box-sizing:border-box;box-sizing:border-box}.btn{display:inline-block;height:4rem;line-height:4rem;padding:0 3rem;text-decoration:none;background-color:#FCA7BE;display:inline-block;color:#fff;cursor:pointer}.btn.-black{background-color:#000}input,textarea,button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;font:inherit;border-radius:0}input{height:4rem;padding:0 1rem;-webkit-box-shadow:inset 0 0 0 2px #000;box-shadow:inset 0 0 0 2px #000;margin-right:1rem;width:100%;max-width:30rem}.newsletterForm.warning input{-webkit-box-shadow:0 0 0 2px red;box-shadow:0 0 0 2px red}@font-face{font-family:'Hussar Bold';font-style:normal;font-weight:normal;src:local("Hussar Bold"),url("fonts/hussar.woff") format("woff")}a{text-decoration:none;color:#FFD1DE}header{position:absolute;z-index:10;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width: 770px){header .container{padding:0}}menu{padding:0;margin:0;height:8rem;font-family:"Hussar Bold",sans-serif;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width: 770px){menu{padding-top:2rem}}menu li{text-transform:uppercase}menu li a{height:8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 2.5rem;color:#000;position:relative}@media screen and (max-width: 770px){menu li a{padding:0 1rem;height:4rem;font-size:1.3rem}}menu li...
JavaScript
/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}k.fn=k.prototype={jquery:f,constructor:k,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=k.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return k.each(this,e)},map:function(n){return this.pushStack(k.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},k.extend=k.fn.extend=function(){var...