reupload

1 files changed, 210 insertions, 0 deletions

diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..1409763
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,210 @@
+html {
+    font-family: "Open Sans", Arial;
+    color: #9F9FAA;
+    scroll-behavior: smooth;
+    background-color: #242528;
+}
+
+html.light * {
+    color: #444;
+    background-color: #F0F0F0;
+}
+
+html.light svg,
+html.light #about a {
+    color: #444;
+    fill: #444;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    min-height: 200vh;
+}
+
+nav {
+    width: 100vw;
+    font-weight: 600;
+    position: absolute;
+    top: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1rem;
+    text-align: center;
+}
+
+nav a {
+    margin: 0 1rem;
+    text-decoration: none;
+    color: #9F9FAA;
+}
+
+nav a:hover {
+    text-decoration: underline;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.25s ease-in-out;
+}
+
+/* Nav media query for mobile */
+@media only screen and (max-width: 600px) {
+    nav a {
+        display: none;
+        text-align: right;
+    }
+
+    nav #toggle {
+        display: block;
+    }
+}
+
+#toggle {
+    /* Move to the top right of the screen */
+    position: absolute;
+    top: 0;
+    right: 100px;
+    cursor: pointer;
+}
+
+/* Toggle media query for mobile */
+@media only screen and (max-width: 600px) {
+    #toggle {
+        right: 50px;
+    }
+}
+
+#moon, #sun {
+    position: absolute;
+    transition: opacity 0.1s ease;
+}
+
+#moon {
+    opacity: 1;
+}
+
+#sun {
+    opacity: 0;
+}
+
+/* Header styles */
+header {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+header h1 {
+    font-size: 45px;
+    width: 500px;
+}
+
+header h2 {
+    font-size: 25px;
+    width: 500px;
+}
+
+/* Header media query for mobile */
+@media only screen and (max-width: 600px) {
+    header h1 {
+        font-size: 33px;
+        width: 300px;
+    }
+
+    header h2 {
+        font-size: 23px;
+        width: 300px;
+    }
+}
+
+header a {
+    text-decoration: none;
+}
+
+svg {
+    margin: 0 15px;
+    height: 50px;
+    width: 50px;
+}
+
+/* Icons media query for mobile */
+@media only screen and (max-width: 600px) {
+    svg {
+        height: 40px;
+        width: 40px;
+        margin: 0 5px;
+    }
+}
+
+svg:hover {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.25s ease-in-out;
+}
+
+#down-arrow {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 2rem;
+}
+
+#about {
+    margin-top: 100vh;
+    width: 1000px;
+}
+
+#about h1 {
+    font-size: 25px;
+}
+
+#about h2 {
+    font-size: 20px;
+}
+
+#about p{
+    font-size: 18px;
+}
+
+#about ul li {
+    font-size: 18px;
+    margin-top: 7px;
+}
+
+/* About media query for mobile */
+@media only screen and (max-width: 600px) {
+    #about {
+        width: 90%;
+    }
+
+    #about h1 {
+        font-size: 1.5rem;
+    }
+
+    #about h2 {
+        font-size: 1.25rem;
+    }
+
+    #about p, #about ul li {
+        font-size: 1rem;
+    }
+
+    #about ul li {
+        margin-top: 10px;
+    }
+}
+
+#about a {
+    text-decoration: underline;
+    color: #9F9FAA;
+}
+
+#about a:hover {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.25s ease-in-out;
+}
\ No newline at end of file