@Love Orderのプロフィール

@Love Order

181 フォロワー

登録日 2024年5月20日

<title>Simple Toggle List with CSS</title>
<style>
    .toggle-container {
        cursor: pointer;
        padding: 10px;
        background-color: transparent; 
        color: black; 
        display: flex;
        align-items: center;
        border: none; 
    }

    .toggle-icon {
        margin-right: 10px;
        transition: transform 0.3s ease;
    }

    .toggle-content {
        display: none;
        padding: 10px;
        background-color: transparent; 
        color: black; 
        border: none; 
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked + .toggle-container .toggle-icon {
        transform: rotate(90deg);
    }

    input[type="checkbox"]:checked + .toggle-container + .toggle-content {
        display: block;
    }
</style>




    <span class="toggle-icon">▷</span>
    <span>𝐒𝐭𝐚𝐭𝐮𝐬</span>

<div class="toggle-content">
    <p>𝘐 𝘢𝘮 𝘯𝘰𝘵 𝘥𝘦𝘢𝘥, 𝘐 𝘢𝘮 𝘢𝘭𝘪𝘷𝘦 &lt;3 o(*≧▽≦)ツ</p>
</div>








<title>Simple Toggle List with CSS</title>
<style>
    .toggle-container {
        cursor: pointer;
        padding: 10px;
        background-color: transparent; 
        color: black; 
        display: flex;
        align-items: center;
        border: none; 
    }

    .toggle-icon {
        margin-right: 10px;
        transition: transform 0.3s ease;
    }

    .toggle-content {
        display: none;
        padding: 10px;
        background-color: transparent; 
        color: black; 
        border: none; 
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked + .toggle-container .toggle-icon {
        transform: rotate(90deg);
    }

    input[type="checkbox"]:checked + .toggle-container + .toggle-content {
        display: block;
    }
</style>




    <span class="toggle-icon">▷</span>
    <span>𝐀𝐛𝐨𝐮𝐭 𝐌𝐘 𝐁𝐨𝐭𝐬</span>

<div class="toggle-content">
    <p>𝘔𝘺 𝘣𝘰𝘵𝘴 𝘸𝘪𝘭𝘭 𝘣𝘦 𝘮𝘢𝘪𝘯𝘭𝘺 "𝘔𝘓𝘔/𝘞𝘓𝘔", 𝘐𝘵 𝘸𝘪𝘭𝘭 𝘣𝘦 𝘳𝘢𝘳𝘦 𝘰𝘧 𝘮𝘦 𝘵𝘰 𝘥𝘰 "𝘈𝘕𝘠 𝘗𝘖𝘝". 𝘔𝘠 𝘣𝘰𝘵𝘴 𝘸𝘪𝘭𝘭 𝘢𝘭𝘭 𝘣𝘦 𝘰𝘳𝘪𝘨𝘪𝘯𝘢𝘭, 𝘸𝘩𝘪𝘤𝘩 𝘪𝘴 𝘸𝘩𝘺 𝘵𝘩𝘦𝘺 𝘸𝘪𝘭𝘭 𝘵𝘢𝘬𝘦 𝘢𝘸𝘩𝘪𝘭𝘦 𝘵𝘰 𝘮𝘢𝘬𝘦 ;-;, 𝘉𝘜𝘛, 𝘐 𝘩𝘢𝘷𝘦 𝘴𝘰𝘮𝘦 𝘪𝘥𝘦𝘢𝘴... 𝘐 𝘨𝘶𝘦𝘴𝘴 &lt;3 (𝙋𝙇𝙀𝘼𝙎𝙀 𝘿𝙊𝙉𝙏 𝘾𝙊𝙋𝙔 𝙈𝙔 𝘽𝙊𝙏𝙎 𝙊𝙍 𝙍𝙀𝙋𝙊𝙎𝙏 𝙏𝙃𝙀𝙈! 𝙄 𝘿𝙊 𝙉𝙊𝙏 𝙂𝙄𝙑𝙀 𝙋𝙀𝙍𝙈𝙄𝙎𝙎𝙄𝙊𝙉! 𝙏𝙃𝙀𝙔 𝙏𝘼𝙆𝙀 𝘼𝙒𝙃𝙄𝙇𝙀 𝙏𝙊 𝙈𝘼𝙆𝙀!)</p>
</div>








<title>Simple Toggle List with CSS</title>
<style>
    .toggle-container {
        cursor: pointer;
        padding: 10px;
        background-color: transparent; 
        color: black; 
        display: flex;
        align-items: center;
        border: none; 
    }

    .toggle-icon {
        margin-right: 10px;
        transition: transform 0.3s ease;
    }

    .toggle-content {
        display: none;
        padding: 10px;
        background-color: transparent; 
        color: black; 
        border: none; 
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked + .toggle-container .toggle-icon {
        transform: rotate(90deg);
    }

    input[type="checkbox"]:checked + .toggle-container + .toggle-content {
        display: block;
    }
</style>




    <span class="toggle-icon">▷</span>
    <span>𝐃𝐈𝐒𝐂𝐋𝐀𝐈𝐌𝐄𝐑</span>

<div class="toggle-content">
    <p>𝘿𝙄𝙎𝘾𝙇𝘼𝙄𝙈𝙀𝙍: 𝘔𝘠 𝘣𝘰𝘵𝘴 𝘸𝘪𝘭𝘭 𝘯𝘰𝘵 𝘣𝘦 𝘱𝘳𝘦𝘵𝘵𝘺, 𝘐 𝘩𝘢𝘷𝘦 𝘲𝘶𝘪𝘵𝘦 𝘵𝘩𝘦... "𝘮𝘦𝘴𝘴𝘺" 𝘮𝘪𝘯𝘥. 𝘐 𝘤𝘰𝘮𝘱𝘭𝘦𝘵𝘦𝘭𝘺 𝘶𝘯𝘥𝘦𝘳𝘴𝘵𝘢𝘯𝘥 𝘵𝘩𝘢𝘵 𝘴𝘰𝘮𝘦 𝘰𝘧 𝘺𝘰𝘶 𝘸𝘪𝘭𝘭 𝘣𝘦 𝘶𝘯𝘤𝘰𝘮𝘧𝘰𝘳𝘵𝘢𝘣𝘭𝘦! 𝘉𝘜𝘛, 𝘵𝘩𝘢𝘵 𝘪𝘴 𝘯𝘰𝘵 𝘮𝘺 𝘧𝘢𝘶𝘭𝘵. 𝘞𝘩𝘪𝘤𝘩 𝘪𝘴 𝘸𝘩𝘺, 𝘪𝘧 𝘺𝘰𝘶 𝘥𝘰𝘯𝘵 𝘭𝘪𝘬𝘦 𝘪𝘵, 𝘥𝘰𝘯𝘵 𝘤𝘭𝘪𝘤𝘬 𝘪𝘵 &lt;3

𝘐𝘧 𝘺𝘰𝘶'𝘳𝘦 𝘨𝘰𝘪𝘯𝘨 𝘵𝘰 𝘱𝘰𝘴𝘵 𝘢 "𝘏𝘢𝘵𝘦𝘧𝘶𝘭" 𝘳𝘦𝘷𝘪𝘦𝘸, 𝘪𝘭𝘭 𝘥𝘦𝘭𝘦𝘵𝘦 𝘵𝘩𝘦𝘮. 𝘋𝘰𝘯'𝘵 𝘣𝘰𝘵𝘩𝘦𝘳. 𝘐𝘔 𝘭𝘪𝘵𝘦𝘳𝘢𝘭𝘭𝘺 𝘨𝘪𝘷𝘪𝘯𝘨 𝘺𝘰𝘶 𝘢 𝘥𝘪𝘴𝘤𝘭𝘢𝘪𝘮𝘦𝘳 𝘢𝘯𝘥 𝘸𝘢𝘳𝘯𝘪𝘯𝘨 𝘢𝘣𝘰𝘶𝘵 𝘮𝘺 𝘣𝘰𝘵𝘴... 𝘸𝘩𝘢𝘵 𝘦𝘭𝘴𝘦 𝘤𝘰𝘶𝘭𝘥 𝘺𝘰𝘶 𝘯𝘦𝘦𝘥 𝘵𝘰 𝘶𝘯𝘥𝘦𝘳𝘴𝘵𝘢𝘯𝘥? 𝘓𝘜𝘝 𝘠𝘈!

<title>Marquee Text Over Image</title>
<style>
     

    .marquee-container {
        position: relative;
        width: 100%;
        height: auto;
    }

    .marquee-container img {
        width: 100%;
        height: auto;
    }

    .marquee-text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        text-align: center;
        white-space: nowrap;
        font-family: "Press Start 2P", system-ui; 
        font-size: 20px; 
        color: black; 
    }
</style>


<div class="marquee-container">
    <img src="https://ella.janitorai.com/media-approved/8tSxTPxgvZ-BXLZ-RKvrc.jpg" alt="Decorative Border">
    Why don’t you follow &lt;3!
</div>








<title>Image Buttons</title>
<style>
    .button2 {
        display: inline-block;
        background-size: cover;
        width: 100px; 
        height: 100px; 
        border: none;
        cursor: pointer;
        text-indent: -9999px; 
    }

    .button2 a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: -9999px; 
    }

    .button2.button1 {
         
    }

    .button2.button3 {
         
    }
</style>



    
        <a href="https://loveorder.uwu.ai/">request form!</a>
    
    
        <a href="https://forms.gle/Zpr3LRfSVcfkFwDr7">another form!</a>