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