<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>
自己紹介ページをスタイルシートで作成してみました。 特徴としてはポップなイメージの色使いや、丸みをおび帯びたデザイン、シンプルな構成になるように作成してみました。
画像を好みのものにしてみたり、色やフォントなどをカスタムすることによって、そのサイトにあったデザインにカスタマイズすることできるように 意識して作成してみました!
コメントはまだありません...