Rain/Rainyy21.github.io
1
0
Fork 0
mirror of https://github.com/Rainyy21/Rainyy21.github.io.git synced 2026-10-10 22:50:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

I continue with the button but not fully finish and added a readme to keep track of my note

Browse Source
This commit is contained in:
Rainyy21
2025-09-17 01:37:15 -04:00
parent 328e359d35
commit 39aa432069
8 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+13
View File
@@ -0,0 +1,13 @@
# My personal website
this is the document what I'm currently doing and what my plan is going to be
# goal
I need to finish the link button by making them better and adding color to them
after button think of how to send link to different page and what the layout of those page
# Done
competed the dark and light mode button
complete color scheme
complete main box to hold info
css/main_button.css
+17
View File
@@ -0,0 +1,17 @@
#social_button{
cursor: pointer;
background: none;
border: none;
}
#social_text{
margin-top: 0;
color:var(--text-color)
}
.social{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem;
}
css/mainpage.css
+1
View File
@@ -4,6 +4,7 @@
align-items:center;
justify-content:center;
flex-direction: column;
height: 50vh;
}
image/assignment_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 589 B

image/info_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 641 B

image/link_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 519 B

image/mail_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M146.67-160q-27 0-46.84-19.83Q80-199.67 80-226.67v-506.66q0-27 19.83-46.84Q119.67-800 146.67-800h666.66q27 0 46.84 19.83Q880-760.33 880-733.33v506.66q0 27-19.83 46.84Q840.33-160 813.33-160H146.67ZM480-454.67 813.33-670v-63.33L480-521.33l-333.33-212V-670L480-454.67Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 390 B

index.html
+24 -1
View File
@@ -10,6 +10,8 @@
<!-- 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>
@@ -51,7 +53,28 @@
</h2>
<!-- social box might need to move it -->
<div class = "social">
<div class = "about_button_placement">
<button class = "about_button" id="social_button">
<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 id = "social_text">About</h2>
</button>
</div>
<div class = "link_button_placement" >
<button class = "link_button" id="social_button">
<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 id = "social_text">Link</h2>
</button>
</div>
<div class = "work_button_placement">
<button class = "work_button" id="social_button">
<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 id = "social_text">Project</h2>
</button>
</div>
</div>
</div>
</div>