HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="dashboard-river">
<div class="dashboard-container">
<div class="dashboard">
<div class="ui-row-1">
<div class="logo-comp">
<div><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 297 297" xml:space="preserve">
<g>
<path d="M48.523,73.196h18.131c5.597,0,10.137-4.536,10.137-10.134c0-5.6-4.54-10.137-10.137-10.137H48.523 c-5.599,0-10.137,4.537-10.137,10.137C38.387,68.66,42.925,73.196,48.523,73.196z" />
<path d="M47.628,123.657c0-5.598-4.54-10.137-10.137-10.137H19.357c-5.599,0-10.135,4.539-10.135,10.137 c0,5.597,4.536,10.135,10.135,10.135h18.134C43.088,133.792,47.628,129.254,47.628,123.657z" />
<path d="M277.643,95.387h-18.135c-5.597,0-10.137,4.539-10.137,10.135c0,5.601,4.54,10.137,10.137,10.137h18.135 c5.599,0,10.135-4.536,10.135-10.137C287.777,99.926,283.241,95.387,277.643,95.387z" />
<path d="M140.148,203.69v83.173c0,5.598,4.54,10.137,10.137,10.137c5.599,0,10.137-4.539,10.137-10.137V203.69h93.406 c5.597,0,10.137-4.539,10.137-10.136c0-5.598-4.54-10.137-10.137-10.137H227.05c3.911-8.197,5.898-17.617,5.898-28.209 c0-29.299-21.058-60.583-39.637-88.187c-5.055-7.506-9.829-14.599-13.809-21.124c-1.689-3.791-1.094-19.677,1.284-34.106 c0.487-2.938-0.344-5.942-2.271-8.212c-1.926-2.27-4.752-3.58-7.73-3.58h-40.998c-2.977,0-5.803,1.313-7.729,3.58 c-1.924,2.268-2.755,5.271-2.273,8.21c2.383,14.432,2.978,30.316,1.288,34.107c-3.984,6.527-8.759,13.619-13.813,21.126 c-18.579,27.604-39.639,58.887-39.639,88.186c0,10.592,1.987,20.012,5.902,28.209H46.745c-5.601,0-10.137,4.539-10.137,10.137 c0,5.597,4.536,10.136,10.137,10.136H140.148z M202.707,183.418H97.864c-6.701-7.003-9.968-16.27-9.968-28.209 c0-23.111,19.222-51.669,36.182-76.865c5.209-7.738,10.13-15.05,14.363-21.993c4.769-7.819,4.27-23.774,2.954-36.077h17.781 c-1.316,12.302-1.813,28.257,2.952,36.077c4.233,6.943,9.153,14.252,14.362,21.992c16.96,25.197,36.184,53.755,36.184,76.866 C212.675,167.148,209.406,176.417,202.707,183.418z" />
</g>
</svg></div>
<p>CLAYMAKERS</p>
</div>
<div class="search">
<input type="search" id="search" name="search" placeholder="Search for clay...">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
<div class="profile">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-bell-fill" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
</svg>
<div></div>
</div>
<div class="profile-small">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
</svg>
</div>
</div>
<div class="ui-row-2">
<div class="left-sidebar">
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-bookmarks-fill" viewBox="0 0 16 16">
<path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4z" />
<path d="M4.268 1A2 2 0 0 1 6 0h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L13 13.768V2a1 1 0 0 0-1-1H4.268z" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
<path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
<path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z" />
<path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-tags-fill" viewBox="0 0 16 16">
<path d="M2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2zm3.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
<path d="M1.293 7.793A1 1 0 0 1 1 7.086V2a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l.043-.043-7.457-7.457z" />
</svg>
</div>
</div>
<div class="main-content">
<div class="header">
<div class="page-display">
<h1>Home</h1>
<h2>Explore Our Clay</h2>
</div>
<div class="clay-category">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M329.3 99.64l-39.7 10.46c-30.2 26.1-62.7 50.9-96.7 75.1l-6.7 21-34.1 7.3c-22.6 15.3-45.6 30.4-68.82 45.5l120.32 18.4 213.9-167.1c-27.7-3.8-56.9-7.5-88.2-10.66zm103.4 21.56l-61.4 47.9-43 53.1-45 15.7-65 50.7 20.8 115.1c65.6-54.6 127.6-109.4 187-163.1l-5.6-31.2 42.1-1.9c8.3-7.4 16.5-14.9 24.6-22.3zM61.58 277.6c-21.15 39.9-32.01 70.6-36.83 95.8 9.21 1.1 18.3 2.2 27.28 3.5l16.76-30.6 5.52 34c53.29 8.6 103.09 20.5 152.19 32.1l-26.9-117.6-66-10.1z" />
</svg>
<p>Earthenware</p>
</div>
<div class="clay-category">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 49.382 49.382" xml:space="preserve">
<g>
<path d="M48.654,12.775c-0.333-1.618-1.912-2.886-3.594-2.886h-7.082c-0.159-3.128-0.308-5.418-0.308-5.418
c-0.692-2.269-1.817-4.059-4.058-4.059H5.745c-2.242,0-3.35,1.767-4.059,4.059c0,0-0.656,11.177-0.589,17.397
c0.037,6.967,4.344,17.398,4.344,17.398c0.411,1.271,0.912,2.334,1.627,3.058H0.951c-0.957,0-1.239,0.6-0.629,1.337l3.28,3.972
c0.609,0.738,1.88,1.336,2.837,1.336h28.309c0.957,0,2.116-0.676,2.586-1.509l2.05-3.626c0.472-0.833,0.076-1.51-0.88-1.51h-5.943
c0.758-0.747,1.279-1.837,1.644-3.058c0,0,1.768-4.524,2.998-9.548l2.222,0.899c0.523,0.212,1.125,0.314,1.736,0.314
c0.966,0,1.956-0.257,2.705-0.744l2.294-1.494c1.156-0.753,2.238-2.286,2.517-3.566c0.345-1.588,0.746-3.975,0.701-6.329
C49.332,16.507,48.96,14.258,48.654,12.775z M45.744,24.491c-0.112,0.516-0.729,1.368-1.222,1.689l-2.294,1.494
c-0.396,0.257-1.241,0.341-1.679,0.162l-2.704-1.093c0.313-1.71,0.516-3.386,0.516-4.875c0-2.686-0.109-5.981-0.24-8.98h6.939
c0.28,0,0.612,0.281,0.655,0.49c0.28,1.359,0.621,3.413,0.661,5.477C46.417,20.92,46.055,23.059,45.744,24.491z" />
</g>
</svg>
<p>Stoneware</p>
</div>
<div class="clay-category">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 344.713 344.713" xml:space="preserve">
<g>
<path d="M190.028,70.017c0.06-0.669,0.095-1.345,0.095-2.029c0-12.498-10.133-22.631-22.631-22.631
c-12.498,0-22.631,10.133-22.631,22.631c0,0.684,0.036,1.36,0.095,2.029c-28.722,5.488-53.793,21.255-71.226,43.34h187.523
C243.821,91.272,218.748,75.505,190.028,70.017z" />
<path d="M332.677,135.951c-8.831-9.86-21.559-15.291-35.84-15.291c-5.602,0-11.367,0.84-17.137,2.498
c-10.46,3.005-19.25,6.371-26.63,10.198H64.187L7.977,91.708c-1.518-1.124-3.54-1.298-5.226-0.448C1.064,92.109,0,93.837,0,95.726
v32.652c0,1.111,0.37,2.191,1.052,3.068l47.147,60.669c1.97,49.349,33.893,90.99,78.086,107.242h82.414
c30.765-11.314,55.565-34.94,68.472-64.896c1.013,0.297,2.023,0.578,3.028,0.825c4.161,1.024,8.292,1.544,12.28,1.544
c31.204,0,48.524-30.373,51.847-60.473C346.062,160.627,341.926,146.277,332.677,135.951z M103.088,234.714
c-1.137,0.645-2.373,0.951-3.593,0.951c-2.54,0-5.008-1.329-6.351-3.695c-6.043-10.652-9.238-22.788-9.237-35.096
c0-4.028,3.266-7.294,7.294-7.294h0.001c4.028,0,7.293,3.266,7.293,7.295c0,9.789,2.537,19.436,7.337,27.896
C107.82,228.275,106.591,232.726,103.088,234.714z M139.897,259.392c-1.085,2.95-3.876,4.778-6.846,4.778
c-0.836,0-1.687-0.145-2.517-0.451c-6.085-2.238-11.844-5.306-17.115-9.119c-3.264-2.361-3.996-6.92-1.636-10.184
c2.361-3.264,6.921-3.997,10.185-1.636c4.191,3.031,8.768,5.47,13.602,7.249C139.351,251.42,141.289,255.611,139.897,259.392z
M314.506,173.064c-1.289,11.679-7.552,33.766-22.028,33.766c-1.573,0-3.291-0.227-5.107-0.674
c-0.628-0.155-1.264-0.334-1.901-0.524c0.924-5.986,1.413-12.116,1.413-18.361c0-11.623-1.674-22.853-4.773-33.476
c1.877-0.614,3.833-1.216,5.874-1.803c3.076-0.883,6.055-1.331,8.854-1.331c5.718,0,10.384,1.834,13.493,5.305
C313.862,159.91,315.307,165.822,314.506,173.064z" />
</g>
</svg>
<p>Porcelain</p>
</div>
</div>
<div class="large-banner">
<h2>Explore a World of Clay</h2>
<a href="javascript:void(0);" title="Explore">
Take a Look
</a>
</div>
<hr>
<div class="featured-clay">
<div>
<div></div>
<div>
<h3>Super Cool Clay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="featured clay">Let's Go</a>
</div>
</div>
<div>
<div></div>
<div>
<h3>Fun With Clay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="featured clay">Let's Go</a>
</div>
</div>
<div>
<div></div>
<div>
<h3>Type of Clay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="featured clay">Let's Go</a>
</div>
</div>
<div>
<div></div>
<div>
<h3>Clay Every Day</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="featured clay">Let's Go</a>
</div>
</div>
<div>
<div></div>
<div>
<h3>Special Clay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="featured clay">Let's Go</a>
</div>
</div>
<div>
<div></div>
<div>
<h3>Home Made Clay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="featured clay">Let's Go</a>
</div>
</div>
</div>
<hr>
<div class="featured-users">
<h2>Featured<br><span>Claymakers</span></h2>
<div>
<div>
<div></div>
<div>
<h3>Michael Campbell</h3>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
</svg>
</div>
</div>
</div>
<div>
<div>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M329.3 99.64l-39.7 10.46c-30.2 26.1-62.7 50.9-96.7 75.1l-6.7 21-34.1 7.3c-22.6 15.3-45.6 30.4-68.82 45.5l120.32 18.4 213.9-167.1c-27.7-3.8-56.9-7.5-88.2-10.66zm103.4 21.56l-61.4 47.9-43 53.1-45 15.7-65 50.7 20.8 115.1c65.6-54.6 127.6-109.4 187-163.1l-5.6-31.2 42.1-1.9c8.3-7.4 16.5-14.9 24.6-22.3zM61.58 277.6c-21.15 39.9-32.01 70.6-36.83 95.8 9.21 1.1 18.3 2.2 27.28 3.5l16.76-30.6 5.52 34c53.29 8.6 103.09 20.5 152.19 32.1l-26.9-117.6-66-10.1z" />
</svg>
</div>
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 49.382 49.382" xml:space="preserve">
<g>
<path d="M48.654,12.775c-0.333-1.618-1.912-2.886-3.594-2.886h-7.082c-0.159-3.128-0.308-5.418-0.308-5.418
c-0.692-2.269-1.817-4.059-4.058-4.059H5.745c-2.242,0-3.35,1.767-4.059,4.059c0,0-0.656,11.177-0.589,17.397
c0.037,6.967,4.344,17.398,4.344,17.398c0.411,1.271,0.912,2.334,1.627,3.058H0.951c-0.957,0-1.239,0.6-0.629,1.337l3.28,3.972
c0.609,0.738,1.88,1.336,2.837,1.336h28.309c0.957,0,2.116-0.676,2.586-1.509l2.05-3.626c0.472-0.833,0.076-1.51-0.88-1.51h-5.943
c0.758-0.747,1.279-1.837,1.644-3.058c0,0,1.768-4.524,2.998-9.548l2.222,0.899c0.523,0.212,1.125,0.314,1.736,0.314
c0.966,0,1.956-0.257,2.705-0.744l2.294-1.494c1.156-0.753,2.238-2.286,2.517-3.566c0.345-1.588,0.746-3.975,0.701-6.329
C49.332,16.507,48.96,14.258,48.654,12.775z M45.744,24.491c-0.112,0.516-0.729,1.368-1.222,1.689l-2.294,1.494
c-0.396,0.257-1.241,0.341-1.679,0.162l-2.704-1.093c0.313-1.71,0.516-3.386,0.516-4.875c0-2.686-0.109-5.981-0.24-8.98h6.939
c0.28,0,0.612,0.281,0.655,0.49c0.28,1.359,0.621,3.413,0.661,5.477C46.417,20.92,46.055,23.059,45.744,24.491z" />
</g>
</svg>
</div>
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 344.713 344.713" xml:space="preserve">
<g>
<path d="M190.028,70.017c0.06-0.669,0.095-1.345,0.095-2.029c0-12.498-10.133-22.631-22.631-22.631
c-12.498,0-22.631,10.133-22.631,22.631c0,0.684,0.036,1.36,0.095,2.029c-28.722,5.488-53.793,21.255-71.226,43.34h187.523
C243.821,91.272,218.748,75.505,190.028,70.017z" />
<path d="M332.677,135.951c-8.831-9.86-21.559-15.291-35.84-15.291c-5.602,0-11.367,0.84-17.137,2.498
c-10.46,3.005-19.25,6.371-26.63,10.198H64.187L7.977,91.708c-1.518-1.124-3.54-1.298-5.226-0.448C1.064,92.109,0,93.837,0,95.726
v32.652c0,1.111,0.37,2.191,1.052,3.068l47.147,60.669c1.97,49.349,33.893,90.99,78.086,107.242h82.414
c30.765-11.314,55.565-34.94,68.472-64.896c1.013,0.297,2.023,0.578,3.028,0.825c4.161,1.024,8.292,1.544,12.28,1.544
c31.204,0,48.524-30.373,51.847-60.473C346.062,160.627,341.926,146.277,332.677,135.951z M103.088,234.714
c-1.137,0.645-2.373,0.951-3.593,0.951c-2.54,0-5.008-1.329-6.351-3.695c-6.043-10.652-9.238-22.788-9.237-35.096
c0-4.028,3.266-7.294,7.294-7.294h0.001c4.028,0,7.293,3.266,7.293,7.295c0,9.789,2.537,19.436,7.337,27.896
C107.82,228.275,106.591,232.726,103.088,234.714z M139.897,259.392c-1.085,2.95-3.876,4.778-6.846,4.778
c-0.836,0-1.687-0.145-2.517-0.451c-6.085-2.238-11.844-5.306-17.115-9.119c-3.264-2.361-3.996-6.92-1.636-10.184
c2.361-3.264,6.921-3.997,10.185-1.636c4.191,3.031,8.768,5.47,13.602,7.249C139.351,251.42,141.289,255.611,139.897,259.392z
M314.506,173.064c-1.289,11.679-7.552,33.766-22.028,33.766c-1.573,0-3.291-0.227-5.107-0.674
c-0.628-0.155-1.264-0.334-1.901-0.524c0.924-5.986,1.413-12.116,1.413-18.361c0-11.623-1.674-22.853-4.773-33.476
c1.877-0.614,3.833-1.216,5.874-1.803c3.076-0.883,6.055-1.331,8.854-1.331c5.718,0,10.384,1.834,13.493,5.305
C313.862,159.91,315.307,165.822,314.506,173.064z" />
</g>
</svg>
</div>
</div>
</div>
<div>
<div>
<div></div>
<div>
<h3>George Lee</h3>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
</svg>
</div>
</div>
</div>
<div>
<div>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M329.3 99.64l-39.7 10.46c-30.2 26.1-62.7 50.9-96.7 75.1l-6.7 21-34.1 7.3c-22.6 15.3-45.6 30.4-68.82 45.5l120.32 18.4 213.9-167.1c-27.7-3.8-56.9-7.5-88.2-10.66zm103.4 21.56l-61.4 47.9-43 53.1-45 15.7-65 50.7 20.8 115.1c65.6-54.6 127.6-109.4 187-163.1l-5.6-31.2 42.1-1.9c8.3-7.4 16.5-14.9 24.6-22.3zM61.58 277.6c-21.15 39.9-32.01 70.6-36.83 95.8 9.21 1.1 18.3 2.2 27.28 3.5l16.76-30.6 5.52 34c53.29 8.6 103.09 20.5 152.19 32.1l-26.9-117.6-66-10.1z" />
</svg>
</div>
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 49.382 49.382" xml:space="preserve">
<g>
<path d="M48.654,12.775c-0.333-1.618-1.912-2.886-3.594-2.886h-7.082c-0.159-3.128-0.308-5.418-0.308-5.418
c-0.692-2.269-1.817-4.059-4.058-4.059H5.745c-2.242,0-3.35,1.767-4.059,4.059c0,0-0.656,11.177-0.589,17.397
c0.037,6.967,4.344,17.398,4.344,17.398c0.411,1.271,0.912,2.334,1.627,3.058H0.951c-0.957,0-1.239,0.6-0.629,1.337l3.28,3.972
c0.609,0.738,1.88,1.336,2.837,1.336h28.309c0.957,0,2.116-0.676,2.586-1.509l2.05-3.626c0.472-0.833,0.076-1.51-0.88-1.51h-5.943
c0.758-0.747,1.279-1.837,1.644-3.058c0,0,1.768-4.524,2.998-9.548l2.222,0.899c0.523,0.212,1.125,0.314,1.736,0.314
c0.966,0,1.956-0.257,2.705-0.744l2.294-1.494c1.156-0.753,2.238-2.286,2.517-3.566c0.345-1.588,0.746-3.975,0.701-6.329
C49.332,16.507,48.96,14.258,48.654,12.775z M45.744,24.491c-0.112,0.516-0.729,1.368-1.222,1.689l-2.294,1.494
c-0.396,0.257-1.241,0.341-1.679,0.162l-2.704-1.093c0.313-1.71,0.516-3.386,0.516-4.875c0-2.686-0.109-5.981-0.24-8.98h6.939
c0.28,0,0.612,0.281,0.655,0.49c0.28,1.359,0.621,3.413,0.661,5.477C46.417,20.92,46.055,23.059,45.744,24.491z" />
</g>
</svg>
</div>
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 344.713 344.713" xml:space="preserve">
<g>
<path d="M190.028,70.017c0.06-0.669,0.095-1.345,0.095-2.029c0-12.498-10.133-22.631-22.631-22.631
c-12.498,0-22.631,10.133-22.631,22.631c0,0.684,0.036,1.36,0.095,2.029c-28.722,5.488-53.793,21.255-71.226,43.34h187.523
C243.821,91.272,218.748,75.505,190.028,70.017z" />
<path d="M332.677,135.951c-8.831-9.86-21.559-15.291-35.84-15.291c-5.602,0-11.367,0.84-17.137,2.498
c-10.46,3.005-19.25,6.371-26.63,10.198H64.187L7.977,91.708c-1.518-1.124-3.54-1.298-5.226-0.448C1.064,92.109,0,93.837,0,95.726
v32.652c0,1.111,0.37,2.191,1.052,3.068l47.147,60.669c1.97,49.349,33.893,90.99,78.086,107.242h82.414
c30.765-11.314,55.565-34.94,68.472-64.896c1.013,0.297,2.023,0.578,3.028,0.825c4.161,1.024,8.292,1.544,12.28,1.544
c31.204,0,48.524-30.373,51.847-60.473C346.062,160.627,341.926,146.277,332.677,135.951z M103.088,234.714
c-1.137,0.645-2.373,0.951-3.593,0.951c-2.54,0-5.008-1.329-6.351-3.695c-6.043-10.652-9.238-22.788-9.237-35.096
c0-4.028,3.266-7.294,7.294-7.294h0.001c4.028,0,7.293,3.266,7.293,7.295c0,9.789,2.537,19.436,7.337,27.896
C107.82,228.275,106.591,232.726,103.088,234.714z M139.897,259.392c-1.085,2.95-3.876,4.778-6.846,4.778
c-0.836,0-1.687-0.145-2.517-0.451c-6.085-2.238-11.844-5.306-17.115-9.119c-3.264-2.361-3.996-6.92-1.636-10.184
c2.361-3.264,6.921-3.997,10.185-1.636c4.191,3.031,8.768,5.47,13.602,7.249C139.351,251.42,141.289,255.611,139.897,259.392z
M314.506,173.064c-1.289,11.679-7.552,33.766-22.028,33.766c-1.573,0-3.291-0.227-5.107-0.674
c-0.628-0.155-1.264-0.334-1.901-0.524c0.924-5.986,1.413-12.116,1.413-18.361c0-11.623-1.674-22.853-4.773-33.476
c1.877-0.614,3.833-1.216,5.874-1.803c3.076-0.883,6.055-1.331,8.854-1.331c5.718,0,10.384,1.834,13.493,5.305
C313.862,159.91,315.307,165.822,314.506,173.064z" />
</g>
</svg>
</div>
</div>
</div>
<div>
<div>
<div></div>
<div>
<h3>Sandra Walker</h3>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
</svg>
</div>
</div>
</div>
<div>
<div>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M329.3 99.64l-39.7 10.46c-30.2 26.1-62.7 50.9-96.7 75.1l-6.7 21-34.1 7.3c-22.6 15.3-45.6 30.4-68.82 45.5l120.32 18.4 213.9-167.1c-27.7-3.8-56.9-7.5-88.2-10.66zm103.4 21.56l-61.4 47.9-43 53.1-45 15.7-65 50.7 20.8 115.1c65.6-54.6 127.6-109.4 187-163.1l-5.6-31.2 42.1-1.9c8.3-7.4 16.5-14.9 24.6-22.3zM61.58 277.6c-21.15 39.9-32.01 70.6-36.83 95.8 9.21 1.1 18.3 2.2 27.28 3.5l16.76-30.6 5.52 34c53.29 8.6 103.09 20.5 152.19 32.1l-26.9-117.6-66-10.1z" />
</svg>
</div>
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 49.382 49.382" xml:space="preserve">
<g>
<path d="M48.654,12.775c-0.333-1.618-1.912-2.886-3.594-2.886h-7.082c-0.159-3.128-0.308-5.418-0.308-5.418
c-0.692-2.269-1.817-4.059-4.058-4.059H5.745c-2.242,0-3.35,1.767-4.059,4.059c0,0-0.656,11.177-0.589,17.397
c0.037,6.967,4.344,17.398,4.344,17.398c0.411,1.271,0.912,2.334,1.627,3.058H0.951c-0.957,0-1.239,0.6-0.629,1.337l3.28,3.972
c0.609,0.738,1.88,1.336,2.837,1.336h28.309c0.957,0,2.116-0.676,2.586-1.509l2.05-3.626c0.472-0.833,0.076-1.51-0.88-1.51h-5.943
c0.758-0.747,1.279-1.837,1.644-3.058c0,0,1.768-4.524,2.998-9.548l2.222,0.899c0.523,0.212,1.125,0.314,1.736,0.314
c0.966,0,1.956-0.257,2.705-0.744l2.294-1.494c1.156-0.753,2.238-2.286,2.517-3.566c0.345-1.588,0.746-3.975,0.701-6.329
C49.332,16.507,48.96,14.258,48.654,12.775z M45.744,24.491c-0.112,0.516-0.729,1.368-1.222,1.689l-2.294,1.494
c-0.396,0.257-1.241,0.341-1.679,0.162l-2.704-1.093c0.313-1.71,0.516-3.386,0.516-4.875c0-2.686-0.109-5.981-0.24-8.98h6.939
c0.28,0,0.612,0.281,0.655,0.49c0.28,1.359,0.621,3.413,0.661,5.477C46.417,20.92,46.055,23.059,45.744,24.491z" />
</g>
</svg>
</div>
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 344.713 344.713" xml:space="preserve">
<g>
<path d="M190.028,70.017c0.06-0.669,0.095-1.345,0.095-2.029c0-12.498-10.133-22.631-22.631-22.631
c-12.498,0-22.631,10.133-22.631,22.631c0,0.684,0.036,1.36,0.095,2.029c-28.722,5.488-53.793,21.255-71.226,43.34h187.523
C243.821,91.272,218.748,75.505,190.028,70.017z" />
<path d="M332.677,135.951c-8.831-9.86-21.559-15.291-35.84-15.291c-5.602,0-11.367,0.84-17.137,2.498
c-10.46,3.005-19.25,6.371-26.63,10.198H64.187L7.977,91.708c-1.518-1.124-3.54-1.298-5.226-0.448C1.064,92.109,0,93.837,0,95.726
v32.652c0,1.111,0.37,2.191,1.052,3.068l47.147,60.669c1.97,49.349,33.893,90.99,78.086,107.242h82.414
c30.765-11.314,55.565-34.94,68.472-64.896c1.013,0.297,2.023,0.578,3.028,0.825c4.161,1.024,8.292,1.544,12.28,1.544
c31.204,0,48.524-30.373,51.847-60.473C346.062,160.627,341.926,146.277,332.677,135.951z M103.088,234.714
c-1.137,0.645-2.373,0.951-3.593,0.951c-2.54,0-5.008-1.329-6.351-3.695c-6.043-10.652-9.238-22.788-9.237-35.096
c0-4.028,3.266-7.294,7.294-7.294h0.001c4.028,0,7.293,3.266,7.293,7.295c0,9.789,2.537,19.436,7.337,27.896
C107.82,228.275,106.591,232.726,103.088,234.714z M139.897,259.392c-1.085,2.95-3.876,4.778-6.846,4.778
c-0.836,0-1.687-0.145-2.517-0.451c-6.085-2.238-11.844-5.306-17.115-9.119c-3.264-2.361-3.996-6.92-1.636-10.184
c2.361-3.264,6.921-3.997,10.185-1.636c4.191,3.031,8.768,5.47,13.602,7.249C139.351,251.42,141.289,255.611,139.897,259.392z
M314.506,173.064c-1.289,11.679-7.552,33.766-22.028,33.766c-1.573,0-3.291-0.227-5.107-0.674
c-0.628-0.155-1.264-0.334-1.901-0.524c0.924-5.986,1.413-12.116,1.413-18.361c0-11.623-1.674-22.853-4.773-33.476
c1.877-0.614,3.833-1.216,5.874-1.803c3.076-0.883,6.055-1.331,8.854-1.331c5.718,0,10.384,1.834,13.493,5.305
C313.862,159.91,315.307,165.822,314.506,173.064z" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
a,
a:hover,
a::before,
a::after,
a:hover::before,
a:hover::after {
transition: all 0.4s ease-in-out;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background: MediumSpringGreen;
}
::-webkit-scrollbar-thumb {
background: MediumSeaGreen;
}
::-webkit-scrollbar-thumb:hover {
background: SeaGreen;
}
body,
html {
font-family: "Poppins", sans-serif;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 12pt;
font-weight: 400;
color: black;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background: MediumSpringGreen;
margin: 0;
padding: 0;
}
.dashboard-river {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.dashboard-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 95%;
height: 90%;
background: white;
box-shadow: 0 20px 40px 0 SeaGreen, inset 0px -10px 17px 1px MediumSeaGreen;
overflow: hidden;
border-radius: 25px;
z-index: 998;
}
.dashboard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.ui-row-1 {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: auto;
padding: 35px 30px 25px 30px;
}
.logo-comp {
position: relative;
left: 12px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: auto;
height: auto;
transition: all 0.4s ease-in-out;
}
.logo-comp:hover {
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.logo-comp > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 100px;
background: MediumSpringGreen;
box-shadow: 0 5px 15px 0 SeaGreen, inset 0px -6px 12px 0px SeaGreen;
transition: all 0.4s ease-in-out;
}
.logo-comp > div > svg {
fill: white;
width: 70%;
height: 70%;
filter: drop-shadow(1px 1px 0px SeaGreen);
transition: all 0.4s ease-in-out;
}
.logo-comp p {
letter-spacing: 3px;
font-size: 16pt;
margin: 0;
margin-left: 12px;
padding: 0;
color: SeaGreen;
transition: all 0.4s ease-in-out;
}
.logo-comp:hover > p {
color: black;
transition: all 0.4s ease-in-out;
}
.logo-comp:hover > div > svg {
fill: black;
filter: unset;
transition: all 0.4s ease-in-out;
}
.search {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 50%;
height: auto;
}
.search input {
width: 100%;
height: 50px;
border-radius: 12px;
box-shadow: 0 10px 20px 0 #3cb37177, inset 0px -4px 8px 0 SeaGreen;
border: none !important;
padding: 0px 20px 5px 20px;
}
.search > svg {
position: absolute;
right: 20px;
bottom: 38%;
width: 18px;
height: auto;
fill: SeaGreen;
}
.search input:focus {
outline: 1px solid MediumSpringGreen;
}
.profile {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: auto;
height: auto;
}
.profile > svg {
fill: dimgray;
width: 25px;
height: auto;
margin-right: 20px;
}
.profile > svg:nth-child(3) {
margin-left: 5px;
order: 4;
fill: dimgray;
margin-right: unset;
}
.profile > svg:hover,
.profile-small > svg:hover {
cursor: pointer;
fill: MediumSpringGreen;
}
.profile > svg:active,
.profile-small > svg:active {
transform: scale(0.92);
}
.profile > div {
width: 50px;
height: 50px;
border-radius: 200px;
background: url("https://picsum.photos/id/440/60/60");
background-position: center;
background-size: cover;
}
.profile-small {
display: none;
}
.ui-row-2 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: auto;
padding: 10px 30px;
}
.left-sidebar {
position: sticky;
top: 20px;
display: flex;
align-self: flex-start;
flex-direction: column;
align-items: center;
justify-content: center;
width: auto;
height: auto;
background: #eee;
padding: 15px 10px;
border-radius: 10px;
margin-bottom: 30px;
}
.left-sidebar > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: MediumSpringGreen;
border-radius: 10px;
margin-bottom: 25px;
box-shadow: 0 7px 14px 0 #3cb37199, inset 0px -5px 7px 0px MediumSeaGreen;
}
.left-sidebar > div:last-of-type {
margin-bottom: unset;
}
.left-sidebar > div:hover {
cursor: pointer;
transform: translateY(-3px);
box-shadow: 0 10px 16px 0 #3cb371dd, inset 0px -5px 9px 0px MediumSeaGreen;
border: 1px solid MediumSpringGreen;
}
.left-sidebar > div > svg {
fill: SeaGreen;
width: 25px;
height: auto;
}
.left-sidebar > div:active {
transform: scale(0.92);
}
.left-sidebar > div:hover > svg {
fill: black;
}
.main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
margin-left: 30px;
}
.header {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
width: 100%;
height: auto;
}
.page-display {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: auto;
height: auto;
}
.page-display h1 {
position: relative;
font-size: 30pt;
color: black;
font-weight: 800;
padding: 0;
margin: 0;
line-height: 30pt;
}
.page-display h1::after {
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 15px;
background: SpringGreen;
content: "";
z-index: -1;
}
.page-display h2 {
font-size: 16pt;
color: dimgray;
font-weight: 600;
padding: 0;
margin: 0;
}
.page-display:hover,
.page-display h1:hover,
.page-display h2:hover {
cursor: default;
}
.clay-category {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 27%;
height: 100%;
background: MediumSpringGreen;
box-shadow: 0 10px 20px 0 #3cb37177, inset 0px -7px 12px 1px MediumSeaGreen;
border-radius: 20px;
transition: all 0.4s ease-in-out;
}
.clay-category svg {
fill: SeaGreen;
width: 30px;
height: auto;
margin-right: 10px;
transition: all 0.4s ease-in-out;
}
.clay-category:nth-child(2) > svg {
width: 37px;
}
.clay-category:nth-child(3) > svg {
width: 24px;
}
.clay-category p {
color: dimgray;
font-size: 15pt;
letter-spacing: 1px;
transition: all 0.4s ease-in-out;
}
.clay-category:hover {
cursor: pointer;
transform: translateX(-15px);
background: SeaGreen !important;
transition: all 0.4s ease-in-out;
}
.clay-category:active {
transform: scale(0.92);
}
.clay-category:hover > svg {
fill: MediumSpringGreen;
transition: all 0.4s ease-in-out;
}
.clay-category:hover > p {
color: white;
text-decoration: 2px dotted underline MediumSpringGreen;
transition: all 0.4s ease-in-out;
}
.large-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 200px;
background: url("https://picsum.photos/id/622/1920/1080");
background-size: 100%;
background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;
border-radius: 20px;
margin-top: 30px;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px;
z-index: 1;
transition: all 0.5s ease-in-out;
}
.large-banner:hover {
background-size: 120%;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.large-banner h2 {
color: white;
font-size: 30pt;
margin: 0;
padding: 0;
line-height: 30pt;
margin-bottom: 10px;
text-shadow: 1px 1px 0px SeaGreen, 2px 2px 0px SeaGreen;
}
.large-banner a {
position: relative;
background: white;
font-size: 12pt;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 10px 20px;
color: dimgray;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 20px 0 #000000bb, inset 0px -5px 10px 1px SeaGreen;
}
.large-banner a::after {
position: absolute;
top: 110%;
left: 0;
width: 100%;
height: 100%;
content: "";
background: MediumSpringGreen;
border-radius: 12px;
box-shadow: 0 10px 20px 0 #000000bb, inset 0px -5px 10px 1px SeaGreen;
opacity: 0;
z-index: -1;
}
.large-banner a:hover {
transform: translateY(5px);
color: black;
}
.large-banner a:hover::after {
top: 0;
opacity: 1;
}
.large-banner a:active {
transform: scale(0.92);
}
.large-banner::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, SpringGreen, SeaGreen);
content: "";
border-radius: 20px;
mix-blend-mode: soft-light;
z-index: -1;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset;
transition: all 0.5s ease-in-out;
}
.large-banner::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00ff7f;
background-image: url("https://www.transparenttextures.com/patterns/buried.png");
content: "";
border-radius: 20px;
mix-blend-mode: soft-light;
z-index: -2;
transition: all 0.5s ease-in-out;
}
.main-content > hr {
width: 99%;
height: 1px;
margin-top: 35px;
border: 0;
border-top: 1px solid #ccc;
}
.main-content > hr:last-of-type {
margin-top: 0px;
margin-bottom: 35px;
}
.featured-clay {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
height: auto;
margin-bottom: 35px;
z-index: 2;
}
.featured-clay > div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 32%;
height: auto;
background: PaleGreen;
padding: 30px 20px;
margin-top: 25px;
border-radius: 20px;
box-shadow: 0 10px 20px 0 #3cb37177, inset 0px -7px 12px 1px MediumSeaGreen;
transition: all 0.4s ease-in-out;
}
.featured-clay > div:nth-child(2) {
filter: hue-rotate(15deg);
}
.featured-clay > div:nth-child(3) {
filter: hue-rotate(30deg);
}
.featured-clay > div:nth-child(4) {
filter: hue-rotate(45deg);
}
.featured-clay > div:nth-child(5) {
filter: hue-rotate(60deg);
}
.featured-clay > div:nth-child(6) {
filter: hue-rotate(75deg);
}
.featured-clay > div > div:nth-child(1) {
all: unset;
width: 40%;
height: 250px;
background: url("https://picsum.photos/id/400/600/600");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 12px;
}
.featured-clay > div:nth-child(2) > div:nth-child(1) {
background: url("https://picsum.photos/id/402/600/600");
}
.featured-clay > div:nth-child(3) > div:nth-child(1) {
background: url("https://picsum.photos/id/443/600/600");
}
.featured-clay > div:nth-child(4) > div:nth-child(1) {
background: url("https://picsum.photos/id/404/600/600");
}
.featured-clay > div:nth-child(5) > div:nth-child(1) {
background: url("https://picsum.photos/id/405/600/600");
}
.featured-clay > div:nth-child(6) > div:nth-child(1) {
background: url("https://picsum.photos/id/408/600/600");
}
.featured-clay > div:hover {
animation: glow 10s linear infinite;
box-shadow: 0 17px 45px 0 #3cb371, inset 0px -7px 12px 1px MediumSeaGreen;
cursor: pointer;
transform: translateY(-10px);
transition: all 0.4s ease-in-out;
}
.featured-clay > div:active {
transform: scale(0.96);
}
.featured-clay > div:nth-child(2):hover {
animation: glow15 8s linear infinite;
}
.featured-clay > div:nth-child(3):hover {
animation: glow30 8s linear infinite;
}
.featured-clay > div:nth-child(4):hover {
animation: glow45 8s linear infinite;
}
.featured-clay > div:nth-child(5):hover {
animation: glow60 8s linear infinite;
}
.featured-clay > div:nth-child(6):hover {
animation: glow75 8s linear infinite;
}
@keyframes glow {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@keyframes glow15 {
0% {
filter: hue-rotate(15deg);
}
100% {
filter: hue-rotate(375deg);
}
}
@keyframes glow30 {
0% {
filter: hue-rotate(30deg);
}
100% {
filter: hue-rotate(390deg);
}
}
@keyframes glow45 {
0% {
filter: hue-rotate(45deg);
}
100% {
filter: hue-rotate(405deg);
}
}
@keyframes glow60 {
0% {
filter: hue-rotate(60deg);
}
100% {
filter: hue-rotate(420deg);
}
}
@keyframes glow75 {
0% {
filter: hue-rotate(75deg);
}
100% {
filter: hue-rotate(435deg);
}
}
.featured-clay > div > div:nth-child(2) {
all: unset;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 50%;
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid SeaGreen;
}
.featured-clay > div > div:nth-child(2) > h3,
.featured-clay > div > div:nth-child(2) > p,
.featured-clay > div > div:nth-child(2) > a {
margin: 0;
padding: 0;
line-height: 12pt;
}
.featured-clay > div > div:nth-child(2) > h3 {
font-size: 18pt;
color: SeaGreen;
line-height: 26pt;
position: relative;
width: auto;
height: auto;
}
.featured-clay > div > div:nth-child(2) > h3::after {
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 15px;
background: white;
content: "";
border-bottom: 2px dotted SpringGreen;
z-index: -1;
}
.featured-clay > div > div:nth-child(2) > p {
font-size: 12pt;
color: black;
line-height: 16pt;
padding: 10px 0px;
}
.featured-clay > div > div:nth-child(2) > a {
background: SeaGreen;
color: white;
margin-top: 10px;
width: 100px;
height: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 7px;
}
.featured-clay > div > div:nth-child(2) > a:hover {
width: 120px;
height: 40px;
}
.featured-clay > div > div:nth-child(2) > a:active {
border: 1px solid DarkSeaGreen;
}
.featured-users {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: auto;
margin-bottom: 35px;
}
.featured-users > h2 {
color: dimgray;
font-weight: 600;
font-size: 24pt;
line-height: 20pt;
}
.featured-users > h2 > span {
font-weight: 900;
font-size: 20pt;
}
.featured-users > div {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 30%;
height: auto;
margin: 0px 20px;
border-left: 3px solid MediumSpringGreen;
padding-left: 30px;
left: 10px;
}
.featured-users::after {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 300px;
border-radius: 300px;
background: MediumSpringGreen;
content: "";
z-index: -1;
}
.featured-users > div > div:nth-child(1) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
height: auto;
}
.featured-users > div > div:nth-child(1) > div:nth-child(1) {
width: 70px;
height: 70px;
border-radius: 10px;
background: url("https://picsum.photos/id/715/80/80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid MediumSpringGreen;
}
.featured-users > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
background: url("https://picsum.photos/id/910/80/80");
}
.featured-users > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
background: url("https://picsum.photos/id/441/80/80");
}
.featured-users > div > div:nth-child(1) > div:nth-child(2) {
width: auto;
height: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-left: 15px;
}
.featured-users > div > div:nth-child(1) > div:nth-child(2) > h3 {
font-size: 16pt;
margin: 0;
padding: 0;
line-height: 30pt;
white-space: nowrap;
transition: all 0.4s ease-in-out;
}
.featured-users > div > div:nth-child(1) > div:nth-child(2) > h3:hover {
transform: translateX(8px);
color: SeaGreen;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.featured-users > div > div:nth-child(1) > div:nth-child(2) > div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
height: auto;
}
.featured-users > div > div:nth-child(1) > div:nth-child(2) > div > svg {
width: 20px;
height: auto;
margin-right: 10px;
fill: dimgray;
}
.featured-users > div > div:nth-child(1) > div:nth-child(2) > div > svg:hover {
transform: translateY(-3px);
cursor: pointer;
}
.featured-users > div > div:nth-child(1) > div:nth-child(2) > div > svg:active {
transform: scale(0.92);
}
.featured-users > div > div:nth-child(2) {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
height: auto;
margin-top: 15px;
}
.featured-users > div > div:nth-child(2)::after {
position: absolute;
right: 30%;
background: SeaGreen;
color: white;
content: "CATEGORIES";
width: 100px;
height: 30px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 10pt;
}
.clay-category:nth-child(2) {
background: SpringGreen;
order: 1;
}
.clay-category:nth-child(3) {
background: PaleGreen;
order: 3;
}
.featured-users > div > div:nth-child(2) > div {
background: dimgray;
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 6px 15px 0 #3cb371aa, inset 0px -7px 12px 1px black;
margin-right: 10px;
}
.featured-users > div > div:nth-child(2) > div:hover {
cursor: pointer;
transform: translateY(-3px);
box-shadow: 0 10px 16px 0 #3cb371dd, inset 0px -5px 9px 0px MediumSeaGreen;
border: 1px solid MediumSpringGreen;
}
.featured-users > div > div:nth-child(2) > div:active {
transform: scale(0.92);
}
.featured-users > div > div:nth-child(2) > div > svg {
fill: white;
width: 70%;
height: auto;
}
.featured-users > div > div:nth-child(2) > div:nth-child(2) > svg {
width: 40%;
height: auto;
}
.featured-users > div > div:nth-child(2) > div:nth-child(3) > svg {
width: 55%;
height: auto;
}
@media (max-width: 1870px) {
.featured-users > div > div:nth-child(2)::after {
right: 20%;
}
}
@media (max-width: 1720px) {
.featured-users > div > div:nth-child(2)::after {
right: 10%;
}
.featured-clay > div {
padding: 40px 20px;
}
.featured-clay > div > div:nth-child(2) > h3 {
line-height: 20pt;
}
}
@media (max-width: 1590px) {
.featured-users > div > div:nth-child(2)::after {
right: 0;
}
}
@media (max-width: 1500px) {
.clay-category {
width: 24%;
}
.featured-users > div:nth-child(3) > div:nth-child(2)::after,
.featured-users > div:nth-child(4) > div:nth-child(2)::after {
display: none;
}
}
@media (max-width: 1363px) {
.ui-row-2 {
flex-direction: column;
}
.main-content {
margin-left: 0 !important;
}
.left-sidebar {
width: 100%;
z-index: 999;
flex-direction: row;
border-radius: 0px 0px 20px 20px;
justify-content: space-evenly;
top: 0px;
padding: 20px 0px;
box-shadow: 0 10px 20px 0 #2e8b57aa, inset 0px -7px 9px 0px SeaGreen;
border: 1px solid MediumSpringGreen;
}
.left-sidebar > div,
.left-sidebar > div:last-of-type {
margin-bottom: 8px;
}
}
@media (max-width: 1250px) {
.featured-users {
flex-wrap: wrap;
}
.featured-users::after {
display: none;
}
.featured-users > div::after {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 300px;
border-radius: 300px;
background: MediumSpringGreen;
content: "";
z-index: -1;
}
.featured-users h2 {
width: 100%;
text-align: center;
margin-top: 0;
margin-bottom: 35px;
letter-spacing: 2px;
font-weight: 400;
}
.featured-users > h2 > br {
display: none;
}
.featured-users > h2 > span {
all: unset;
font-weight: 600;
margin-left: 8px;
}
.featured-users > div {
margin: unset;
}
}
@media (max-width: 1200px) {
.featured-users > div {
width: 33%;
padding-left: 15px;
}
.featured-users > div > div:nth-child(2)::after {
right: 3%;
}
}
@media (max-width: 1100px) {
.clay-category p {
font-size: 12pt;
}
.featured-clay > div {
width: 49%;
}
.featured-users > div {
width: 90%;
margin-bottom: 40px;
}
.featured-users > div:nth-child(4) {
margin-bottom: unset;
}
.featured-users > div > div:nth-child(2)::after {
left: 25%;
}
.featured-users > div:nth-child(3) > div:nth-child(2)::after,
.featured-users > div:nth-child(4) > div:nth-child(2)::after {
display: flex;
}
.featured-users {
overflow: hidden;
padding-bottom: 30px;
border-radius: 0 0 20px 20px;
}
.featured-users > div::after {
display: none;
}
.featured-users::after {
display: initial;
bottom: -40%;
right: -20%;
width: 750px;
height: 750px;
border-radius: 750px;
}
}
@media (max-width: 992px) {
::-webkit-scrollbar {
display: none;
}
.dashboard-container {
height: 95%;
}
.ui-row-2 {
padding-top: 0px;
}
.header {
flex-direction: column;
align-items: center;
justify-content: center;
}
.page-display {
align-items: center;
justify-content: center;
margin-top: 5px;
margin-bottom: 30px;
}
.page-display h1,
.page-display h2 {
text-align: center;
}
.clay-category {
width: 100%;
margin-bottom: 30px;
}
.clay-category:nth-child(3) {
margin-bottom: 10px;
}
.clay-category p {
font-size: 16pt;
}
.profile {
display: none;
}
.profile-small {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: auto;
height: auto;
}
.profile-small svg {
width: 30px;
margin-right: 30px;
height: auto;
fill: dimgray;
}
.search {
display: none;
}
}
@media (max-width: 970px) {
.featured-users > div > div:nth-child(2)::after {
left: 32%;
}
}
@media (max-width: 800px) {
.featured-users > div > div:nth-child(2)::after {
left: 40%;
}
}
@media (max-width: 760px) {
.featured-clay {
justify-content: center;
}
.featured-clay > div {
width: 90%;
}
}
@media (max-width: 700px) {
.large-banner h2 {
text-align: center;
padding: 0 10px;
font-size: 24pt;
}
.large-banner {
background-size: cover;
}
.large-banner:hover {
background-size: cover;
}
}
@media (max-width: 660px) {
.featured-users > div > div:nth-child(2)::after {
left: unset;
right: 5%;
}
}
@media (max-width: 500px) {
.featured-users > h2 > br {
display: initial;
}
}
@media (max-width: 475px) {
.left-sidebar > div {
width: 35px;
height: 35px;
}
.left-sidebar > div > svg {
width: 20px;
}
.ui-row-1 {
padding: 30px 20px 20px 20px;
}
.profile-small svg {
margin-right: 15px;
}
}
@media (max-width: 460px) {
.featured-users > div {
width: 100%;
}
}
@media (max-width: 420px) {
.ui-row-1,
.ui-row-2 {
padding-left: 10px;
padding-right: 10px;
}
.clay-category,
.large-banner {
width: 90%;
}
.large-banner a {
padding: 7px 12px;
}
}
@media (max-width: 410px) {
.ui-row-1 {
padding: 30px 10px 20px 10px;
}
.profile-small svg {
width: 20px;
margin-right: 10px;
}
.logo-comp p {
letter-spacing: 1px;
margin-left: 7px;
}
}
@media (max-width: 390px) {
.featured-users > div > div:nth-child(1) > div:nth-child(2) > h3 {
font-size: 12pt;
}
}
@media (max-width: 375px) {
.featured-users > div > div:nth-child(2)::after {
right: unset;
bottom: -40px;
left: 0;
}
.featured-users > div {
margin-bottom: 75px;
}
.featured-users > div:nth-child(4) {
margin-bottom: 50px;
}
}
@media (max-width: 335px) {
.profile-small svg {
width: 20px;
margin-right: 5px;
}
}
Also see: Tab Triggers