The Power of Pure CSS - No JavaScript Needed

<ul id="accordion">
		<li>
			<h2>Title One</h2>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
			</div>
		</li>
		<li>
			<h2>Title Two</h2>
			<div class="content">
				Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
			</div>
		</li>
		<li>
			<h2>Title Three</h2>
			<div class="content">
				Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
			</div>
		</li>
		<li>
			<h2>Title Four</h2>
			<div class="content">
				Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</li>
	</ul>

</div>

21

Pure CSS Accordion hover

By: pixeldev

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  
  body {
    min-height: 100vh;
    background: #000;
  }
  
  .container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    animation: color-change 4s infinite;
  }
  
  @keyframes color-change {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }
  
  .row {
    display: inline-flex;
    margin-top: -32px;
    margin-left: -50px;
  }
  .row:nth-child(even) {
    margin-left: 1px;
  }
  
  .hexagon {
    position: relative;
    width: 100px;
    height: 110px;
    background: #111;
    margin: 1.5px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: 1s;
  }
  
  .hexagon:hover {
    transition: 0s;
    background: cyan;
  }
  
.hexagon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  opacity: 0.015;
  pointer-events: none;
  background: #fff;
  
}
  .hexagon::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.02);
    background: #111;
  }

21

Pure CSS Hexagonal Border with Glow Hover effect

By: pixeldev

21

Hexagon Wall – Pure CSS

By: pixeldev

body {
  background-image:url(http://laban.rs/img/bgi/el_bg_img_5.jpg);  
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
  width: 242px;
  height: 110px;
	position: absolute;
  top: 32%;
  left: 42%;
  perspective: 800px;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease;
}

#carousel figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 250px;
  height: 150px;
  border-top: 3px solid;
  background-color: #eee;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}

#carousel figure:nth-child(1) { transform: rotateY(  0deg ); border-color:  #7f50b6;}
#carousel figure:nth-child(2) { transform: rotateY(  90deg );border-color: #ffa7be; }
#carousel figure:nth-child(3) { transform: rotateY(  180deg );border-color:  #7f50b6;}
#carousel figure:nth-child(4) { transform: rotateY( 270deg );border-color:  #ffa7be; }

#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); animation: rotate1 10s infinite; }
#carousel figure:nth-child(2) { transform: rotateY(  90deg ) translateZ( 288px ); animation: rotate2 10s infinite;}
#carousel figure:nth-child(3) { transform: rotateY(  180deg ) translateZ( 288px ); animation: rotate3 10s infinite; }
#carousel figure:nth-child(4) { transform: rotateY( 270deg ) translateZ( 288px ); animation: rotate4 10s infinite; }

#carousel figure p {
  text-align: center;
  verticle-align: middle;
  font-size: 20px;
  color: #999;
  padding-top: 14%;
}

@keyframes rotate1 {
  0%   {transform: rotateY(   0deg ) translateZ( 288px);}
  25%  {transform: rotateY(  -90deg ) translateZ( 288px );}
  50%  {transform: rotateY(  -180deg ) translateZ(288px );}
  75% {transform: rotateY(  -270deg ) translateZ( 288px );} 
  100% {transform: rotateY(  -360deg ) translateZ( 288px );}
}

@keyframes rotate2 {
  0%   {transform: rotateY(   90deg ) translateZ( 288px);}
  25%  {transform: rotateY(   0deg ) translateZ( 288px );}
  50%  {transform: rotateY(  -90deg ) translateZ(288px );}
  75% {transform: rotateY(  -180deg ) translateZ( 288px );} 
  100% {transform: rotateY(  -270deg ) translateZ( 288px );}
}

@keyframes rotate3 {
  0%   {transform: rotateY(   180deg ) translateZ( 288px);}
  25%  {transform: rotateY(  90deg ) translateZ( 288px );}
  50%  {transform: rotateY(  0deg ) translateZ(288px );}
  75% {transform: rotateY(  -90deg ) translateZ( 288px );} 
  100% {transform: rotateY(  -180deg ) translateZ( 288px );}
}

@keyframes rotate4 {
  0%   {transform: rotateY(   270deg ) translateZ( 288px);}
  25%  {transform: rotateY(  180deg ) translateZ( 288px );}
  50%  {transform: rotateY(  90deg ) translateZ(288px );}
  75% {transform: rotateY(  0deg ) translateZ( 288px );} 
  100% {transform: rotateY(  -90deg ) translateZ( 288px );}
}

21

3d Animated carousel Pure CSS

By: pixeldev

<div class="undercardbox">
      <div class="card">
        <span>Pixel Dev</span>
        <div class="cardimg"><img src="https://1.bp.blogspot.com/-FnailpMILyU/XPdqQcQNdQI/AAAAAAAAA_Y/FOTHmGQxZrMiL_UV8vCrLvxLREhM3vtgACLcBGAs/s1600/imh.jpg" alt="" /></div>
        <p>
          Im am New in web development and I want to learn something crazy.
        </p>
      </div>

<div class="card">
        <span>Pixel Dev</span>
        <div class="cardimg"><img src="https://1.bp.blogspot.com/-FnailpMILyU/XPdqQcQNdQI/AAAAAAAAA_Y/FOTHmGQxZrMiL_UV8vCrLvxLREhM3vtgACLcBGAs/s1600/imh.jpg" alt="" /></div>
        <p>
          Im am New in web development and I want to learn something crazy.
        </p>
      </div>

<div class="card">
        <span>Pixel Dev</span>
        <div class="cardimg"><img src="https://1.bp.blogspot.com/-FnailpMILyU/XPdqQcQNdQI/AAAAAAAAA_Y/FOTHmGQxZrMiL_UV8vCrLvxLREhM3vtgACLcBGAs/s1600/imh.jpg" alt="" /></div>
        <p>
          Im am New in web development and I want to learn something crazy.
        </p>
      </div>
    </div>

</div>
</div>

body{
  padding: 0;
  margin: 0;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.box {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  position: relative;
  padding: 15vh 0;
  user-select: none;
}
h1 {
  position: relative;
  text-align: center;
  z-index: 100;
}
.cardbox {
  width: 100%;
  height: 50vh;
  margin: 10vh 0 0 0;
  min-height: 300px;
  padding: 25px 0;
  overflow: hidden;
}
.card {
  height: 100%;
  min-width: 240px;
  background: #fff;
  padding: 20px 30px;
  margin: 0 20px;
  border-radius: 5px;
}
span {
  display: block;
  text-align: center;
  font-weight: 700;
}
.cardimg {
  position: relative;
  width: 14vh;
  height: 14vh;
  margin: 10px auto;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  background: #4285f4;
}
.cardimg img {
  width: 110%;
  height: auto;
}
p {
  position: relative;
  text-align: center;
  font-size: 14px;
}
.cardbox::before,
.cardbox::after {
  content: '';
  width: 10%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  filter: blur(40px);
}
.cardbox::before {
  left: 0;
  background: rgba(245, 245, 245, 0.9);
}
.cardbox::after {
  right: 0;
  background: rgba(245, 245, 245, 0.9);
}
.undercardbox {
  animation: move 60s linear 2s infinite alternate;
  display: flex;
  flex-direction: row;
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-2800px + 100%));
  }
}

20

Responsive Carousel – Pure CSS

By: pixeldev

<title>Responsive Tables</title>

<section>
   <ol class="collection collection-container">
     
     <li class="item item-container">
       <div class="attribute"></div>
       <div class="attribute" data-name="#">#</div>
       
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">Part Number</div>
           <div class="attribute" data-name="Part Description">Part Description</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute">Vendor Number</div>
           <div class="attribute">Vendor Name</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute">Order Qty</div>
         <div class="attribute">Receive Qty</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute">Cost</div>
         <div class="attribute">Extended Cost</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute">Duty %</div>
         <div class="attribute">Duty</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute">Freight %</div>
         <div class="attribute">Freight</div>
       </div>
       <div class="attribute">UOM</div>
       <div class="attribute">Vendor Part Number</div>
     </li>
      
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">1</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10001</div>
           <div class="attribute" data-name="Part Description">Description of part</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">001</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name A</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">100001</div>
     </li>
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">2</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10002</div>
           <div class="attribute" data-name="Part Description">A long description of part. This description may overflow.
           </div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">002</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name B</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">E4-64B</div>
     </li>
   </ol>
</section>

ol.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

.item {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

/* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container>li:first-child {
        display: none;
    }

.attribute::before {
        content: attr(data-name);
    }

/* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {
    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
        grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
    }

.attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

/* Definition of wrapping column width for attribute groups. */
    .part-information {
        --column-width-min: 10em;
    }

.part-id {
        --column-width-min: 10em;
    }

.vendor-information {
        --column-width-min: 8em;
    }

.quantity {
        --column-width-min: 5em;
    }

.cost {
        --column-width-min: 5em;
    }

.duty {
        --column-width-min: 5em;
    }

.freight {
        --column-width-min: 5em;
    }

.collection {
        border-top: 1px solid gray;
    }

/* In order to maximize row lines, only display one line for a cell */
    .attribute {
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.collection-container>.item-container:first-child {
        background-color: blanchedalmond;
    }

.item-container:hover {
        background-color: rgb(200, 227, 252);
    }

/* Center header labels */
    .collection-container>.item-container:first-child .attribute {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }
}

20

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

<h1 class="heading1">Our Partners</h1>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>

<div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>
      
    </div>
    
  </div>
  
</div>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip reverse">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
      
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
    </div>
    
  </div>
  
</div>

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 versions
*/

/* Base css */
html {
  font-size: 80%;
}
body {
  --body-bg: #eee;
  margin: 0;
  padding: 2rem 2rem 4rem;
  background: var(--body-bg);
  color: #212121;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 100%;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 125%;
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: 150%;
  }
}

/* Heading */
.heading1 {
  font-size: 2rem;
  text-align: center;
}

/* reference */
.reference {
  text-align: center;
}

/* reference link */
.reference-link {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Carousel and animation css starts */
.rc-carousel {
  --box-gap: 1.5rem;
  --tile-size: 8rem;
  width: 100%;
  max-width: calc(
    (var(--tile-size) + var(--box-gap)) * ((var(--tiles) / 2) - 1)
  );
  margin: var(--box-gap) auto;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.rc-carousel::before,
.rc-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 5rem;
  height: 100%;
  background-image: -webkit-gradient(
    linear,
    ,
    from(transparent),
    to(var(--body-bg))
  );
  background-image: -o-linear-gradient(
    var(--direction),
    transparent,
    var(--body-bg)
  );
  background-image: linear-gradient(
    to var(--direction),
    transparent,
    var(--body-bg)
  );
  z-index: inherit;
}
.rc-carousel::before {
  left: 0;
  --direction: left;
}

.rc-carousel::after {
  right: 0;
  --direction: right;
}
.rc-carousel-strip {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-animation: slideX 20s linear infinite;
  animation: slideX 20s linear infinite;
}
.rc-carousel-strip.reverse {
  /* reverse animation */
  animation-direction: reverse;
}
.rc-carousel-strip:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.rc-carousel-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: var(--box-gap);
}

.rc-carousel-item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: var(--tile-size);
  height: var(--tile-size);
}

.rc-carousel-item-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@-webkit-keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

@keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

/* Animation won't work if you preferes reduced motion */
@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
  .rc-carousel::before,
  .rc-carousel::after {
    display: none;
  }
  .rc-carousel-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .rc-carousel-box [aria-hidden="true"] {
    display: none;
  }
  .rc-carousel-strip {
    animation: none;
  }
}
/* reduced motion css ends */
/* Carousel and animation css ends */

/* Footer and credits styles */
.footer {
  position: fixed;
  z-index: 99;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background: #fff;
  font-size: 0.75rem;
  text-align: right;
  font-weight: 600;
}

20

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

20

html lists like tables

By: pixeldev

<div class="pricing-table clearfix">
	<ul class="highlight-low">
		<li class="heading">Free</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
	</ul>
	<ul class="highlight-high">
		<li class="heading">Premium</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
  </ul>
	<ul class="highlight-medium">
		<li class="heading">Free</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
	</ul>
</div>

.pricing-table {
  width: 700px;
  margin: 30px auto 30px auto;
  font-family:"Arial";
}
.pricing-table ul {
  width: 33%;
  text-align: center;
  background: #fff;
  float: left;
  margin: 0px;
  padding: 0px;
  list-style: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
  position: relative;
}
.pricing-table ul.highlight-low {
  margin-right: -5px;
}
.pricing-table ul.highlight-low .heading {
  font-size: 22px;
  padding: 15px 0;
  border: 5px solid #cfcfcf;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #e3e3e3;
  background-image: -moz-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#cfcfcf));
  background-image: -webkit-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: -o-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: linear-gradient(to bottom, #f0f0f0, #cfcfcf);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f0f0', endColorstr='#ffcfcfcf', GradientType=0);
}
.pricing-table ul.highlight-low .price {
  background: #dfe9f0;
  border-left: 5px solid #cfcfcf;
  border-right: 5px solid #cfcfcf;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-low .feature {
  border-left: 5px solid #cfcfcf;
  border-right: 5px solid #cfcfcf;
}
.pricing-table ul.highlight-low .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-low .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-low .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #cfcfcf;
  border-top: 0px;
  padding: 15px 0;
  font-size: 22px;
}
.pricing-table ul.highlight-high {
  z-index: 100;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  margin-top: -12px;
}
.pricing-table ul.highlight-high .heading {
  font-size: 22px;
  padding: 24px 0;
  border: 5px solid #21507d;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #2c5d8e;
  background-image: -moz-linear-gradient(top, #336699, #21507d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#336699), to(#21507d));
  background-image: -webkit-linear-gradient(top, #336699, #21507d);
  background-image: -o-linear-gradient(top, #336699, #21507d);
  background-image: linear-gradient(to bottom, #336699, #21507d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff336699', endColorstr='#ff21507d', GradientType=0);
  color: #fff;
}
.pricing-table ul.highlight-high .price {
  background: #dfe9f0;
  border-left: 5px solid #21507d;
  border-right: 5px solid #21507d;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-high .feature {
  border-left: 5px solid #21507d;
  border-right: 5px solid #21507d;
}
.pricing-table ul.highlight-high .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-high .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-high .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #21507d;
  border-top: 0px;
  padding: 24px 0;
  font-size: 22px;
}
.pricing-table ul.highlight-medium {
  margin-left: -5px;
}
.pricing-table ul.highlight-medium .heading {
  font-size: 22px;
  padding: 15px 0;
  border: 5px solid #589f0c;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #6abc12;
  background-image: -moz-linear-gradient(top, #76cf16, #589f0c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#76cf16), to(#589f0c));
  background-image: -webkit-linear-gradient(top, #76cf16, #589f0c);
  background-image: -o-linear-gradient(top, #76cf16, #589f0c);
  background-image: linear-gradient(to bottom, #76cf16, #589f0c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff76cf16', endColorstr='#ff589f0c', GradientType=0);
  color: #fff;
}
.pricing-table ul.highlight-medium .price {
  background: #dfe9f0;
  border-left: 5px solid #589f0c;
  border-right: 5px solid #589f0c;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-medium .feature {
  border-left: 5px solid #589f0c;
  border-right: 5px solid #589f0c;
}
.pricing-table ul.highlight-medium .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-medium .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-medium .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #589f0c;
  border-top: 0px;
  padding: 15px 0;
  font-size: 22px;
}

20

Pure CSS Pricing Table

By: pixeldev

html,body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#FFCDD2, #F48FB1);
}

.👋 {
    width: 400px;
    height: 400px;
    background-color: whitesmoke;
    background-image: linear-gradient(
        darkblue,
        rgba(255, 255, 255, 0) 80%,
        rgba(255, 255, 255, 0.5)
    );
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow:hidden;
}

.👋 .title {
    color: white;
    font-size: 24px;
    font-family: serif;
    text-align: center;
    text-transform: uppercase;
    line-height: 250px;
    letter-spacing: 0.4em;
    z-index: 1;
    position: absolute;
    width: 100%;
}

.👋 .wave {
    width: 600px;
    height: 600px;
    position: absolute;
    background-color: #039BE5;
    top: -250px;
    left: -100px;
    filter: opacity(0.4);
    border-radius: 43%;
    animation: drift linear infinite;
    transform-origin: 50% 48%;
}
.sp{
   width:100px;
   height:100px;
   background-color:red;
}
.👋 .wave:nth-of-type(1) {
    animation-duration: 5s;
}

.👋 .wave:nth-of-type(2) {
    animation-duration: 7s;
}

.👋 .wave:nth-of-type(3) {
    animation-duration: 9s;
    background-color: red;
    filter: opacity(0.1);
}

@keyframes drift {
    from {
        transform: rotate(360deg);
    }
}

20

Waves animation Pure CSS

By: pixeldev

body{
  background:-webkit-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-moz-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-ms-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-o-radial-gradient(circle,#f6b5ff, #e081ef);
  background:radial-gradient(circle,#f6b5ff, #e081ef);
}
#slider{
  width:630px;
  border:4px solid #fff;;
  outline:1px solid #999;
  height:313px;
  margin:-315px auto;
  background:-webkit-radial-gradient(#ffefce, #fcd78d);
  background:-moz-radial-gradient(#ffefce, #fcd78d);
  background:-ms-radial-gradient(#ffefce, #fcd78d);
  background:-o-radial-gradient(#ffefce, #fcd78d);
  background:radial-gradient(#ffefce, #fcd78d);
}
#allpic{
  width:70px;
  height:300px;
  background:#ccc;
  margin:5px 0 0 5px;
  float:left;
  transition:all .5s ease-out;
  overflow:hidden;
  border:2px solid #fff;;
  outline:1px solid #999;
}
#allpic:hover {
  width:300px;
}
#shadow{
  width:600px;
  height:30px;
  margin:330px auto 0;
  border-radius:50%;
  box-shadow:0px 12px 10px 3px rgba(0,0,0, 0.5);
}

20

Pure CSS with no arrows

By: pixeldev

<main>
  <h1>CSS only accordion, nearly accessible</h1>
    
  <label for="tota11y-open-close">Expand all sections?</label>
    
  <ul class="tota11y-accordion" aria-label="FAQs accordion">
      <li>
         <a href="#acc1" id="#accLink1">Short Item, No Scroll</a>
         <section class="content" id="acc1" aria-labelledby="accLink1">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc2" id="#accLink2">Long Item, Has Scroll, No Focusable Content</a>
          <section class="content" id="acc2" aria-labelledby="accLink2">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc3" id="#accLink3">Long Item, Has Scroll, Focusable Content</a>
          <section class="content" id="acc3" aria-labelledby="accLink3">
              <ul>
                  <li>Item <a href="#">Focusable link</a></li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
  </ul>
</main>

:root {
    --ta11y-open-duration: 0.5s;
}

body {
    font-size: 18px;
    background: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    color: white;
    padding: 30px;
}

a {
    color: white;
}

.tota11y-accordion > li > a {
    padding: 2rem 1.5rem;
    display: block;
    color: white;
    position: relative;
    cursor: pointer;
    outline: transparent;
    text-decoration: none;
}

.tota11y-accordion > li {
    max-width: 800px;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 1rem;
    background: #151618;
    box-shadow: 0px 0px 0px 0px #333;
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: box-shadow 0.3s 0s ease,
        grid-template-rows var(--ta11y-open-duration);
}
.tota11y-accordion > li:focus-within {
    box-shadow: 0 0 0 4px #000, 0 0 0 6px #2cdce6;
}
.tota11y-accordion > li:has(.content:target) > a:before,
.tota11y-accordion > li:has(.content:focus-within) > a:before {
    transform: rotate(180deg);
}

.tota11y-accordion > li > a:before {
    content: "";
    opacity: 0.6;
    background-image: url("https://assets.codepen.io/7212043/rounded-arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 1.8rem;
    right: 1.5rem;
    transform: rotate(0deg);
    transform-origin: 1rem 50%;
    transition: 0.25s transform ease;
}

.tota11y-accordion > li .content {
    border-top: none;
    margin: 0 1rem;
    padding: 0 0.5rem;
    border-top: none;
    color: #a9abb3;
    visibility: hidden;
    display: grid;
    overflow: hidden;
    transition: margin var(--ta11y-open-duration) linear,
        padding var(--ta11y-open-duration) linear;
    max-height: 200px;
}
.tota11y-accordion > li .content::-webkit-scrollbar {
    width: 14px;
}
.tota11y-accordion > li .content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.tota11y-accordion > li .content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
}
@keyframes show-scroll {
    0% {
        overflow-y: hidden;
    }
    0.2% {
        overflow-y: auto;
    }
    to {
        overflow-y: auto;
    }
}
.tota11y-accordion > li .content:focus {
    outline: none;
}
.tota11y-accordion > li:has(.content:target),
.tota11y-accordion > li:has(.content:focus-within) {
    grid-template-rows: min-content 1fr;
}
.tota11y-accordion > li:has(.content:target) .content,
.tota11y-accordion > li:has(.content:focus-within) .content {
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll; 
    overflow-y: auto;
    
}

@media (prefers-reduced-motion) {
    :root {
        --ta11y-open-duration: 0s;
    }
    .tota11y-accordion > li:has(.content:target) .content,
    .tota11y-accordion > li:has(.content:focus-within) .content {
        overflow-y: auto;
    }
    .tota11y-accordion > li > a:before {
        transition: none;   
    }
}

label{
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

#tota11y-open-close{
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
    accent-color: #555;
}

#tota11y-open-close:checked ~ ul>li{
    grid-template-rows: min-content 1fr;
}

#tota11y-open-close:checked ~ ul>li>.content{
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll;
}

/* we can open all of the accordion items easily with the @media print media query if we wish */
@media print {
    .tota11y-accordion > li {
        grid-template-rows: min-content 1fr;
    }
    .tota11y-accordion > li .content {
        visibility: visible;
        margin: 0.5rem 1rem 2rem 1rem;
        padding: 0.5rem;
        max-height: none;
    }
    /* ideally we would also remove all of the bg-color etc. to save ink, but that is specific to this colour scheme and so not relevant in the demo */
}

20

All

Pure CSS Accordion hover

By: pixeldev

Pure CSS Hexagonal Border with Glow Hover effect

By: pixeldev

Hexagon Wall – Pure CSS

By: pixeldev

3d Animated carousel Pure CSS

By: pixeldev

Responsive Carousel – Pure CSS

By: pixeldev

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

html lists like tables

By: pixeldev

Pure CSS Pricing Table

By: pixeldev

Waves animation Pure CSS

By: pixeldev

Pure CSS with no arrows

By: pixeldev

Animated Pure CSS accordion

By: pixeldev