プロフィールリンクを作ろう

大阪 町子

現在Webデザイナーとしてのスキルを磨いております。ユーザーの目線を意識したクリエイティブなサイトの研究と制作に情熱を注いでいます。

6ヶ月以内にバナーデザインを30個完成させる、Webサイトのデザインと構築を3つ手掛ける、この目標に向かって日々努力しています。
私のデザインが、多くの人々にとって魅力的で使いやすいものとなるよう、一歩一歩成長していきたいと思っております。


公式Webサイト
X
Instagram

<div class="profile-link">
    <h1>大阪 町子</h1>
    <div class="profile-photo"><img src="./profile_photo.png" alt="なまえ名前"></div>
    <!-- 自己紹介 -->
    <div class="profile-text">
        <p>現在Webデザイナーとしてのスキルを磨いております。ユーザーの目線を意識したクリエイティブなサイトの研究と制作に情熱を注いでいます。</p>
        <p>6ヶ月以内にバナーデザインを30個完成させる、Webサイトのデザインと構築を3つ手掛ける、この目標に向かって日々努力しています。<br>私のデザインが、多くの人々にとって魅力的で使いやすいものとなるよう、一歩一歩成長していきたいと思っております。
        </p>
    </div>
    <!-- SNSリンク -->
    <ul class="sns-link">
        <li><a href="">公式Webサイト</a></li>
        <li><a href="">X</a></li>
        <li><a href="">Instagram</a></li>
    </ul>
</div>

body {
  line-height: 1.7;
  font-size: 16px;
  padding: 50px 0;
}

.profile-link {
  width: 90vw;
  max-width: 600px;
  margin-inline: auto;
}

h1 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 25px;
}

.profile-photo {
  text-align: center;
}

.profile-photo img {
  width: 200px;
}

.profile-text {
  padding: 25px 0;
}

.profile-text p+p {
  margin-top: 25px;
}

.sns-link {
  border-top: 1px solid #aaa;
}

.sns-link li {
  margin-top: 25px;
}

.sns-link a {
  display: block;
  padding: 15px;
  border: 1px solid #aaa;
  border-radius: 10px;
  text-align: center;
}

@media (hover: hover) {
  .sns-link a:hover {
    border: 1px solid #c05b5b;
    background-color: #e4d7d7;
  }
}