Merge pull request #6 from code4policy/about-us-styling

Website styling, data source pop-up, and updated mini bios
code4policy · Jan 13, 2025 · 9d7a4e8 · 9d7a4e8
2 parents 2221c34 + 8e9c28e
commit 9d7a4e8
Show file tree

Hide file tree

Showing 12 changed files with 352 additions and 25 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/harvard-logo.png b/images/harvard-logo.png
diff --git a/index.html b/index.html
@@ -2,9 +2,50 @@
 <html>
     <head>
         <title>Demo Website</title>
+        <link rel="stylesheet" href="styles/demo-style.css">
+        <meta charset="UTF-8">
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     </head>
     <body>
-        <h1>Our Demonstration Website</h1>
-        <a href='our-team/index.html'>Learn more about our team</a>
-    </body>
+
+        <!-- Banner -->
+        <div class="banner">
+            <div class="banner-content">
+                <div class="banner-text">
+                    <h1>Anganwadi Centers</h1>
+                    <a href="our-team/index.html" class="home-button">About Us</a>
+                </div>
+                <img src="images/harvard-logo.png" alt="Harvard Logo" class="banner-logo">
+            </div>
+        </div>
+
+        <!-- Main Content Section -->
+        <div class="content-container">
+            <div class="intro-box">
+                <p>
+                    Created through the "Programming and Data for Policymakers" course at the Harvard Kennedy School, this platform showcases data from India’s Anganwadi centers. The platform aims to empower parents, researchers, and policymakers with insights to improve early childhood education.
+                </p>
+
+                <!-- Button to Open Modal -->
+                <a href="#popup-modal" class="popup-button">Data Source</a>
+
+                <!-- Pop-Up Modal -->
+                <div id="popup-modal" class="modal">
+                    <div class="modal-content">
+                        <a href="#" class="close-button">&times;</a>
+                        <p>
+                            This platform utilizes data gathered and maintained by UNICEF through its Anganwadi Centers. The data is collected on an annual basis.
+                        </p>
+                    </div>
+                </div>
+                <p></p>
+            </div>
+
+            <!-- Main Text Content -->
+            <div class="main-content">
+                <h2>Dashboard</h2>
+                    <p>The functionality of the platform will go here.</p>
+                    <a href='our-team/index.html'>Learn more about our team</a>
+            </div>
+        </div>
 </html>
diff --git a/our-team/.DS_Store b/our-team/.DS_Store
diff --git a/our-team/images/.DS_Store b/our-team/images/.DS_Store
diff --git a/our-team/images/harvard-logo.png b/our-team/images/harvard-logo.png
diff --git a/our-team/images/manish.png b/our-team/images/manish.png
diff --git a/our-team/images/ruiz.png b/our-team/images/ruiz.png
diff --git a/our-team/images/sanno.png b/our-team/images/sanno.png
diff --git a/our-team/index.html b/our-team/index.html
@@ -4,25 +4,46 @@
         <title>About Us - Demo Website</title>
         <link rel="stylesheet" href="styles/about-us-style.css">
         <meta charset="UTF-8">
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     </head>
     <body>
 
-    <h1>About Us!</h1>
-
+    <div class="banner">
+        <div class="banner-content">
+            <div class="banner-text">
+                <h1>About Us</h1>
+            <a href="../index.html" class="home-button">Demo</a>
+            </div>
+            <img src="images/harvard-logo.png" alt="Harvard Logo" class="banner-logo">
+        </div>
+    </div>
+
+    <div class="intro-box">
+        <p>
+            This page was created as a collaborative project for "Programming & Data for Policymakers" (DPI 691MA) taught by Professors 
+            Dhrumil Mehta and Aarushi Sahejpal at the Harvard Kennedy School.
+        </p>
+    </div>
+
     <div class="member">     
+        <img src="images/manish.png" alt="Manish Sharma" class="member-photo">
         <h2>Manish Sharma</h2>
-        <p>Manish Sharma is an MC/MPA candidate and a social entrepreneur working in the domain of higher education.</p>
+        <p>Manish Sharma is a Master in Public Administration (MC/MPA) candidate at the Harvard Kennedy School (HKS), with a strong background in education and social impact. He has worked extensively on improving learning outcomes in public schools and enabling marginalized students to access post-secondary education opportunities. Passionate about leveraging technology for societal good, Manish is particularly interested in exploring innovative solutions at the intersection of artificial intelligence and social impact to drive equitable access and transformative change in education and beyond.
+        </p>
     </div>
 
     <div class="member">
+        <img src="images/ruiz.png" alt="Ruiz Clark" class="member-photo">
         <h2>Ruiz Clark</h2>
         <p>Ruiz Clark, a seasoned educational leader with 18 years of experience, is currently pursuing a Doctorate in Education Leadership (Ed.L.D.) at Harvard University. Ruiz began his career as a public school teacher and has since held leadership roles in the US, India, Malaysia, and Armenia. As Deputy CEO of Teach For Armenia, he authored a $24 million funding proposal to expand the organization's core program across the country, raised $2.5 million through the "End the Digital Divide Campaign," and launched an innovation accelerator supporting over 200 student-led projects. Within the field of technology, Ruiz possesses a coding certificate from the University of Denver and a micro-credential in AI Prompt Engineering for Educators from the Relay Graduate School of Education. He is passionate about educational equity and is focused on leveraging AI to transform public education.</p>
     </div>
 
     <div class="member">
+        <img src="images/sanno.png" alt="Sanno Srivastava" class="member-photo">
         <h2>Sanno Srivastava</h2>
-        <p>Sanno Srivastava is a public policy professional and a Mid-Career MPA candidate at Harvard Kennedy School. With a background in Early Childhood Care and Education (ECCE) and experience working with UNICEF, Sanno is passionate about education, workforce development, and innovative solutions in these sectors. Sanno is also exploring intersections of gender and development through projects in Uganda.</p>
+        <p>Sanno Srivastava is a public policy professional and a Mid-Career MPA candidate at Harvard Kennedy School, specializing in Early Childhood Care and Education (ECCE). As a recent Global Leader for Young Children with the World Forum Foundation, she advocates for quality early childhood development globally. With experience at UNICEF and in academia, Sanno has led ECCE reforms in India, advanced NEP 2020 compliance strategies, and empowered future leaders through teaching and leadership training. Passionate about gender equity and systemic change, she is also driving impactful projects in Uganda to improve outcomes for young children.</p>
     </div>  
 
     </body>
 </html>
+
diff --git a/our-team/styles/about-us-style.css b/our-team/styles/about-us-style.css
@@ -1,29 +1,82 @@
 /* General Styles */
 body {
-    font-family: 'Arial', sans-serif;
+    font-family: 'Poppins', Arial, sans-serif; /* Use Poppins, fallback to Arial or sans-serif */
     margin: 0;
     padding: 0;
     background-color: #f5f5f5; /* Light grey background */
     color: #333;
 }
 
-/* Header Logo and Title */
-.header {
-    background-color: #fff; /* White background for the logo area */
-    padding: 10px 20px;
-    text-align: center;
-    border-bottom: 2px solid #d3d3d3;
+h1, h2 {
+    font-family: 'Poppins', Arial, sans-serif; /* Apply Poppins to headers */
+    font-weight: 600; /* Use a bold weight for headings */
 }
 
-.header img {
-    max-height: 50px; /* Adjust logo size */
-    margin-bottom: 10px;
+/* Banner Styling */
+.banner {
+    background-color: #D2B48C; /* Professional tan color */
+    color: #333; /* Dark text for contrast */
+    padding: 15px 20px;
+    display: flex;
+    align-items: center; /* Vertically center content */
+    justify-content: space-between; /* Spread items across the banner */
+    width: 100%; /* Ensure the banner stretches across the page */
+    height: auto; /* Let the height adjust based on content */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
+    margin: 0; /* Remove extra space around the banner */
+    box-sizing: border-box; /* Include padding/border in width calculations */
 }
 
-.header h1 {
-    font-size: 2.5em;
-    color: #800000; /* Harvard maroon */
-    margin: 10px 0;
+/* Banner Content */
+.banner-content {
+    display: flex;
+    align-items: center; /* Vertically center the content */
+    justify-content: space-between; /* Separate text group and logo */
+    width: 100%; /* Ensure content spans the full width */
+}
+
+/* Text Content */
+.banner-text {
+    display: flex; /* Group the "About Us" text and Home button */
+    align-items: center; /* Vertically align the text and button */
+    gap: 15px; /* Add spacing between the text and the button */
+}
+
+.banner-text h1 {
+    margin: 0;
+    font-size: 1.8em;
+    font-weight: bold;
+}
+
+.banner-text p {
+    margin: 5px 0 0 0;
+    font-size: 1em;
+}
+
+/* Logo */
+.banner-logo {
+    height: 60px; /* Adjust size of the logo */
+    object-fit: contain; /* Ensure proper scaling */
+}
+
+/* Home Button Styling */
+.home-button {
+    background-color: #fff; /* White background */
+    color: #333; /* Dark text for contrast */
+    padding: 8px 15px; /* Add padding for a button-like appearance */
+    border: 1px solid #ddd; /* Subtle border for definition */
+    border-radius: 5px; /* Rounded corners */
+    font-size: 1em; /* Standard font size */
+    font-family: 'Poppins', Arial, sans-serif; /* Match banner font */
+    text-decoration: none; /* Remove underline from the link */
+    cursor: pointer; /* Change cursor to pointer on hover */
+    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
+}
+
+/* Hover Effect */
+.home-button:hover {
+    background-color: #D2B48C; /* Light tan background on hover */
+    color: #fff; /* White text on hover */
 }
 
 /* Member Section Styling */
@@ -33,18 +86,52 @@ body {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
     margin: 20px auto;
     padding: 20px;
+    padding-top: 80px; /* Add extra padding to accommodate the profile photo */
     max-width: 600px; /* Center and limit width */
+    text-align: left; /* Align the text content to the left */
+    position: relative; /* Ensure child elements like photos are positioned relative to this container */
 }
 
 .member h2 {
+    margin-top: 0; /* Remove unnecessary top margin */
+    font-size: 1.8em; /* Adjust font size for emphasis */
     color: #800000; /* Harvard maroon */
-    font-size: 1.8em;
-    margin-bottom: 10px;
 }
 
 .member p {
-    font-size: 1em;
-    line-height: 1.6;
+    margin-top: 10px; /* Add spacing between the header and paragraph */
+    line-height: 1.6; /* Improve readability */
+    font-size: 1em; /* Standard font size */
+}
+
+/* Member Photo */
+.member-photo {
+    width: 105px; /* Set the width of the photo */
+    height: 105px; /* Set the height of the photo */
+    border-radius: 50%; /* Make the photo circular */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
+    position: absolute; /* Position the photo relative to the .member container */
+    top: 20px; /* Place it at the top of the box */
+    right: 20px; /* Align the photo to the top-right corner */
+    object-fit: cover; /* Ensure the image fills the circular shape without distortion */
+    border: 3px solid #fff; /* Add a white border for separation */
+    background-color: #f5f5f5; /* Match the page background for consistency */
+}
+
+/* Intro Box Styling */
+.intro-box {
+    margin: 20px auto; /* Add space and center the box */
+    width: 90%; /* Allow it to adjust based on screen size */
+    max-width: 610px; /* Limit maximum width for readability */
+    background-color: #F5E8D3; /* Light tan background */
+    border: 1px solid #E0D2BA; /* Subtle border in a slightly darker tan */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add slight shadow for depth */
+    padding: 15px; /* Add padding inside the box */
+    border-radius: 8px; /* Rounded corners */
+    font-size: 1em; /* Default font size */
+    color: #333; /* Dark text for contrast */
+    line-height: 1.6; /* Improve readability */
+    text-align: center; /* Center-align the text */
 }
 
 /* Utility Classes */