Find the Inverted Border Card code used in this tutorial in below
Color code used:
Page Background Color:
#083D41
Button Colors:
#03a9f4
#ff3d7f
CSS code used:
.cpccard{
position: relative;
height: 430px;
}
.cpccard .mybox{
position: relative;
width: 110%;
height: 200px;
border-radius: 15px;
}
.cpccard .mybox:nth-child(1)::before{
content: "";
position: absolute;
top: 106px;
left: -1px;
height: 20px;
width: 20px;
background: transparent;
z-index: 10;
border-bottom-left-radius: 20px;
box-shadow: -6px 6px #083D41;
}
.cpccard .mybox:nth-child(1)::after{
content: "";
position: absolute;
bottom: -1px;
left: 86px;
height: 20px;
width: 20px;
background: transparent;
z-index: 10;
border-bottom-left-radius: 20px;
box-shadow: -6px 6px #083D41;
}
.cpccard .mybox:nth-child(2){
background-color: #ffffff;
height: 220px;
width: 100%;
}
.cpccard .mybox:nth-child(2)::before{
content: "";
position: absolute;
top: 94px;
left: -1px;
height: 20px;
width: 20px;
background: transparent;
z-index: 10;
border-top-left-radius: 20px;
box-shadow: -6px -6px #083d41;
}
.cpccard .mybox:nth-child(2)::after{
content: "";
position: absolute;
top: -1px;
left: 90px;
height: 20px;
width: 20px;
background: transparent;
z-index: 10;
border-top-left-radius: 20px;
box-shadow: -6px -6px #083d41;
}
.cpccard .mycircle{
position: absolute;
top: 50%;
left: -70px;
transform: translateY(-50%);
width: 180px;
height: 180px;
border-radius: 50%;
border: 10px solid #083d41;
}
.cpccard .mybtn a{
position: relative;
top: 25px;
padding: 8px 30px;
border: none;
outline: none;
background: #03a9f4!important;
border-radius: 30px;
color: #ffffff;
font-size: 1em;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
border: 5px solid #083d41;
box-shadow: 0 0 0 10px #ffffff;
transition: 0.5s;
}
.cpccard .mybtn a:hover{
letter-spacing: 0.5em;
background: #ff3d7f!important;
}