style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
:root {
    --col: #151c26;
    --col0: #1cb63b;
    --dark: #393939;
    --red: #d12229;
}

body {
    color: var(--col);
    overflow-y: hidden;
    background-color: var(--col);
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: repeat(2, 100vw);
    position: relative;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

body, h2, p {
    margin: 0;
}

/* inspired from btn*/

.credit {
    position: absolute;
    top: 15px;
    border-radius: 10px;
    padding: 10px;
    background-color: rgb(248, 92, 113);
    cursor: pointer;
    z-index: 2;
    overflow: hidden;
}

.credit-horizontal {
    right: 5%;
}

.credit-vertical {
    right: -96%;
}

.credit a {
    color: #eee;
    padding: 10px;
}

.credit::after {
    box-sizing: border-box;
    content: "";
    border: 8px solid;
    border-color: transparent transparent transparent #eee;
    width: 8px;
    height: 8px;
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    transition: all .5s ease-in-out;
}

.credit:hover::after {
    right: -3px;
}

.credit::before {
    content: "";
    background-color: #1769ff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    transition: .5s ease-in-out;
    z-index: -1;
}

.credit:hover::before {
    left: 0;
}

/* move btns // right left */

#prev-btn, #next-btn {
    border: 2px solid #ddd;
    top: 15%;
    opacity: .5;
    padding: 20px;
    background-color: #888;
    z-index: 10;
    border-radius: 5px;
    cursor: pointer;
    transition: .6s;
}

#prev-btn:hover, #next-btn:hover {
    opacity: 0.8;
}

#next-btn {
    right: 5%;
    position: absolute;
}

#prev-btn {
    right: -10%;
    position: absolute;
}

#prev-btn::after, #next-btn::after {
    content: "";
    border: 15px solid;
    box-sizing: border-box;
    border-color: #fff transparent transparent transparent;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 4px;
}

#next-btn::after {
    transform: rotate(-90deg);
    right: -5px;
}

#prev-btn::after {
    transform: rotate(90deg);
    left: -5px;
}

/*  */

.business-hor {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
    flex-wrap: wrap;
    position: relative;
    margin:0 10px;
}

#front, #back {
    background-color: #fff;
    width: 500px;
    height: 270px;
    position: relative;
    border-radius: 4px;
    margin: 0 5px;
    box-shadow: 0 0 15px #000;
}

#front::after, #front::before {
    content: "";
    background-color: var(--col0);
    width: 15px;
    height: 60%;
    position: absolute;
    top: 20%;
    right: 0;
    border-radius: 20px 0 0 20px;
    z-index: 2;
}

#front::before {
    left: 0px;
    border-radius: 0 20px 20px 0;
}

#front::after {
    right: 0px;
    border-radius: 20px 0 0 20px;
}

#front>p {
    margin-top: 155px;
    display: flex;
    justify-content: center;
    font-size: 1.3em;
    position: relative;
}

#front p span {
    font-weight: 600;
    color: var(--col0);
}

#front>p::after, #front>p::before {
    content: "";
    width: 160px;
    height: 4px;
    background-color: var(--col);
    margin: 0 20px;
    border-radius: 4px;
    top: calc(50% - 2px);
    position: absolute;
}

#front>p::before {
    left: 10px;
}

#front>p::after {
    right: 10px;
}

#front div {
    background-color: var(--col);
    color: rgb(230, 230, 230);
    width: 250px;
    text-align: center;
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
    left: 125px;
}

#front div p {
    margin: 0;
    font-size: 0.8em;
    padding: 2px;
}

#front canvas {
    position: absolute;
    top: 55px;
    left: 100px;
}

#back {
    display: flex;
}

#back>div:nth-child(1) {
    width: 250px;
}

#back>div:nth-child(1) canvas {
    position: absolute;
    left: -25px;
    top: 60px;
}

#back>div:nth-child(1) p {
    position: absolute;
    top: 140px;
    font-size: 1.3em;
    left: 69px;
    margin: 20px 0;
}

#back>div:nth-child(1) p span {
    font-weight: 600;
    color: var(--col0);
}

#back .details {
    width: 250px;
}

.name {
    margin: 15px 0 0 45px;
}

.name h2 {
    color: var(--col0);
}

.name p {
    font-size: 0.8em;
}

.details #canvas2, .details #canvas3 {
    position: absolute;
}

.details #canvas3 {
    top: 68px;
}

.details .contact {
    margin: 25px 0 0 45px;
    /* add this so the z-index can have an effect on this element*/
    position: relative;
    /*set z-index:2 to make it above the canvas so you can click the links*/
    z-index: 2;
}

.details .contact a {
    color: var(--col) !important;
}

.contact div p {
    font-size: 0.8em;
    margin: 10px;
    font-weight: 700;
}

.contact div {
    display: flex;
    align-items: center;
}

.contact div svg {
    width: 15px;
    padding: 1px;
    background-color: var(--col0);
    border-radius: 1px;
}

.contact div:nth-of-type(1) svg {
    width: 11px;
    padding: 3px;
}

i {
    color: var(--col0);
    font-size: 1.2em;
    margin: 0;
}

.changeColor {
    position: absolute;
    top: 10px;
    left: calc(50% - 70px);
    z-index: 10;
}

.onGitHub {
    position: absolute;
    bottom: 40px;
    color: var(--col0);
    left: calc(50% - 61px);
}

.onGitHub a {
    color: var(--col0);
}

.move {
    animation-name: moving;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

@keyframes moving {
    50% {
        left: calc(50% - 40px);
    }
}
 

/* Vertical business card */

.business-ver {
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: center;
    background-color: #101020;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

.business-ver .front-ver, .business-ver .back-ver {
    background-color: var(--dark);
    width: 280px;
    height: 480px;
    margin: 20px;
    border-radius: 25px;
    overflow: hidden;
    color: #eee;
    position: relative;
}

.business-ver svg {
    width: 50px;
}

.front-ver>div:nth-child(1) {
    height: 35%;
    background-color: var(--red);
}

.front-ver>div:nth-child(1)>div {
    display: flex;
    justify-content: center;
    padding: 25px 0;
}

.front-ver>div:nth-child(1)>div img {
    width: 40px;
}

.front-ver>div:nth-child(1)>div div {
    text-align: center;
    margin: 0 10px;
}

.front-ver>div:nth-child(1)>div div p {
    font-size: 0.8rem;
    font-weight: 600;
}

.front-ver>div:nth-child(2) {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 100px;
    transform: translate(-50%);
    text-align: center;
}

.front-ver>div:nth-child(2) div {
    background-color: #bfc2c7;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 6px solid var(--dark);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.front-ver>div:nth-child(2) div img {
    width: 80%;
    padding: 10px 0;
}

.front-ver>div:nth-child(2) p:nth-of-type(1) {
    font-weight: 900;
}

.front-ver .infos {
    position: absolute;
    bottom: 5%;
    left: 5%;
}

.front-ver .infos>div {
    display: flex;
    margin: 5px;
}

.front-ver .infos>div svg {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    background-color: var(--red);
    padding: 8px;
    border-radius: 7px;
}

.front-ver .infos>div p {
    font-size: .8rem;
    margin: 5px 0;
    font-weight: 500;
}

/* back*/

.back-ver>div:nth-child(1) {
    width: 100%;
    box-sizing: border-box;
    height: 70%;
    background: url("./imgs/e.webp") center;
    filter: contrast(160%);
    position: relative;
}

.back-ver>div:nth-child(1)::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    background: linear-gradient(rgba(71, 11, 11, 0.8), rgba(240, 8, 8, 0.5));
}

.back-ver>div:nth-child(1) {
    position: relative;
}

.back-ver>div:nth-child(1) div img {
    width: 40px;
    margin: 10px;
}

.back-ver>div:nth-child(1) div {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 40%;
    left: 19%;
    z-index: 11;
}

.back-ver>div:nth-child(2) {
    background-color: var(--dark);
    border-radius: 50%;
    width: 70%;
    padding: 20px 0;
    position: absolute;
    top: calc(70% - 40px);
    left: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-ver>div:nth-child(2) div {
    background-color: var(--red);
    border-radius: 50%;
    padding: 5px 4px 2px 5px;
}

.back-ver>p {
    text-align: center;
    margin-top: 30%;
    color: var(--red);
}