Initial Commit

2024-02-22 20:30:09 -06:00
commit cac516cf79
7 changed files with 1080 additions and 0 deletions
--- a/html/styles.css
+++ b/html/styles.css
@@ -0,0 +1,126 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #151515;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #c5c5c5;
+}
+
+a {
+    color: #9cdcfe;
+}
+
+header {
+    padding: 2rem;
+    background-color: #212121;
+}
+
+h1 {
+    font-size: 50px;
+    line-height: 1.2;
+    letter-spacing: -1px;
+    color: #fff;
+}
+
+h2 {
+    font-size: 40px;
+    font-weight: normal;
+    margin-bottom: 20px;
+    color: #fff;
+}
+
+#contact-title {
+    font-size: 50px;
+    margin-bottom: 20px;
+}
+
+#contact ul {
+    padding-left: 0;
+}
+
+#contact li {
+    list-style: none;
+    margin-bottom: 20px;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 5% 45% 10% 35% 5%;
+    grid-template-rows: 10% 40% 5% 35% 10%;
+    height: 80vh;
+    grid-template-areas:
+        "empty header header header empty"
+        "empty projects empty contact empty"
+        "empty about empty empty empty"
+        "empty empty empty empty"
+        "footer footer empty footer footer";
+}
+
+.grid-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    justify-content: center;
+}
+
+.about-section {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row-start: 4;
+    grid-row-end: 4;
+    background-color: #484554;
+    border-radius: 10px 0 0 10px;
+}
+
+.projects-section {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row-start: 2;
+    grid-row-end: 2;
+    background-color: #4F5A6E;
+    border-radius: 0 10px 10px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.projects-section ul li {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+}
+
+.projects-section a {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.contact-section {
+    grid-column-start: 4;
+    grid-column-end: 4;
+    grid-row-start: 2;
+    grid-row-end: 3;
+
+    justify-content: flex-start;
+}
+
+footer {
+    grid-column-start: 5;
+    grid-column-end: 5;
+    grid-row-start: 1;
+    grid-row-start: 5;
+    background-color: #212121;
+}