elzar
Version:
resmio glamourous style guide in sass mode
302 lines (270 loc) • 26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Elzar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="root"></div>
<svg xmlns="http://www.w3.org/2000/svg" style="width:0; height:0; visibility:hidden;">
<symbol id="symbol-account" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16.5 30C23.956 30 30 23.956 30 16.5S23.956 3 16.5 3 3 9.044 3 16.5 9.044 30 16.5 30zm-8.31-2.742s.91-.974 1.733-1.35c.824-.376 2.468-.91 2.878-1.087.412-.176 1.355-.75 1.355-1.192 0-.44.097-2.518.097-2.518s-.567-.683-.8-1.165c-.232-.483-.432-1.21-.432-1.21s-.55-.286-.775-.687c-.225-.402-.25-1.392-.25-1.392l.37-.337-.002-4.172s.025-1.367.623-1.918c.598-.55.938-1.182 1.86-1.398.922-.215 2.366-.12 2.656-.12.29 0 .76.246 1.137.415.377.17 1.256-.088 1.47.233.217.32 1.375.797 1.375 2.093 0 1.296.01 2.807-.206 3.43-.216.623-.584 1.31-.584 1.31l.64.183s.288.594-.024 1.133c-.313.538-.755 1.225-1.03 1.225-.273 0-.332.6-.332.8 0 .2-.55 1.293-.72 1.293-.17 0-.193 2.567-.193 2.567s.463 1.27 1.246 1.47c.783.2 2.955.8 3.523 1.183.568.383 1.143 1.133 1.143 1.133"/></g>
</symbol>
<symbol id="symbol-add-booking" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16.5 29C23.404 29 29 23.404 29 16.5S23.404 4 16.5 4 4 9.596 4 16.5 9.596 29 16.5 29zm6.708-12.5H10.25m6.25-6.25v13.393"/></g>
</symbol>
<symbol id="symbol-arrived" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M14.59 29.222c.35.43.942.44 1.3.04 0 0 9.26-9.857 9.26-16.52C25.15 6.075 21.072 3 15.224 3 9.377 3 6 6.43 6 12.74c0 6.31 8.59 16.482 8.59 16.482zM11 15.094l2.343 2.382a.98.98 0 0 0 1.404.01L20.13 12"/></g>
</symbol>
<symbol id="symbol-arrow-back" viewBox="0 0 32 32">
<g fill-rule="evenodd"><g><path d="M13.95 8s7.47 1.275 7.47 9.864c0 8.59-6.63 10.75-6.63 10.75" stroke-linecap="square"/><path d="M19.892 5.824L14.228 6.92a1.048 1.048 0 0 0-.833 1.177l.857 5.7"/></g></g>
</symbol>
<symbol id="symbol-arrow-down" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M3 12.117l11.62 12.36c.375.397.98.394 1.353-.008L27.516 12"/></g>
</symbol>
<symbol id="symbol-arrow-left" viewBox="0 0 40 40">
<g fill-rule="evenodd"><path d="M25.74 7.34L13.38 18.96c-.398.376-.395.982.007 1.354l12.47 11.543"/></g>
</symbol>
<symbol id="symbol-arrow-right" viewBox="0 0 40 40">
<g fill-rule="evenodd"><path d="M14.777 31.857l12.358-11.62a.912.912 0 0 0-.007-1.353L14.658 7.34"/></g>
</symbol>
<symbol id="symbol-arrow-up" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M4 25.08l11.62-12.358a.912.912 0 0 1 1.353.006l11.543 12.47"/></g>
</symbol>
<symbol id="symbol-block-note" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M11.576 5.195v3.508m-1.223 5.047h10.245m-10.245 4h10.245m-10.245 4h10.245M19.01 5.195v3.508M7 7.947c0-.55.455-.998 1-.998h15c.552 0 1 .45 1 .997v17.056c0 .55-.455.997-1 .997H8c-.552 0-1-.452-1-.997V7.947z" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-bookings" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M15.904 25.528l.992-.17 9.196-1.58c.548-.095.992-.617.992-1.165V6.587c0-.55-.447-.92-.98-.834L16.023 7.39M16 25.544V6.927m.092 18.617l-.985-.17-9.124-1.57c-.544-.093-.985-.614-.985-1.163V6.617c0-.55.45-.922.985-.836l10.11 1.63m-.18 20.177l.984-.175 11.134-1.976c.545-.097.986-.626.986-1.183V8.008c0-.557-.447-1.008-.994-1.008h-.39m-11.41 20.595l-.986-.175-11.14-1.983c-.544-.097-.986-.627-.986-1.184V8.008A1.01 1.01 0 0 1 4.117 7h.46m15.95 6.613l1.53-2.108 1.598 1.838.103-7.212-3.232.55v6.933z"/></g>
</symbol>
<symbol id="symbol-calendar" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M7.75 5.195v3.508M5.458 11.75h21.084M23.75 5.195v3.508M3 7.95c0-.553.45-1 1.003-1h23.994a.997.997 0 0 1 1.003 1V27c0 .552-.45 1-1.003 1H4.003A.997.997 0 0 1 3 27V7.95zm18.433 14.8h1.552m-5.82 0h1.55m-5.82 0h1.553m-5.82 0h1.55m11.246-3.485h1.552m-5.723-.026h1.552m-5.902-.003h1.552m-5.825.018h1.552m11.25-3.505h1.553m-5.82 0h1.55m-5.82 0h1.553m-5.82 0h1.55m11.255 0h1.552m-5.82 0h1.55m-5.82 0h1.553m-5.82 0h1.55" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-card" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M2 9.996A2 2 0 0 1 3.99 8h24.02C29.107 8 30 8.894 30 9.996V23.55a2 2 0 0 1-1.99 1.995H3.99C2.893 25.545 2 24.65 2 23.55V9.996zm22.274 10.302a1.593 1.593 0 0 0-.93-.298 1.61 1.61 0 0 0-1.606 1.615c0 .893.72 1.616 1.606 1.616.347 0 .668-.11.93-.297.263.187.584.298.93.298a1.61 1.61 0 0 0 1.607-1.615A1.61 1.61 0 0 0 25.205 20c-.346 0-.667.11-.93.298zm-19.06-8.523a1 1 0 0 1 1-1.006h2.13a1 1 0 0 1 1 1.005v2.143a1 1 0 0 1-1 1.005h-2.13a1 1 0 0 1-1-1.005v-2.143zm.23 11.145h9.18-9.18zm4.562-1.846h4.617-4.617zm-4.59 0h3.206-3.206zm.033-3.786h21.1-21.1z"/></g>
</symbol>
<symbol id="symbol-check-circle" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16.5 29C23.404 29 29 23.404 29 16.5S23.404 4 16.5 4 4 9.596 4 16.5 9.596 29 16.5 29zM10 16.578l3.808 3.872a.99.99 0 0 0 1.41-.002L23.51 12"/></g>
</symbol>
<symbol id="symbol-check" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M3 18.194l8.367 8.508a.974.974 0 0 0 1.393-.002L30.13 9"/></g>
</symbol>
<symbol id="symbol-clock" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm-1-18v7.72a1 1 0 0 0 .99 1H21"/></g>
</symbol>
<symbol id="symbol-close" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M5.5 6.5l20 20M25 7L5 27" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-direction" viewBox="0 0 40 40">
<g fill-rule="evenodd"><g><path d="M32.417 22.09a.86.86 0 0 1 0 1.317l-2.186 1.935c-.41.363-1.186.658-1.747.658h-16.67a1.002 1.002 0 0 1-1.005-1.002v-4.5a1 1 0 0 1 1.004-1h16.67c.556 0 1.344.3 1.75.657l2.185 1.936zM6.94 14.408a.86.86 0 0 1 0-1.316l2.185-1.935c.41-.363 1.187-.658 1.748-.658h16.67c.556 0 1.005.447 1.005 1.002v4.498A1 1 0 0 1 27.544 17h-16.67c-.556 0-1.344-.3-1.75-.658L6.94 14.407z"/><path d="M17 26v7c0 .55.444.997.996.998l1.517.002a1 1 0 0 0 .996-.996V26H17zm3.51-14.853V9a.996.996 0 0 0-.997-.997L17.996 8a.99.99 0 0 0-.996.995v2.152m3.5 8.353v-3 3zm-3.5.647V17v3.147z"/></g></g>
</symbol>
<symbol id="symbol-double-arrow" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M20.988 8.216s-11.596-.138-12.152 0c-.556.138-3.8 0-3.836 3.66-.037 3.66 2.925 3.938 3.693 4.166.768.228 14.36-.207 15.134 0 .773.207 3.174.563 3.174 3.826 0 3.264-2.237 3.768-3.173 3.985-.936.217-12.936 0-12.936 0M16.878 4l3.336 3.404c.39.396.393 1.04.007 1.442l-3.1 3.226m-2.264 15.913l-3.337-3.403a1.04 1.04 0 0 1-.008-1.443l3.102-3.227"/></g>
</symbol>
<symbol id="symbol-email" viewBox="0 0 40 40">
<g fill-rule="evenodd"><g transform="translate(7 11)"><rect width="27" height="17" rx="1"/><path d="M.858 1.28L12.61 8.285c.48.286 1.253.292 1.732.012l12.002-7.02"/></g></g>
</symbol>
<symbol id="symbol-feedback" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M6.846 10.75h19.026m-19.026 7h10.59m-10.59-3.5h19.026M2 6.993C2 6.445 2.44 6 2.997 6h26.006a1 1 0 0 1 .997.993v15.554a1 1 0 0 1-1.007.993h-3.51c-.556 0-1.246.34-1.304.884l.37 4.117c.086.547-.113.633-.447.194l-3.96-4.663c-.45-.292-1.26-.53-1.82-.53H3.005C2.45 23.54 2 23.09 2 22.547V6.993z" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-finished" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M22.214 7.922A10.947 10.947 0 0 0 16 6C9.925 6 5 10.925 5 17s4.925 11 11 11 11-4.925 11-11m-13-3.872l4.352 4.424a.98.98 0 0 0 1.403 0L29.13 8"/></g>
</symbol>
<symbol id="symbol-guests" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M7 27.692s1.112-1.19 2.12-1.65c1.006-.46 3.015-1.11 3.517-1.328.5-.216 1.654-.92 1.654-1.458 0-.54.12-3.077.12-3.077s-.693-.836-.977-1.426c-.284-.59-.53-1.478-.53-1.478s-.67-.35-.946-.84c-.275-.49-.304-1.702-.304-1.702l.45-.41-.002-5.1s.03-1.67.762-2.343c.73-.673 1.147-1.444 2.274-1.708 1.127-.263 2.89-.146 3.245-.146.356 0 .93.3 1.392.507.46.206 1.536-.11 1.8.284.263.392 1.68.975 1.68 2.56 0 1.583.01 3.43-.253 4.19-.265.762-.714 1.6-.714 1.6l.78.225s.354.726-.028 1.385c-.382.658-.922 1.5-1.257 1.5-.334 0-.406.73-.406.976 0 .244-.674 1.58-.88 1.58-.206 0-.236 3.138-.236 3.138s.566 1.553 1.523 1.797c.958.245 3.613.978 4.307 1.447.694.468 1.397 1.385 1.397 1.385M20.17 5.532c.675 0-.16-.097.966-.36 1.127-.264 2.89-.147 3.245-.147.356 0 .93.3 1.392.507.46.206 1.536-.11 1.8.284.263.392 1.68.975 1.68 2.56 0 1.583.01 3.43-.253 4.19-.265.762-.714 1.6-.714 1.6l.78.225s.354.726-.028 1.385c-.382.658-.922 1.5-1.257 1.5-.334 0-.406.73-.406.976 0 .244-.674 1.58-.88 1.58-.206 0-.236 3.138-.236 3.138s.566 1.553 1.523 1.797c.958.245 3.613.978 4.307 1.447.694.468 1.397 1.385 1.397 1.385"/></g>
</symbol>
<symbol id="symbol-import" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16.853 6.337l-.117 17.41m5.888-4.93l-5.238 5.08a1.047 1.047 0 0 1-1.444.01l-5.195-4.918m10.53-3.41h6.206a.998.998 0 0 1 1.003 1v11.316c0 .553-.45 1-1 1H4.77c-.552 0-1-.454-1-1.004V16.235a1.01 1.01 0 0 1 1.01-1.005h6.253" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-info-circle" viewBox="0 0 32 32">
<g fill-rule="evenodd"><g transform="translate(1 1)"><path d="M11.796 11.575l1.702-.196 1.886-.38-1.802 6.71s-.29 1.096-.51 1.642c-.22.546-.357.914 0 1.12.36.204.697 0 .788-.078.09-.076 1.226-1.17 1.342-1.258.116-.086.126.098.126.098s-1.06 1.48-1.468 1.927c-.408.45-.567.535-.86.632-.293.097-1.075.1-1.382-.153-.307-.254-.733-.774-.59-1.526.145-.75.21-.88.21-.88l2.046-7.298-1.488-.06v-.3zM15.25 9.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z"/><circle cx="14" cy="14" r="14"/></g></g>
</symbol>
<symbol id="symbol-location" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M14.633 27.408c.347.427.924.45 1.296.03 0 0 8.22-8.746 8.22-14.715C24.15 6.755 20.498 4 15.26 4 10.025 4 7 7.072 7 12.723c0 5.652 7.633 14.685 7.633 14.685zm.875-11.766a3.135 3.135 0 1 0 0-6.27 3.135 3.135 0 0 0 0 6.27z"/></g>
</symbol>
<symbol id="symbol-lock" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M9.323 13.94S8.103 4 15.653 4c7.547 0 6.143 9.94 6.143 9.94m-16.296 1a1 1 0 0 1 1.003-1h18.494a1 1 0 0 1 1.003 1v12.367a1 1 0 0 1-1.003 1H6.503a1 1 0 0 1-1.003-1V14.94zm10.15 3.56v5"/></g>
</symbol>
<symbol id="symbol-login" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M9.738 16.965l17.41.118m-4.257-6.106l5.08 5.238c.385.397.396 1.037.01 1.445l-4.918 5.194m-6.156-1.348v6.207a.998.998 0 0 1-1 1.002H4.59c-.553 0-1-.45-1-1V5c0-.553.453-1 1.004-1H16.25a1.01 1.01 0 0 1 1.006 1.01v6.253" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-logout" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M21.517 15.75l-17.41-.117m4.257 6.105L3.284 16.5a1.047 1.047 0 0 1-.008-1.444L8.194 9.86m6.156 1.35V5a.998.998 0 0 1 1-1.002h11.316c.553 0 1 .45 1 1v22.716c0 .552-.454 1-1.004 1H15.005A1.01 1.01 0 0 1 14 27.705v-6.253" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-loupe" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M13 20a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm4.5-1.5l8 8"/></g>
</symbol>
<symbol id="symbol-minus" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M27.935 16.5H3.65" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-noshow" viewBox="0 0 32 32">
<g fill-rule="evenodd"><g transform="translate(1 8)"><path d="M14.806 16.59c8.686 0 14.133-6.603 14.133-6.603a1.085 1.085 0 0 0-.014-1.467s-5.434-6.54-14.12-6.54C6.12 1.98.674 8.532.674 8.532c-.372.4-.376 1.06 0 1.454 0 0 5.447 6.602 14.132 6.602zm.194-.026c4.01 0 7.258-3.272 7.258-7.308S19.008 1.95 15 1.95c-4.01 0-7.258 3.27-7.258 7.306s3.25 7.308 7.258 7.308zm-9.92 2.192L24.92.244"/><ellipse cx="14.758" cy="9.5" rx="3.629" ry="3.654"/></g></g>
</symbol>
<symbol id="symbol-pencil-light" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M7.396 22.564l-2.973 6.41c-.234.504-.008.762.524.57l6.778-2.456L28.808 9.186s2.12-2.184-.19-4.295c-2.312-2.11-4.41.19-4.41.19L7.395 22.564z"/></g>
</symbol>
<symbol id="symbol-pencil" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M7.396 22.564l-2.973 6.41c-.234.504-.008.762.524.57l6.778-2.456L28.808 9.186s2.12-2.184-.19-4.295c-2.312-2.11-4.41.19-4.41.19L7.395 22.564zm.18.29l3.83 3.944M24.46 5.376l4.01 4.128"/></g>
</symbol>
<symbol id="symbol-phone" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M13.905 17.874c1.752 1.776 3.92 2.726 3.92 2.726a.547.547 0 0 0 .55-.078l2.675-2.366a.38.38 0 0 1 .495.003l4.34 3.934c.137.124.15.334.03.47l-2.792 3.183a.84.84 0 0 1-.547.253s-4.504-.282-7.9-2.66c-3.396-2.377-6.148-6.195-6.148-6.195m5.603.947c-1.774-1.752-2.724-3.92-2.724-3.92a.547.547 0 0 1 .078-.55l2.366-2.674a.38.38 0 0 0-.003-.496l-3.935-4.34a.337.337 0 0 0-.47-.03L6.257 8.874a.84.84 0 0 0-.252.547s-.25 4.14 2.66 7.9"/></g>
</symbol>
<symbol id="symbol-plus" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16.5 4.052v22.896M27.376 15.5H4.48" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-promote" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M2.96 13.076c-.53.158-.96.743-.96 1.295v3.348c0 .557.428 1.13.96 1.278l17.86 5V7.766l-17.86 5.31zm4.706 7.128a4.682 4.682 0 0 0 4.634 5.352c1.955 0 3.63-1.2 4.33-2.902m9.87-6.87h4.93m-4.85-4.39l4.54-4.54M26.515 19.73l4.23 4.23m-7.672 2.056c.375.41.68.296.68-.25V5.312c0-.548-.293-.65-.65-.226l-2.278 2.688v15.78l2.248 2.462z"/></g>
</symbol>
<symbol id="symbol-refresh" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M26.436 10.995c-.175-.296-.61-.866-.81-1.142-1.89-2.587-4.893-4.26-8.276-4.26C11.634 5.593 7 10.368 7 16.26c0 5.89 4.634 10.667 10.35 10.667 3.422 0 6.456-1.712 8.34-4.35m-4.617-11.024h4.807c.55 0 .998-.444.998-.998V5.897"/></g>
</symbol>
<symbol id="symbol-reservation" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M4.003 22.055c-.554 0-.818-.407-.592-.905l4.206-9.245c.227-.5.863-.905 1.408-.905h18.04l-3.77 10.123c-.196.522-.807.944-1.355.943l-17.937-.01zM27.34 10.417v8.53c0 .552-.45 1-.992 1H24.09"/><path d="M16.557 19.4c-.136-.02-.212-.067-.203-.222l.073-1.692c.01-.358.02-.56-.237-.706.905-.28 1.712-.85 2.16-1.885.4-.928.373-1.895-1.368-1.895h-2.958l-.23.532.58.067c.13.01.134.048.07.193l-2.342 5.424c-.063.145-.094.174-.238.193l-.638.068L11 20h2.436l.226-.522-.605-.077c-.136-.02-.138-.038-.07-.193l.947-2.195h1.064c.386 0 .49.097.482.407l-.062 2-.79.058-.225.522h2.485l.22-.512-.55-.087zm-.44-5.694c1.18 0 1.717.232 1.29 1.218-.483 1.122-1.364 1.392-2.283 1.392h-.89l1.128-2.61h.755z"/></g>
</symbol>
<symbol id="symbol-restaurant" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M10.768 18.964v5.727c0 .55.447.993.995.993H21.94c.55 0 .996-.448.996-1v-5.987M12 16.246c.656 1.63 2.115 2.987 4.903 2.987 3.255 0 4.578-1.596 5.08-3.233m-1-7.39c-.656-1.626-2.116-2.985-4.903-2.985-3.255 0-4.578 1.596-5.08 3.233m8.596 0c.72-1.318 8.5-1.595 7.913 5.125-.59 6.72-7.092 4.677-7.092 4.677m-7.088-.78C12.728 19.255 5 20.21 5 13.464c0-6.747 6.657-5.278 6.657-5.278"/></g>
</symbol>
<symbol id="symbol-scheduled" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M7.75 6.195v3.508M5.458 12.75h21.084M23.75 6.195v3.508M3 8.95c0-.553.45-1 1.003-1h23.994a.997.997 0 0 1 1.003 1V28c0 .552-.45 1-1.003 1H4.003A.997.997 0 0 1 3 28V8.95zm9 12.144l2.343 2.382a.98.98 0 0 0 1.404.01L21.13 18" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-seated" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M6.278 26.505h4.425m-2.215-13.7V26.16M1.326 12.806H15.65m.14 4.254l-2.96 9.294m12.01-9.28l2.532 9.43M13 15.98h11.562c.556 0 1.102-.432 1.223-.975L28.435 3" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-settings" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M3 17.463c0 .557.434 1.125.96 1.267l3.178.857c.53.143.768.67.54 1.167L6.29 23.766c-.232.502-.07 1.195.356 1.546L7.93 26.37c.43.352 1.188.45 1.693.22l2.808-1.272c.507-.23 1.04.017 1.188.547l.83 2.948c.148.532.725.963 1.27.963h1.966c.553 0 1.148-.416 1.334-.94l1.062-2.994c.184-.52.726-.725 1.215-.457l2.494 1.366c.486.268 1.207.17 1.608-.215l1.208-1.16c.4-.387.54-1.112.316-1.61l-1.364-3.01c-.227-.503.018-1.032.545-1.18l2.93-.832c.528-.15.956-.718.956-1.28v-1.746c0-.556-.39-1.227-.868-1.496l-2.654-1.493a.985.985 0 0 1-.363-1.36l.948-1.64c.278-.48.217-1.226-.122-1.646l-1.633-2.023c-.346-.428-1.02-.574-1.508-.322L21.294 7.02a.872.872 0 0 1-1.24-.474l-1.012-2.62c-.198-.51-.813-.926-1.36-.926H15.72c-.554 0-1.158.413-1.35.927l-.987 2.62c-.193.51-.748.724-1.246.472L9.603 5.734c-.495-.25-1.21-.142-1.612.256L6.587 7.385c-.395.392-.522 1.103-.27 1.615l1.205 2.458a.99.99 0 0 1-.466 1.336L3.91 14.28c-.502.237-.91.876-.91 1.437v1.746zm13.586 2.757c2.2 0 3.984-1.813 3.984-4.05 0-2.236-1.783-4.05-3.984-4.05-2.2 0-3.983 1.814-3.983 4.05 0 2.237 1.783 4.05 3.983 4.05z"/></g>
</symbol>
<symbol id="symbol-statistics" viewBox="0 0 32 32">
<g fill-rule="evenodd"><g><path d="M3.75 5.195v22.55m.01.005h26.044m-25.75-.26l7.676-9.693a.996.996 0 0 1 1.404-.163l3.888 3.11a.978.978 0 0 0 1.39-.17L26.667 9.8" stroke-linecap="square"/><path d="M28.05 13.83l-.56-4.062a.984.984 0 0 0-1.125-.846l-4.01.626"/></g></g>
</symbol>
<symbol id="symbol-ticket" viewBox="0 0 40 40">
<g fill-rule="evenodd"><path d="M27.76 35.702c.555 0 1.006-.446 1.006-1.004V6.004A.997.997 0 0 0 27.77 5h-3.883c-.55 0-1.1.442-1.286.958 0 0-.144 1.874-2.534 1.867-2.39-.007-2.517-1.852-2.517-1.852-.156-.522-.732-.942-1.288-.938l-4.255.033A1.02 1.02 0 0 0 11 6.078V34.7a.997.997 0 0 0 1.006 1.002m0-30.634A1.02 1.02 0 0 0 11 6.078V34.7a.997.997 0 0 0 .998 1.002h3.887c.55 0 1.115-.44 1.317-.943 0 0 .147-1.715 2.508-1.688 2.36.027 2.448 1.688 2.448 1.688.165.52.752.942 1.298.942h4.31a1 1 0 0 0 1-1.004V6.004A.997.997 0 0 0 27.77 5h-3.883c-.55 0-1.1.442-1.286.958 0 0-.144 1.874-2.534 1.867-2.39-.007-2.517-1.852-2.517-1.852-.156-.522-.732-.942-1.288-.938l-4.255.033zM11.5 29.5h17.03m-17.03-18h17.03"/><path d="M22.912 22.22c0 .59-.222 1.08-.666 1.466-.444.385-1.065.628-1.862.728v1.516h-.843v-1.457a8.61 8.61 0 0 1-1.416-.114c-.458-.078-.832-.183-1.124-.318v-1.02c.36.162.78.293 1.25.396.474.102.904.153 1.29.153v-2.873c-.892-.283-1.518-.612-1.877-.987-.36-.374-.54-.858-.54-1.45 0-.57.222-1.04.664-1.405.442-.365 1.027-.588 1.754-.666V15h.844v1.176a6.63 6.63 0 0 1 2.32.483l-.34.855a6.634 6.634 0 0 0-1.98-.457v2.835c.684.218 1.196.43 1.535.637.34.207.59.444.75.712.162.268.242.594.242.977zm-1.11.084c0-.314-.097-.567-.29-.76-.195-.195-.57-.388-1.128-.58v2.542c.945-.13 1.418-.53 1.418-1.202zm-3.574-4.057c0 .33.098.597.294.797.196.2.536.39 1.02.568v-2.528c-.432.07-.758.206-.98.408a.98.98 0 0 0-.334.755z"/></g>
</symbol>
<symbol id="symbol-upgrade" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M13.49 18.375V6.992c0-.548.447-.992.993-.992h13.523a1 1 0 0 1 .994.995v19.84c0 .55-.447.995-.994.995H14.483a.995.995 0 0 1-.994-1.007v-2.175M8.893 7.008v7.75c0 .557-.453 1.008-1.003 1.008H3.003A1 1 0 0 1 2 14.758v-7.75C2 6.45 2.452 6 3.002 6h4.89a1 1 0 0 1 1.002 1.008zM5.334 16v4.346c0 .556.455 1.006 1.005 1.006h12.65M18 19l1.535 1.535c.393.393.408 1.036.025 1.447L18 23.657" stroke-linecap="square"/></g>
</symbol>
<symbol id="symbol-walkin" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16.59 18.528l-2.23 3.352c-.302.456-.648 1.272-.765 1.795l-1.17 5.237s.045 1.86 1.387 1.86 1.56-.81 1.705-1.296c.145-.486 1.345-4.376 1.345-4.376.163-.528.533-1.328.837-1.805 0 0 2.9-4.533 3.15-5 .248-.464.89-1.216.444-2.43-.445-1.21-.75-2.62-.75-2.62s3.2 3.763 3.49 4.16c.288.4 0 1.123.43 1.243 1.118.31 1.355-.79 1.355-1.135s-3.882-7-3.882-7c-.273-.47-.89-1.057-1.386-1.304 0 0-.933-.523-1.34-.523-.41 0-1.322-.607-1.322-.607l-1.125.607-1.248.268-.184.597c-.164.53-.636 1.262-1.04 1.626l-.112.1c-.41.37-1.174.818-1.69.997l-2.813.97s-1.284-.282-1.487.193c-.203.475-.116.97.295 1.34.41.373 1.15.506 1.666.506s1.71-.288 1.71-.288a9.61 9.61 0 0 0 1.874-.663l.893-.45c.492-.245.982-.01 1.097.536l.865 4.108zm-.86-9.733c1.578 0 2.858-1.298 2.858-2.898S17.308 3 15.728 3c-1.577 0-2.857 1.297-2.857 2.897 0 1.6 1.28 2.898 2.86 2.898zm2.42 13.794c-.243.582-.173 1.466.07 2.003.24.538 3.06 4.663 3.327 4.876.27.212.9.956 1.644.767.745-.19 1.082-.6 1.082-1.515 0-.915-2.46-4.292-2.46-4.292-.315-.445-.63-1.258-.703-1.798l-.523-3.908"/></g>
</symbol>
<symbol id="symbol-warning" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M15.37 19.947h1.304v-8.88H15.37v8.88zm.635 4.163a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z"/><path d="M15.535 2.868c.267-.48.7-.476.966 0l14.053 25.264c.267.48.035.868-.517.868H2c-.553 0-.782-.392-.517-.868L15.535 2.868z"/></g>
</symbol>
<symbol id="symbol-x-circle" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M16 30c7.18 0 13-5.82 13-13S23.18 4 16 4 3 9.82 3 17s5.82 13 13 13zm5.306-18.306L10.694 22.306m0-10.612l10.612 10.612"/></g>
</symbol>
<symbol id="symbol-x" viewBox="0 0 32 32">
<g fill-rule="evenodd"><path d="M5.5 6.5l20 20M25 7L5 27" stroke-linecap="square"/></g>
</symbol></svg>
<div class="container--main">
<div class="message-banner">
<p>Here you can see detailed info about your guests.</p>
<button type="button" class="btn-light">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="blue">
<use xlink:href="#symbol-plus"></use>
</svg>
<span class="navbar_button-text" data-show-from="breakpoint-a">Add new guest</span>
</button>
</div><!-- message-banner -->
<div class="message-box--upgrade">
<span class="message-box_icon-container">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="white">
<use xlink:href="#symbol-lock"></use>
</svg>
</span>
<span class="message-box__message">
<a class="message-box__link" href="#">Upgrade plan</a>
to have unlimited access to all of your guests info and groups and whatever the fuck it takes to make this line longer.
</span>
</div>
<div class="section_header">
<h1>All Guests: 8</h1>
<button type="button" class="btn-secondary">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="white">
<use xlink:href="#symbol-import"></use>
</svg>
<span class="navbar_button-text" data-show-from="breakpoint-a">Import</span>
</button>
</div>
<div class="table">
<div class="table_header">
<span class="table_heading--guest">Guest name</span>
<span class="table_heading--contact">Contact info</span>
<span class="table_heading--newsletter">Newsletter</span>
<span class="table_heading--email">Email verified<span>
</div>
<div class="table_body">
<div class="table_row">
<div class="table_cell--guest">
John Nada
</div>
<div class="table_cell--contact">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-phone"></use>
</svg>
<span data-show-from="breakpoint-b">+66 666 666 666</span>
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-email"></use>
</svg>
<span data-show-from="breakpoint-b">johnnada@yahoo.es</span>
</div><!-- table_cell-contact -->
<div class="table_cell--newsletter">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-check"></use>
</svg>
</div>
<div class="table_cell--email">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-x"></use>
</svg>
</div>
</div><!-- table_row -->
<div class="table_row">
<div class="table_cell--guest">
Luis Maria de Ostolaza y Pudientes Progenitores
</div>
<div class="table_cell--contact">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-phone"></use>
</svg>
<span data-show-from="breakpoint-b">+34 123 678 902</span>
</div><!-- table_cell-contact -->
<div class="table_cell--newsletter">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-check"></use>
</svg>
</div>
<div class="table_cell--email">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-x"></use>
</svg>
</div>
</div><!-- table_row -->
<div class="table_row">
<div class="table_cell--guest">
Jack Burton
</div>
<div class="table_cell--contact">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-email"></use>
</svg>
<span data-show-from="breakpoint-b">jackburtonporkchopexpress@yahoo.es</span>
</div><!-- table_cell-contact -->
<div class="table_cell--newsletter">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-x"></use>
</svg>
</div>
<div class="table_cell--email">
<svg viewBox="0 0 100 100" class="icon" data-stroke-color="grey">
<use xlink:href="#symbol-x"></use>
</svg>
</div>
</div><!-- table_row -->
</div><!-- table_body -->
</div><!-- table -->
</div><!-- container-main -->
<!-- <script src="main.js"></script> -->
</body>
</html>