diff --git a/public/css/style.css b/public/css/style.css index 5d6d24e..8504a8b 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1484,4 +1484,238 @@ ul { /* Click Effects to Maintain Color */ .custom-social-links a:active i { color: inherit; /* Maintain the color after clicking */ -} \ No newline at end of file +} + +/* Section Styles */ +.section4 { + background-color: #eef2f3; /* Light background color */ + padding: 50px 20px; + text-align: center; +} + +.section-title { + font-size: 2.5rem; + color: #333; + margin-bottom: 40px; + text-transform: uppercase; /* Uppercase titles */ +} + +.img_container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + margin-bottom: 40px; /* Add spacing below image container */ +} + +.image_boxes { + position: relative; + overflow: hidden; + border-radius: 15px; + transition: transform 0.3s ease; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Add shadow for depth */ +} + +.image_boxes img { + border-radius: 15px; + width: 100%; + height: auto; + transition: transform 0.3s ease; /* Transition for image scaling */ +} + +.image_boxes:hover { + transform: scale(1.05); /* Slight scaling on hover */ +} + +.overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); /* Dark overlay for contrast */ + color: white; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + transition: opacity 0.3s ease; + border-radius: 15px; /* Match overlay with image corners */ +} + +.image_boxes:hover .overlay { + opacity: 1; +} + +.stu_section { + margin-top: 40px; +} + +.stu_para { + margin-bottom: 20px; + font-size: 1.2rem; + color: #555; /* Soft text color */ + line-height: 1.5; /* Improved line spacing for readability */ +} + +.explore-btn { + background-color: #007BFF; /* Bootstrap primary color */ + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 1.2rem; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; /* Button transitions */ +} + +.explore-btn:hover { + background-color: #0056b3; /* Darker shade on hover */ + transform: scale(1.05); /* Scale effect on hover */ +} + +.stk_section { + margin-top: 40px; +} + +.stk_section_para { + margin-bottom: 20px; +} + +.last_img { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 20px; /* Added spacing above last images */ +} + +.last_img_boxes img { + width: 150px; + height: 100px; + border-radius: 10px; + transition: transform 0.3s ease; /* Transition for image scaling */ +} + +.last_img_boxes img:hover { + transform: scale(1.05); /* Slight scaling on hover */ +} + +.img_container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.image_boxes { + position: relative; + width: 100%; + max-width: 325px; /* Adjust as necessary */ + margin: 10px; + background-color: #f0f4f8; /* Light background color */ + border-radius: 8px; /* Rounded corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */ + overflow: hidden; /* Prevent overflow */ + transition: transform 0.3s; /* Smooth scaling on hover */ +} + +.image_boxes:hover { + transform: scale(1.05); /* Scale up on hover */ +} + +.details { + padding: 15px; /* More padding for comfort */ + background-color: #e0f7fa; /* Light cyan background */ + border-top: 2px solid #00838f; /* Teal border at the top */ + color: #333; /* Dark text for contrast */ + text-align: left; /* Left align text */ +} + +.details h3 { + margin: 0 0 10px 0; /* Margin below the heading */ + color: #00796b; /* Dark teal heading */ +} + +.details p { + margin: 5px 0; /* Spacing between paragraphs */ +} + +/* Styles for the overlay (optional) */ +.overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ + color: white; /* White text for contrast */ + display: flex; + justify-content: center; + align-items: center; + opacity: 0; /* Initially hidden */ + transition: opacity 0.3s; /* Smooth transition */ +} + +.image_boxes:hover .overlay { + opacity: 1; /* Show overlay on hover */ +} + +.img_container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.image_boxes { + position: relative; + width: 100%; + max-width: 325px; /* Adjust as necessary */ + margin: 10px; + background-color: #e0f7fa; /* Light cyan background to fill entire box */ + border-radius: 8px; /* Rounded corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */ + overflow: hidden; /* Prevent overflow */ +} + +.image_boxes img { + width: 100%; + height: auto; /* Maintain aspect ratio */ + display: block; /* Remove bottom space below image */ + border-radius: 8px 8px 0 0; /* Rounded top corners for the image */ +} + +.details { + padding: 15px; /* More padding for comfort */ + background-color: #e0f7fa; /* Light cyan background to fill the entire area */ + color: #333; /* Dark text for contrast */ + text-align: left; /* Left align text */ +} + +.details h3 { + margin: 0 0 10px 0; /* Margin below the heading */ + color: #00796b; /* Dark teal heading */ +} + +.details p { + margin: 5px 0; /* Spacing between paragraphs */ +} + +/* Overlay styles */ +.overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ + color: white; /* White text for contrast */ + display: flex; + justify-content: center; + align-items: center; + opacity: 0; /* Initially hidden */ + transition: opacity 0.3s; /* Smooth transition */ + z-index: 1; /* Ensure overlay is on top */ +} + +.image_boxes:hover .overlay { + opacity: 1; /* Show overlay on hover */ +} diff --git a/public/index.html b/public/index.html index afe9c23..add1019 100644 --- a/public/index.html +++ b/public/index.html @@ -318,72 +318,99 @@

Premiums

- -
-

Students Section

-
-
- + + +
+

Students Section

+
+
+ Student 1 +
+
Student 1
-
- +
+

Student 1

+

Passionate about science and technology, Student 1 is a leader in robotics competitions. With a strong foundation in programming and engineering principles, they strive to innovate and solve real-world problems.

+

Interests: Coding, Artificial Intelligence, and Physics.

-
- +
+
+ Student 2 +
+
Student 2
-
- +
+

Student 2

+

Aspiring artist, Student 2 creates stunning digital art and illustrations. Their work reflects a deep understanding of color theory and composition, making them a standout in the digital art community.

+

Interests: Painting, Graphic Design, and Photography.

-
- +
+
+ Student 3 +
+
Student 3
+
+
+

Student 3

+

Community service advocate, Student 3 organizes local outreach programs aimed at helping underprivileged communities. They believe in the power of service and work tirelessly to make a difference.

+

Interests: Volunteering, Social Justice, and Environmentalism.

+
+
+
+ Student 4 +
+
Student 4
+
+
+

Student 4

+

Environmentalist, Student 4 is dedicated to sustainability and conservation. They actively participate in eco-friendly initiatives and strive to raise awareness about environmental issues in their community.

+

Interests: Nature, Wildlife, and Eco-friendly practices.

-
-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea saepe incidunt vel eum aliquam dolor, ab - eveniet dicta repudiandae odit? Ea commodi, beatae similique facilis perferendis perspiciatis iste - aspernatur iure? - Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, sapiente laudantium harum - quisquam eum officiis quasi provident error iste, ipsam culpa quidem amet! Cupiditate quibusdam quos - facere ullam impedit vero.

+
+ Student 5 +
+
Student 5
+
+

Student 5

+

Sports enthusiast, Student 5 excels in athletics and team sports. They are known for their leadership on the field and their commitment to teamwork and fair play.

+

Interests: Basketball, Running, and Fitness.

+
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea saepe incidunt vel eum aliquam dolor, ab eveniet dicta repudiandae odit? Ea commodi, beatae similique facilis perferendis perspiciatis iste aspernatur iure? Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+ +
+

Stakeholders

+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic sapiente neque nihil. Dolorum adipisci nesciunt veritatis nam mollitia pariatur, totam in asperiores excepturi architecto quos facere, quae modi odit quas praesentium consequuntur corporis nemo!

-

Stakeholders

-
-
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic sapiente neque nihil. Dolorum adipisci - nesciunt veritatis nam mollitia pariatur, totam in asperiores excepturi architecto quos facere, quae - modi odit quas praesentium consequuntur corporis nemo! Assumenda, distinctio vel! Iste cumque - eligendi dolorem. Ipsam ratione vel laboriosam, molestiae inventore voluptatem repudiandae voluptate - similique obcaecati repellendus fugiat?

- -
-
-
- -
-
- -
-
- -
+
+
+ Stakeholder 1 +
+
+ Stakeholder 2 +
+
+ Stakeholder 3
-
+
+
+ + + @@ -461,5 +488,19 @@

Follow Us

+ +