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

Compare commits

base: Rain/Rainyy21.github.io:main-content
Branches Tags
Rain/Rainyy21.github.io:main Rain/Rainyy21.github.io:mobile Rain/Rainyy21.github.io:main-content
..
compare: Rain/Rainyy21.github.io:291b736315f64b51d76081354e8320fa48fd2055
Branches Tags
Rain/Rainyy21.github.io:main Rain/Rainyy21.github.io:mobile Rain/Rainyy21.github.io:main-content

3 Commits
main-content .. 291b736315

Author SHA1 Message Date
Rainyy21 291b736315 fix resizing issue 2026-05-27 16:28:46 -04:00
Simon Zheng 995dfbc8be Merge pull request #2 from Rainyy21/main-content 
added more text to the second page and style it
 2025-10-06 02:18:48 -04:00
Simon Zheng 12e83f183b Merge pull request #1 from Rainyy21/main-content 
second page
 2025-09-24 21:01:35 -04:00
6 changed files with 118 additions and 119 deletions
Expand all files Collapse all files
css/about.css
+15 -14
View File
@@ -1,35 +1,36 @@
/* text box and make it so it doesn't overflow out of the box */ /* text box and make it so it doesn't overflow out of the box */
#about.description{ .description {
font-family: monospace; font-family: monospace;
font-size: 1.5rems; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
white-space: normal; white-space: normal;
word-wrap: break-word; word-wrap: break-word;
height: 100rem; height: inherit;
width: 40rem; width: inherit;
} }
/* tittle (contain name, and simple text with icon) */ /* title (contain name, and simple text with icon) */
#about.tittle_text{ .title_text {
padding-bottom: 0rem; padding-bottom: 0rem;
} }
#about.tittle_text h1{
.title_text h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
/* education section */ /* education section */
#textbox.brooklyncollege{ .brooklyn_college_container {
border-left: 3px solid rgba(17, 17, 17, 0.5); border-left: 3px solid rgba(17, 17, 17, 0.5);
} }
#education.brooklyncollege{ .education_detail {
padding-left: 4px; padding-left: 4px;
font-size: .9rem; font-size: .9rem;
} }
/* hobbie section */ /* hobby section */
#bulletpoint.hobbie{ .hobby_list {
font-size:1.2rem; font-size: 1.2rem;
} }
css/main_button.css
+5 -5
View File
@@ -1,15 +1,15 @@
#social_button{ #social_button {
cursor: pointer; cursor: pointer;
background: none; background: none;
border: none; border: none;
} }
#social_text{
#social_text {
margin-top: 0; margin-top: 0;
color:var(--text-color) color: var(--text-color);
} }
.social{ .social {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
css/mainpage.css
+9 -10
View File
@@ -1,26 +1,25 @@
/* the text box isn't center yet */ /* the text box isn't center yet */
.box_body{ .box_body {
display: flex; display: flex;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
flex-direction: column; flex-direction: column;
height: 50vh; height: 50vh;
} }
/* welcome text and name text color */ /* welcome text and name text color */
.tittle_text{ .title_text {
font-size: 2.5rem; font-size: 2.5rem;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
margin-bottom: 10px; margin-bottom: 10px;
} }
.main_page_name{ .main_page_name {
color: var(--temp_primary-color); color: var(--primary-accent-color);
} }
.description{ .description {
font-family: monospace; font-family: monospace;
font-size: 1.5rems; font-size: 1.5rem;
font-weight: normal; font-weight: normal;
} }
css/style.css
+31 -32
View File
@@ -1,37 +1,40 @@
/* color for normal and darkmode */ /* color for normal and darkmode */
:root{ :root {
--primary-background-color: #ECEEDF; --primary-background-color: #ECEEDF;
--ground-footer-color: #CFAB8D; --ground-footer-color: #CFAB8D;
--second-footer-color: #D9C4B0; --second-footer-color: #D9C4B0;
--secondary-background-color: #BBDCE5; --secondary-background-color: #BBDCE5;
--temp_primary-color: #fffdd0; --primary-accent-color: #fffdd0;
--temp_secondary-color:#0070A9; --secondary-accent-color: #0070A9;
--text-color: #fcffe9; --text-color: #fcffe9;
}
body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
/* trying to make the color change */ /* trying to make the color change */
*{ * {
transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease;
} }
/* darkmode color */ /* darkmode color */
.dark{ .dark {
--primary-background-color: #78B9B5; --primary-background-color: #78B9B5;
--ground-footer-color: #320A6B; --ground-footer-color: #320A6B;
--second-footer-color: #065084; --second-footer-color: #065084;
--secondary-background-color: #0F828C; --secondary-background-color: #0F828C;
--text-color: #1a033b; --text-color: #1a033b;
} }
/* background color */ /* background color */
.bg_color{ .bg_color {
background-color: var(--primary-background-color); background-color: var(--primary-background-color);
} }
/* the darkmode button */ /* the darkmode button */
#theme_switch{ #theme_switch {
padding: 0; padding: 0;
background: none; background: none;
display: flex; display: flex;
@@ -41,73 +44,69 @@
cursor: pointer; cursor: pointer;
} }
#theme_switch svg{ #theme_switch svg {
width: 3.5rem; width: 3.5rem;
height: auto; height: auto;
fill:var(--secondary-background-color); fill: var(--secondary-background-color);
} }
#theme_switch svg:last-child{ #theme_switch svg:last-child {
display: none; display: none;
} }
.dark #theme_switch svg:first-child{ .dark #theme_switch svg:first-child {
display: none; display: none;
} }
.dark #theme_switch svg:last-child{ .dark #theme_switch svg:last-child {
display: block; display: block;
} }
/* the style of the main page */ /* the style of the main page */
.content_container {
.content_container{ display: flex;
display:flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
} }
.Square_content{
width: 50rem; .square_content {
height: 50rem; width: 50vw;
height: 65vh;
background: var(--secondary-background-color); background: var(--secondary-background-color);
border-radius: 1rem; border-radius: 1rem;
box-sizing: border-box; box-sizing: border-box;
} }
.website_top{ .website_top {
background-color: var(--temp_secondary-color); background-color: var(--secondary-accent-color);
padding:1rem; padding: 1rem;
border-top-left-radius: inherit; border-top-left-radius: inherit;
border-top-right-radius: inherit; border-top-right-radius: inherit;
} }
.website_text{ .website_text {
font-family: monospace; font-family: monospace;
font-size: 1.5rem; font-size: 1.5rem;
color: var(--text-color); color: var(--text-color);
} }
.header{ .header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#home_button{ #home_button {
border-style: none; border-style: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#home_button svg{ #home_button svg {
width: 3.5rem; width: 3.5rem;
height: auto; height: auto;
fill:var(--secondary-background-color); fill: var(--secondary-background-color);
} }
index.html
+31 -31
View File
@@ -3,81 +3,81 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- tittle --> <!-- title -->
<title>Rain website</title> <title>Rain website</title>
<!-- add a image --> <!-- add a image -->
<!-- css and js --> <!-- css and js -->
<link rel = "stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/style.css">
<link rel = "stylesheet" href="./css/mainpage.css"> <link rel="stylesheet" href="./css/mainpage.css">
<link rel = "stylesheet" href="./css/main_button.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/darkmode.js" defer></script>
<script type = "text/javascript" src = "./js/main.js" defer></script> <script type="text/javascript" src="./js/main.js" defer></script>
</head> </head>
<!-- the main body to edit --> <!-- the main body to edit -->
<body> <body>
<div class = "bg_color"> <div class="bg_color">
<!-- have a header --> <!-- have a header -->
<div class = "header"> <div class="header">
<!-- topright would be the dark mode --> <!-- topright would be the dark mode -->
<div class = "darkmode"> <div class="darkmode">
<button id = "theme_switch"> <button id="theme_switch">
<!-- add the mood and sun icon here --> <!-- 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="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> <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> </button>
</div> </div>
</div> </div>
<!-- my info from who i am and my social linke --> <!-- my info from who i am and my social linke -->
<div class = "content_container"> <div class="content_container">
<div class = "Square_content"> <div class="square_content">
<div class = "website_top"> <div class="website_top">
<div class = "website_text"> <div class="website_text">
Home Home
</div> </div>
</div> </div>
<!-- this might be where the whole stuff should be in --> <!-- this might be where the whole stuff should be in -->
<div class = "box_body"> <div class="box_body">
<!-- this is the text for the main page --> <!-- this is the text for the main page -->
<p class = "tittle_text"> <p class="title_text">
HI I'm <span class = "main_page_name"> Simon Zheng</span> HI I'm <span class="main_page_name"> Simon Zheng</span>
</p> </p>
<h2 class = "description"> <h2 class="description">
Student and Programmer Student and Programmer
</h2> </h2>
<!-- social box might need to move it --> <!-- social box might need to move it -->
<div class = "social"> <div class="social">
<div class = "about_button_placement"> <div class="about_button_placement">
<button class = "about_button" id="social_button" onclick="location.href='info.html'"> <button class="about_button" id="social_button" onclick="location.href='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> <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> <h2 id="social_text">About</h2>
</button> </button>
</div> </div>
<div class = "link_button_placement" > <div class="link_button_placement" >
<button class = "link_button" id="social_button"> <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> <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> <h2 id="social_text">Link</h2>
</button> </button>
</div> </div>
<div class = "work_button_placement"> <div class="work_button_placement">
<button class = "work_button" id="social_button"> <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> <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> <h2 id="social_text">Project</h2>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- footer for design look --> <!-- footer for design look -->
info.html
+27 -27
View File
@@ -8,70 +8,70 @@
<!-- add a image --> <!-- add a image -->
<!-- css and js --> <!-- css and js -->
<link rel = "stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/style.css">
<link rel = "stylesheet" href="./css/mainpage.css"> <link rel="stylesheet" href="./css/mainpage.css">
<link rel = "stylesheet" href="./css/main_button.css"> <link rel="stylesheet" href="./css/main_button.css">
<link rel = "stylesheet" href="./css/about.css"> <link rel="stylesheet" href="./css/about.css">
<script type = "text/javascript" src = "./js/darkmode.js" defer></script> <script type="text/javascript" src="./js/darkmode.js" defer></script>
<script type = "text/javascript" src = "./js/main.js" defer></script> <script type="text/javascript" src="./js/main.js" defer></script>
</head> </head>
<body> <body>
<div class = "bg_color"> <div class="bg_color">
<!-- have a header --> <!-- have a header -->
<div class = "header"> <div class="header">
<!-- topright would be the dark mode --> <!-- topright would be the dark mode -->
<div class = "darkmode"> <div class="darkmode">
<button id = "theme_switch"> <button id="theme_switch">
<!-- add the mood and sun icon here --> <!-- 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="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> <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> </button>
</div> </div>
<div class = "home_locat"> <div class="home_locat">
<!-- button to return home --> <!-- button to return home -->
<button id = "home_button" onclick="location.href='index.html'"> <button id="home_button" onclick="location.href='index.html'">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
</button> </button>
</div> </div>
</div> </div>
<!-- my info from who i am and my social linke --> <!-- my info from who i am and my social linke -->
<div class = "content_container"> <div class="content_container">
<div class = "Square_content"> <div class="square_content">
<div class = "website_top"> <div class="website_top">
<div class = "website_text"> <div class="website_text">
About About
</div> </div>
</div> </div>
<!-- this might be where the whole stuff should be in --> <!-- this might be where the whole stuff should be in -->
<div class = "box_body" id = "about"> <div class="box_body">
<!-- this is the text for the main page --> <!-- this is the text for the main page -->
<!-- adding my pfp image --> <!-- adding my pfp image -->
<div class = "tittle_text" id = "about"> <div class="title_text">
<h1>Simon Zheng</h1> <h1>Simon Zheng</h1>
<!-- add paragraph here to explain what i do --> <!-- add paragraph here to explain what i do -->
</div> </div>
<div class = "description" id = "about"> <div class="description">
<h2> <h2>
Hi I'm Simon, Student studying in computer science. Hi I'm Simon, Student studying in computer science.
</h2> </h2>
<br> <br>
<div class = "education" id = "textbox"> <div class="education">
<h1> <h1>
Education Education
</h1> </h1>
<div class = "brooklyncollege" id = "textbox"> <div class="brooklyn_college_container">
<div class = "brooklyncollege" id = education> <div class="education_detail">
<p> <p>
Bachelor of Science in Computer Science Bachelor of Science in Computer Science
</p> </p>
@@ -81,11 +81,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class = "interest" id = "textbox"> <div class="interest">
<h1> <h1>
Other interest Other interest
</h1> </h1>
<ul class = "hobbie" id = "bulletpoint"> <ul class="hobby_list">
<li> <li>
Game Game
</li> </li>
@@ -106,7 +106,7 @@
<!-- social box might need to move it --> <!-- social box might need to move it -->
</div> </div>
</div> </div>
</div> </div>
<!-- footer for design look --> <!-- footer for design look -->