Pen Settings

HTML

About HTML Preprocessors

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.

Learn more · Versions

Adding Classes

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.

About the <head>

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.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

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.

Vendor Prefixing

About Vendor Prefixing

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).

Add External Stylesheets/Pens

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

Packages

Add Packages

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.

Powered by Algolia
About Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="wrapper">
  <aside>
    <h1 class="logo">
      <svg width="36px" height="36px" viewBox="0 0 210 210" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="tanuki-logo">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
          <g id="logo" sketch:type="MSLayerGroup" transform="translate(0.000000, 10.000000)">
            <g id="Page-1" sketch:type="MSShapeGroup">
              <g id="Fill-1-+-Group-24">
                <g id="Group-24">
                  <g id="Group">
                    <path d="M105.0614,193.655 L105.0614,193.655 L143.7014,74.734 L66.4214,74.734 L105.0614,193.655 L105.0614,193.655 Z" id="Fill-4" fill="#E24329" class="tanuki-shape"></path>
                    <path d="M105.0614,193.6548 L66.4214,74.7338 L12.2684,74.7338 L105.0614,193.6548 L105.0614,193.6548 Z" id="Fill-8" fill="#FC6D26" class="tanuki-shape"></path>
                    <path d="M12.2685,74.7341 L12.2685,74.7341 L0.5265,110.8731 C-0.5445,114.1691 0.6285,117.7801 3.4325,119.8171 L105.0615,193.6551 L12.2685,74.7341 L12.2685,74.7341 Z" id="Fill-12" fill="#FCA326" class="tanuki-shape"></path>
                    <path d="M12.2685,74.7342 L66.4215,74.7342 L43.1485,3.1092 C41.9515,-0.5768 36.7375,-0.5758 35.5405,3.1092 L12.2685,74.7342 L12.2685,74.7342 Z" id="Fill-16" fill="#E24329" class="tanuki-shape"></path>
                    <path d="M105.0614,193.6548 L143.7014,74.7338 L197.8544,74.7338 L105.0614,193.6548 L105.0614,193.6548 Z" id="Fill-18" fill="#FC6D26" class="tanuki-shape"></path>
                    <path d="M197.8544,74.7341 L197.8544,74.7341 L209.5964,110.8731 C210.6674,114.1691 209.4944,117.7801 206.6904,119.8171 L105.0614,193.6551 L197.8544,74.7341 L197.8544,74.7341 Z" id="Fill-20" fill="#FCA326" class="tanuki-shape"></path>
                    <path d="M197.8544,74.7342 L143.7014,74.7342 L166.9744,3.1092 C168.1714,-0.5768 173.3854,-0.5758 174.5824,3.1092 L197.8544,74.7342 L197.8544,74.7342 Z" id="Fill-22" fill="#E24329" class="tanuki-shape"></path>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <span>GitLab</span>
    </h1>
    <nav class="menu">
      <ul>
        <li>
          <a href="#">
            <svg t="1638543010000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2303" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M947.2 422.4L572.8 115.2c-32-25.6-86.4-25.6-118.4 0L76.8 425.6c-12.8 6.4-16 22.4-9.6 35.2 3.2 12.8 16 19.2 28.8 19.2h32v364.8C128 892.8 163.2 928 211.2 928H416c19.2 0 32-12.8 32-32v-147.2c0-22.4 35.2-44.8 64-44.8 28.8 0 67.2 22.4 67.2 44.8V896c0 19.2 12.8 32 32 32h208c48 0 80-32 80-83.2V480h32c12.8 0 25.6-9.6 28.8-22.4 3.2-12.8 0-25.6-12.8-35.2z" fill="currentColor" p-id="2304"></path>
            </svg>
            <span>Home</span>
          </a>

        </li>
        <li>
          <a href="#" class="active">
            <svg t="1638543287208" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5225" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M733.013333 188.16c0-56.746667 46.08-102.826667 102.826667-102.826667S938.666667 131.413333 938.666667 188.16s-46.08 102.826667-102.826667 102.826667-102.826667-46.08-102.826667-102.826667z m-164.266666 441.6l123.306666-159.146667-1.706666 0.853334c6.826667-9.386667 8.106667-21.333333 3.413333-32a31.445333 31.445333 0 0 0-26.026667-18.773334 32.768 32.768 0 0 0-29.866666 13.226667l-103.253334 133.546667-118.186666-93.013334a33.706667 33.706667 0 0 0-24.32-6.826666 33.066667 33.066667 0 0 0-21.333334 12.8l-126.293333 164.266666-2.56 3.84a31.872 31.872 0 0 0 8.96 40.533334c5.973333 3.84 12.373333 6.4 19.626667 6.4 9.813333 0.426667 19.2-4.693333 25.173333-12.8l107.093333-137.813334 121.6 91.306667 3.84 2.56c13.653333 7.253333 30.72 3.84 40.533334-8.96z m90.453333-468.48c-1.706667 10.666667-2.56 21.333333-2.56 32 0 96 77.653333 173.653333 173.226667 173.653333 10.666667 0 20.906667-1.28 31.573333-2.986666v344.32c0 144.64-85.333333 230.4-230.4 230.4H315.733333C170.666667 938.666667 85.333333 852.906667 85.333333 708.266667V392.533333c0-145.066667 85.333333-231.253333 230.4-231.253333h343.466667z" fill="currentColor" p-id="5226"></path>
            </svg>
            <span>Activity</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638543493326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5685" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M313.107692 551.384615c-27.569231-41.353846-41.353846-88.615385-41.353846-141.784615 0-90.584615 37.415385-165.415385 96.492308-210.707692-19.692308-35.446154-59.076923-61.046154-110.276923-61.046154-86.646154 0-135.876923 70.892308-135.876923 151.630769 0 43.323077 13.784615 80.738462 43.323077 106.338462 15.753846 15.753846 29.538462 35.446154 29.538461 55.138461s-7.876923 39.384615-57.107692 61.046154c-70.892308 31.507692-135.876923 74.830769-137.846154 139.815385 1.969231 43.323077 29.538462 76.8 70.892308 76.8h64.984615c9.846154 0 19.692308-5.907692 25.6-15.753847 31.507692-57.107692 90.584615-92.553846 139.815385-118.153846 17.723077-7.876923 21.661538-29.538462 11.815384-43.323077z m575.015385-39.384615c-49.230769-21.661538-57.107692-39.384615-57.107692-61.046154s13.784615-41.353846 29.538461-55.138461c29.538462-27.569231 43.323077-63.015385 43.323077-106.338462 0-80.738462-47.261538-151.630769-135.876923-151.630769-51.2 0-90.584615 25.6-112.246154 61.046154 59.076923 45.292308 96.492308 120.123077 96.492308 210.707692 0 53.169231-13.784615 100.430769-41.353846 141.784615-9.846154 15.753846-3.938462 35.446154 11.815384 43.323077 49.230769 23.630769 108.307692 61.046154 139.815385 118.153846 5.907692 9.846154 15.753846 15.753846 25.6 15.753847h64.984615c41.353846 0 68.923077-33.476923 68.923077-76.8 1.969231-64.984615-63.015385-108.307692-133.907692-139.815385z m-244.184615 143.753846c-53.169231-23.630769-63.015385-45.292308-63.015385-66.953846 0-23.630769 15.753846-45.292308 33.476923-61.046154 31.507692-29.538462 49.230769-70.892308 49.230769-118.153846 0-88.615385-53.169231-165.415385-149.661538-165.415385s-149.661538 76.8-149.661539 165.415385c0 47.261538 17.723077 88.615385 49.23077 118.153846 17.723077 17.723077 33.476923 39.384615 33.476923 61.046154 0 23.630769-7.876923 43.323077-63.015385 66.953846-78.769231 33.476923-153.6 70.892308-155.569231 141.784616 0 47.261538 35.446154 86.646154 80.738462 86.646153h409.6c45.292308 0 80.738462-39.384615 80.738461-86.646153-1.969231-68.923077-76.8-106.338462-155.56923-141.784616z" p-id="5686" fill="currentColor"></path>
            </svg>
            <span>Groups</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638543662241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10610" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">

              <path d="M992.576 336.704c-51.712-141.504-163.712-253.568-305.344-305.28C720.512 11.968 758.656 0 800 0 923.776 0 1024 100.288 1024 224 1024 265.344 1011.968 303.488 992.576 336.704zM960 512c0 121.856-49.024 232.128-128 312.896L832 832l0 128c0 35.392-28.608 64-64 64s-64-28.608-64-64l0-44.736C645.632 943.104 580.992 960 512 960c-69.056 0-133.632-16.896-192-44.736L320 960c0 35.392-28.672 64-64 64s-64-28.608-64-64l0-128 0-7.104C113.024 744.128 64 633.856 64 512c0-247.424 200.576-448 448-448S960 264.576 960 512zM512 192C335.296 192 192 335.232 192 512s143.296 320 320 320c176.768 0 320-143.232 320-320S688.768 192 512 192zM640 576 512 576C476.672 576 448 547.392 448 512L448 384c0-35.392 28.672-64 64-64 35.392 0 64 28.608 64 64l0 64 64 0c35.392 0 64 28.608 64 64S675.392 576 640 576zM31.424 336.704C11.968 303.488 0 265.344 0 224 0 100.288 100.288 0 224 0c41.344 0 79.488 11.968 112.704 31.424C195.136 83.136 83.136 195.2 31.424 336.704z" fill="currentColor" p-id="10611"></path>
            </svg>
            <span>Milestones</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638543841347" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11116" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M807.152941 222.870588c-78.305882-78.305882-180.705882-120.470588-295.152941-120.470588s-216.847059 42.164706-295.152941 120.470588C132.517647 301.176471 90.352941 409.6 90.352941 524.047059s42.164706 216.847059 126.494118 295.152941c78.305882 78.305882 186.729412 126.494118 295.152941 126.494118s216.847059-42.164706 295.152941-126.494118c78.305882-78.305882 126.494118-186.729412 126.494118-295.152941s-42.164706-222.870588-126.494118-301.176471zM469.835294 349.364706c0-12.047059 6.023529-18.070588 12.047059-30.117647 12.047059-6.023529 18.070588-6.023529 30.117647-6.02353s18.070588 6.023529 30.117647 12.047059c6.023529 6.023529 12.047059 18.070588 12.047059 30.117647V542.117647c0 12.047059-6.023529 18.070588-12.047059 30.117647-12.047059 0-18.070588 6.023529-30.117647 6.02353s-18.070588-6.023529-30.117647-12.047059c-6.023529-12.047059-12.047059-18.070588-12.047059-30.117647V349.364706z m78.305882 367.435294c-12.047059 12.047059-24.094118 18.070588-36.141176 18.070588s-30.117647-6.023529-36.141176-18.070588-18.070588-24.094118-18.070589-36.141176c0-12.047059 6.023529-30.117647 18.070589-36.141177 12.047059-12.047059 24.094118-18.070588 36.141176-18.070588s30.117647 6.023529 36.141176 18.070588c12.047059 12.047059 18.070588 24.094118 18.070589 36.141177 0 12.047059-6.023529 30.117647-18.070589 36.141176z" fill="currentColor" p-id="11117"></path>
            </svg>
            <span>Issues</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638544030830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13197" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M303.146667 375.04A128.042667 128.042667 0 0 0 426.666667 469.333333h170.666666a213.376 213.376 0 0 1 210.218667 176.896A128.042667 128.042667 0 0 1 768 896a128 128 0 0 1-47.146667-247.04A128.042667 128.042667 0 0 0 597.333333 554.666667h-170.666666a212.394667 212.394667 0 0 1-128-42.666667v135.253333a128.042667 128.042667 0 1 1-85.333334 0V376.746667a128.042667 128.042667 0 1 1 89.813334-1.706667z" p-id="13198" fill="currentColor"></path>
            </svg>
            <span>Merge Requests</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638544174435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13646" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M877.714286 54.857143H754.285714V9.142857c0-5.028571-4.114286-9.142857-9.142857-9.142857h-64c-5.028571 0-9.142857 4.114286-9.142857 9.142857v45.714286H498.285714V9.142857c0-5.028571-4.114286-9.142857-9.142857-9.142857h-64c-5.028571 0-9.142857 4.114286-9.142857 9.142857v45.714286H292.571429c-20.228571 0-36.571429 16.342857-36.571429 36.571428v137.142858h-109.714286c-20.228571 0-36.571429 16.342857-36.571428 36.571428v722.285714c0 20.228571 16.342857 36.571429 36.571428 36.571429h585.142857c20.228571 0 36.571429-16.342857 36.571429-36.571429v-109.714285h109.714286c20.228571 0 36.571429-16.342857 36.571428-36.571429V91.428571c0-20.228571-16.342857-36.571429-36.571428-36.571428zM685.714286 482.285714H514.285714V310.857143h0.228572L685.714286 482.057143v0.228571z m146.285714 313.142857h-64V448L548.571429 228.571429H338.285714v-91.428572h77.714286v36.571429c0 5.028571 4.114286 9.142857 9.142857 9.142857h64c5.028571 0 9.142857-4.114286 9.142857-9.142857v-36.571429h173.714286v36.571429c0 5.028571 4.114286 9.142857 9.142857 9.142857h64c5.028571 0 9.142857-4.114286 9.142857-9.142857v-36.571429h77.714286v658.285714z" p-id="13647" fill="currentColor"></path>
            </svg>
            <span>Snippets</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638544664416" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14446" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m-32.128-192.384c41.152 0 74.56-30.528 74.56-68.16s-33.408-68.16-74.56-68.16-74.56 30.528-74.56 68.16 33.344 68.16 74.56 68.16z m0-639.232c-123.52 0-223.68 91.584-223.68 204.48H368c0-56.448 50.048-102.272 111.808-102.272 61.76 0 111.808 45.76 111.808 102.272 0 38.848-23.744 72.64-58.624 89.984a224.256 224.256 0 0 0-43.136 30.784l-1.152 1.024a169.152 169.152 0 0 0-6.016 5.76l-1.216 1.216-1.6 1.6v0.128a201.664 201.664 0 0 0-44.352 70.016 190.08 190.08 0 0 0-10.56 52.992h-1.024l-0.128 12.288c0-4.16 0.832-8.128 1.088-12.288h110.848l-0.064 12.288c0-38.848 23.68-72.64 58.56-89.92 19.968-10.88 37.952-24.576 53.248-40.448v-0.064a194.048 194.048 0 0 0 56-135.296c0.064-112.96-100.096-204.544-223.616-204.544z" fill="currentColor" p-id="14447"></path>
            </svg>
            <span>Help</span>
          </a>

        </li>
        <li class="diver"></li>
        <li>
          <a href="#">
            <svg t="1638544804331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17679" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M896 893.12c-12.48-59.52-89.28-122.88-161.92-133.12h-14.72a306.88 306.88 0 0 1-209.6 89.92 309.76 309.76 0 0 1-210.24-89.92h-14.08c-74.24 9.6-151.04 72-163.52 132.48v5.76a59.52 59.52 0 0 0 47.68 69.44 2012.8 2012.8 0 0 0 322.88 24.32 1948.8 1948.8 0 0 0 355.2-30.08A59.2 59.2 0 0 0 896 893.12zM258.88 545.92a70.08 70.08 0 0 0 10.56 0c48.64 123.84 142.08 207.04 239.04 207.36s188.16-84.8 237.12-209.28a70.4 70.4 0 0 0 12.48 0 90.56 90.56 0 0 0 82.56-96 96 96 0 0 0-58.56-92.16C784.32 140.16 667.84 32 508.48 32S232.32 140.16 234.56 357.44A96 96 0 0 0 176 448a90.56 90.56 0 0 0 82.88 97.92z" fill="currentColor" p-id="17680"></path>
            </svg>
            <span>Profile Settings</span>
          </a>

        </li>
      </ul>
    </nav>
    <div class="profile">
      <img src="https://www.w3cplus.com/sites/all/themes/w3cplusV2/images/logo.png" alt="">
      <span>w3cplus</span>
    </div>
  </aside>
  <main>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=2" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=3" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=4" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
  </main>
</div>
!

CSS 

              
                @import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;

  display: grid;
  align-items: start;
  justify-content: center;
}

ul {
  list-style: none outside none;
}

.wrapper {
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  width: 100vw;
}
aside {
  display: grid;
  grid-template-rows: min-content auto min-content;
  background-color: #777;
  padding-bottom: 20px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.25rem;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid #352a2a;
  box-shadow: 0 1px 0 0 #d8d8d8;
}

.diver {
  border-bottom: 1px solid #352a2a;
  box-shadow: 0 1px 0 0 #d8d8d8;
  width: 100%;
  height: 0;
}

.menu a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8d8d8;
  padding: 0 24px;
  min-height: 44px;
  text-decoration: none;
}

.menu .active,
.menu a:hover {
  background-color: #666;
  color: #fff;
}

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.profile img {
  width: 48px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  width: 1.5em;
  height: 1.5em;
}

main {
  display: grid;
  gap: 20px;
  padding: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  align-content: start;
}

.card {
  display: grid;
  border-radius: 24px;
  background-color: #fff;
  color: #454545;
  gap: 10px;
  box-shadow: 0 0 0.35em 0 rgb(0 0 0 / 0.5);
}

.card__thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 24px 24px 0 0;
  grid-area: 1 / 1 / 2 / 2;
  z-index: 1;
}

.card__badge {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 2;
  background-color: #2196f3;
  border-radius: 0 10rem 10rem 0;
  align-self: start;
  justify-self: start;
  margin-top: 2rem;
  color: #fff;
  padding: 5px 12px 5px 8px;
  text-shadow: 0 0 1px rgb(0 0 0 / 0.5);
  filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.5));
}

.card__title {
  font-weight: 700;
  font-size: clamp(1.2rem, 1.2rem + 3vw, 1.5rem);
  padding: 0 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card__describe {
  color: #666;
  line-height: 1.4;
  padding: 0 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 10rem;
  background-color: #feca53;
  padding: 10px 20px;
  color: #000;
  text-decoration: none;
  box-shadow: 0 3px 8px rgb(0 0 0 / 7%);
  transition: all 0.2s linear;
  font-weight: 700;
  justify-self: end;
  margin: 0 20px 20px 0;
  cursor: pointer;
}

.card__button:hover {
  background-color: #ff9800;
}

aside {
  container-type: inline-size;
  min-width: 100px;
}

.wrapper {
  container-type: inline-size;
}

@container (width < 200px) {
  .logo span,
  .menu span,
  .profile span {
    display: none;
  }

  .menu a {
    gap: 0;
    justify-content: center;
  }
}

@container (width > 760px) and (width < 1024px) {
  main {
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  }
  .card {
    grid-template-columns: 240px auto;
    grid-template-rows: min-content min-content auto;
    grid-template-areas:
      "thumbnail title"
      "thumbnail describe"
      "thumbnail button";
    gap: 0;
  }

  .card__thumbnail {
    grid-area: thumbnail;
    aspect-ratio: 1 / 1;
    border-radius: 12px 0 0 12px;
    z-index: 1;
  }

  .card__badge {
    grid-area: thumbnail;
    z-index: 2;
    display: flex;
  }
  .card__describe {
    grid-area: describe;
    align-self: start;
    display: flex;
    margin-top: -24px;
  }

  .card__title {
    grid-area: title;
    margin-top: 20px;
    align-self: start;
  }

  .card__button {
    grid-area: button;
    align-self: end;
  }
}
!

JS
!
999px

Console