<body>
<div class="container">
<div class="person-box">
<div class="person-box--left">
<div class="person-img">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--g4pO7VWg--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/307053/45911dff-4be2-4a4a-ab4f-fbd1a2e57a9f.jpg" alt="Jessica Potter">
</div>
<div class="person-name">
<p>Batuhan Gulgor</p>
<p>Front-nd Developer</p>
</div>
<div class="links">
<ul>
<li><a href="https://codepen.io/batuhangulgor" target="_blank">Follow</a></li>
<li><a href="mailto:gulgor.batu@gmail.com">Message</a></li>
</ul>
</div>
</div>
<div class="person-box--right">
<a href="#" class="links link-1">
<div class="right-content">
<p>523</p>
<p>Posts</p>
</div>
</a>
<a href="#" class="links link-2">
<div class="right-content">
<p>1387</p>
<p>Likes</p>
</div>
</a>
<a href="#" class="links link-3">
<div class="right-content">
<p>146</p>
<p>Follower</p>
</div>
</a>
</div>
</div>
</div>
</body>@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
html{
font-size: 62.5%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
font-family: 'Courier Prime', monospace;
width: 100%;
height: 100vh;
@include center;
.container {
width: 400px;
height: 400px;
background: linear-gradient(to top right, #eebe6c 0%, #ca7c4e 100%);
padding: 50px 35px;
.person-box {
width: 100%;
height: 100%;
background-color: #f5f5f5;
border-radius: 4px;
display: flex;
box-shadow: 10px 10px 15px rgba(#000, 0.3);
p {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
&--left {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.person-img {
width: 70px;
height: 70px;
margin-bottom: 20px;
margin-top: 40px;
position: relative;
@include center;
&:hover::after {
transform: rotate(-180deg);
}
&:hover::before {
transform: rotate(180deg);
}
img {
max-width: 100%;
border-radius: 50%;
}
&::before {
content: "";
display: block;
position: absolute;
border: 1px solid;
width: 82px;
height: 82px;
border-radius: 50%;
border-color: #786450 #786450 #786450 transparent;
transition: 0.3s;
}
&::after {
content: "";
display: block;
position: absolute;
border: 1px solid;
width: 90px;
height: 90px;
border-radius: 50%;
border-color: #786450 transparent #786450 #786450;
transition: 0.3s;
}
}
.person-name {
p {
color: #786450;
text-align: center;
&:not(:last-child) {
margin-bottom: 2px;
}
&:first-child {
font-size: 1.6rem;
font-weight: 700;
}
&:last-child {
font-size: 11px;
text-align: center;
}
}
}
.links {
ul {
list-style: none;
padding: 0;
margin-top: 35px;
li {
&:not(:last-child) {
margin-bottom: 10px;
}
a {
color: #786450;
width: 120px;
padding: 6px 0;
background-color: #f5f5f5;
display: flex;
justify-content: center;
border-radius: 15px;
border: 1px solid #786450;
transition: 0.3s;
font-weight: 700;
font-size: 1.4rem;
&:hover {
color: #f5f5f5;
background-color: #786450;
}
}
}
}
}
}
&--right {
width: 55%;
height: 100%;
display: flex;
flex-direction: column;
.links {
height: 100%;
display: flex;
position: relative;
background-color: #e1cfc2;
&:hover::before {
opacity: 1;
}
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
z-index: 1;
opacity: 0;
transition: 0.3s;
}
}
.link-2 {
margin: 2px 0;
}
.right-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #786450;
p:first-child {
font-size: 2rem;
font-weight: 700;
}
p:last-child {
font-size: 11px;
}
}
}
}
}
}
@media only screen and (max-width: 380px){
html{
font-size: 50%;
}
.person-box{
flex-direction: column;
&--right{
flex-direction: row !important;
width: 100% !important;
.links{
width: 100% !important;
&:not(:last-child){
margin-right: 2px !important;
}
}
.link-2{
margin: 0 !important;
}
}
}
.links{
ul{
display: flex;
margin-top: 15px !important;
li:first-child{
margin-right: 4px;
}
a{
width: 90px !important;
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.