Rainyy21.github.io/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title  -->
    <title>Rain website</title>
    <!-- add a image -->

    <!-- css and js -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/mainpage.css">
    <link rel="stylesheet" href="./css/main_button.css">


    <script type="text/javascript" src="./js/darkmode.js" defer></script>
    <script type="text/javascript" src="./js/main.js" defer></script>

</head>

<!-- the main body to edit -->
<body>
    <div class="bg_color">
        <!-- have a header -->
        <div class="header">
            <div></div> <!-- Spacer for consistency if needed -->
            <!-- topright would be the dark mode -->
            <div class="darkmode">
                <button id="theme_switch" aria-label="Toggle dark mode">
                    <!-- add the mood and sun icon here -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
                </button>
            </div>

        </div>

        <!-- my info from who i am and my social linke -->
        <div class="content_container">
            <div class="square_content">
                <div class="website_top">
                    <div class="website_text">
                        Home
                    </div>                        
                </div>
                <!-- this might be where the whole stuff should be in -->
                <div class="box_body">
                <!-- this is the text for the main page -->
                    <p class="title_text">
                        HI I'm <span class="main_page_name"> Simon Zheng</span>
                    </p>
                    <h2 class="description">
                        Student and Programmer
                    </h2>
                    <!-- social box might need to move it -->
                    <div class="social">

                        <div class="about_button_placement">
                            <button class="social_button" onclick="location.href='page/info.html'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M448.67-280h66.66v-240h-66.66v240Zm31.32-316q15.01 0 25.18-9.97 10.16-9.96 10.16-24.7 0-15.3-10.15-25.65-10.16-10.35-25.17-10.35-15.01 0-25.18 10.35-10.16 10.35-10.16 25.65 0 14.74 10.15 24.7 10.16 9.97 25.17 9.97Zm.19 516q-82.83 0-155.67-31.5-72.84-31.5-127.18-85.83Q143-251.67 111.5-324.56T80-480.33q0-82.88 31.5-155.78Q143-709 197.33-763q54.34-54 127.23-85.5T480.33-880q82.88 0 155.78 31.5Q709-817 763-763t85.5 127Q880-563 880-480.18q0 82.83-31.5 155.67Q817-251.67 763-197.46q-54 54.21-127 85.84Q563-80 480.18-80Z"/></svg>
                                <h2 class="social_text">About</h2>
                            </button>
                        </div>

                        <div class="link_button_placement" >
                            <button class="social_button" onclick="location.href='page/link.html'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M446.67-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h166.67v66.67H280q-55.56 0-94.44 38.84-38.89 38.84-38.89 94.33 0 55.49 38.89 94.49 38.88 39 94.44 39h166.67V-280ZM323.33-446.67v-66.66h313.34v66.66H323.33Zm190 166.67v-66.67H680q55.56 0 94.44-38.84 38.89-38.84 38.89-94.33 0-55.49-38.89-94.49-38.88-39-94.44-39H513.33V-680H680q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H513.33Z"/></svg>
                                <h2 class="social_text">Link</h2>
                            </button>
                        </div>

                        <div class="work_button_placement">
                            <button class="social_button" onclick="location.href='page/project.html'">
                                <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M186.67-120q-27.67 0-47.17-19.5T120-186.67v-586.66q0-27.67 19.5-47.17t47.17-19.5h192.66q7.67-35.33 35.84-57.67Q443.33-920 480-920t64.83 22.33Q573-875.33 580.67-840h192.66q27.67 0 47.17 19.5t19.5 47.17v586.66q0 27.67-19.5 47.17T773.33-120H186.67ZM280-280h275.33v-66.67H280V-280Zm0-166.67h400v-66.66H280v66.66Zm0-166.66h400V-680H280v66.67Zm200-181.34q13.67 0 23.5-9.83t9.83-23.5q0-13.67-9.83-23.5t-23.5-9.83q-13.67 0-23.5 9.83t-9.83 23.5q0 13.67 9.83 23.5t23.5 9.83Z"/></svg>
                                <h2 class="social_text">Project</h2>
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        
        <!-- footer for design look -->
        <footer>
            <!-- i could have a wavery floor background for art -->
        </footer>
    </div>
</body>


</html>