initial commit

cse110-sp24-group31 · Jun 4, 2024 · 7da9dfa · 7da9dfa
1 parent 15fb9b5
commit 7da9dfa
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 82 deletions.
diff --git a/about.html b/about.html
diff --git a/aboutPage.html b/aboutPage.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Developer Journal</title>
+    <link rel="stylesheet" href="assets/styles/about.css">
+</head>
+<body>
+    <!-- NAVIGATION -->
+    <div class="main-nav">
+        <div class="nav-links">
+            <a href="index.html">Home</a>
+            <a href="about.html">About</a>
+        </div>
+    </div>
+
+    <!-- CONTENT -->
+    <div class="about-content">
+        <h1>About Team 31</h1>
+        <div class="about-section">
+            <p>
+                Team 31 is a dynamic group of students dedicated to pushing the boundaries of software engineering. Our team is composed of innovative thinkers and skilled developers who are passionate about creating impactful software solutions. Through collaborative efforts, we aim to tackle complex problems and deliver high-quality projects that reflect our commitment to excellence and continuous learning. We believe in the power of teamwork, creativity, and technical proficiency to drive progress and make a positive impact in the field of software engineering.
+            </p>
+            <img src="assets/images/Team/IMG_0443.jpg" alt="Team 31">
+        </div>
+
+        <h2>Meet The Team</h2>
+        <div class="team-section">
+            <div class="team-member">
+                <img src="assets/images/Team/IMG_0350.jpg" alt="Ishan">
+                <h3>Ishan Vaish</h3>
+                <p>Co-Lead</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/IMG_1822.jpg" alt="Nikhil">
+                <h3>Nikhil Mahendran</h3>
+                <p>Co-Lead</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/brian.png" alt="Zhamilya">
+                <h3>Brian Wen</h3>
+                <p>Designer</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/73856826678__5640C9A4-4C14-4FAD-83DD-033C2D93BAB1.png" alt="Liam">
+                <h3>Liam Mohler</h3>
+                <p>Developer</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/IMG_1706.jpg" alt="Charlotte">
+                <h3>Charlotte Dong</h3>
+                <p>Developer</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/Selfie503x610.jpg" alt="Newton">
+                <h3>Newton Chung</h3>
+                <p>Developer</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/1000003863.jpg" alt="Kevin">
+                <h3>Kevin Truong</h3>
+                <p>Developer</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/IMG_2086.jpg" alt="Gavin">
+                <h3>Gavin Guyal</h3>
+                <p>Developer</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/Zhamilya Shakirova.jpg" alt="Zhamilya">
+                <h3>Zhamilya Shakirova</h3>
+                <p>Developer</p>
+            </div>
+            <div class="team-member">
+                <img src="assets/images/Team/images-2.jpeg" alt="Brian">
+                <h3>Zillin Liu</h3>
+                <p>Planner</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/assets/images/Team/1000003863.jpg b/assets/images/Team/1000003863.jpg
diff --git a/assets/images/Team/2149739796.webp b/assets/images/Team/2149739796.webp
diff --git a/assets/images/Team/73856826678__5640C9A4-4C14-4FAD-83DD-033C2D93BAB1.png b/assets/images/Team/73856826678__5640C9A4-4C14-4FAD-83DD-033C2D93BAB1.png
diff --git a/assets/images/Team/IMG_0350.jpg b/assets/images/Team/IMG_0350.jpg
diff --git a/assets/images/Team/IMG_1706.jpg b/assets/images/Team/IMG_1706.jpg
diff --git a/assets/images/Team/IMG_1822.jpg b/assets/images/Team/IMG_1822.jpg
diff --git a/assets/images/Team/IMG_2086.jpg b/assets/images/Team/IMG_2086.jpg
diff --git a/assets/images/Team/Selfie503x610.jpg b/assets/images/Team/Selfie503x610.jpg
diff --git a/assets/images/Team/Zhamilya Shakirova.jpg b/assets/images/Team/Zhamilya Shakirova.jpg
diff --git a/assets/images/Team/brian.png b/assets/images/Team/brian.png
diff --git a/assets/images/Team/images.jpeg b/assets/images/Team/images.jpeg
diff --git a/assets/images/Team/neymar-brazil-2022-1668947300-97010.jpg b/assets/images/Team/neymar-brazil-2022-1668947300-97010.jpg
diff --git a/assets/styles/about.css b/assets/styles/about.css
@@ -1,44 +1,47 @@
 /* NAVIGATION BAR STYLES */
 .main-nav {
-    background-color: #FFFFFF;
+    background-color: purple;
     padding: 15px 0;
     width: 100%;
     height: 60px;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    justify-content: center; /* Centering the navigation links */
+    position: relative;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.main-nav .brand, .main-nav .nav-links {
+.nav-links {
     display: flex;
-    align-items: center;
-}
-
-.main-nav .brand {
-    margin-left: 20px;
-    font-size: 1.5em;
-    color: #000000;
-    font-weight: bold;
+    gap: 20px;
 }
 
-.main-nav .nav-links a {
-    color: #000000;
+.nav-links a {
+    color: #fff;
     text-decoration: none;
-    margin-right: 20px;
     transition: color 0.2s;
+    font-size: 1.2em;
+    font-weight: bold;
 }
 
-.main-nav .nav-links a:hover {
-    color: var(--hover-color);
+.nav-links a:hover {
+    color: #ffd700;
 }
 
 /* ABOUT PAGE STYLES */
 .about-content {
-    padding: 20px;
+    padding: 40px 20px;
     max-width: 1000px;
     margin: 0 auto;
 }
 
+.about-content h1 {
+    margin-top: 0;
+    color: #333;
+    font-size: 2.5em;
+    border-bottom: 2px solid purple;
+    padding-bottom: 10px;
+}
+
 .about-section {
     display: flex;
     flex-direction: column;
@@ -47,37 +50,71 @@
     margin-bottom: 40px;
 }
 
+.about-section p {
+    font-size: 1.1em;
+    line-height: 1.6;
+    color: #555;
+    max-width: 800px;
+}
+
 .about-section img {
+    display: block;
+    margin: 20px 0;
     width: 100%;
     height: auto;
     max-width: 600px;
-    margin-top: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .team-section {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
+    justify-content: center;
     gap: 20px;
 }
 
 .team-member {
-    flex: 1 1 200px;
+    flex: 1 1 calc(25% - 1rem);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
     margin-bottom: 20px;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.team-member:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .team-member img {
-    width: 100%;
-    height: auto;
-    border-radius: 8px;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 10px;
 }
 
 .team-member h3 {
     margin: 10px 0 5px 0;
+    color: #333;
 }
 
 .team-member p {
-    color: red;
+    color: purple;
     font-weight: bold;
 }
+
+h2 {
+    color: #333;
+    font-size: 2em;
+    border-bottom: 2px solid purple;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+}