<!--❀ xoxo ♡ your Sweet Cerise ❀-->

<!--
⠀⠀⠀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠀⡀⠀⠀⠀⠀⡀
⠀⠀⠀⢿⣄⡀⠀⠀⠀⠀⠀⠀⢰⡄⠀⢀⣼⡏⡀⣷⠀⢰⢓⡖⢳⡄
⠀⠀⠀⠀⠻⣿⣦⣄⠀⠀⠀⠀⣸⣇⠀⢸⡟⢀⡿⠟⣷⡌⣿⡶⠞⠁
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣶⣶⣶⣾⣼⣶⣼⣷⣯⣴⣴⣤⣼⣿⣥⣶⣤⣤⣤⣀⣀⣶⢶⡀⣷⡀
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⡿⣷⠈⠉⠻⣿⣭⣭⣭⠉⢻⣿⠛⠻⣯⠉⠉⠙⢻⠟⢻⠟⣭⢳⡄⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣤⠀⣤
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⢿⣾⣅⠄⡀⠀⠉⠉⠉⠻⢮⣜⠳⠼⠋⠀⠀⠀⠈⠉⠻⠤⠻⣦⡾⠛⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⡀⣠⢤⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⢈⣹⣨⣀⠀⠀⠀⠀⣀⡀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣷⣦⣀⠀⠀⠀⠀⠀⠉⠛⠶⢤⣀⡀⠀⠀⠀⠀⠀⠀⡾⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡀⠀⠀⡄⠈⣇⠀⢸⡅⣨⣇⡈⢧⡀⠀⣀⣀⣠⣶⠶⠶⠟⠣⢴⠛⣦⣼⣀⣤⠶⡛⠋⠉⠓
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⢿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠈⢙⢲⣤⠀⠀⠀⠀⠋⠀⡹⡄⠀⣀⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⠉⠛⢻⡇⠀⢹⣦⡟⠉⣸⠻⢠⣴⡷⠞⠋⠉⠁⠀⠀⠀⠀⠀⠈⠉⠀⠈⠙⠳⢮⣀⠀⠀⠀⠀⢠⡄
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣶⣤⣤⣀⣄⡀⠀⠀⠂⠘⠃⠀⠀⠀⠀⠀⠀⢷⡺⢿⡿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣙⡷⠤⣴⣿⡦⠋⠀⠻⣍⣹⣶⡞⠃⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡄⠀⠀⠀⠉⠛⠲⠦⠶⠟⠃
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠿⣿⣿⢿⡻⠿⠷⢦⡴⠲⡆⠀⠀⠀⠀⠀⠀⠀⢷⠞⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⠀⢠⣽⡃⠀⣺⠃⠉⢸⡶⢀⡼⢏⠁⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣤⡤⠖⠛⠉
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠿⣿⣿⣶⡾⠓⠺⢧⠀⠀⠀⠀⠀⠀⠀⠈⢷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⠙⣿⠬⠈⠉⠹⣿⡦⣄⣼⣿⠏⣹⠓⣦⣤⣤⠴⠶⠖⠛⠛⠉⠉⠁⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠿⢿⣽⣍⡠⠀⠀⠀⠀⠀⠀⠀⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣷⣾⡏⠀⠀⠀⠀⠹⢦⣬⣿⠷⡖⠫⣈⡷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢣⡉⠛⠶⣤⣤⣤⣤⣄⣀⣀⠀⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⡿⠏⠁⠀⠀⢀⣀⡼⠯⠋⠀⠀⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⠓⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣴⠛⣦⡴⣄⡀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣦⣤⣈⣿⢦⣄⡈⠉⠉⠛⠛⠛⠶⠶⠶⣤⣤⣤⣤⣤⣿⣯⣤⠷⠶⠞⠛⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⡿⠋⢠⣀⣀⠰⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢷⣠⣿⣦⣿⠃
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠑⢄⡙⣿⡄⠉⠻⣶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠙⣦⣴⡿⣞⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣘⣿⣒⣒⣸⣄⣹⣄⠾⣄⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠈⢻⣿⣿⡏
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⢾⣆⠀⡈⠙⠿⣷⣦⣀⠀⠀⠀⠀⠀⠘⣦⡶⠿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡴⠶⠛⠋⠉⠉⠉⢧⣀⡏⠙⡶⢾⣴⡗⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡏⢖⣴⡟⠃
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠓⢾⣢⠀⠀⠉⠛⠿⢶⣤⣀⠀⡀⠘⠀⠀⠀⠀⠀⠀⠀⠀⢀⡼⢧⡀⠀⠀⠀⠀⠀⢀⣤⣖⡏⠁⠄⠀⠀⠀⠀⠀⠀⠀⠀⠙⠞⠁⠀⠈⠻⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣠⢞⠁⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢶⣖⠀⠀⠀⠀⠈⠛⠷⣶⣤⣀⣠⣄⡀⠀⢀⣠⢤⣞⠁⠀⢹⣠⣤⣀⣤⣶⣻⣮⡶⠷⠛⠛⠛⠛⠲⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣾⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣤⢀⣼⣿⣽⣷⣄⢀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠒⠶⠀⠀⠀⠀⠀⠉⢛⣿⡀⣻⠈⢹⡅⠀⠉⣷⣼⠋⠀⢀⣽⣿⣿⠉⠁⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠟⠟⢚⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣬⣇⣨⠿⠉⠀⠈⠿⠛⠟
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⣀⢉⠿⣍⠙⣷⠆⠚⠙⡿⠉⢰⣿⣭⣿⠸⢤⣄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡶⢤⠀⠀⠀⠀⠀⠀⣀⣤⠷⠋⠋⠉⠁⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⢿⢀⠛⠒⢻⣄⣀⡰⢧⡀⢴⡧⠼⠉⣴⠊⠉⠉⠉⠛⠛⠶⠦⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡤⠼⣄⢸⠃⠉⢻⠤⢴⠿⡏
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠀⠀⠀⠁⠉⠀⠈⠉⠉⠁⠀⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠓⠦⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣴⣿⣥⡀⣹⢿⠒⢼⡿⠦⣿⡞⠛⣦⣤⣤⣀⣀⣀⣀⣀⣀⣀⣤⣤⣤⣄⣀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠳⢶⡶⠶⠶⣶⠶⠞⠛⠿⡟⠛⠋⠋⣏⠁⠸⢦⣀⡷⠒⠆⣸⠋⠀⠀⠙⠻⢿⣭⣭⣋⡉⢙⠙⠛⠶⠬⣭⣟⣶⣤⣤⣤⡴⡦⣤⡀⠀⠀⢀⣠⣴⠄
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠸⠇⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠐⣙⠯⣿⣉⢉⣳⠀⠀⠘⢷⡄⠈⠓⠦⣤⣤⣶⣯⠶⠶⠻⢿⣭⣄
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡿⢦⡀⡈⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣄⣸⠎⠛⠁⠀⠀⠀⠮⡧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠁
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⣮⣻⣷⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠉⠀⠀⠀⠀⠀⠀⠀⠁
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠝⠿
-->

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="description" content="SWEET CERISE ♡ your sweet and petite San Francisco companion.">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>xoxo | SWEET CERISE</title>
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"/>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
            <script type="text/javascript" src="script.js" defer></script>
            <style>
                body::before {background-image: url('bg/springbg_xoxo.webp');}
                .logo a {color:white;}
                nav a, .dropbtn {color: white;}
                nav a:hover {
                    background-color: hsla(335, 100%, 80%, 0.8);
                    color: white;
                }
                .dropdown:hover .dropbtn {
                    background-color: hsla(335, 100%, 80%, 0.8);
                    color: white;
                }
                .dropdown-menu a:hover {background-color: hsla(335, 100%, 80%, 0.5);}
                .btn-booking {
                    border: 2px solid white;
                    background-color: transparent;
                    color:white;
                }
                .btn-booking:hover {
                    background-color: white;
                    color: hsla(335, 100%, 80%, 0.8);
                }
                .hamburger {background-color: hsla(335, 100%, 80%, 0.8);} 
                main {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: auto;
                    margin-right: auto;
                }
                .image-x2-container{
                    position: relative;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 25px;
                    padding-top: 0px;
                    height: auto;
                    width: 75%;
                }
                #pink-star {
                    position: absolute;
                    display: block;
                    cursor: none;
                    top: 47%;
                    left: 23.5%;
                    text-decoration: none;
                    transition: transform 0.3s ease;
                }
                #falling-petals {
                    position: absolute;
                    display: block;
                    cursor: none;
                    top: 22%;
                    left: 55%;
                    text-decoration: none;
                    transition: transform 0.3s ease;
                }
                .floating-icon:hover {transform: scale(1.2);}

                @media screen and (max-width: 1024px) {
                    .image-x2-container {
                        padding-top: 100px;
                        width: 80%;
                    }
                    #pink-star {
                        top: 60%;
                        left: 23.5%;
                    }
                    #falling-petals {
                        top: 40%;
                        left: 55%;
                    }
                }
                @media screen and (max-width: 723px) {
                    nav a {color: hsla(335, 100%, 80%, 0.8);}
                    .dropbtn {color: hsla(335, 100%, 80%, 0.8);}
                    .dropdown:hover {background-color: hsla(335, 100%, 80%, 0.5);}
                    .btn-booking {border: 2px solid hsla(335, 100%, 80%, 0.8);}
                    .btn-booking:hover {
                        background-color: hsla(335, 100%, 80%, 0.8);
                        color: white;
                    }
                }
                @media screen and (max-width: 768px) {
                    body {padding-bottom: 75px;}
                    main {margin-top: 25px;}
                    .image-x2-container {
                        display: grid;
                        grid-template-columns: 1fr;
                        gap: 50px;
                        width: 80%;
                    }
                #pink-star {
                    top: 23%;
                    left: 49%;
                    }
                #falling-petals {
                    top: 62%;
                    left: 11%;
                    }
                }
                @media screen and (max-width: 520px) {
                    .image-x2-container {
                        gap: 25px;
                        padding-top: 0;
                        width: 85%;
                    }
                }
            </style>
        </head>
        <body oncontextmenu="return false;">
            <header>
                <div class="hamburger" id="hamburger-icon" onclick="toggleMenu()">
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                </div>
                <div class="logo"><a href="/">SWEET CERISE</a></div>
                    <nav class="navbar"> 
                        <div class="navlinks" id="nav-menu">
                            <a href="about">about</a>
                            <div class="dropdown">
                                <button class="dropbtn" id="openDropMenu">photos</button>
                                    <div class="dropdown-menu" id="dropMenu">
                                        <a href="professional">♡ professional</a>
                                        <a href="personal">♡ personal</a>   
                                    </div>
                            </div>
                            <div class="dropdown">
                                <button class="dropbtn">consideration</button>
                                    <div class="dropdown-menu" >
                                        <a href="dates">♡ san francisco</a>
                                        <a href="touring">♡ touring</a>
                                        <a href="arrangements">♡ arrangements</a>
                                        <a href="fmty">♡ fly me to you</a>
                                        <a href="online">♡ online</a>
                                    </div>
                            </div>
                            <div class="dropdown">
                                <button class="dropbtn" id="openDropMenu">details</button>
                                    <div class="dropdown-menu" id="dropMenu">
                                        <a href="everything">♡ everything</a>
                                        <a href="etiquette">♡ etiquette</a>   
                                    </div>
                            </div>
                            <button class="btn-booking">
                                <a href="booking" class="no-hover">booking</a>
                            </button>
                        </div>
                    </nav>
            </header>
            <main><!--❀ the photographer & the photograph ❀-->
                <div class="image-x2-container">
                    <img src="photo/goodnight.jpg" alt="" width="100%">
                        <div id="pink-star" class="floating-icon">
                            <img src="icon/rainbowstar.gif" >
                        </div>
                    <img src="photo/sweetdreams.jpg" alt="" width="100%">
                        <div id="falling-petals" class="floating-icon">
                            <img src="icon/fallingpetals.gif" >
                        </div>
                </div>
            </main>
            <footer>
                <a href="/">©20XX by sweet cerise </a>
                <a href="faq">faq</a> 
                <a href="mailto:sweetcerise@protonmail.com">sweetcerise@protonmail.com</a> 
                <a href="https://www.x.com/yoursweetcerise" target="_blank"><i class="iconoir-twitter"></i></a> 
                <a href="xoxo">xoxo</a>
            </footer>
        </body>
    </html>