The Power of Pure CSS - No JavaScript Needed

<div id="wrapper">

<div id="SVGWrap">
      <div id="svgA"></div>
      <div id="svgB"></div>
      <div id="svgC"></div>
    </div>

<a id="logo" href="#wrapper">
      <h1>BeeSoft</h1>
    </a>

<div id="intro">

<h1 id="s1">
        <span>
          Making digital
          brand, product
          elegent.
        </span>
      </h1>

<h1 id="s2">
        <span>
          Lorem ipsum dolor sit amet te tur adi.
        </span>
      </h1>

</div>

<nav>
      <span>
        <a href="#s1"></a>
        <a href="#s2"></a>
      </span>
    </nav>

<footer>
      <span id="insta">
        <a href=""></a>
      </span>

<h1 id="copyright">© 2021 BeeSoft</h1>
      <a id="codeby" target="_blank" href="https://icodeayush.github.io/">Code By <span>iCodeAyush</span></a>

</footer>

<div id="Lang">
      <span>
        <a href="#Ru">Ru</a>
        <a href="#En">En</a>
      </span>
    </div>

</div>

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
:root {
  /*-------------Colors------------- */
  --ColorDarkA: rgb(0, 0, 0);
  --ColorWhiteA: rgb(255, 255, 255);
  /*-------------FontSize -- Perfect Fifth (1.500) Base Size 22px------------- */
  --FontH1: 233.25px;
  --FontH2: 144.16px;
  --FontH3: 89.10px;
  --FontH4: 55.07px;
  --FontH5: 34.03px;
  --FontParagraph: 21.03px;
  --FontSubtitle: 13px;
  /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
  --GoldenRatio1: 1920px;
  --GoldenRatio2: 1186.65px;
  --GoldenRatio3: 733.41px;
  --GoldenRatio4: 453.28px;
  --GoldenRatio5: 280.15px;
  --GoldenRatio6: 173.15px;
  --GoldenRatio7: 107.01px;
  --GoldenRatio8: 66.14px;
  --GoldenRatio9: 40.88px;
  --GoldenRatio10: 25.27px;
  --GoldenRatio11: 15.62px;
  --GoldenRatio12: 9.65px;
  --GoldenRatio13: 5.96px;
  /*-------------Animation Timing Function------------- */
  --EaseInPower1: cubic-bezier(0.165, 0.84, 0.44, 1);
  --EaseInPower2: cubic-bezier(0.215, 0.610, 0.355, 1);
  --EaseInPower3: cubic-bezier(0.77, 0, 0.175, 1);
}

::-webkit-scrollbar {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  color: var(--ColorWhiteA);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lexend', sans-serif;
  background: var(--ColorDarkA);
  height: 100vh;
}

#wrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#wrapper #SVGWrap {
  width: 100vw;
  height: 100vh;
  position: absolute;
  overflow: hidden;
}

#wrapper #SVGWrap div {
  position: absolute;
}

#wrapper #SVGWrap #svgA {
  background: url(https://icodeayush.github.io/BeeSoft/svg/s21.svg) no-repeat center;
  top: 55vw;
  left: -40vw;
  height: 60vw;
  width: 60vw;
}

#wrapper #SVGWrap #svgB {
  background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  width: 10vw;
  height: 10vw;
  left: 35vw;
  top: 57vw;
}

#wrapper #SVGWrap #svgC {
  background: url(https://icodeayush.github.io/BeeSoft/svg/so2.svg) no-repeat center;
  width: 70vw;
  height: 60vw;
  top: 52vw;
  right: -30vw;
}

#wrapper #logo {
  position: absolute;
  z-index: 2;
  width: fit-content;
  top: var(--GoldenRatio7);
  right: var(--GoldenRatio7);
  text-decoration: none;
  overflow: hidden;
}

#wrapper #logo h1 {
  font-size: var(--FontH5);
  font-weight: 600;
  color: var(--ColorWhiteA);
  opacity: 0;
}

#wrapper #intro {
  position: absolute;
  width: var(--GoldenRatio1);
  height: 100vh;
  display: flex;
  overflow: scroll;
  scroll-behavior: smooth;
}

#wrapper #intro h1 {
  display: flex;
  align-items: center;
  width: var(--GoldenRatio1);
  height: 100vh;
  flex-shrink: 0;
  cursor: default;
}

#wrapper #intro h1 span {
  font-size: var(--FontH3);
  font-weight: 600;
  width: var(--GoldenRatio3);
  color: var(--ColorWhiteA);
  margin-left: var(--GoldenRatio7);
  opacity: 0;
}

#wrapper nav {
  position: absolute;
  right: var(--GoldenRatio7);
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#wrapper nav span {
  display: flex;
  justify-content: space-between;
  display: block;
}

#wrapper nav span a:nth-child(1) {
  display: block;
  background: url(https://icodeayush.github.io/BeeSoft/svg/ChevronLeft.svg) no-repeat right;
  background-size: contain;
  height: var(--FontH5);
  width: var(--FontH5);
  margin-bottom: var(--GoldenRatio11);
  opacity: 0;
}

#wrapper nav span a:nth-child(2) {
  display: block;
  background: url(https://icodeayush.github.io/BeeSoft/svg/ChevronRight.svg) no-repeat right;
  background-size: contain;
  height: var(--FontH5);
  width: var(--FontH5);
  opacity: 0;
}

#wrapper footer {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: var(--GoldenRatio7);
  width: var(--GoldenRatio1);
  height: var(--FontH4);
}

#wrapper footer #insta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  margin-left: var(--GoldenRatio7);
  border: 2px solid rgb(255, 255, 255);
  opacity: 0;
}

#wrapper footer #insta a {
  display: block;
  width: var(--FontParagraph);
  height: var(--FontParagraph);
  background: url(https://icodeayush.github.io/BeeSoft/svg/Instagram.svg) no-repeat center;
  background-size: contain;
}

#wrapper footer #Behance {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  margin-left: var(--GoldenRatio11);
  border: 2px solid rgb(255, 255, 255);
  opacity: 0;
}

#wrapper footer #Behance a {
  display: block;
  width: var(--FontH5);
  height: var(--FontParagraph);
  background: url(https://icodeayush.github.io/BeeSoft/svg/Behance.svg) no-repeat center;
  background-size: cover;
}

#wrapper footer #copyright, #wrapper footer #codeby {
  font-size: var(--FontParagraph);
  font-weight: 500;
  color: var(--ColorWhiteA);
  margin-left: var(--GoldenRatio9);
  opacity: 0;
}

#wrapper footer #copyright {
  cursor: default;
}

#wrapper footer #codeby {
  text-decoration: none;
  margin-left: var(--GoldenRatio11);
}

#wrapper footer #codeby span {
  font-weight: 600;
  opacity: 0;
}

#wrapper #Lang {
  position: absolute;
  bottom: var(--GoldenRatio7);
  right: var(--GoldenRatio7);
  height: var(--FontH4);
  display: flex;
  align-items: center;
}

#wrapper #Lang span {
  display: flex;
}

#wrapper #Lang span a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  border: 2px solid rgb(255, 255, 255);
  margin-left: var(--GoldenRatio11);
  font-size: var(--FontParagraph);
  font-weight: 500;
  color: var(--ColorWhiteA);
  text-decoration: none;
  opacity: 0;
}

#wrapper #Lang span a:nth-child(2) {
  background: var(--ColorWhiteA);
  color: var(--ColorDarkA);
  opacity: 0;
}

/*-------------Animation Timeline------------- */

body {
  animation: BGAni 4s 0s ease-in-out infinite alternate-reverse;
}

#wrapper {
  animation: BGFadeAni 1.5s 6.1s ease forwards;
  background: black;
}

#wrapper #SVGWrap {
  animation: SVGFadeAni 3.3s 6.3s ease forwards;
  opacity: 0;
}

#wrapper #SVGWrap #svgA {
  animation: svgA 5.7s 4.9s ease-in-out infinite alternate-reverse;
}

#wrapper #SVGWrap #svgB {
  animation: svgB 5.2s 6.1s ease-in-out infinite alternate-reverse;
}

#wrapper #SVGWrap #svgC {
  animation: svgC 5.2s 6.3s ease-in-out infinite alternate-reverse;
}

#wrapper #intro h1 span {
  animation: LoadAniY 3s 1s var(--EaseInPower3) forwards;
}

#wrapper #logo h1 {
  animation: LoadAniY 2.2s 2.3s var(--EaseInPower2) forwards;
}

#wrapper footer #insta {
  animation: LoadAniOpacityY 1.5s 3.4s var(--EaseInPower2) forwards;
}

#wrapper footer #Behance {
  animation: LoadAniOpacityY 1.5s 3.6s var(--EaseInPower2) forwards;
}

#wrapper footer #copyright {
  animation: LoadAniOpacityY 1.5s 3.8s var(--EaseInPower2) forwards;
}

#wrapper footer #codeby {
  animation: LoadAniOpacityY 1.5s 4.2s var(--EaseInPower2) forwards;
}

#wrapper footer #codeby span {
  animation: LoadAniOpacityY 1.5s 4.4s var(--EaseInPower2) forwards;
}

#wrapper #Lang span a {
  animation: LoadAniOpacityXR 1.5s 4.8s var(--EaseInPower3) forwards;
}

#wrapper #Lang span a:nth-child(2) {
  animation: LoadAniOpacityXL 1.5s 5s var(--EaseInPower3) forwards;
}

#wrapper nav span a:nth-child(1) {
  animation: LoadAniXL 1.5s 6s var(--EaseInPower1) forwards;
}

#wrapper nav span a:nth-child(2) {
  animation: LoadAniXR 1.5s 6.2s var(--EaseInPower1) forwards;
}

/*-------------Animation Keyframes------------- */

@keyframes BGFadeAni {
  from {
    background: black;
  }
  to {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes SVGFadeAni {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes BGAni {
  from {
    background-image: linear-gradient(to top left, #FFC796 0%, #FF6B95 100%);
  }
  to {
    background-image: linear-gradient(to top left, #b721ff 0%, #21d4fd 100%);
  }
}

@keyframes svgA {
  0% {
    width: 20vw;
    height: 20vw;
    left: 10vw;
    top: 25vh;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s21.svg) no-repeat center;
  }
  20% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/s11.svg) no-repeat center;
  }
  100% {
    top: 55vw;
    left: -40vw;
    height: 60vw;
    width: 60vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s11.svg) no-repeat center;
  }
}

@keyframes svgB {
  0% {
    right: 6vw;
    top: 6vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  }
  20% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/s12.svg) no-repeat center;
  }
  100% {
    height: 30vw;
    width: 30vw;
    top: 56vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  }
}

@keyframes svgC {
  0% {
    width: 40vw;
    height: 30vw;
    right: 6vw;
    top: 6vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
  40% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/so2.svg) no-repeat center;
  }
  80% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
  100% {
    width: 70vw;
    height: 60vw;
    top: 52vw;
    right: -30vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
}

@keyframes LoadAniY {
  from {
    opacity: 0;
    transform: translateY(3.1vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniXL {
  from {
    opacity: 0;
    transform: translateX(1.5vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniXR {
  from {
    opacity: 0;
    transform: translateX(-1.5vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityY {
  from {
    opacity: 0;
    transform: translateY(0.7vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityXL {
  from {
    opacity: 0;
    transform: translateX(0.3vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityXR {
  from {
    opacity: 0;
    transform: translateX(-0.3vw);
  }
  to {
    opacity: 1;
  }
}

/*-------------@media (max-width: 1920px)------------- */

@media (max-width: 1920px) {
  :root {
    --FontH1: 12.148vw;
    --FontH2: 7.508vw;
    --FontH3: 4.641vw;
    --FontH4: 2.868vw;
    --FontH5: 1.772vw;
    --FontParagraph: 1.095vw;
    --FontSubtitle: 0.677vw;
    /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
    --GoldenRatio1: 100vw;
    --GoldenRatio2: 61.805vw;
    --GoldenRatio3: 38.198vw;
    --GoldenRatio4: 23.608vw;
    --GoldenRatio5: 14.591vw;
    --GoldenRatio6: 9.018vw;
    --GoldenRatio7: 5.573vw;
    --GoldenRatio8: 3.445vw;
    --GoldenRatio9: 2.129vw;
    --GoldenRatio10: 1.316vw;
    --GoldenRatio11: 0.814vw;
    --GoldenRatio12: 0.503vw;
    --GoldenRatio13: 0.310vw;
  }
}

83

BeeSoft (Pure CSS Loading 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;
}

83

3D Flip Cards Pure CSS and HTML

By: pixeldev

*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
  background:  #004050;
  font-family: Quando;
  font-weight: 300;
  width: 100%;
}
h2, h3 {
  background: #0D757D;
  width: 100%;
  min-height: 200px;
  line-height: 200px;
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  color: rgba(0,0,0,.4);
  margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}

h2 > a, h3 > a {
  text-decoration: none;
  color: rgba(0,0,0,.4);
  z-index: 1;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}
.uno a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #ffdb00;  
}
.dos > a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  border: 1px solid #000;
  bottom: -2px;
  left: 0;
  background: #fff;
  border-radius: 5px;
  opacity: 0;
  transform: scalex(0);
  transition: .5s;
}
.dos.bis > a:after {
  opacity: .05;
  transform: scalex(1);
}
.dos:hover > a:after {
  opacity: .15;
  transform: scalex(1);
}
.dos.bis > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FF5E33;
}

h3 > a:before {
  content: "";
  background: #7FDBFF;
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  transform: scaleX(0);
  animation: 1.4s forwards no-hover-v linear;
  animation-fill-mode: forwards;
  z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
  animation: .5s forwards hover-v linear;
  animation-fill-mode: forwards;
}
@keyframes hover-v {
  0% {
      transform: scaleX(0);
      height: 5px;
     }
  45% {   
      transform: scaleX(1.05);
      height: 5px;
     }
  55% {height: 5px;}
  100% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
}
@keyframes no-hover-v {
  0% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
  45% {height: 5px;}
  55% {   
      transform: scaleX(1.05);
      height: 5px;
      opacity: 1;
     }
  
  100% {
      transform: scaleX(0);
      height: 5px;
      opacity: .02;
     }
}

p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}

83

text-decoration: underline animated

By: pixeldev

*{
    margin: 0;
    padding: 0;
    font-family: 'lato';
    list-style: none;
    text-decoration: none;
}
body{
    background-color: #fcdc29;
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mainMenu{
    width: 250px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}
.item{
    border-top: 1px solid #ef584a;
    overflow: hidden;
}
.btn{
    display: block;
    padding: 15px 20px;
    background-color: #ff6f61;
    color: #fff;
    position: relative;

}
.btn:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:8px solid transparent;
    border-top:10px solid #ff6f61;
    right: 15px;
    bottom: -10px;
    z-index: 9;
    
}
.btn i {
    margin-right: 10px;
}
.subMenu{
    background: #273057;
    overflow: hidden;
    transition: max-height 0.7s;
    max-height: 0;
}
.subMenu a{
    display: block;
    padding: 15px 20px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #394c7f;
    position: relative;
    
}
.subMenu a:before{
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}
.subMenu a:hover:before{
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    left: 0;
    top:0;
    opacity: 1;
    /* background-color: #d8d824; */
    border-top: 24px solid transparent;
    border-left: 11px solid #fcdc29;
    border-bottom: 24px solid transparent;
}
.subMenu a:after{
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}
.subMenu a:hover:after{
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    right: 0px;
    top:0;
    opacity: 1;
    /* background-color: #d8d824; */
    border-top: 24px solid transparent;
    border-right: 11px solid #fcdc29;
    border-bottom: 24px solid transparent;
}
.subMenu a:hover{
    background: #273057;
    background: -moz-linear-gradient(top, #273057 0%, #273057 50%, #394c7f 51%, #394c7f 100%);
    background: -webkit-linear-gradient(top, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
    background: linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#273057', endColorstr='#394c7f',GradientType=0 );
    transition: all 0.3s;
    border-bottom: 1px solid #394c7f;
}
.subMenu a:last-child{
    border:none;
}
.item:target .subMenu{
    max-height: 10em;
}

/*  footer   */
footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida  Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
    color: red;
}
footer .fa-dev{
    color: #fff;
}
footer .fa-twitter-square{
  color:#1da0f1;
}
footer .fa-instagram{
  color: #f0007c;
}
fotter .fa-linkedin{
  color:#0073b1;
}
footer .fa-codepen{
  color:#fff
}
footer a {
    color: #3c97bf;
    text-decoration: none;
  margin-right:5px;
}
.youtubeBtn{
    position: fixed;
    left: 50%;
  transform:translatex(-50%);
    bottom: 45px;
    cursor: pointer;
    transition: all .3s;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
}
.youtubeBtn i{
   font-size:20px;
  float:left;
}
.youtubeBtn a{
    color:#ff0000;
    animation: youtubeAnim 1000ms linear infinite;
  float:right;
}
.youtubeBtn a:hover{
  color:#c9110f;
  transition:all .3s ease-in-out;
  text-shadow: none;
}
.youtubeBtn i:active{
  transform:scale(.9);
  transition:all .3s ease-in-out;
}
.youtubeBtn span{
    font-family: 'Lato';
    font-weight: bold;
    color: #000;
    display: block;
    font-size: 12px;
    float: right;
    line-height: 20px;
    padding-left: 5px;
  
}

@keyframes youtubeAnim{
  0%,100%{
    color:#c9110f;
  }
  50%{
    color:#ff0000;
  }
}
/* footer  */

82

Awesome accordion menu using only HTML & CSS

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

82

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

*/

82

Pure CSS Card w/ Social Icons

By: pixeldev

<div class="result">
  <div class="preview">
    <div class="row">
      <div class="hexagon">
        <span>
          <div class="content">
            <p class="title">Title</p>
            <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
          </div>
        </span>
      </div>
      <div class="hexagon">
        <span>
          <div class="content">
            <p class="title">Title</p>
            <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
          </div>
        </span>
      </div>
    </div>
    <div class="row even">
      <div class="hexagon">
      <span>
        <div class="content">
          <p class="title">Title</p>
          <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
        </div>
      </span>
    </div>
    <div class="hexagon">
      <span>
        <div class="content">
          <p class="title">Title</p>
          <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
        </div>
      </span>
    </div>
    </div>
  </div>
</div>

div, div:before, div:after {
  box-sizing: border-box;
}

.result {
  display: inline-block;
  padding: 13.33333px;
  background-color: #fefefe;
  background-image: linear-gradient(45deg, whitesmoke 25%, transparent 25%, transparent 75%, whitesmoke 75%, whitesmoke),
                    linear-gradient(45deg, whitesmoke 25%, transparent 25%, transparent 75%, whitesmoke 75%, whitesmoke);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.preview {
  box-sizing: border-box;
}

.hexagon {
  float: left;
  position: relative;
  width: 300px;
  height: 175px;
  background-color: #0088ff;
  margin: 86px 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-left: solid 150px #333333;
  border-right: solid 150px #333333;
  transition: all 0.3s ease-in;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212px;
  height: 212px;
  transform: scaleY(0.5) rotate(-45deg);
  background-color: inherit;
  left: -106px;
  transition: all 0.3s ease-in;
}

.hexagon::before {
  top: -106px;
  border-top: solid 212px #333333;
  border-right: solid 212px #333333;
}

.hexagon::after {
  bottom: -106px;
  border-bottom: solid 212px #333333;
  border-left: solid 212px #333333;
}

.hexagon span {
  display: block;
  position: absolute;
  top: 86px;
  left: 0;
  width: 0px;
  height: 0px;
  z-index: 2;
  background: inherit;
  opacity: 0;
  transition: all 0.3s ease-in;
  overflow: hidden;
}

.hexagon .content {
  padding: 0 10px;
}

.hexagon .content p {
  color: #fff;
}

.hexagon .content .title {
  font-weight: 100;
  font-size: 26px;
  text-transform: uppercase;
  margin: 10px 0 15px;
}

.hexagon:hover {
  border-left-width: 20px;
  border-right-width: 20px;
}

.hexagon:hover::before,
.hexagon:hover::after {
  left: 24px;
}

.hexagon:hover::before {
  border-top-width: 28px;
  border-right-width: 28px;
}

.hexagon:hover::after {
  border-bottom-width: 28px;
  border-left-width: 28px;
}

.hexagon:hover span {
  opacity: 1;
  top: 11px;
  width: 260px;
  height: 150px;
}

.even {
  padding-left: 160px;
}

.even .hexagon {
  margin: 0 10px 86px 0;
}

body {
  background: #3c9;
  font-family: Helvetica, Arial, sans-serif;
}

82

CSS Hexagon Grid with animation

By: pixeldev

@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Overpass+Mono");

:root {
  --purple: #892a92;
  --purple2: #70217a;
  --white: #f6d3fd;
  --height: 222px;
  --width: 350px;
  --font: "Overpass Mono", monospaced;
  --masterFont: "Raleway", sans-serif;
}

body {
  --baseColor: #c2e59c;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--baseColor);
  background: linear-gradient(to right, #64b3f4, var(--baseColor));
}

.card {
  --heightCalc: -calc((var(--height) / 2) - 10px);
  --widthCalc: calc(var(--width) / 2);
  height: var(--height);
  width: var(--width);
  min-width: var(--width);
  background: linear-gradient(90deg, var(--purple), var(--purple2));
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  margin: 10px auto;
  position: relative;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.6));
  transform: translateY(calc(50% - 10px));
}

.card__figure {
  position: relative;
  height: 40px;
  margin: 0;
}

.card__figure::after {
  content: "PLATINUM";
  font-size: 0.45em;
  letter-spacing: 4px;
  color: var(--white);
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: calc(-100% - 15px);
}

.card__figure--logo {
  --widthLogo: 130px;
  width: var(--widthLogo);
  position: absolute;
  right: 50%;
  transform: translate(calc(var(--widthLogo) / 2), 20px);
}

.card__reader {
  width: 50px;
  height: 40px;
  background: radial-gradient(#d9a56c, #b18457);
  border-radius: 5px;
  position: absolute;
  top: 50%;
  transform: translate(33px, -40px);
  overflow: hidden;
}

.card__reader--risk {
  width: 50px;
  height: 40px;
  border-radius: 13px;
  background: transparent;
  border: 1px solid #666;
  position: absolute;
  z-index: 0;
}

.card__reader--risk-one {
  transform: translate(37px, 15px);
}

.card__reader--risk-two {
  transform: translate(15px, 30px);
}

.card__reader--risk-three {
  transform: translate(-37px, -15px);
}

.card__reader--risk-four {
  transform: translate(-15px, -30px);
}

.card__number {
  font-family: var(--font);
  font-size: 1.15em;
  font-weight: normal;
  color: var(--white);
  letter-spacing: 2.5px;
  text-align: center;
  margin-left: -20px;
  margin-top: 80px;
  z-index: 1;
  position: relative;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.card__number::before,
.card__number::after {
  font-family: Arial;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.4em;
  position: absolute;
  letter-spacing: 0px;
}

.card__number::before {
  content: "5032";
  transform: translate(15px, 22px);
}

.card__number::after {
  content: "Valid thru";
  width: 80px;
  transform: translate(-215px, 22px);
}

.card__dates {
  position: absolute;
  width: 40%;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
  color: var(--white);
  font-family: var(--font);
  bottom: 22%;
  transform: translate(60px, 0px);
}

.card__dates span {
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.card__name {
  font-family: var(--font);
  font-size: 0.9em;
  font-weight: normal;
  color: var(--white);
  letter-spacing: 2.5px;
  transform: translate(35px, 25px);
  position: relative;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.card__flag {
  right: 30px;
  top: 45%;
  border-radius: 25px;
  transform: translate(0, -28px);
  position: absolute;
  height: 110px;
  width: 80px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.card__flag--globe {
  --margin: 5px;
  width: calc(100% - (var(--margin) * 2));
  background-color: #b7b2b8;
  height: 50%;
  border-radius: 20px;
  margin: var(--margin);
  background: repeating-linear-gradient(
    0deg,
    #dbd1dc,
    #dbd1dc 5px,
    #b2aab5 7px,
    #b2aab5 5px
  );
}

.card__flag--globe::after,
.card__flag--globe::before {
  content: "\f0ac";
  font-family: FontAwesome;
  color: rgba(0, 0, 0, 0.2);
  font-size: 3em;
  top: 6px;
  left: 2px;
  position: absolute;
}

.card__flag--globe::after {
  transform: translateX(10px);
}

.card__flag--globe::before {
  transform: translateX(25px);
}

.card__flag--red {
  position: absolute;
  left: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ce0e1d;
}

.card__flag--yellow {
  position: absolute;
  right: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e39833;
}

.card__flag--yellow::after {
  content: "MasterCard";
  position: absolute;
  font-size: 0.7em;
  top: 50%;
  transform: translate(-25px, -7px);
  font-family: var(--masterFont);
  font-style: italic;
  font-weight: 800;
  color: var(--white);
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

.assign {
  text-align: center;
  margin-top: 113px;
  font-family: var(--masterFont);
  color: #fff;
  font-size: 0.8em;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.assign a {
  text-decoration: none;
  font-weight: 700;
  color: #fff;
}

.assign a::hover {
  color: var(--purple);
}

82

Pure CSS Credit Card

By: pixeldev

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

81

Navigation Menu with Footer Menu

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

81

Fire Animation

By: pixeldev

81

Hexagon to Square

By: pixeldev

@property --redFillColorStop {
  syntax: "";
  inherits: false;
  initial-value: 0px;
}

.loaderWrapper {
/*   scale: 1; */
  --loaderHeight: 600px;
  --animationDuration: 3.5s;
  height: var(--loaderHeight);
  aspect-ratio: 1/3.5;
  
  position: relative;
  animation: shake var(--animationDuration) infinite linear;
}
.blue {
  background: hsl(193, 93%, 78%);
}
.gray {
  background: hsl(0, 0%, 92%);
}
.redFill {
/*   --redFillColorStop: 300px; */
  background: linear-gradient(to top, hsl(3, 82%, 51%) var(--redFillColorStop), transparent 0%);
  animation: tempRise var(--animationDuration) infinite linear;
}
.partOne {
  width: 70%;
  height: 100%;
  margin-inline: auto;
  border-radius: 9999px;
  position: relative;
}
.partOneChild, .partOneChildChild {
  position: absolute;
  inset: 0.5rem;
  border-radius: inherit;
}
.partTwo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
}
.partTwoChild, .partTwoChildChild {
  position: absolute;
  inset: 0.5rem;
  border-radius: inherit;
}
.partOneChild {
  z-index: 1;
}
.partTwoChildChild {
  z-index: 1;
}
.partOneChildChild,
.partTwoChildChild {
  overflow: hidden;
}
.partOneChildChild::before,
.partTwoChildChild::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateX(-1.5rem) translateY(-0.6875rem);
  background: hsl(0 0% 92% / 0.25);
}
.partTwoChildChild::before {
  translate: 0.25rem 0;
}
.shine {
  position: absolute;
  width: 10%;
  aspect-ratio: 1/2.75;
  left: 10%;
  top: 7%;
  border-radius: inherit;
  background: white;
  box-shadow: 0 35px white, 0 45px white, 0 55px white;
}
.measurements {
  position: absolute;
  width: 25%;
  aspect-ratio: 3.5/1;
  border-radius: inherit;
  top: 28%;
  left: 5%;
  background: white;
  opacity: 0.75;
  box-shadow:  0 1rem white,
               0 2rem white,
               0 3rem white, 1rem 3rem white,
               0 4rem white,
               0 5rem white,
               0 6rem white,
               0 7rem white, 1rem 7rem white,
               0 8rem white,
               0 9rem white,
              0 10rem white,
              0 11rem white, 1rem 11rem white,
              0 12rem white,
              0 13rem white,
              0 14rem white,
              0 15rem white, 1rem 15rem white;
}

@keyframes tempRise {
  0%,
  100% {
    --redFillColorStop: 0px;
  }
  50% {
    --redFillColorStop: calc(var(--loaderHeight) - 2rem);
  }
}
@keyframes shake {
  0%,
  100%, 10%, 90% {
    transform: translateX(0rem);
  }
  20%, 30%, 38%, 44%, 48%, 50%, 54%, 60%, 68%, 78% {
    transform: translateX(-0.5rem);
  }
  25%, 34%, 41%, 46%, 49%, 52%, 57%, 64%, 73%, 84% {
    transform: translateX(0.5rem);
  }
}

/* Ignore */
* {
  margin: 0;
  box-sizing: border-box;
/*   outline: solid hsl(0 0% 10% / 0.5); */
}
body {
  min-height:100svh;
  display: grid;
  place-items: center;
  background: #141719;
}

80

All

BeeSoft (Pure CSS Loading Animation)

By: pixeldev

3D Flip Cards Pure CSS and HTML

By: pixeldev

text-decoration: underline animated

By: pixeldev

Awesome accordion menu using only HTML & CSS

By: pixeldev

Pure CSS Layouts Examples

By: pixeldev

Pure CSS Card w/ Social Icons

By: pixeldev

CSS Hexagon Grid with animation

By: pixeldev

Pure CSS Credit Card

By: pixeldev

Navigation Menu with Footer Menu

By: pixeldev

Fire Animation

By: pixeldev

Hexagon to Square

By: pixeldev

Thermometer Loader

By: pixeldev