diff --git a/code_export.txt b/code_export.txt index b6769cd..6771dd7 100644 --- a/code_export.txt +++ b/code_export.txt @@ -1,9 +1,3 @@ -"./README.md" : -""" -msos spletna stran -""" - - "./css/base/_base.css" : """ /* ========================================================================== @@ -1064,139 +1058,464 @@ footer hr { "./css/pages/_about.css" : """ +/* css/pages/_about.css */ + /* ========================================================================== - About Us Page Specific Styles + About Us Page Specific Styles (Redesign) ========================================================================== */ /** - * This file contains styles used exclusively on the About us page. + * This file contains styles used exclusively on the "Our team, mission, vision & core values" page. * - * 1. Meet the team section - * 2. Our values section - * 3. Mission and Vision - * 4. Mobile Styles + * 1. Leadership Team Section + * 2. Our Core Values Section + * 3. Mission and Vision Section + * 4. Call to Action (FAQ) Section + * 5. Mobile Styles for the page */ -/* 1. Meet the team section */ +/* ========================================================================== + 1. Leadership Team Section + ========================================================================== */ + .team-section { - padding: 96px 80px; + padding: 48px 80px 96px; + background-color: #FFFFFF; text-align: center; } -.team-members-grid { +.team-section .page-header-section { + padding: 0; + margin-bottom: 64px; +} + +.team-grid { display: flex; justify-content: center; - gap: 16px; - flex-wrap: wrap; /* Allows wrapping on smaller screens */ + gap: 32px; + flex-wrap: wrap; max-width: 1280px; margin: 0 auto; } -.team-member-card { - flex: 1; - min-width: 240px; - max-width: 243px; /* Adjusted max-width to fit 5 cards in a 1280px container with gaps */ - background-color: #F9FAFB; - text-align: center; - padding: 24px; +.member-card { + position: relative; + width: 326px; + height: 400px; border-radius: 16px; + overflow: hidden; + color: #FFFFFF; + background-size: cover; + background-position: center; + transition: transform 0.3s ease-in-out; +} + +.member-card::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 60%; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); + z-index: 1; + transition: opacity 0.3s ease-in-out; +} + +.member-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #2D738C; + opacity: 0; + z-index: 2; + transition: opacity 0.3s ease-in-out; +} + +.member-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; - align-items: center; -} - -.team-member-card img { - width: 80px; - height: 80px; - border-radius: 50%; - object-fit: cover; - margin-bottom: 20px; -} - -.team-member-card h4 { - margin: 0 0 4px 0; - font-size: 18px; - font-weight: 600; - color: #101828; -} - -.team-member-card .role { - color: #FA7850; - font-size: 16px; - font-weight: 400; - margin-bottom: 8px; - min-height: 48px; /* Added min-height for alignment */ - display: flex; - align-items: center; justify-content: center; + align-items: center; + z-index: 3; } -.team-member-card .description { - font-size: 14px; - color: #667085; - flex-grow: 1; /* Allows the description to take up remaining space */ +.member-socials { + display: flex; + gap: 32px; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s; } -.team-member-card .social-icon-btn { - margin-top: 16px; - border-color: #EAECF0; +.member-socials a { + color: #FFFFFF; + font-size: 32px; + text-decoration: none; + transition: color 0.2s ease, transform 0.2s ease; +} + +.member-socials a:hover { + color: #FA7850; + transform: scale(1.1); +} + +.member-info { + text-align: center; + transform: translateY(115px); + transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.member-card h4 { + margin: 0 0 4px 0; + font-size: 24px; + font-weight: 600; + line-height: 29px; + text-transform: uppercase; +} + +.member-card .role { + margin: 0; + font-size: 16px; + font-weight: 500; + color: #FFE16E; + text-transform: uppercase; +} + +/* Hover effects only for devices that support it (desktops) */ +@media (hover: hover) { + .member-card:hover::before { + opacity: 0.8; + } + .member-card:hover::after { + opacity: 0; + } + .member-card:hover .member-socials { + opacity: 1; + visibility: visible; + transform: translateY(0); + transition: opacity 0.3s 0.1s ease, transform 0.3s 0.1s ease, visibility 0s 0s; + } + .member-card:hover .member-info { + transform: translateY(40px); + } } -/* 2. Our values section */ -.values-section { +#member-kristijan { background-image: url('../../images/about_kristijan.webp'); } +#member-lea { background-image: url('../../images/about_lea.webp'); } +#member-marko { background-image: url('../../images/about_marko.webp'); } +#member-marija { background-image: url('../../images/about_marija.webp'); } +#member-monika { background-image: url('../../images/about_monika.webp'); } + + +/* ========================================================================== + 2. Our Core Values Section + ========================================================================== */ + +.core-values-section { + padding: 80px 80px 120px; background-color: #F9FAFB; } -/* 3. Mission and Vision */ -.mission-vision { - display: flex; - justify-content: center; - gap: 32px; +.core-values-section > .page-header-section { + padding: 0; + margin-bottom: 64px; + background: transparent; + text-align: center; +} + +.core-values-section > .page-header-section h2 { + font-size: 36px; + font-weight: 600; + line-height: 44px; + letter-spacing: -0.02em; + color: #101828; +} + +.core-values-section > .page-header-section p { + font-size: 20px; + line-height: 30px; + color: #667085; max-width: 768px; - margin: 64px auto 0; - text-align: left; + margin: 20px auto 0; } -.mission-vision > div { - flex: 1; +.values-container { + max-width: 1062px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 64px; } -.mission-vision h4 { +.value-row { display: flex; align-items: center; - gap: 8px; - margin: 0 0 8px 0; + gap: 24px; } -/* 4. Mobile Styles for About Us page */ -@media (max-width: 1280px) { - .team-members-grid { - justify-content: center; /* Center items when they wrap */ - } +.value-row:nth-child(even) { + flex-direction: row-reverse; +} + +.value-image { + flex-basis: 519px; + flex-shrink: 0; +} + +.value-image img { + width: 100%; + height: 270px; + border-radius: 16px; + object-fit: cover; +} + +.value-content { + flex: 1; + text-align: left; + max-width: 519px; +} + +.value-content h3 { + font-size: 24px; + font-weight: 600; + line-height: 1.2; + color: #101828; + margin: 0 0 16px 0; +} + +.value-content p { + font-size: 16px; + line-height: 24px; + color: #667085; + margin: 0; +} + +/* ========================================================================== + 3. Mission and Vision Section + ========================================================================== */ + +.mission-vision-section { + padding: 96px 80px; + background-color: #FFFFFF; +} + +.mission-vision-section .page-header-section { + margin-bottom: 48px; + padding: 0; +} + +.mission-vision-section .page-header-section h2 { + font-size: 36px; + font-weight: 600; + color: #101828; + text-align: center; +} + +.mission-vision-grid { + display: flex; + justify-content: center; + gap: 40px; + max-width: 1060px; + margin: 0 auto; +} + +.mission-box, +.vision-box { + position: relative; + flex: 1; + height: 200px; + background: #F9FAFB; + border-radius: 12px; + cursor: pointer; + overflow: hidden; +} + +.box-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 40px; + box-sizing: border-box; + text-align: center; + transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; +} + +.box-content p { + font-family: 'Inter', sans-serif; + font-size: 18px; + line-height: 1.2; + color: #667085; + margin: 0; +} + +.box-content img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.mission-icon-content, +.vision-icon-content { + padding: 0; +} + +/* --- Animation Logic --- */ +.mission-text-content { opacity: 1; transform: translateY(0); } +.mission-icon-content { opacity: 0; transform: translateY(20px); } +.vision-text-content { opacity: 0; transform: translateY(20px); } +.vision-icon-content { opacity: 1; transform: translateY(0); } + +@media (hover: hover) { + .mission-vision-grid.show-vision .mission-text-content { opacity: 0; transform: translateY(-20px); } + .mission-vision-grid.show-vision .mission-icon-content { opacity: 1; transform: translateY(0); } + .mission-vision-grid.show-vision .vision-text-content { opacity: 1; transform: translateY(0); } + .mission-vision-grid.show-vision .vision-icon-content { opacity: 0; transform: translateY(-20px); } +} + +/* ========================================================================== + 4. Call to Action (FAQ) Section + ========================================================================== */ + +.faq-cta-section { + padding: 96px 80px; + background-color: #FFFFFF; +} + +.faq-cta-container { + max-width: 1280px; + margin: 0 auto; + padding: 40px 32px; + background-color: #F9FAFB; + border-radius: 16px; + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; +} + +.avatar-group { + display: flex; + position: relative; + width: 120px; + height: 56px; + justify-content: center; + align-items: center; +} +.avatar { + width: 48px; + height: 48px; + border-radius: 50%; + border: 2px solid #FFFFFF; + position: absolute; + object-fit: cover; +} +.avatar:nth-child(1) { left: 0; z-index: 1;} +.avatar:nth-child(2) { left: 50%; transform: translateX(-50%); z-index: 2;} +.avatar:nth-child(3) { right: 0; z-index: 1;} + +.avatar.large { + width: 56px; + height: 56px; +} + +.faq-cta-container h3 { + font-size: 20px; + font-weight: 500; + color: #101828; + margin: 0; + margin-top: -8px; +} + +.faq-cta-container p { + font-size: 18px; + line-height: 28px; + color: #667085; + margin: -24px 0 0 0; +} + +/* ========================================================================== + 5. Mobile Styles for About Us Page + ========================================================================== */ +@media (max-width: 1024px) { + .team-grid { max-width: 700px; } + .values-container { gap: 64px; } + .value-row { gap: 32px; } + .value-image { flex-basis: 45%; min-width: 0; } } @media (max-width: 768px) { - .team-section { + .team-section, + .core-values-section, + .mission-vision-section, + .faq-cta-section { padding: 64px 24px; } + + .team-section .page-header-section { margin-bottom: 48px; } + .team-grid { flex-direction: column; align-items: center; gap: 24px; } + .member-card { width: 100%; max-width: 326px; height: 400px; } + + /* Core Values on Mobile */ + .core-values-section .page-header-section { margin-bottom: 48px; } + .core-values-section > .page-header-section h2 { font-size: 32px; line-height: 40px; } + .core-values-section > .page-header-section p { font-size: 18px; line-height: 28px; } - .team-members-grid { + .values-container { gap: 48px; } + .value-row, .value-row:nth-child(even) { flex-direction: column; gap: 24px; } + .value-row .value-content { order: 1; } + .value-row .value-image { order: 2; } + .value-image { width: 100%; flex-basis: auto; } + .value-content { text-align: center; max-width: 100%; } + .value-content h3 { font-size: 24px; line-height: 32px; } + .value-content p { font-size: 16px; line-height: 26px; } + + /* Mission and Vision on Mobile */ + .mission-vision-grid { flex-direction: column; gap: 24px; } + .mission-box, .vision-box { cursor: default; height: auto; padding: 32px; } + + .box-content { + position: static; + transform: none !important; + opacity: 1 !important; + padding: 0; + } + .mission-box, .vision-box { + display: flex; flex-direction: column; - align-items: center; - gap: 24px; + gap: 16px; + } + .mission-icon-content, .vision-icon-content { + order: 1; + opacity: 1 !important; /* Ensure icons are visible */ + transform: none !important; + } + .mission-text-content, .vision-text-content { + order: 2; + opacity: 1 !important; /* Ensure text is visible */ + transform: none !important; } - .team-member-card { - max-width: 100%; - min-width: 280px; - } - - .mission-vision { - flex-direction: column; - text-align: center; - } + .faq-cta-container { padding: 32px; } + .faq-cta-container h3 { font-size: 18px; } + .faq-cta-container p { font-size: 16px; line-height: 24px; } }""" @@ -2882,7 +3201,7 @@ footer hr {
-Learn more about the company and the team behind it.
+ About us +MSOS is more than an organization - it is the energy of the team behind it. Our members are the heart and driving force that inspires us, writing this story and shaping student life in Slovenia.
3rd October 2023
-Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop. Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.
- -
- Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.
+
- Founder & CEO
-Former co-founder of Opendoor. Early staff at Spotify and Clearbit.
- +Founder and President
+
- Former PM for Linear, Lambda School, and On Deck.
-Lead engineering teams at Figma, Pitch, and Protocol Labs.
- + +Board Member
+
- Media and public relations
-Lead engineering teams at Figma, Pitch, and Protocol Labs.
- + +Board Member
+
- Former frontend dev for Linear, Coinbase, and Postscript.
-Lead engineering teams at Figma, Pitch, and Protocol Labs.
- + +Board Member
+
- Former frontend dev for Linear, Coinbase, and Postscript.
-Lead engineering teams at Figma, Pitch, and Protocol Labs.
- + +Board Member
+Our shared values keep us connected and guide us as one team.
+ +Our shared values keep us connected and guide us as one team.
Understand what matters to our employees. Give them what they need to do their best work.
No games. No bullshit. We rely on our peers to improve. Be open, honest and kind.
Value quality and integrity in everything we do. At all times. No exceptions.
Understand customers' stated and unstated needs. Make them wildly successful.
Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”
We believe the best products come from the best attention to detail. Sweat the small stuff.
Understand customers' stated and unstated needs. Make them wildly successful.
+The strength of MSOS comes from giving our time and energy selflessly. Every project, event, and idea in MSOS is built on the hard work of our amazing volunteers. Our volunteer spirit is a testament to the dedication, passion, and collaborative energy of our community and the reason why we grow stronger together.
+
+ Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”
+
+ We are more than a group of students, but a family. We look after one another and support each other not just with studies, but also with everyday challenges. We are here to listen, help, and celebrate successes together. It's about giving without expecting anything in return and creating a safe, warm, and uplifting environment where everyone feels they belong.
+We are proud of where we come from and carry our Macedonian heritage with us, while striving for a brighter future. Our roots give us strength, and our ambition pushes us forward. Our ambition drives us to be professional, innovative, and influential leaders and role models in our host country.
+
+ We're a 100% remote team spread all across the world. Join us!
+ +
-
-