🙆‍♀️

chatgptに古のHPを作ってもらった件part2

2023/06/23に公開

CSS

HTML

インターネット老人会

idea

2000年代に流行した今はダサいと感じるデザイン
流れる文字
ペットの猫のホームページ
アイキャッチをヘッダーに置く
グラデーションのボタン
コンテンツは中央寄せ

これで作ってもらいました
途中でfontをダサくしてくださいと言ったら
Comic Sans MSにしてくれました。
私はデザインのことはよくわかりませんがダサいようです

まだまだあの頃を再現できていないのでもう少しブラッシュアップしたいところです

<!DOCTYPE html>
<html>
<head>
    <title>私のペットの猫</title>
    <style>
        body {
            text-align: center;
            background-color: #f0f0f0;
            font-family: 'Comic Sans MS', sans-serif; /* Change the font here */
            color: purple; /* Change the font color here */
        }
        .header {
            background-image: url('header-image.jpg');
            height: 400px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-bottom: 50px;
        }
        .button {
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left, red, orange); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(right, red, orange); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(right, red, orange); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to right, red, orange); /* Standard syntax (must be last) */
            padding: 15px 25px;
            color: white;
            text-decoration: none;
            margin: 10px auto; /* Adjust the margin here */
            display: block; /* Change from 'inline-block' to 'block' */
            width: 300px;
        }
        .marquee {
            width: 50%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <h1>みりんちゃんのHP</h1>
    <p>welcome to my cat HP</p>
    <div class="marquee">
        <marquee>あなたは３４７４９５０９人目のお客様にゃ</marquee>
    </div>
    <a href="#" class="button">ぷろふぃーる</a>
    <a href="#" class="button">しゃしんかん</a>
    <a href="#" class="button">けいじばん</a>
    <p>キリ番は必ず報告するにゃ</p>
</body>
</html>

Discussion