Profile Card for Web

AboutCard.css

.aboutCardHidden{
	display: none;
}
.aboutCardWrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	/* display: none; */
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.726);
	transition: 0.5s;
}

.aboutCard {
	width: 650px;
	height: 400px;
	background-color: white;
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-family: Verdana, Geneva, sans-serif;
	border-radius: 10px;
	transition: 0.5s;
	z-index: 5;
}

.leftAbout {
	display: flex;
	justify-content: center;
	align-items: center;
}

.leftAbout img {
	width: 200px;
	height: 200px;
	border-radius: 100px;
}

.rightAbout {
	position: relative;
}

.leftAbout .aboutName {
	font-size: 1.8rem;
	color: rgb(42, 173, 162);
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 0px;
}

.leftAbout .aboutProf {
	font-size: 1.2rem;
	color: black;
	font-weight: 300;
	margin-top: 7px;
}
.rightAbout p {
	padding: 20px;
	text-align: left;
	line-height: 1.7rem;
	padding-top: 40px;
	padding-right: 40px;
}

.bottomBar {
	width: 100%;
	position: absolute;
	bottom: 0;
	display: flex;
	flex-direction: row-reverse;
	padding-bottom: 30px;
}

.bottomBar img {
	width: 30px;
	margin-right: 15px;
	transition: 0.5s;
}

.bottomBar img:hover {
	cursor: pointer;
	transform: rotate(360deg);
}


/* ============ */
#aboutMeBtn{
	width: 50px;
	height: 50px;
	background-color: white;
	position: absolute;
	bottom: 5px;
	right: 5px;
	border-radius: 5px;
	-webkit-box-shadow: -1px 0px 7px 1px rgba(153,153,153,1);
	-moz-box-shadow: -1px 0px 7px 1px rgba(153,153,153,1);
	box-shadow: -1px 0px 7px 1px rgba(153,153,153,1);
	transition: 0.5s;
}
#aboutMeBtn:hover{
	cursor: pointer;
	background-color: black;
	color: white;
	-webkit-box-shadow: -1px 0px 18px 0px rgba(153,153,153,1);
	-moz-box-shadow: -1px 0px 18px 0px rgba(153,153,153,1);
	box-shadow: -1px 0px 18px 0px rgba(153,153,153,1);
}
#aboutMeBtn p{
	font-weight: bold;
}

ProfileCard.html

<!-- ========================at bottom of body============== -->
    <div id="aboutCardd" class="aboutCardHidden">
        <div id="aboutCardIn" class="aboutCard">
            <div class="leftAbout">
                <div>
                    <img src="https://raw.githubusercontent.com/shivampip/shivampip.github.io/master/img/shivam_cropped.jpg?raw=true"></img>
                    <p class="aboutName">Shivam Agrawal</p>
                    <p class="aboutProf">Software Developer</p>
                </div>
            </div>
            <div class="rightAbout">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto a sint quibusdam quod tenetur corporis
                    error, suscipit doloremque ea dolorem ducimus saepe nulla iste, assumenda deserunt, odit
                    consequuntur accusamus voluptas.</p>
                <div class="bottomBar">
                    <div style="width:30px"></div>
                    <a target="_blank" href="https://www.facebook.com/shivampip"><img src="img/Facebook.png"></img></a>
                    <a target="_blank" href="https://twitter.com/shivampip"><img src="img/Twitter.png"></img></a>
                    <a target="_blank" href="https://www.instagram.com/shivampip/"><img
                            src="img/Instagram.png"></img></a>
                    <a target="_blank" href="https://www.quora.com/profile/Shivam-Agrawal-152"><img
                            src="img/Quora.png"></img></a>
                    <a target="_blank" href="https://medium.com/@shivampip"><img src="img/Medium.png"></img></a>
                    <a target="_blank" href="https://github.com/shivampip"><img src="img/Github.png"></img></a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- github-ribbon -->
    <a href="https://github.com/shivampip" target="_blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#353a43; color:#eee; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
    <!-- //github-ribbon -->

    <div id="aboutMeBtn">
       <p>Me</p> 
    </div>

    <script>
        const toggleCard=(eve)=>{
            let card= document.getElementById("aboutCardd");
            card.classList.toggle("aboutCardWrapper");
            card.classList.toggle("aboutCardHidden");
        }
        document.getElementById("aboutMeBtn").addEventListener("click", toggleCard);
        document.getElementById("aboutCardd").addEventListener("click", toggleCard);
        document.getElementById("aboutCardIn").addEventListener("click", function(eve){
            eve.stopPropagation();
        });
    </script>
    <!-- ============================================================ -->