-
-
-
- TEDxVNRVJIET
-
-
28th October, 2024
-
-
-
VNR Vignana Jyothi Institute of Engineering and Technology
-
-
-
+
- {/* Speakers Section Below the Background Image */}
-
-
+
+
+
+ TEDxVNRVJIET
+
+
28th October, 2024
+
+
+
+
VNR Vignana Jyothi Institute of Engineering and Technology
+
+
+
+
+
+
+
);
}
diff --git a/src/components/home/Speakers/Speakers.js b/src/components/home/Speakers/Speakers.js
index 7e0ff62..fdbdc0d 100644
--- a/src/components/home/Speakers/Speakers.js
+++ b/src/components/home/Speakers/Speakers.js
@@ -13,11 +13,11 @@ const SpeakersInfo = [
facebook: ``
},
{
- name: 'Vanita',
- designation: '',
+ name: 'Ms Vanitha Datla',
+ designation: 'Vice Chairperson and Managing Director of Elico Ltd',
image: Vanita,
- description: 'Aditi Sharma is the winner of the Mrs. Universe India and Mrs. Universe Photogenic titles in 2022. She is a mother, homemaker, educator, and strong woman who inspires others through her social media platform. Aditi promotes the message that anything is possible if you work towards your dreams.',
- instagram: 'https://www.instagram.com/aditi.mrsuniverseindia/?igshid=YmMyMTA2M2Y%3D'
+ description: 'Ms Vanitha Datla, Vice Chairperson and Managing Director of Elico Ltd as well as Elico Healthcare Services Ltd, will be speaking at TEDĖ£ VNRVJIET 2024. With nearly three decades of experience across industries like Financial Services, Instrumentation, and Healthcare, Vanitha brings a wealth of knowledge and insight. Her work focusing on women in business and finance, including her past experience at Confederation of Indian Industry (CII) as its Chairperson, has led her to found Divershefy, a startup focused to create gender diversity in the Boards and Leadership teams. As a champion of diversity and women empowerment, Vanitha has led initiatives to enhance corporate inclusion and supports education for underprivileged children.',
+ instagram: ''
}
]
diff --git a/src/components/home/Timer/Timer.css b/src/components/home/Timer/Timer.css
index 36e26df..be9abe8 100644
--- a/src/components/home/Timer/Timer.css
+++ b/src/components/home/Timer/Timer.css
@@ -1,45 +1,78 @@
-/* Timer.css */
+.timer-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ background-color: rgba(0, 0, 0, 0.6); /* Translucent background */
+ border-radius: 10px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+ margin-top: 20px;
+ width: 100%; /* Full width for larger screens */
+ max-width: 800px; /* Constrain width */
+ backdrop-filter: blur(10px); /* Adds blur to the background */
+ overflow: hidden; /* Ensures that the content does not go out of the box */
+}
+
+.time-box {
+ text-align: center;
+ margin: 0 10px;
+ padding: 10px 20px;
+ background-color: rgba(255, 255, 255, 0.1); /* Slight translucent box */
+ border-radius: 10px;
+ color: #fff;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ flex: 1; /* Flex allows the boxes to shrink/expand */
+ min-width: 60px;
+}
+
+.time-value {
+ font-size: 2.5rem;
+ font-weight: bold;
+ white-space: nowrap; /* Prevents wrapping */
+}
+.time-label {
+ font-size: 1rem;
+ margin-top: 5px;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 768px) {
.timer-container {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 20px;
- background-color: rgba(0, 0, 0, 0.6); /* Translucent background */
- border-radius: 10px;
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
- margin-top: 20px;
- width: fit-content;
- backdrop-filter: blur(10px); /* Adds blur to the background */
- }
-
- .time-box {
- text-align: center;
- margin: 0 10px;
- padding: 10px 20px;
- background-color: rgba(255, 255, 255, 0.1); /* Slight translucent box */
- border-radius: 10px;
- color: #fff;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
- }
-
- .time-value {
- font-size: 2.5rem;
- font-weight: bold;
- }
-
- .time-label {
- font-size: 1rem;
- margin-top: 5px;
- }
-
- @media screen and (max-width: 768px) {
- .timer-container {
- flex-direction: column;
- }
-
- .time-box {
- margin: 10px 0;
- }
- }
-
\ No newline at end of file
+ flex-direction: row; /* Stack the timer elements vertically on small screens */
+ padding: 10px;
+ max-width: 100%;
+}
+
+.time-box {
+ margin-bottom: 10px; /* Add spacing between stacked time boxes */
+ padding: 10px;
+}
+
+.time-label {
+ font-size: 0.7rem; /* Smaller label for visibility */
+}
+}
+
+@media (max-width: 400px) {
+.timer-container {
+ /* flex-wrap: wrap; Allow wrapping for small screens */
+ flex-direction: row;
+ padding: 5px;
+}
+
+.time-box {
+ min-width: 45px; /* Reduce minimum width for smaller screens */
+ padding: 8px;
+ margin: 0 5px;
+ flex-basis: 40%;
+}
+
+.time-value {
+ font-size: 1.2rem; /* Reduce font size for smaller screens */
+}
+
+.time-label {
+ font-size: 0.6rem; /* Smaller label for visibility */
+}
+}
diff --git a/src/components/home/Timer/Timer.js b/src/components/home/Timer/Timer.js
index 7d06892..04a7dbc 100644
--- a/src/components/home/Timer/Timer.js
+++ b/src/components/home/Timer/Timer.js
@@ -34,13 +34,9 @@ function Timer() {
const timerComponents = [];
Object.keys(timeLeft).forEach((interval) => {
- if (!timeLeft[interval]) {
- return;
- }
-
timerComponents.push(
-
{timeLeft[interval]}
+
{timeLeft[interval] < 10 ? `0${timeLeft[interval]}` : timeLeft[interval]}
{interval}
);