Copied to Clipboard!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  border-radius: 4px;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/concrete-road-surrounded-by-trees-831243.jpg);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}
/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down>label {
  pointer-events: none;
  font-family: monospace;
  font-weight: 600;
  font-size: 1.1rem;
  color: #dffffd;
}

.scroll-down span {
  position: absolute;
  display: inline-block;
  top: 20px;
  height: 30px;
  width: 2px;
  left: calc(50% - 1px);
  animation: animateArrow 1.5s infinite linear;
}
@keyframes  animateArrow {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}
.scroll-down span::before,
.scroll-down span::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 3px;
}
.scroll-down span::before {
  transform-origin: bottom;
  transform: rotate(-45deg);
}
.scroll-down span::after {
  transform-origin: bottom;
  margin-left: -1px;
  transform: rotate(45deg);
}
  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  border-radius: 4px;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/concrete-road-surrounded-by-trees-831243.jpg);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}
/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down>label {
  pointer-events: none;
  font-family: monospace;
  font-weight: 600;
  font-size: 1.1rem;
  color: #dffffd;
}

.scroll-down span {
  position: absolute;
  display: inline-block;
  top: 20px;
  height: 25px;
  width: 2px;
  left: calc(50% - 1px);
  animation: animateArrows 1.25s infinite linear;
}
@keyframes  animateArrows {
  0%, 40%, 100% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
.scroll-down span:first-child {
  top: 35px;
  animation-delay: 0s;
}
.scroll-down span:nth-child(2) {
  top: 35px;
  animation-delay: .33s;
}
.scroll-down span:last-child {
  top:  50px;
  animation-delay: .66s;
}
.scroll-down span::before,
.scroll-down span::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 3px;
}
.scroll-down span::before {
  transform-origin: bottom;
  transform: rotate(-45deg);
}
.scroll-down span::after {
  transform-origin: bottom;
  margin-left: -1px;
  transform: rotate(45deg);
}
  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  border-radius: 4px;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/concrete-road-surrounded-by-trees-831243.jpg);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}
/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down>label {
  pointer-events: none;
  font-family: monospace;
  font-weight: 600;
  font-size: 1.1rem;
  color: #dffffd;
}

.scroll-down {
  height: 100px;
}
.scroll-down span {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50px;
  top: 5px;
}
.scroll-down span::after {
  position: absolute;
  content: "";
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #fff;
  animation: animateMousePointer 1.5s infinite;
}
@keyframes  animateMousePointer {
  0% {
    transform: translateY(0);
  }
  50% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}
  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  border-radius: 4px;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/concrete-road-surrounded-by-trees-831243.jpg);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}
/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down>label {
  pointer-events: none;
  font-family: monospace;
  font-weight: 600;
  font-size: 1.1rem;
  color: #dffffd;
}

.scroll-down {
  height: 100px;
}
.scroll-down span {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50px;
  top: 5px;
}
.scroll-down span::after {
  position: absolute;
  content: "";
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: #fff;
  animation: animateMouseScrollBar 1.5s infinite linear;
}
@keyframes  animateMouseScrollBar {
  0% {
    height: 20px;
    top: 10px;
  }
  50% {
    height: 0;
    top: 30px;
  }
  50.01% {
    top: 10px;
  }
  100%{
    height: 20px;
  }
}
  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 4px;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/shallow-focus-of-white-mushroom-painting-733107.jpg);
}
.card.shape::before, .card.shape::after {
  position: absolute;
  content: "";
  bottom: 0;
  width: 50%;
  height: 100px;
  background-color: #fff;
  z-index: 2;
}
.card.shape::before {
  left: 0;
  clip-path: polygon(0 50%, 0% 100%, 100% 100%);
}
.card.shape::after {
  left: 50%;
  clip-path: polygon(100% 50%, 0% 100%, 100% 100%);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}

/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down>label {
  pointer-events: none;
  font-family: monospace;
  font-weight: 600;
  font-size: 1.1rem;
  color: #dffffd;
}
.scroll-down span {
  position: absolute;
  width: 100px;
  height: 100px;
  left: -10px;
  border-radius: 50%;
  background: #ffc2f0;
  bottom: -50px;
  display: inline-block;
  z-index: 1;
}
.scroll-down span svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 15px;
  animation: animateLargeArrow 1.25s infinite linear;
}
@keyframes  animateLargeArrow {
  0% {
    opacity: 0;
    top: 0;
  }
  25%, 75% {
    opacity: 1;
  }
  50% {
    top: 15px;
  }
  100% {
    opacity: 0;
    top: 30px;
  }
}
  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 25% 25%;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/shallow-focus-of-white-mushroom-painting-733107.jpg);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}

/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.card .scroll-down__btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ffc2f0;
  display: inline-block;
  padding: 15px 60px;
  border: none;
  font-family: monospace;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.card .scroll-down__btn svg {
  position: absolute;
  top: 5px;
  animation: animateBtnArrow 1s infinite linear;
}
@keyframes  animateBtnArrow {
  0%, 100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(10px);
  }
}
  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 25% 25%;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/shallow-focus-of-white-mushroom-painting-733107.jpg);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}

/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 100px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down>label {
  display: inline-block;
  margin-bottom: 10px;
}
.scroll-down span {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: animatePattern 1.5s infinite;
}
.scroll-down span:nth-child(2) {
  animation-delay: .1s;
}
.scroll-down span:nth-child(3) {
  animation-delay: .2s;
}
.scroll-down span:nth-child(4) {
  animation-delay: .3s;
}
@keyframes  animatePattern {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translateY(3px);
  }
  75%, 100% {
    opacity: 0;
    transform: translateY(3px);
  }
}
  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 25% 25%;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: url(../images/shallow-focus-of-white-mushroom-painting-733107.jpg);
}
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}

/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 100px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down>label {
  display: inline-block;
  margin-bottom: 10px;
}
.scroll-down span {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: animatePattern 1.5s infinite;
}
.scroll-down span:nth-child(2) {
  animation-delay: .1s;
}
.scroll-down span:nth-child(3) {
  animation-delay: .2s;
}
.scroll-down span:nth-child(4) {
  animation-delay: .3s;
}
@keyframes  animatePattern {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translateY(3px);
  }
  75%, 100% {
    opacity: 0;
    transform: translateY(3px);
  }
}
.scroll-down.pattern.circle span img {
  margin-bottom: 3px;
}