The Power of Pure CSS - No JavaScript Needed

<div class="wrapper">
	<header>
		<h2>Menu</h2>
	</header>
		<div class="navigationDesktop">
			<nav>
				<ul>
					<li><a href="#">Programming</a>
				<ul>
					<li><a href="#">C++</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">Java</a></li>
               <li><a href="#">Web Development</a>
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Ruby</a></li>
				</ul>
               </li>
					<li><a href="#">Python</a></li>
				</ul>
               </li>
               <li><a href="#">OS</a>
				<ul>
					<li><a href="#">Windows</a></li>
					<li><a href="#">Macintosh</a></li>
					<li><a href="#">Linux</a></li>
				</ul>
               </li>
               <li><a href="#">Projects</a>
 				<ul>
					<li><a href="#">Android</a></li>
					<li><a href="#">iOS</a></li>
					<li><a href="#">Web</a></li>
					<li><a href="#">Windows</a></li>
				</ul>
               </li>
               <li><a href="about.html">About</a></li>
            </ul>
         </nav>
      </div>
   </div>
<footer>
      Menu CSS © 2024
</footer>

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

.wrapper{
  min-height: calc(100vh - 70px);
  width:100%;
position: relative;
}
html{
	height: 100%;
}
body{
	height:100%;
	background:#ddd;
}

h2{
	padding:40px;
	background:#112233;
	color:#f0f1f5;
	font-family: big john;
	text-align: center;
	font-size:30pt;
	letter-spacing: 15px;
}

.navigationDesktop{
	background:#fc575e;
}

nav {
	height:40px;
	width:560px; 
	margin:0 auto;
	text-align: center;
	text-transform: uppercase;
}

nav a{
	display:block;
	text-decoration: none;
	font-family: monospace;
	font-weight: bold;
	font-size:13pt;
	color:#112233;
}

nav a:hover{
	background:#223433;
	color:#f0f1f5;
}

nav ul{
	list-style: none;
}

nav ul li{
	float:left;
	width:140px;
	height:40px;
	line-height: 40px;
	background:#fc575e;
}

nav ul ul li{
position: relative;
	display:none;
}

nav ul ul ul{
	display:none;
}

nav ul li:hover ul li{
	display: block;
   animation: navmenu 600ms forwards;
}

@keyframes navmenu{
	0%{
		opacity:0; 
		top:-10px;
	}
	100%{
		opacity:0.9;
		top:0px;
	}
}

nav ul ul li:hover ul{
	display:block;
	position:absolute;
	width:140px;
	left:140px;
	top:0px;
}

article{
	padding:10px;
	font-family: arial;
}

footer{
height: 70px;
	border-top:2px solid #fc575e;
	padding:20px;
	width: 100%;
	text-align: center;
	background:#112233;
	color:#fff;
	font-family: sans-serif;
	font-weight: bold;
	font-size:11pt;
	text-transform: uppercase;
}

64

Navigation Menu with Footer Menu

By: pixeldev

64

Button hover with card

By: pixeldev

<div class="first hero">
  <img class="hero-profile-img" src="https://res.cloudinary.com/dgohpzc2f/image/upload/f_auto,q_auto/Leona_0_fc3odg.jpg" alt="">
  <div class="hero-description-bk"></div>
  <div class="hero-logo">
    <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt="">
  </div>
  <div class="hero-description">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="hero-date">
    <p>20.02.2019</p>
  </div>
  <div class="hero-btn">
    <a href="#">Learn More</a>
  </div>
</div>

<div class="second hero">
  <img class="hero-profile-img" src="https://i.pinimg.com/originals/9f/b1/ff/9fb1ffb05dd28039d1a06ad8e90cbd75.jpg" alt="">
  <div class="hero-description-bk"></div>
  <div class="hero-logo">
    <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt="">
  </div>
  <div class="hero-description">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="hero-date">
    <p>20.02.2019</p>
  </div>
  <div class="hero-btn">
    <a href="#">Learn More</a>
  </div>
</div>

/* BEGIN CARD DESIGN */
.hero {
  display: inline-block;
  position: relative;
  width: 400px;
  min-width: 400px;
  height: 400px;
  border-radius: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
  margin: 30px;
}

.hero-profile-img {
  height: 70%;
}

.hero-description-bk {
  background-image: linear-gradient(0deg , #3f5efb, #fc466b);
  border-radius: 30px;
  position: absolute;
  top: 55%;
  left: -5px;
  height: 65%;
  width: 108%;
  transform: skew(19deg, -9deg);
}

.second .hero-description-bk {
  background-image: linear-gradient(-20deg , #bb7413, #e7d25c)
}

.hero-logo {
  height: 80px;
  width: 80px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  bottom: 30%;
  left: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
}

.hero-logo img {
  height: 100%;
}

.hero-description {
  position: absolute;
  color: #fff;
  font-weight: 900;
  left: 150px;
  bottom: 26%;
}

.hero-btn {
  position: absolute;
  color: #fff;
  right: 30px;
  bottom: 10%;
  padding: 10px 20px;
  border: 1px solid #fff;
}

.hero-btn a {
  color: #fff;
}

.hero-date {
  position: absolute;
  color: #fff;
  left: 30px;
  bottom: 10%;
}
/* END CARD DESIGN */

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  background-color: #eee;
  min-height: 100vh;
}
.btn i:before {
  width: 14px;
  height: 14px;
  position: fixed;
  color: #fff;
  background: #0077B5;
  padding: 10px;
  border-radius: 50%;
  top:5px;
  right:5px;
}

64

Modern css cards design

By: pixeldev

body{
  background:#133;
}
.container{
  width:200px;
  height:200px;
  margin:10px auto;
  background:;
}
#flame-1{
  height:95px;
  width:95px;
  background:#ff7200;
  position:relative;
  top:52px;
  left:2px;
  margin:30px 70px;
  border-radius:0% 50% 70% 50%;
  transform:rotateZ(45deg) scale(1.1);
  filter: drop-shadow(0 0 10px #d43322);
  animation:scale-alternate 2s ease-in-out infinite;
}
#flame-2{
  height:75px;
  width:75px;
  background:#ef5a00;
  position:relative;
  top:162px;
  left:-20px; 
  margin:30px 70px;
  border-radius:0% 40% 60% 40%;
  transform:scaleX(0.8) rotatez(45deg);
  filter: drop-shadow(0 0 10px #d43322);
  animation: scale-up 2s ease-in-out infinite;
}

#flame-3{
  height:75px;
  width:75px;
  background:#ef5a00;
  position:relative;
  top:-60px;
  left:50px; 
  margin:30px 70px;
  border-radius:0% 40% 60% 40%;
  transform:scaleX(0.8) rotatez(45deg);
  filter: drop-shadow(0 0 10px #d43322);
  animation: scale-up-3 3s ease-in-out infinite;
}
.wood{
  width:20px;
  height:120px;
  background:#563111;
  border-radius:5px;
  }
#wood-1{
  transform:rotate(72deg);
  position:relative;
  top:-220px;
  left:117px;
}

#wood-2{
  transform:rotate(106deg);
  position:relative;
  top:-340px;
  left:115px;
}
.small-element{
  height:20px;
  width:20px;
  border-radius:50%;
  background: #ef5a00;  
  position:relative;
  top:-130px;
  left:110px;
    
}
#small-element-1{
    
  animation: particle-up 3.5s ease-in-out infinite;
  
}
#small-element-2{
    
  animation: particle-up 3s ease-in-out infinite;
  
}

.fire-bottom .main-fire {
  position: relative;
  top: -190px;
  left: 90px;
  width: 55px;
  height: 55px;
  background-color: #ff7800;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 100% 40%;
  filter: blur(8px);
  animation: glow 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;

}
@keyframes glow{
  0%,100%{
    
    background:#ef5a00;
  }
  50%{
    background:#ff7800;

}
  
}

@keyframes scale-up-3{
  0%,100%{
    transform:scale(1.1) rotatez(45deg);
       
  }
  40%,90%{
    transform:scale(0.96) rotatez(45deg);
  }
  30%,75%{
    transform:scale(0.90) rotatez(45deg);
  }
  
  
}

@keyframes scale-up{
  0%,100%{
    transform:scale(1) rotatez(45deg);
       
  }
  40%,90%{
    transform:scale(0.96) rotatez(45deg);
  }
  30%,75%{
    transform:scale(0.90) rotatez(45deg);
  }
  
  
}

@keyframes scale-alternate{
   0%,100%{
    transform:scale(1.1) rotatez(45deg);
       
  }
  30%,90%{
    transform:scale(0.90) rotatez(45deg);
  }
   45%,60%{
    transform:scale(0.96) rotatez(45deg);
  }
  50%,75%{
    transform:scale(0.97) rotatez(45deg);
  }
  
  
}
@keyframes particle-up{
  0%{
    top:-130px;
    left:110px;
  }
  100%{
    position:relative;
    opacity:0.8;
    top:-270px;
     left:145px;
    transform:scale(0.1);
    
  }
  
  
}

64

Fire Animation

By: pixeldev

<!-- Inspired by: https://try.alexa.com/marketing-stack/seo-tools/ and https://stratus.hr/

With help from https://24ways.org/2010/intro-to-css-3d-transforms/-->

<div class="container">
  <div class="row flip-boxes">
    <div class="col-md-3 col-sm-4 col-8 flip-box">
      <div class="front">
        <div class="content text-center">
          First<br>
          <span class="click-for-more">
          </span>
        </div>
      </div>
      <div class="back">
        <div class="content">
          First Back
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-6 flip-box">
      <div class="front" style="background-image: url(https://thumbs.dreamstime.com/b/countryside-landscape-hillside-beautiful-scenic-view-river-rural-fields-summer-season-89540702.jpg)">
        <div class="content">
          Second
        </div>
      </div>
      <div class="back">
        <div class="content">
          Second Back
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-6 flip-box">
      <div class="front" style="background-image: url(https://llandscapes-ee1.kxcdn.com/wp-content/uploads/2017/09/33945202050_48027b6b38_z.jpg)">
        <div class="content">
          Third
        </div>
      </div>
      <div class="back">
        <div class="content">
          Third Back
        </div>
      </div>
    </div>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.flip-boxes {
  justify-content: center;
}

.flip-box {
  display: flex;
  align-content: stretch;
  min-height: 145px;
  flex-wrap: wrap;
  position: relative;
  border: 10px solid transparent;
  padding: 0;
  border-top: 0;
  perspective: 1000px;
}

.flip-box:hover .back {
  transform: rotateY(0deg);
  z-index: 10;
}

.flip-box:hover .front {
  transform: rotateY(180deg);
  z-index: -1;
}

.flip-box .back,
.flip-box .front {
  position: relative;
  background-color: #1b2d61;
  color: white;
  display: flex;
  justify-content: center;
  align-content: center;
  flex: 0 0 100%;
  transition: all 1s cubic-bezier(0.5, 1.3, 0.5, 1.3);
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
}

.flip-box .back {
  background-color: #cecece;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
  transform: rotateY(-180deg);
}

.flip-box .back::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border: 15px solid transparent;
  border-bottom-color: white;
  border-left-color: white;
}

.flip-box .front {
  z-index: 10;
}

.flip-box .front .content {
  font-size: 2rem;
}

.flip-box .front::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border: 15px solid #cecece;
  border-bottom-color: white;
  border-right-color: white;
}

.flip-box .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateZ(50px);
  text-shadow: 0px 0px 2px black;
}

63

3D Flip Cards Pure CSS and HTML

By: pixeldev

63

Pure CSS Card Flip

By: pixeldev

*{
	margin: 0; padding: 0;
	list-style-type: none;
}

body{
  background:#dae;
}

#container{
	width: 1200px;
	margin: 20px auto;
}

#myContent{
	-moz-column-count: 6;
	-moz-column-gap: 0px;
	-webkit-column-count: 6;
	-webkit-column-gap: 0px;
	column-count: 6;
	column-gap: 0px;
	width: 1200px;
}

#myContent li{
	display: inline-block;
	margin-bottom: 0px;
	width: 100%;
	margin-top: 0px;
}

#item{
    padding:10px;
    border:solid 4px transparent;
    background:#eee;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}
#item div{
    background:#cef;
    height:50px;
    width:100%;
}

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#myContent{
		-moz-column-count: 5;
		-moz-column-gap: 0px;
		-webkit-column-count: 5;
		-webkit-column-gap: 0px;
		column-count: 5;
		column-gap: 0px;
		width: 1000px;
	}
	
	#container{
		width: 1000px;
	}
}

@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#myContent{
		-moz-column-count: 4;
		-moz-column-gap: 0px;
		-webkit-column-count: 4;
		-webkit-column-gap: 0px;
		column-count: 4;
		column-gap: 0px;
		width: 800px;
	}
	
	#container{
		width: 800px;
	}
}

@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#myContent{
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 34;
		column-gap: 0px;
		width: 600px;
	}
	
	#container{
		width: 600px;
	}
}

@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#myContent{
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
		width: 400px;
	}
	
	#container {
		width: 400px;
	}
}

@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
	#myContent {
		-moz-column-count: 1;
		-moz-column-gap: 0px;
		-webkit-column-count: 1;
		-webkit-column-gap: 0px;
		column-count: 1;
		column-gap: 0px;
		width: 200px;
	}
	
	#container {
		width: 200px;
	}
}

63

Pure CSS Layouts Examples

By: pixeldev

body
{
  background-color:#f2f2f2;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5
{
  margin:0px;
  font-size:1.4em;
  font-weight:700;
}

p
{
  font-size:12px;
}

.center
{
  height:100vh;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End Non-Essential  */

.property-card
{
  height:18em;
  width:14em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  position:relative;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
  -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image
{
  height:6em;
  width:14em;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
  background-size:cover;
  background-repeat:no-repeat;
}

/* Bottom Card Section */

.property-description
{
  background-color: #FAFAFC;
  height:12em;
  width:14em;
  position:absolute;
  bottom:0em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align:center;
}

/* Social Icons */

.property-social-icons
{
  width:1em;
  height:1em;
  background-color:black;
  position:absolute;
  bottom:1em;
  left:1em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Property Cards Hover States */

.property-card:hover .property-description
{
  height:0em;
  padding:0px 1em;
}
.property-card:hover .property-image
{
  height:18em;
}

.property-card:hover .property-social-icons
{
  background-color:white;
}

.property-card:hover .property-social-icons:hover
{
  background-color:blue;
  cursor:pointer;
}

/* Optional

.property-image-title
{
text-align:center;
position:Relative;
top:30%;
opacity:0;
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
color:black;
font-size:1.2em;
}

.property-card:hover .property-image-title
{
opacity:1;
}

*/

62

Pure CSS Card w/ Social Icons

By: pixeldev

62

Hexagon to Square

By: pixeldev

<h1>Flip Cards Responsive</h1>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card One</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side One</h3>
        <p>Content in card one</p>
        <a href="#">Button 1</a>
      </div>
    </div>
  </div>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card Two</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side Two</h3>
        <p>Content in card two</p>
        <a href="#">Button 2</a>
      </div>
    </div>
  </div>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card Three</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side Three</h3>
        <p>Content in card three</p>
        <a href="#">Button 3</a>
      </div>
    </div>
  </div>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card Four</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side Four</h3>
        <p>Content in card four</p>
        <a href="#">Button 4</a>
      </div>
    </div>
  </div>

</div>

body {
  color: #333;
  font-family: Arial, Helvetica, serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  background: url(https://josetxu.com/img/fondo_blanco.png) repeat 0 0 #fff;
}

h1 {
  background: #333;
  color: #fff;
  text-align: center;
  margin: 0 0 5% 0;
  padding: 0.5em;
  margin: 0 0 5% 0;
}

.cardBox {
  float: left;
  font-size: 1.2em;
  margin: 1% 0 0 1%;
  perspective: 800px;
  transition: all 0.3s ease 0s;
  width: 23.7%;
}

.cardBox:hover .card {
  transform: rotateY( 180deg);
}

.card {
  background: #222;
  cursor: default;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease 0s;
  width: 100%;
  -webkit-animation: giro 1s 1;
  animation: giro 1s 1;
}

.card p {
  margin-bottom: 1.8em;
}

.card .front,
.card .back {
  backface-visibility: hidden;
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: 1.2em;
  height: 100%;
  padding: 0.8em;
  position: absolute;
  text-align: center;
  width: 100%;
}

.card .front strong {
  background: #fff;
  border-radius: 100%;
  color: #222;
  font-size: 1.5em;
  line-height: 30px;
  padding: 0 7px 4px 6px;
}

.card .back {
  transform: rotateY( 180deg);
}

.card .back a {
  padding: 0.3em 0.5em;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 1px;
  font-size: 0.9em;
  transition: all 0.2s ease 0s;
}

.card .back a:hover {
  background: #fff;
  color: #333;
  text-shadow: 0 0 1px #333;
}

.cardBox:nth-child(1) .card .back {
  background: cornflowerblue;
}

.cardBox:nth-child(2) .card .back {
  background: orange;
}

.cardBox:nth-child(3) .card .back {
  background: yellowgreen;
}

.cardBox:nth-child(4) .card .back {
  background: tomato;
}

.cardBox:nth-child(2) .card {
  -webkit-animation: giro 1.5s 1;
  animation: giro 1.5s 1;
}

.cardBox:nth-child(3) .card {
  -webkit-animation: giro 2s 1;
  animation: giro 2s 1;
}

.cardBox:nth-child(4) .card {
  -webkit-animation: giro 2.5s 1;
  animation: giro 2.5s 1;
}

@-webkit-keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@media screen and (max-width: 767px) {
  .cardBox {
    margin-left: 2.8%;
    margin-top: 3%;
    width: 46%;
  }
  .card {
    height: 285px;
  }
  .cardBox:last-child {
    margin-bottom: 3%;
  }
}

@media screen and (max-width: 480px) {
  .cardBox {
    width: 94.5%;
  }
  .card {
    height: 260px;
  }
}

62

Flip Cards Responsive – Pure CSS

By: pixeldev

All

Navigation Menu with Footer Menu

By: pixeldev

Button hover with card

By: pixeldev

Modern css cards design

By: pixeldev

Fire Animation

By: pixeldev

3D Flip Cards Pure CSS and HTML

By: pixeldev

Pure CSS Card Flip

By: pixeldev

Pure CSS Layouts Examples

By: pixeldev

Pure CSS Card w/ Social Icons

By: pixeldev

Hexagon to Square

By: pixeldev

Flip Cards Responsive – Pure CSS

By: pixeldev

Pure CSS using Flexbox CSS Gallery

By: pixeldev

Button – Shadow Pulse Animation

By: pixeldev