CSS Code Only

<title>Tarot Carousel</title>

body{
  background-color: black;
}
.banner{
    width: 100%;
    height: 140vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.banner .slider{
    position: absolute;
    width: 200px;
    height: 340px;
    top: 10%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 20s linear infinite;
    z-index: 2;
}
@keyframes autoRun{
    from{
        transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
    }to{
        transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
    }
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(550px);
}
.banner .slider .item img{
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    .banner .slider{
        width: 160px;
        height: 200px;
        left: calc(50% - 80px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(300px);
    }

}
@media screen and (max-width: 767px) {
    .banner .slider{
        width: 100px;
        height: 150px;
        left: calc(50% - 50px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(180px);
    }
}

13

@3D Card Carousel Pure CSS

By: pixeldev

<h1>HTML Version of <a href="https://psd.tutsplus.com/tutorials/interface-tutorials/clean-and-modern-pricing-table/#disqus_thread">Design a Clean and Modern Pricing Table in Photoshop</a></h1>

<div class="priceTable">
	<div class="table large">
		<h1>Business Hosting</h1>
		<h2><sup>$</sup>24.99</h2>
		<h3>per month (billed annually)</h3>
		<div class="circle"></div>
		
		<ul>
		<li>500GB Space</li>
		<li>50GB Bandwidth</li>
		<li>100 Subdomains</li>
		<li>25 Emails</li>
		<li>100 MySQL</li>
		<li>100$ Google Account</li>
		<li>24 Hour Support</li>
		<li class="noborder">Free Facebook Access</li>
		<li class="action"><a href="#null">Sign Up</a></li>
		</ul>
	</div>
	
	<div class="table left">
		<h1>Shared Hosting</h1>
		<h2><sup>$</sup>14.99</h2>
		<h3>per month (billed annually)</h3>
		<div class="circle"></div>

<ul>
		<li>200GB Space</li>
		<li>20GB Bandwidth</li>
		<li>50 Subdomains</li>
		<li>10 Emails</li>
		<li>50 MySQL</li>
		<li class="noborder">50$ Google Account</li>
		<li class="action"><a href="#null">Sign Up</a></li>
		</ul>

</div>

<div class="table right">
		<h1>Total Hosting</h1>
		<h2><sup>$</sup>34.99</h2>
		<h3>per month (billed annually)</h3>
		<div class="circle"></div>

<ul>
		<li>1000GB Space</li>
		<li>100GB Bandwidth</li>
		<li>150 Subdomains</li>
		<li>50 Emails</li>
		<li>150 MySQL</li>
		<li class="noborder">150$ Google Account</li>
		<li class="action"><a href="#null">Sign Up</a></li>
		</ul>
		
	</div>		
</div>

body { background: #ddd; font: 12px Helvetica, Arial, sans-serif; color: #000; }
	.noborder { border: none !important; }

body > h1 { text-align: center; padding: 25px 0 10px 0; margin: 0; }
	body > h4 { text-align: center; padding: 0 0 25px 0; margin: 0; }

/* Basic Table Layout
	\* *********************************************************** */
	
	.priceTable { width: 960px; margin: 0 auto; }
	.priceTable .table { 
		width: 320px; 
		margin: 58px 0;
		-webkit-border-radius: 8px;
				border-radius: 8px;
		background: #fff;
		-webkit-box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25);
				box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25);
	}

.priceTable .table h1 {
		background: #9ddfc4;
		font-size: 21px;
		font-weight: bold;
		text-align: center;
		padding: 18px 0; 
		margin: 0;
		border: 1px solid #97ceb7;
	
		text-shadow: 1px 2px 4px rgba(255,255,255,0.5);
		filter: dropshadow(color=rgba(255,255,255,0.5), offx=1, offy=2);
		
		-webkit-box-shadow: inset 1px 1px 3px 1px rgba(186,240,217, 100);
			    box-shadow: inset 1px 1px 3px 1px rgba(186,240,217, 100);
	}

.priceTable .table h2, .priceTable .table h3 {
		margin: 0;
		text-align: center;
		text-shadow: 1px 2px 4px rgba(255,255,255,0.9);
		filter: dropshadow(color=rgba(255,255,255,0.9), offx=1, offy=2);
		background: #e2faed;
		border: 1px solid #97ceb7;
		border-top: none;
	}
	
	.priceTable .table h2 {	padding: 10px 0 0 0; font-size: 52px; border-bottom: none; }
	.priceTable .table h3 {
		color: #6b6b6b;
		padding: 2px 0 12px 0;
		font-size: 12px;
		font-weight: normal;
	}
	
	.priceTable .table sup { font-weight: normal; font-size: 21px }
	
	.priceTable .circle { 
		margin: -8px 140px;
		height: 20px;
    	width: 40px;
		position: absolute;

-webkit-border-radius: 0 0 40px 40px;
		     	border-radius: 0 0 40px 40px;

background: #e2faed;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#e2faed), color-stop(100%,#b7c9bd));
		background: -webkit-linear-gradient(top, #e2faed 52%,#b7c9bd 100%);
		   background: -moz-linear-gradient(top, #e2faed 52%, #b7c9bd 100%);
		    background: -ms-linear-gradient(top, #e2faed 52%,#b7c9bd 100%);
		     background: -o-linear-gradient(top, #e2faed 52%,#b7c9bd 100%);
		     	background: linear-gradient(to bottom, #e2faed 52%,#b7c9bd 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2faed', endColorstr='#b7c9bd',GradientType=0 );
     	border-bottom: 1px solid #97ceb7; 
	}
	
	.priceTable ul {
		list-style: none;
		margin: 0;
		padding: 0;
		background: #ffffff;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
		background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
	       background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
			background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
			 background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
			    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
		
		text-align: center;
		font-size: 15px;
		color: #44494c;
		border: 1px solid #97ceb7;
		border-top: none;
	}
	
	.priceTable ul li {
		padding: 12px; 
		margin: 0 20px;
		border-bottom: 1px dotted #ccc; 
	}
	
	.priceTable ul li:first-child { padding-top: 23px; }
	.priceTable ul li.action { border: none; padding-bottom: 20px; }
	
	.priceTable .action a {
		display: inline-block;
		width: 80%;
		padding: 10px;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
		text-align: center;
		
		background: #bccddd;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bccddd), color-stop(100%,#7f8f9e));
		background: -webkit-linear-gradient(top, #bccddd 0%,#7f8f9e 100%);
		   background: -moz-linear-gradient(top, #bccddd 0%, #7f8f9e 100%);
			 background: -ms-linear-gradient(top, #bccddd 0%,#7f8f9e 100%);
			  background: -o-linear-gradient(top, #bccddd 0%,#7f8f9e 100%);
				 background: linear-gradient(to bottom, #bccddd 0%,#7f8f9e 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bccddd', endColorstr='#7f8f9e',GradientType=0 );

-webkit-border-radius: 8px;
				border-radius: 8px;	
		-webkit-box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.1);
				box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.1);
		text-shadow: 1px 2px 4px rgba(255,255,255,0.5);
		filter: dropshadow(color=rgba(255,255,255,0.5), offx=1, offy=2);
		-webkit-box-shadow: inset 1px 1px 3px 1px rgba(255,255,255,0.2);
			    box-shadow: inset 1px 1px 3px 1px rgba(255,255,255,0.2);

color: #000;
		border: 1px solid #7f8899;	
	}
	
	/* 'Large' Table Modifiers
	\* *********************************************************** */
	.priceTable .table.large { 
		position: absolute;
		width: 340px; 
		margin: 0 310px; 
		border-color: #d77b66; 
	}

.priceTable .table.large h1 {
		-webkit-border-radius: 8px 8px 0px 0px;
		 		border-radius: 8px 8px 0px 0px;
		color: #fff;
		text-shadow: 1px 2px 4px rgba(215,123,102,0.9);
		filter: dropshadow(color=rgba(215,123,102,0.9), offx=1, offy=2);
		background: #fca78a;
		-webkit-box-shadow: inset 1px 1px 3px 1px rgba(253,200,166,100);
			    box-shadow: inset 1px 1px 3px 1px rgba(253,200,166,100);

border-color: #b7b761;
		border-bottom: 1px solid #d77b66;
	}
	
	.priceTable .table.large h2 { padding-top: 20px; }
	.priceTable .table.large h3 { padding-bottom: 20px; }
	.priceTable .table.large h2, .priceTable .table.large h3 { background: #f2f5c0; border-color: #b7b761; } 
	.priceTable .table.large ul { 
		background: #f6e5b1;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e5b1), color-stop(100%,#e8d7a3));
		background: -webkit-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%);
	       background: -moz-linear-gradient(top, #f6e5b1 0%, #e8d7a3 100%);
			background: -ms-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%);
			 background: -o-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%);
			    background: linear-gradient(to bottom, #f6e5b1 0%,#e8d7a3 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e5b1', endColorstr='#e8d7a3',GradientType=0 );
		border-color: #b8b669; 
		-webkit-border-radius: 0 0 8px 8px; 
				border-radius: 0 0 8px 8px; 
	} 	
	
	.priceTable .table.large li { border-color: #b7b761; }
	
	.priceTable .table.large .action a {
		background: #eba281;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eba281), color-stop(100%,#aa6343));
		background: -webkit-linear-gradient(top, #eba281 0%,#aa6343 100%);
		   background: -moz-linear-gradient(top, #eba281 0%, #aa6343 100%);
			 background: -ms-linear-gradient(top, #eba281 0%,#aa6343 100%);
			  background: -o-linear-gradient(top, #eba281 0%,#aa6343 100%);
				 background: linear-gradient(to bottom, #eba281 0%,#aa6343 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eba281', endColorstr='#aa6343',GradientType=0 );
		border-color: #d5714d;
		color: #fff;
		text-shadow: 1px 2px 4px rgba(0,0,0,0.2);
		filter: dropshadow(color=rgba(0,0,0,0.52), offx=1, offy=2);
	}

.priceTable .large .circle { 
		margin-left: 150px;
		background: #f2f5c0;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#f2f5c0), color-stop(100%,#c5c7a2));
		background: -webkit-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%);
		   background: -moz-linear-gradient(top, #f2f5c0 52%, #c5c7a2 100%);
		    background: -ms-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%);
		     background: -o-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%);
		        background: linear-gradient(to bottom, #f2f5c0 52%,#c5c7a2 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5c0', endColorstr='#c5c7a2',GradientType=0 );
		border-bottom-color: #b7b761; 
	}

/* 'Left' and 'Right Table Modifiers
	\* *********************************************************** */
	.priceTable .table.left { float: left; -webkit-border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px; }
	.priceTable .table.left h2, .priceTable .table.left h3 { border-right: none; } 
	.priceTable .table.left h1 {
		-webkit-border-radius: 8px 0px 0px 0px;
		 		border-radius: 8px 0px 0px 0px;
		 border-right: none; 
	}

.priceTable .table.left ul { border-color: #b8b669; -webkit-border-radius: 0 0 0 8px; border-radius: 0 0 0 8px; }

.priceTable .table.right { float: right; -webkit-border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px; }
	.priceTable .table.right h2, .priceTable .table.right h3 { border-left: none; } 
	.priceTable .table.right h1 {
		-webkit-border-radius: 0px 8px 0px 0px;
			    border-radius: 0px 8px 0px 0px;
		border-left: none; 
	}
	.priceTable .table.right ul { border-color: #b8b669; -webkit-border-radius: 0 0 8px 0; border-radius: 0 0 8px 0; }

13

HTML Version of ‘Design a Clean and Modern Pricing Table in Photoshop’

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;
    }
}

13

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;
}

13

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

13

Pure css close button animation

By: pixeldev

<div class="cat-container">
  <div class="cat-size cat-one">
    <a class="b" href="https://lenadesign.org/html/" target="_blank">
    <div class="center">
        <h1 class="title-html">HTML</h1></a>
    <p class="textHTML">HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
      <a class="a" href="https://lenadesign.org/html/" target="_blank"><p class="learnHTML">LEARN HTML></p></a>
    </div>
    </div>
  
    <div class="cat-size cat-two">
      <div class="center">
        <a class="b" href="https://lenadesign.org/css/" target="_black">
          <h1 class="title-css">CSS</h1></a>
      <p class="textCSS">CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p>
        <a class="a" href="https://lenadesign.org/css/" target="_black">
          <p class="learnCSS">LEARN CSS></p></a>
      </div>
    </div>
    <div class="cat-size cat-three">
      <div class="center">
        <a class="b" href="https://lenadesign.org/javascript/" target="_blank">
          <h1 class="title-js">JavaScript</h1></a>
      <p class="textJS">JavaScript is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.</p>
        <a class="a" href="https://lenadesign.org/javascript/" target="_blank">
          <p class="learnJS">LEARN JavaScript></p></a>
      </div>
    </div>
    <div class="cat-size cat-four">
      <div class="center">
        <a class="b" href="https://lenadesign.org/jquery/" target="_blank">
          <h1 class="title-jQ">jQuery</h1></a>
      <p class="textJQ">jQuery is a JavaScript library created to simplify and make it easier to write JavaScript and HTML.</p>
        <a class="a" href="https://lenadesign.org/jquery/" target="_blank">
          <p class="learnJQ">LEARN jQuery></p></a>
      </div>
    </div>
    <div class="cat-size cat-five">
      <div class="center">
        <a class="b" href="https://lenadesign.org/svg-4/" target="_blank">
          <h1 class="title-svg">SVG</h1></a>
      <p class="textSVG">SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.</p>
        <a class="a" href="https://lenadesign.org/svg-4/" target="_blank">
          <p class="learnSVG">LEARN SVG></p></a>
      </div>
    </div>
    <div class="cat-size cat-six">
      <div class="center">
         <a class="b" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
           <h1 class="title-a">Animations</h1></a>
      <p class="textA">Learn how to create amazing animations using HTML, CSS and JavaScript!</p>
        <a class="a" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
          <p class="learnA">Animations></p></a>
      </div>
    </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');

body {
  margin:0;
  padding:0;
}

.cat-container {
	position: relative;
	height: 100vh;
	width: 100%;
  display: -webkit-flex;
	display: flex;
  font-family: 'Fira Sans', sans-serif;
	overflow: hidden;
  color: white;
}

@media screen and (max-width: 768px) {
  .cat-container {flex-direction: column;}
}

@media screen and (max-width: 480px) {
  .cat-container {flex-direction: column;}
}

.cat-size {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content:center;
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
}

.cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six {
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;
	-moz-transition: flex-grow .3s;
	-ms-transition: flex-grow .3s;
	-o-transition: flex-grow .3s;
  width:100%;
  height: 100vh;
}

.cat-one {
  background-color: #56ab91;
}

.cat-two {
  background-color: #469d89;
}

.cat-three {
  background-color: #4358f80;
}

.cat-three {
  background-color: #358f80;
}

.cat-four {
  background-color: #248277;
}

.cat-five {
  background-color: #14746f;
}

.cat-six {
  background-color: #036666;
}

.cat-one:hover {
  flex-grow: 3;
}

.cat-two:hover {
  flex-grow: 3;
}

.cat-three:hover {
  flex-grow: 3;
}

.cat-four:hover {
  flex-grow: 3;
}

.cat-five:hover {
  flex-grow: 3;
}

.cat-six:hover {
  flex-grow: 3;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 2;
  text-align: center;
  width:100%;
  height: 100vh;

}

.title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {
  writing-mode: vertical-rl; 
  margin: 30px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.cat-one:hover .title-html {
  writing-mode: horizontal-tb; 
}

.cat-two:hover .title-css {
  writing-mode: horizontal-tb; 
}

.cat-three:hover .title-js {
  writing-mode: horizontal-tb; 
}

.cat-four:hover .title-jQ {
  writing-mode: horizontal-tb; 
}

.cat-five:hover .title-svg {
  writing-mode: horizontal-tb; 
}

.cat-six:hover .title-a {
  writing-mode: horizontal-tb; 
}

@media screen and (max-width: 768px) {
  .title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {writing-mode: horizontal-tb !important; 
  }
  .textHTML, .learnHTML, .textCSS, .learnCSS, .textJS, .learnJS, .learnJQ, .textJQ, .learnA, .textA, .learnSVG, .textSVG {
    display: none !important;
  }
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA, .learnHTML, .learnCSS, .learnJS, .learnJQ, .learnSVG, .learnA {
  display: none;
}

.cat-one:hover .textHTML {
 display: block;
 animation: up .5s ease forwards;
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA {
  width:50%;
  border: 3px solid white;
  border-radius:20px;
  padding:20px;
}

.cat-one:hover .learnHTML {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .learnCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .learnJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .textJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .textCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .textJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .learnJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .learnSVG {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .learnA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .textA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .textSVG {
 display: block;
 animation: up .5s ease forwards;
}

@keyframes up {
  0% {opacity:0; transform: translateY(50px);}
  50% {opacity:0; transform: translateY(50px);}
  100% {{opacity:1; transform: translateY(0px);}}
}

.a {
  text-decoration: underline;
  color: white;
}

.b {
  text-decoration: none;
  color: white;
}

13

Pure CSS Responsive Navigation Menu (sliding effect)

By: pixeldev

13

Table fixed first column, pure css

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;
}

13

Pure CSS Pricing Table

By: pixeldev

<main>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Paleo_food.jpg">
      <h3>1) All of These Headlines Are Not Exactly The Same</h3>
      <p>In the real world, you don't know how long the content will be. Writers will write what they need. Photos will be cropped to the shape that they should be. That's good. Make a system that allows this. You want it to be flexible and robust.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Indian_bengali_food.jpg">
      <h3>2) Some Are Short</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Food_in_Miyajima.jpg">
      <h3>3) Some Headlines Can Sometimes Be Quite Long, Because It Takes Time to Make A Point</h3>
      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P1-Food_with_love.jpg">
      <h3>4) Also, Why Are We Using Fake Content? Let's Make Some Real-ish Content.</h3>
      <p>By using real content, we can see the variation inherent in what this site might present. And we can design for those real world needs.
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Beautiful_Chaldean_Food_for_Everyone.jpg">
      <h3>5) Look At That</h3>
      <p>Doesn't that look yummy?</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Birds_on_stick_Shanghai_Qibao.jpg">
      <h3>6) See how this layout is broken?</h3>
      <p>That's because floats are really crap at handling layout. We've been using a screwdriver as a hammer. It sort of works, but badly.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Restaurant_food_Kunming_Yunnan.jpg">
      <h3>7) The New CSS Will Fix Things</h3>
      <p>Finally we get some real hammers.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Bunter_Teller.jpg">
      <h3>8) Several Kinds of Hammers</h3>
      <p>Grid, Flexbox, Alignment, Shapes, .</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P3-Egyptian_food_Koshary.jpg">
      <h3>9) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Mexican_food.jpg">
      <h3>10) All of These Headlines</h3>
      <p>Always three lines of text, which fits exactly in the available space. Describing where you will go when you click.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P2-Arepitas_Food_Macro.jpg">
      <h3>11) Are Exactly the Same</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Ravenna_food.jpg">
      <h3>12) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    
  </main>

13

CSS Grid: Columns (Pure CSS Masonry Layout)

By: pixeldev

13

Pure CSS table gadgets

By: pixeldev

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #FFCC00;
}

@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

@keyframes typing {
  from { width: 100%; }
  90%, to { width: 0; }
}

@keyframes slide {
  33.3333% {
    font-size: 3rem;
    letter-spacing: 3px;
  }
  to {
    font-size: 0;
    letter-spacing: 0;
  }
}

.typing-slider {
  font-family: Consolas, monospace;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.typing-slider p {
  position: relative;
  display: inline;
  font-size: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  animation: slide 15s step-start infinite;
}

.typing-slider p::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 3px solid black;
  background-color: #FFCC00;
  animation: typing 5s infinite, cursor 1s infinite;
}

/* Slide 1 (16 characters) */
.typing-slider p:nth-child(1) {
  animation-delay: 0s;
}
.typing-slider p:nth-child(1)::after {
  animation-delay: 0s;
  animation-timing-function: steps(16), step-end;
}

/* Slide 2 (23 characters) */
.typing-slider p:nth-child(2) {
  animation-delay: 5s;
}
.typing-slider p:nth-child(2)::after {
  animation-delay: 5s;
  animation-timing-function: steps(23), step-end;
}

/* Slide 3 (12 characters) */
.typing-slider p:nth-child(3) {
  animation-delay: 10s;
}
.typing-slider p:nth-child(3)::after {
  animation-delay: 10s;
  animation-timing-function: steps(12), step-end;
}

13

Text slider with typing animation in pure CSS

By: pixeldev

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

13