<main class="main-wrapper">
<div class="avatar -full">
<img src="https://placehold.jp/0f6bff/ffffff/x.png?text=photo" class="profile-photo" alt="プロフィール写真" width="80" height="80" decoding="async">
<div class="text-wrapper">
<div class="name">ダミー ネーム</div>
<p class="introduction">
私の名前はダミー ネームです。フリーの制作者です。19xx年x月x日生まれ。どうぞよろしくお願いします。
<br class="display-sp">写真もダミー。
<a href="https://www.drifting-clouds.com/" class="link">drifting-clouds.com</a>
</p>
</div>
</div>
<div class="avatar -half mt24">
<img src="https://placehold.jp/0f6bff/ffffff/x.png?text=photo" class="profile-photo" alt="プロフィール写真" width="80" height="80" decoding="async">
<div class="text-wrapper">
<div class="name">ダミー ネーム</div>
<p class="introduction">
私の名前はダミー ネームです。フリーの制作者です。19xx年x月x日生まれ。どうぞよろしくお願いします。
<br class="display-sp">写真もダミー。
<a href="https://www.drifting-clouds.com/" class="link">drifting-clouds.com</a>
</p>
</div>
</div>
<div class="avatar -one-third mt24">
<img src="https://placehold.jp/0f6bff/ffffff/x.png?text=photo" class="profile-photo" alt="プロフィール写真" width="80" height="80" decoding="async">
<div class="text-wrapper">
<div class="name">ダミー ネーム</div>
<p class="introduction">
私の名前はダミー ネームです。フリーの制作者です。19xx年x月x日生まれ。どうぞよろしくお願いします。<br class="display-sp">写真もダミー。
<a href="https://www.drifting-clouds.com/" class="link">drifting-clouds.com</a>
</p>
</div>
</div>
</main>
<main class="main-wrapper">
<div class="avatar -full">
<img src="https://placehold.jp/0f6bff/ffffff/x.png?text=photo" class="profile-photo" alt="プロフィール写真" width="80" height="80" decoding="async">
<div class="text-wrapper">
<div class="name">ダミー ネーム</div>
<p class="introduction">
私の名前はダミー ネームです。フリーの制作者です。19xx年x月x日生まれ。どうぞよろしくお願いします。
<br class="display-sp">写真もダミー。
<a href="https://www.drifting-clouds.com/" class="link">drifting-clouds.com</a>
</p>
</div>
</div>
<div class="avatar -half mt24">
<img src="https://placehold.jp/0f6bff/ffffff/x.png?text=photo" class="profile-photo" alt="プロフィール写真" width="80" height="80" decoding="async">
<div class="text-wrapper">
<div class="name">ダミー ネーム</div>
<p class="introduction">
私の名前はダミー ネームです。フリーの制作者です。19xx年x月x日生まれ。どうぞよろしくお願いします。
<br class="display-sp">写真もダミー。
<a href="https://www.drifting-clouds.com/" class="link">drifting-clouds.com</a>
</p>
</div>
</div>
<div class="avatar -one-third mt24">
<img src="https://placehold.jp/0f6bff/ffffff/x.png?text=photo" class="profile-photo" alt="プロフィール写真" width="80" height="80" decoding="async">
<div class="text-wrapper">
<div class="name">ダミー ネーム</div>
<p class="introduction">
私の名前はダミー ネームです。フリーの制作者です。19xx年x月x日生まれ。どうぞよろしくお願いします。<br class="display-sp">写真もダミー。
<a href="https://www.drifting-clouds.com/" class="link">drifting-clouds.com</a>
</p>
</div>
</div>
</main>
/* No context defined. */
.avatar {
display: flex;
align-items: center;
width: 100%;
padding: 1rem;
border: 0.0625rem solid hsl(0deg, 0%, 20%);
}
@media print, screen and (min-width:64.0625em) {
.avatar {
gap: 1.5rem;
}
}
@media screen and (max-width:64em) {
.avatar {
gap: 1rem;
}
}
.avatar > .profile-photo {
display: block;
border-radius: 50%;
}
@media print, screen and (min-width:48em) {
.avatar > .profile-photo {
width: 7rem;
height: 7rem;
}
}
.avatar .name {
font-size: 1.1428571429rem;
font-weight: bold;
}
.avatar .introduction {
margin-top: 1rem;
}
.avatar .link {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
text-decoration: underline;
}
@media print, screen and (min-width:48em) {
.avatar .link {
display: block;
}
}
@media screen and (max-width:47.96875em) {
.avatar .link {
display: inline;
}
}
.avatar .link:hover, .avatar .link:focus {
text-decoration: none;
}
@media screen and (max-width:47.96875em) {
.avatar.-full > .profile-photo {
width: 6rem;
height: 6rem;
}
.avatar.-full .introduction {
font-size: var(--font-size-b);
}
}
.avatar.-full > .profile-photo {
margin: 0.125rem;
}
.avatar.-half {
width: 50%;
}
@media screen and (max-width:64em) {
.avatar.-half {
flex-direction: column;
}
.avatar.-half .name {
text-align: center;
}
}
@media screen and (max-width:47.96875em) {
.avatar.-half > .profile-photo {
width: 5.5rem;
height: 5.5rem;
}
.avatar.-half .introduction {
font-size: var(--font-size-b);
}
}
.avatar.-one-third {
flex-direction: column;
width: 33.3333333333%;
}
@media screen and (max-width:47.96875em) {
.avatar.-one-third > .profile-photo {
width: 4.5rem;
height: 4.5rem;
}
.avatar.-one-third .name {
font-size: var(--font-size-b);
}
.avatar.-one-third .introduction {
font-size: var(--font-size-b);
}
}
.avatar.-one-third .name {
text-align: center;
}
.avatar-wrap {
display: flex;
justify-content: space-between;
gap: 0.5rem;
}
@media print, screen and (min-width:64.0625em) {
.avatar-wrap .avatar.-half {
width: calc(50% - 1.5rem);
}
.avatar-wrap .avatar.-one-third {
width: calc(33.3333333333% - 1.5rem);
}
}
@media screen and (max-width:64em) {
.avatar-wrap .avatar.-half {
width: calc(50% - 0.5rem);
}
.avatar-wrap .avatar.-one-third {
width: calc(33.3333333333% - 0.5rem);
}
}
No notes defined.