diff --git a/css/about.css b/css/about.css
new file mode 100644
index 0000000..fef5e7c
--- /dev/null
+++ b/css/about.css
@@ -0,0 +1,51 @@
+/* About Me*/
+#aboutmeText {
+ width: 100%;
+}
+
+.aboutcontainer {
+ width: 40%;
+ float: left;
+}
+
+.aboutPicContainer {
+ width: 60%;
+ height: 300px;
+ float: left;
+}
+
+#aboutPic {
+ float: right;
+ margin-top: 10%;
+ box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
+ height: 100%;
+}
+
+
+/* special design for Screen smaller than 600px -- mobile */
+@media screen and (max-width: 1200px) {
+ /* About Me*/
+ #aboutmeText {
+ width: 100%;
+ }
+
+ .aboutcontainer {
+ width: 100%;
+ }
+
+ .aboutPicContainer {
+ width: 100%;
+ height: 150px;
+ }
+
+ #section2 {
+ height: 130%;
+ }
+
+ #aboutPic {
+ float: initial;
+ margin-left: auto;
+ margin-right: auto;
+ /* todo nof loating right in middle */
+ }
+}
\ No newline at end of file
diff --git a/css/general.css b/css/general.css
new file mode 100644
index 0000000..390d3d0
--- /dev/null
+++ b/css/general.css
@@ -0,0 +1,37 @@
+body, html {
+ height: 100%;
+ scroll-behavior: smooth;
+ /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
+}
+
+/* general definition of a tile */
+.tile {
+ height: 80%;
+ padding-top: 70px;
+ padding-bottom: 70px;
+ min-height: 530px;
+}
+
+/* nav item formattings */
+.nav-item {
+ text-transform: uppercase;
+ text-decoration: none;
+ font: bold 15px/1.4 'Open Sans', arial, sans-serif;
+}
+
+/* screen larger than 600px -- desktop */
+@media screen and (min-width: 1201px) {
+
+}
+
+/* Screen smaller than 600px -- mobile */
+@media screen and (max-width: 1200px) {
+ /*background color of collapsed navbar*/
+ .navbar-nav {
+ background: #311E25;
+ }
+
+ .tile {
+ min-height: 300px;
+ }
+}
\ No newline at end of file
diff --git a/css/home.css b/css/home.css
new file mode 100644
index 0000000..5555982
--- /dev/null
+++ b/css/home.css
@@ -0,0 +1,75 @@
+#section1 {
+ background-color: #311E25;
+ color: white;
+}
+
+.lightOpacity {
+ opacity: 0.6;
+}
+
+.bigText {
+ font-family: 'Helvetica Neue', fantasy;
+}
+
+#preTitle {
+ opacity: 0.8;
+ color: #fffd80;
+}
+
+#homepicture {
+ float: left;
+ height: 400px;
+}
+
+/* screen larger than 600px -- desktop */
+@media screen and (min-width: 1201px) {
+ #section1 {
+ padding-top: 200px;
+ }
+
+ #preTitle {
+ font-size: 35px;
+ }
+
+ #titleText {
+ font-size: 80px;
+ }
+
+ #subTitleText {
+ font-size: 50px;
+ }
+
+ #meaningFullSentence {
+ width: 40%;
+ }
+}
+
+/* Screen smaller than 600px -- mobile */
+@media screen and (max-width: 1200px) {
+ #section1 {
+ padding-top: 100px;
+ height: 90%;
+ }
+
+ #preTitle {
+ font-size: 15px;
+ }
+
+ #titleText {
+ font-size: 30px;
+ }
+
+ #subTitleText {
+ font-size: 20px;
+ }
+
+ #meaningFullSentence {
+ width: 100%;
+ font-size: 13px;
+ }
+
+ #homepicture {
+ height: 300px;
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
deleted file mode 100644
index e85971e..0000000
--- a/css/index.css
+++ /dev/null
@@ -1,154 +0,0 @@
-body, html {
- height: 100%;
- scroll-behavior: smooth;
- /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
-}
-
-.tile {
- height: 80%;
- padding-top: 70px;
- padding-bottom: 70px;
-}
-
-.nav-item {
- text-transform: uppercase;
- text-decoration: none;
- font: bold 15px/1.4 'Open Sans', arial, sans-serif;
-}
-
-#section1 {
- background-color: #311E25;
- color: white;
-}
-
-.lightOpacity {
- opacity: 0.6;
-}
-
-.bigText {
- font-family: 'Helvetica Neue', fantasy;
-}
-
-#preTitle {
- opacity: 0.8;
- color: #fffd80;
-}
-
-#homepicture {
- float: left;
- height: 400px;
-}
-
-/* About Me*/
-#aboutmeText {
- width: 100%;
-}
-
-.aboutcontainer {
- width: 40%;
- float: left;
-}
-
-.aboutPicContainer {
- width: 60%;
- height: 300px;
- float: left;
-}
-
-#aboutPic {
- float: right;
- margin-top: 10%;
- box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
- height: 100%;
-}
-
-/* screen larger than 600px -- desktop */
-@media screen and (min-width: 1201px) {
- .tile {
- min-height: 530px;
- }
-
- #section1 {
- padding-top: 200px;
- }
-
- #preTitle {
- font-size: 35px;
- }
-
- #titleText {
- font-size: 80px;
- }
-
- #subTitleText {
- font-size: 50px;
- }
-
- #meaningFullSentence {
- width: 40%;
- }
-}
-
-/* Screen smaller than 600px -- mobile */
-@media screen and (max-width: 1200px) {
- /*background color of collapsed navbar*/
- .navbar-nav {
- background: #311E25;
- }
-
- .tile {
- min-height: 300px;
- }
-
- #section1 {
- padding-top: 100px;
- height: 90%;
- }
-
- #preTitle {
- font-size: 15px;
- }
-
- #titleText {
- font-size: 30px;
- }
-
- #subTitleText {
- font-size: 20px;
- }
-
- #meaningFullSentence {
- width: 100%;
- font-size: 13px;
- }
-
- #homepicture {
- height: 300px;
- width: 100%;
- }
-
- /* About Me*/
- #aboutmeText {
- width: 100%;
- }
-
- .aboutcontainer {
- width: 100%;
- }
-
- .aboutPicContainer {
- width: 100%;
- height: 150px;
- }
-
- #section2 {
- height: 130%;
- }
-
- #aboutPic {
- float: initial;
- margin-left: auto;
- margin-right: auto;
- /* todo nof loating right in middle */
- }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index bae2554..ce27ca3 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,9 @@
-
+
+
+