ShareProgramming

えだまめ

えだまめ
＠edamame

tailwind cssを主に使用して使いやすいサンプルページを投稿しています！ 普段はフロントエンドエンジニアとして働いています
95 View

自己紹介ページサンプル

フロントエンド
2024年08月21日に投稿 
                <body class="bg-gray-100">
  <div class="max-w-lg mx-auto my-10 bg-white rounded-lg shadow-md p-5">
    <img class="w-32 h-32 rounded-full mx-auto" src="https://picsum.photos/200" alt="Profile picture">
    <h2 class="text-center text-2xl font-semibold mt-3">John Doe</h2>
    <p class="text-center text-gray-600 mt-1">Software Engineer</p>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 mx-3">Twitter</a>
      <a href="#" class="text-blue-500 hover:text-blue-700 mx-3">LinkedIn</a>
      <a href="#" class="text-blue-500 hover:text-blue-700 mx-3">GitHub</a>
    </div>
    <div class="mt-5">
      <h3 class="text-xl font-semibold">Bio</h3>
      <p class="text-gray-600 mt-2">John is a software engineer with over 10 years of experience in developing web and mobile applications. He is skilled in JavaScript, React, and Node.js.</p>
    </div>
  </div>
</body>

自己紹介ページをスタイルシートで作成してみました。 特徴としてはポップなイメージの色使いや、丸みをおび帯びたデザイン、シンプルな構成になるように作成してみました。

画像を好みのものにしてみたり、色やフォントなどをカスタムすることによって、そのサイトにあったデザインにカスタマイズすることできるように 意識して作成してみました！

コメント

コメントはまだありません...