diff --git a/css/about.css b/css/about.css
index 7cff5d3..f5bc2aa 100644
--- a/css/about.css
+++ b/css/about.css
@@ -1,35 +1,36 @@
/* text box and make it so it doesn't overflow out of the box */
-#about.description{
+.description {
font-family: monospace;
- font-size: 1.5rems;
+ font-size: 1.5rem;
font-weight: normal;
overflow-y: auto;
overflow-x: hidden;
white-space: normal;
word-wrap: break-word;
- height: 100rem;
- width: 40rem;
+ height: inherit;
+ width: inherit;
}
-/* tittle (contain name, and simple text with icon) */
-#about.tittle_text{
+/* title (contain name, and simple text with icon) */
+.title_text {
padding-bottom: 0rem;
}
-#about.tittle_text h1{
+
+.title_text h1 {
font-size: 2.5rem;
}
/* education section */
-#textbox.brooklyncollege{
- border-left: 3px solid rgba(17, 17, 17, 0.5);
+.brooklyn_college_container {
+ border-left: 3px solid rgba(17, 17, 17, 0.5);
}
-#education.brooklyncollege{
+.education_detail {
padding-left: 4px;
font-size: .9rem;
}
-/* hobbie section */
-#bulletpoint.hobbie{
- font-size:1.2rem;
-}
\ No newline at end of file
+/* hobby section */
+.hobby_list {
+ font-size: 1.2rem;
+}
diff --git a/css/main_button.css b/css/main_button.css
index 5edc3fd..c67c6ef 100644
--- a/css/main_button.css
+++ b/css/main_button.css
@@ -1,15 +1,15 @@
-#social_button{
+#social_button {
cursor: pointer;
background: none;
border: none;
-
}
-#social_text{
+
+#social_text {
margin-top: 0;
- color:var(--text-color)
+ color: var(--text-color);
}
-.social{
+.social {
display: flex;
flex-direction: row;
justify-content: space-between;
diff --git a/css/mainpage.css b/css/mainpage.css
index 3b6edde..88e7314 100644
--- a/css/mainpage.css
+++ b/css/mainpage.css
@@ -1,26 +1,25 @@
/* the text box isn't center yet */
-.box_body{
+.box_body {
display: flex;
- align-items:center;
- justify-content:center;
+ align-items: center;
+ justify-content: center;
flex-direction: column;
height: 50vh;
}
-
/* welcome text and name text color */
-.tittle_text{
+.title_text {
font-size: 2.5rem;
font-family: 'Courier New', Courier, monospace;
margin-bottom: 10px;
}
-.main_page_name{
- color: var(--temp_primary-color);
+.main_page_name {
+ color: var(--primary-accent-color);
}
-.description{
+.description {
font-family: monospace;
- font-size: 1.5rems;
+ font-size: 1.5rem;
font-weight: normal;
-}
\ No newline at end of file
+}
diff --git a/css/style.css b/css/style.css
index 93cb864..ee8970e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,37 +1,40 @@
/* color for normal and darkmode */
-:root{
+:root {
--primary-background-color: #ECEEDF;
--ground-footer-color: #CFAB8D;
--second-footer-color: #D9C4B0;
--secondary-background-color: #BBDCE5;
- --temp_primary-color: #fffdd0;
- --temp_secondary-color:#0070A9;
+ --primary-accent-color: #fffdd0;
+ --secondary-accent-color: #0070A9;
--text-color: #fcffe9;
+}
+
+body {
margin: 0;
overflow: hidden;
-
}
+
/* trying to make the color change */
-*{
+* {
transition: background-color 0.4s ease, color 0.4s ease;
}
/* darkmode color */
-.dark{
+.dark {
--primary-background-color: #78B9B5;
--ground-footer-color: #320A6B;
--second-footer-color: #065084;
--secondary-background-color: #0F828C;
--text-color: #1a033b;
-
}
+
/* background color */
-.bg_color{
+.bg_color {
background-color: var(--primary-background-color);
}
/* the darkmode button */
-#theme_switch{
+#theme_switch {
padding: 0;
background: none;
display: flex;
@@ -41,73 +44,69 @@
cursor: pointer;
}
-#theme_switch svg{
+#theme_switch svg {
width: 3.5rem;
height: auto;
- fill:var(--secondary-background-color);
-
+ fill: var(--secondary-background-color);
}
-#theme_switch svg:last-child{
+#theme_switch svg:last-child {
display: none;
}
-.dark #theme_switch svg:first-child{
+.dark #theme_switch svg:first-child {
display: none;
}
-.dark #theme_switch svg:last-child{
+.dark #theme_switch svg:last-child {
display: block;
}
/* the style of the main page */
-
-.content_container{
- display:flex;
+.content_container {
+ display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
-.Square_content{
- width: 50rem;
- height: 50rem;
+
+.square_content {
+ width: 50vw;
+ height: 65vh;
background: var(--secondary-background-color);
border-radius: 1rem;
box-sizing: border-box;
}
-.website_top{
- background-color: var(--temp_secondary-color);
- padding:1rem;
+.website_top {
+ background-color: var(--secondary-accent-color);
+ padding: 1rem;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
-
}
-.website_text{
+.website_text {
font-family: monospace;
font-size: 1.5rem;
color: var(--text-color);
}
-.header{
+.header {
display: flex;
flex-direction: row;
}
-#home_button{
+#home_button {
border-style: none;
background: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
-
}
-#home_button svg{
+#home_button svg {
width: 3.5rem;
height: auto;
- fill:var(--secondary-background-color);
-
+ fill: var(--secondary-background-color);
}
diff --git a/index.html b/index.html
index 496226d..f3453fe 100644
--- a/index.html
+++ b/index.html
@@ -3,81 +3,81 @@
-
+
Rain website
-
-
-
+
+
+
-
-
+
+
-