連絡先カード
画面ひとつに情報を集約。そのまま見せるのも印刷するのも簡単です · その他 ●○○
ここを変えてみてください
プロンプト
フリーランスのための、クリーン&ミニマルな連絡先カードを作成してください。インストールの必要がなく、他のファイルも一切使わずにブラウザで開く単一のHTMLファイルにしてください。CSSとJavaScriptもその中に含めてください。画像ファイルや外部アドレスは一切使用せず、記号が必要な場合は絵文字や文字を使ってください。 名前、肩書き、そして連絡方法を最大3つまで掲載してください。画像を使うのではなく、イニシャルからシンプルなマークを描いてください。 すべてのテキストはクリックして編集できるようにし、ブラウザを閉じた後も変更内容が残るようにしてください。 裏返る動作(フリップ)を追加してください。カードをクリックすると本物の名刺のように裏返り、活動内容についての短い一文が表示されるようにします。表と裏の2面構成にしてください。 本物の名刺と同じ縦横比にし、適切な実寸サイズでページ上に印刷できるプリントボタンを追加してください。 ⚠️ フォームやサインアップ機能など、見ている人から情報を収集するような仕組みは一切追加しないでください。 完成したら、クリックだけでなく、スマートフォンでのタップでもきちんと裏返るか確認してください。
使った技: ファイルは1つだけ · まず何を作るか伝える · 表示するものを決める
もしカードがすぐに裏返って戻ってしまう場合は、「ホバーに反応させるのではなく、クリック時にクラスを切り替える(toggleする)ようにしてください」と指示してください。
返ってきたものを貼り付けてください
こんなものもあります