Created
February 24, 2024 01:41
-
-
Save zv-r/6443144d0ccf06b1a0cb0e2fdff6eb11 to your computer and use it in GitHub Desktop.
Profile cards - CSS grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="card"> | |
<img src="https://lh3.googleusercontent.com/ytP9VP86DItizVX2YNA-xTYzV09IS7rh4WexVp7eilIcfHmm74B7odbcwD5DTXmL0PF42i2wnRKSFPBHlmSjCblWHDCD2oD1oaM1CGFcSd48VBKJfsCi4bS170PKxGwji8CPmehwPw=w200-h247-no" alt="Person" class="card__image"> | |
<p class="card__name">Lily-Grace Colley</p> | |
<div class="grid-container"> | |
<div class="grid-child-posts"> | |
156 Post | |
</div> | |
<div class="grid-child-followers"> | |
1012 Likes | |
</div> | |
</div> | |
<ul class="social-icons"> | |
<li><a href="#"><i class="fa fa-instagram"></i></a></li> | |
<li><a href="#"><i class="fa fa-twitter"></i></a></li> | |
<li><a href="#"><i class="fa fa-linkedin"></i></a></li> | |
<li><a href="#"><i class="fa fa-codepen"></i></a></li> | |
</ul> | |
<button class="btn draw-border">Follow</button> | |
<button class="btn draw-border">Message</button> | |
</div> | |
<div class="card"> | |
<img src="https://lh3.googleusercontent.com/oUUiPB9sq3ACq4bUaRmo8pgvC4FUpRRrQKcGIBSOsafawZfRpF1vruFeYt6uCfL6wGDQyvOi6Ez9Bpf1Fb7APKjIyVsft7FLGR6QqdRFTiceNQBm1In9aZyrXp33cZi9pUNqjHASdA=s170-no" alt="Person" class="card__image"> | |
<p class="card__name">Murray Reeve</p> | |
<div class="grid-container"> | |
<div class="grid-child-posts"> | |
305 Post | |
</div> | |
<div class="grid-child-followers"> | |
2643 Likes | |
</div> | |
</div> | |
<ul class="social-icons"> | |
<li><a href="#"><i class="fa fa-instagram"></i></a></li> | |
<li><a href="#"><i class="fa fa-twitter"></i></a></li> | |
<li><a href="#"><i class="fa fa-linkedin"></i></a></li> | |
<li><a href="#"><i class="fa fa-codepen"></i></a></li> | |
</ul> | |
<button class="btn draw-border">Follow</button> | |
<button class="btn draw-border">Message</button> | |
</div> | |
<div class="card"> | |
<img src="https://lh3.googleusercontent.com/pZwZJ5HIL5iKbA91UGMUIPR0VJWa3K0vOGzDZmY6wU3EJBUdfsby3VEyxU162XxTyOyP3D154tjkr-4Jgcx8lygYUR8eB-jVmld4dsHi1c-mE_A8jKccseAG7bdEwVrcuuk6ciNtSw=s170-no" alt="Person" class="card__image"> | |
<p class="card__name">Bianca Serrano</p> | |
<div class="grid-container"> | |
<div class="grid-child-posts"> | |
902 Post | |
</div> | |
<div class="grid-child-followers"> | |
1300 Likes | |
</div> | |
</div> | |
<ul class="social-icons"> | |
<li><a href="#"><i class="fa fa-instagram"></i></a></li> | |
<li><a href="#"><i class="fa fa-twitter"></i></a></li> | |
<li><a href="#"><i class="fa fa-linkedin"></i></a></li> | |
<li><a href="#"><i class="fa fa-codepen"></i></a></li> | |
</ul> | |
<button class="btn draw-border">Follow</button> | |
<button class="btn draw-border">Message</button> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap"); | |
.container { | |
display: grid; | |
grid-template-columns: 300px 300px 300px; | |
grid-gap: 50px; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
background-color: #f5f5f5; | |
font-family: "Baloo Paaji 2", cursive; | |
} | |
.card { | |
background-color: #222831; | |
height: 37rem; | |
border-radius: 5px; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
box-shadow: rgba(0, 0, 0, 0.7); | |
color: white; | |
} | |
.card__name { | |
margin-top: 15px; | |
font-size: 1.5em; | |
} | |
.card__image { | |
height: 160px; | |
width: 160px; | |
border-radius: 50%; | |
border: 5px solid #272133; | |
margin-top: 20px; | |
box-shadow: 0 10px 50px rgba(235, 25, 110, 1); | |
} | |
.draw-border { | |
box-shadow: inset 0 0 0 4px #58cdd1; | |
color: #58afd1; | |
-webkit-transition: color 0.25s 0.0833333333s; | |
transition: color 0.25s 0.0833333333s; | |
position: relative; | |
} | |
.draw-border::before, | |
.draw-border::after { | |
border: 0 solid transparent; | |
box-sizing: border-box; | |
content: ""; | |
pointer-events: none; | |
position: absolute; | |
width: 0rem; | |
height: 0; | |
bottom: 0; | |
right: 0; | |
} | |
.draw-border::before { | |
border-bottom-width: 4px; | |
border-left-width: 4px; | |
} | |
.draw-border::after { | |
border-top-width: 4px; | |
border-right-width: 4px; | |
} | |
.draw-border:hover { | |
color: #ffe593; | |
} | |
.draw-border:hover::before, | |
.draw-border:hover::after { | |
border-color: #eb196e; | |
-webkit-transition: border-color 0s, width 0.25s, height 0.25s; | |
transition: border-color 0s, width 0.25s, height 0.25s; | |
width: 100%; | |
height: 100%; | |
} | |
.draw-border:hover::before { | |
-webkit-transition-delay: 0s, 0s, 0.25s; | |
transition-delay: 0s, 0s, 0.25s; | |
} | |
.draw-border:hover::after { | |
-webkit-transition-delay: 0s, 0.25s, 0s; | |
transition-delay: 0s, 0.25s, 0s; | |
} | |
.btn { | |
background: none; | |
border: none; | |
cursor: pointer; | |
line-height: 1.5; | |
font: 700 1.2rem "Roboto Slab", sans-serif; | |
padding: 0.75em 2em; | |
letter-spacing: 0.05rem; | |
margin: 1em; | |
width: 13rem; | |
} | |
.btn:focus { | |
outline: 2px dotted #55d7dc; | |
} | |
.social-icons { | |
padding: 0; | |
list-style: none; | |
margin: 1em; | |
} | |
.social-icons li { | |
display: inline-block; | |
margin: 0.15em; | |
position: relative; | |
font-size: 1em; | |
} | |
.social-icons i { | |
color: #fff; | |
position: absolute; | |
top: 0.95em; | |
left: 0.96em; | |
transition: all 265ms ease-out; | |
} | |
.social-icons a { | |
display: inline-block; | |
} | |
.social-icons a:before { | |
transform: scale(1); | |
-ms-transform: scale(1); | |
-webkit-transform: scale(1); | |
content: " "; | |
width: 45px; | |
height: 45px; | |
border-radius: 100%; | |
display: block; | |
background: linear-gradient(45deg, #ff003c, #c648c8); | |
transition: all 265ms ease-out; | |
} | |
.social-icons a:hover:before { | |
transform: scale(0); | |
transition: all 265ms ease-in; | |
} | |
.social-icons a:hover i { | |
transform: scale(2.2); | |
-ms-transform: scale(2.2); | |
-webkit-transform: scale(2.2); | |
color: #ff003c; | |
background: -webkit-linear-gradient(45deg, #ff003c, #c648c8); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
transition: all 265ms ease-in; | |
} | |
.grid-container { | |
display: grid; | |
grid-template-columns: 1fr 1fr; | |
grid-gap: 20px; | |
font-size: 1.2em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Позже закончить