<button onclick="toggleTheme()" class="themer"></button>
<main>
<div class="profile" onclick="expand(this)">
<div class="profile__banner" style="background-color: rgb(153,255,204);"></div>
<div>
<div class="profile__pic">
<img src="https://i.imgur.com/mQvmS3c.jpg?1" alt="Profile picture of Cho Miyeon">
</div>
<div class="profile__info">
<span class="profile__info-display">Cho Miyeon</span>
<span class="profile__info-username">@ramyeon</span>
</div>
</div>
<div class="profile__data">
<span class="profile__data-following">
<span class="profile__data-following-number">32</span>
<span class="profile__data-following-label">Following</span>
</span>
<span class="profile__data-followers">
<span class="profile__data-followers-number">6M</span>
<span class="profile__data-following-label">Followers</span>
</span>
<span class="profile__data-likes">
<span class="profile__data-likes-number">502</span>
<span class="profile__data-likes-label">Likes</span>
</span>
</div>
</div>
<div class="profile" onclick="expand(this)">
<div class="profile__banner" style="background-color: rgb(255, 202, 211);"></div>
<div>
<div class="profile__pic">
<img src="https://i.imgur.com/0i8CS8i.jpg?1" alt="Profile picture of Kim Minnie">
</div>
<div class="profile__info">
<span class="profile__info-display">Kim Minnie</span>
<span class="profile__info-username">@nicha</span>
</div>
</div>
<div class="profile__data">
<span class="profile__data-following">
<span class="profile__data-following-number">5</span>
<span class="profile__data-following-label">Following</span>
</span>
<span class="profile__data-followers">
<span class="profile__data-followers-number">6M</span>
<span class="profile__data-following-label">Followers</span>
</span>
<span class="profile__data-likes">
<span class="profile__data-likes-number">24</span>
<span class="profile__data-likes-label">Likes</span>
</span>
</div>
</div>
<div class="profile" onclick="expand(this)">
<div class="profile__banner" style="background-color: rgb(204,238,255);"></div>
<div>
<div class="profile__pic">
<img src="https://i.imgur.com/bN6vfk3.jpg?1" alt="Profile picture of Seo Soojin">
</div>
<div class="profile__info">
<span class="profile__info-display">Seo Soojin</span>
<span class="profile__info-username">@cherryjin</span>
</div>
</div>
<div class="profile__data">
<span class="profile__data-following">
<span class="profile__data-following-number">12</span>
<span class="profile__data-following-label">Following</span>
</span>
<span class="profile__data-followers">
<span class="profile__data-followers-number">6M</span>
<span class="profile__data-following-label">Followers</span>
</span>
<span class="profile__data-likes">
<span class="profile__data-likes-number">198</span>
<span class="profile__data-likes-label">Likes</span>
</span>
</div>
</div>
<div class="profile" onclick="expand(this)">
<div class="profile__banner" style="background-color: rgb(255,255,153);"></div>
<div>
<div class="profile__pic">
<img src="https://i.imgur.com/3ONm3eG.jpg" alt="Profile picture of Jeon Soyeon">
</div>
<div class="profile__info">
<span class="profile__info-display">Jeon Soyeon</span>
<span class="profile__info-username">@windyjeon</span>
</div>
</div>
<div class="profile__data">
<span class="profile__data-following">
<span class="profile__data-following-number">9</span>
<span class="profile__data-following-label">Following</span>
</span>
<span class="profile__data-followers">
<span class="profile__data-followers-number">6M</span>
<span class="profile__data-following-label">Followers</span>
</span>
<span class="profile__data-likes">
<span class="profile__data-likes-number">67</span>
<span class="profile__data-likes-label">Likes</span>
</span>
</div>
</div>
<div class="profile" onclick="expand(this)">
<div class="profile__banner" style="background-color: rgb(255,128,128);"></div>
<div>
<div class="profile__pic">
<img src="https://i.imgur.com/wPclYKP.jpg" alt="Profile picture of Song Yuqi">
</div>
<div class="profile__info">
<span class="profile__info-display">Song Yuqi</span>
<span class="profile__info-username">@woogiraffe</span>
</div>
</div>
<div class="profile__data">
<span class="profile__data-following">
<span class="profile__data-following-number">23</span>
<span class="profile__data-following-label">Following</span>
</span>
<span class="profile__data-followers">
<span class="profile__data-followers-number">6M</span>
<span class="profile__data-following-label">Followers</span>
</span>
<span class="profile__data-likes">
<span class="profile__data-likes-number">356</span>
<span class="profile__data-likes-label">Likes</span>
</span>
</div>
</div>
<div class="profile" onclick="expand(this)">
<div class="profile__banner" style="background-color: rgb(221,204,255);"></div>
<div>
<div class="profile__pic">
<img src="https://i.imgur.com/g7tmwlB.jpg?1" alt="Profile picture of Yeh Shuhua">
</div>
<div class="profile__info">
<span class="profile__info-display">Yeh Shuhua</span>
<span class="profile__info-username">@yehwolf</span>
</div>
</div>
<div class="profile__data">
<span class="profile__data-following">
<span class="profile__data-following-number">5</span>
<span class="profile__data-following-label">Following</span>
</span>
<span class="profile__data-followers">
<span class="profile__data-followers-number">6M</span>
<span class="profile__data-following-label">Followers</span>
</span>
<span class="profile__data-likes">
<span class="profile__data-likes-number">32</span>
<span class="profile__data-likes-label">Likes</span>
</span>
</div>
</div>
</main>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
:root {
--light-bg: white;
--light-primary: rgb(247, 249, 250);
--dark-bg: black;
--dark-primary: #15181c;
--gray-text: rgb(153, 153, 153);
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing: border-box;
}
.light-theme {
--background-color: var(--light-bg);
--primary-bg: var(--light-primary);
color: black;
}
.dark-theme {
--background-color: var(--dark-bg);
--primary-bg: var(--dark-primary);
color: white;
}
body {
background-color: var(--background-color);
padding: 16px;
}
main {
height: 100%;
width: 100%;
text-align: center;
}
.themer {
all: unset;
padding: 4px;
height: 20px;
width: 40px;
border-radius: 20px;
position: relative;
}
.light-theme .themer {
border: 2px solid var(--dark-bg);
}
.dark-theme .themer {
border: 2px solid var(--light-bg);
}
.themer:hover {
cursor: pointer;
}
.themer::after {
content: '';
display: block;
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
top: 4px;
}
.light-theme .themer::after {
background-color: var(--dark-bg);
right: 4px;
}
.dark-theme .themer::after {
background-color: var(--light-bg);
left: 4px;
}
.profile {
background-color: var(--primary-bg);
border-radius: 8px;
height: 180px;
width: 350px;
position: relative;
overflow: hidden;
transition: height 0.2s ease;
/* */
display: inline-block;
margin: 8px;
vertical-align: top;
}
.profile:hover {
cursor: pointer;
}
.profile.profile--expanded {
height: 240px;
animation: expand 0.5s ease;
}
.profile__banner {
display: block;
height: 70px;
width: 100%;
background-color: rgb(175, 105, 175);
border-top-right-radius: inherit;
border-top-left-radius: inherit;
}
.profile__pic {
width: 100%;
text-align: center;
position: absolute;
top: 20px;
}
.profile__pic img {
background-color: var(--primary-bg);
border-radius: 50%;
height: 80px;
width: 80px;
padding: 3px;
object-fit: cover;
}
.profile__info {
width: 100%;
text-align: center;
position: absolute;
top: 104px;
}
.profile__info-display, .profile__info-username {
display: block;
width: 100%;
}
.profile__info-display {
font-size: 1.5rem;
font-weight: bold;
}
.profile__info-username {
color: var(--gray-text);
}
.profile__data {
opacity: 0;
}
.profile--unexpanded > .profile__data, .profile--expanded > .profile__data {
width: 100%;
text-align: center;
padding-top: inherit;
height: 66px;
position: absolute;
top: 168px;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
.profile--unexpanded > .profile__data {
opacity: 0;
animation: unreveal 0.2s ease;
}
.profile--expanded > .profile__data {
opacity: 1;
animation: reveal 0.7s ease;
}
.profile__data > * > * {
display: block;
}
.profile__data > * > *:first-child {
font-size: 1.2rem;
font-weight: bold;
}
.profile__data > * > *:nth-child(2) {
font-size: 0.9rem;
}
@keyframes reveal {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes unreveal {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
@keyframes expand {
0% {
height: 180px;
}
100% {
height: 240px;
}
}
@keyframes unexpand {
0% {
height: 240px;
}
100% {
height: 180px;
}
}function expand(card) {
card.classList.toggle('profile--expanded');
// If card is not expanded after toggle, add 'unexpanded' class
if (!card.classList.contains('profile--expanded')) card.classList.toggle('profile--unexpanded');
// Else if card is expanded after toggle and still contains 'unexpanded' class, remove 'unexpanded'
else if (card.classList.contains('profile--expanded') && card.classList.contains('profile--unexpanded')) card.classList.toggle('profile--unexpanded');
}
function toggleTheme() {
let docu = document.querySelector('html');
docu.classList.toggle('light-theme');
docu.classList.toggle('dark-theme');
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.