diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..7a14c748 --- /dev/null +++ b/css/style.css @@ -0,0 +1,695 @@ +/* ============================================ + UMass Amherst - Pixel-Perfect CSS + ============================================ */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Open Sans', Arial, sans-serif; + color: #333; + line-height: 1.5; + background: #fff; + overflow-x: hidden; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + max-width: 100%; + display: block; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.flex-container { + display: flex; +} + +/* Colors */ +.text-red { color: #881c1c; } +.text-black { color: #000; } +.text-grey { color: #666; } +.text-light { color: #fff; } +.bg-red { background: #881c1c; } +.bg-black { background: #111; } +.bg-grey { background: #f4f4f4; } +.bg-light-grey { background: #e5e5e5; } + +/* Buttons */ +.btn { + display: inline-block; + padding: 12px 24px; + font-weight: 700; + font-size: 13px; + text-transform: uppercase; + transition: all 0.2s; + cursor: pointer; +} +.btn-red { + background: #881c1c; + color: #fff; +} +.btn-red:hover { + background: #6b1515; +} +.btn-red-outline { + border: 2px solid #881c1c; + color: #881c1c; + background: transparent; +} +.btn-red-outline:hover { + background: #881c1c; + color: #fff; +} +.btn-red-fill { + background: #881c1c; + color: #fff; + border-radius: 4px; +} + +.section-title { + font-size: 36px; + font-weight: 800; + text-transform: uppercase; + margin-bottom: 20px; + line-height: 1.1; +} + +/* ================= HEADER ================= */ +.header { + position: absolute; + top: 0; left: 0; width: 100%; + z-index: 100; + padding: 30px 0; +} +.header-inner { + display: flex; + justify-content: space-between; + align-items: flex-start; +} +.logo { + color: #fff; + line-height: 1.2; +} +.logo-light { + font-size: 16px; + font-weight: 400; +} +.logo-bold { + font-size: 24px; + font-weight: 800; +} +.nav-right { + display: flex; + flex-direction: column; + align-items: flex-end; +} +.top-nav { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 10px; +} +.top-nav a { + color: #fff; + font-size: 12px; + font-weight: 600; + text-transform: uppercase; +} +.search-btn { + background: #881c1c; + color: #fff; + border: none; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.main-nav { + display: flex; + gap: 24px; +} +.main-nav a { + color: #fff; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; +} + +.mobile-only { display: none; } +.desktop-only { display: flex; } + +/* ================= HERO ================= */ +.hero { + position: relative; + height: 80vh; + min-height: 600px; + background: #000; +} +.hero-bg { + width: 100%; + height: 100%; + object-fit: cover; +} +.hero-overlay { + position: absolute; + top: 0; left: 0; width: 100%; height: 100%; + background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.8) 100%); +} +.hero-content { + position: absolute; + bottom: 60px; + left: 0; right: 0; + color: #fff; + padding-left: 20px; +} +.hero-title { + font-size: 56px; + font-weight: 800; + line-height: 1; + margin-bottom: 15px; +} +.hero-desc { + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +/* ================= STEP INTO YOUR FUTURE ================= */ +.step-into { + padding: 60px 0; + background: #fff; +} +.step-into-inner { + align-items: center; + justify-content: flex-start; + gap: 80px; +} +.step-into-title { + font-size: 32px; + font-weight: 800; + line-height: 1.1; +} +.step-into-links { + display: flex; + gap: 80px; +} +.link-col { + display: flex; + flex-direction: column; + gap: 15px; +} +.link-col a { + font-weight: 700; + font-size: 14px; + text-transform: uppercase; + display: flex; + justify-content: space-between; + align-items: center; + width: 200px; + border-bottom: 1px solid #eee; + padding-bottom: 10px; +} +.link-col a .arrow { + color: #881c1c; + font-size: 10px; +} + +/* ================= WHAT'S LIFE LIKE ================= */ +.whats-life { + background: #111; + color: #fff; +} +.whats-life-inner { + align-items: stretch; +} +.whats-life-text { + flex: 1; + padding: 80px 60px 80px 0; +} +.tabs { + display: flex; + gap: 20px; + margin-bottom: 30px; + border-bottom: 1px solid #333; + padding-bottom: 10px; +} +.tab { + font-size: 14px; + font-weight: 600; + color: #888; +} +.tab.active { + color: #fff; + border-bottom: 2px solid #fff; + padding-bottom: 11px; + margin-bottom: -12px; +} +.whats-life-text .subtitle { + font-size: 24px; + font-weight: 700; + margin-bottom: 15px; +} +.whats-life-text .desc { + font-size: 15px; + color: #ccc; + margin-bottom: 30px; +} +.whats-life-media { + flex: 1; + position: relative; +} +.whats-life-media img { + width: 100%; + height: 100%; + object-fit: cover; +} +.play-icon { + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + width: 60px; height: 60px; + background: #881c1c; + color: #fff; + border: none; + border-radius: 50%; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + padding-left: 5px; /* center play triangle */ +} + +/* ================= STATS ================= */ +.stats { + padding: 60px 0; + background: #fff; + text-align: center; +} +.stats-inner { + justify-content: center; + gap: 100px; +} +.stat-number { + font-size: 48px; + font-weight: 800; + margin-bottom: 10px; +} +.stat-text { + font-size: 13px; + font-weight: 600; + color: #555; +} + +/* ================= EXCELLENCE IN ACTION ================= */ +.excellence { + padding: 80px 0; + background: #fff; +} +.excellence-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; +} +.exc-col-left .desc { + font-size: 15px; + margin-bottom: 30px; +} +.mt-large { margin-top: 60px; } + +.story-card { + position: relative; + overflow: hidden; +} +.story-card img { + width: 100%; + display: block; +} +.story-card.has-bg .story-content { + position: absolute; + bottom: 0; left: 0; width: 100%; + background: linear-gradient(transparent, rgba(0,0,0,0.8)); + padding: 40px 30px 20px; + color: #fff; +} +.tag { + display: block; + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + margin-bottom: 8px; +} +.story-content h3 { + font-size: 22px; + font-weight: 700; + margin-bottom: 10px; + line-height: 1.2; +} +.story-content p { + font-size: 13px; + opacity: 0.9; +} +.story-card.large h3 { + font-size: 28px; +} +.sub-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 0; + height: 300px; +} +.box-black { background: #000; padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: center; } +.box-red { background: #881c1c; padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: center; } +.box-grey { background: #444; padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: center; } +.play-box { background: #f4f4f4; display: flex; align-items: center; justify-content: center; } +.play-icon-large { + width: 80px; height: 80px; + background: #881c1c; + color: #fff; + border-radius: 50%; + border: none; + font-size: 24px; + cursor: pointer; + padding-left: 6px; +} + +/* ================= BLAZE YOUR OWN TRAIL ================= */ +.blaze-trail { + padding: 80px 0; + background: #fff; +} +.max-w-800 { max-width: 800px; margin-bottom: 40px; font-size: 15px; } +.card-grid-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; +} +.card-img img { + width: 100%; + aspect-ratio: 3/2; + object-fit: cover; +} +.card-body { + padding: 20px 0; +} +.card-body h3 { + font-size: 20px; + font-weight: 700; + margin-bottom: 10px; +} +.card-body p { + font-size: 14px; + color: #555; +} + +/* ================= APPLY TODAY ================= */ +.apply-today { + padding: 60px 0; + background: #fff; +} +.text-center { text-align: center; } +.apply-buttons { + display: flex; + justify-content: center; + gap: 20px; +} +.apply-buttons .btn { width: 180px; } + +/* ================= I'M LOOKING FOR ================= */ +.looking-for { + padding: 80px 0; + background: #e5e5e5; +} +.looking-grid { + display: flex; + gap: 60px; +} +.looking-grid .col { + flex: 1; + display: flex; + flex-direction: column; +} +.looking-grid .col a { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 0; + border-bottom: 1px solid #ccc; + font-weight: 700; + font-size: 14px; + color: #000; +} +.looking-grid .col a .arrow { font-size: 10px; color: #881c1c; } + +/* ================= NEWS & EVENTS ================= */ +.news-events { + padding: 80px 0; + background: #fff; +} +.news-layout { + display: grid; + grid-template-columns: 60% 35%; + gap: 5%; +} +.news-main img { + width: 100%; + aspect-ratio: 16/9; + object-fit: cover; +} +.mt-small { margin-top: 20px; } +.news-main-title { + font-size: 28px; + font-weight: 800; + margin: 10px 0; + line-height: 1.2; +} +.news-main-desc { + font-size: 15px; + color: #444; +} +.news-sidebar { + display: flex; + flex-direction: column; + gap: 30px; +} +.news-small { + display: flex; + gap: 15px; +} +.news-small img { + width: 140px; + height: 100px; + object-fit: cover; +} +.news-info h4 { + font-size: 15px; + font-weight: 700; + margin: 5px 0; + line-height: 1.3; +} +.news-info p { + font-size: 12px; + color: #666; +} + +.events-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + margin-top: 60px; +} +.event-card img { + width: 100%; + aspect-ratio: 3/2; + object-fit: cover; +} +.event-info { + padding: 15px 0; +} +.event-info .date { font-weight: 800; font-size: 12px; } +.event-info h4 { font-size: 16px; font-weight: 700; margin: 5px 0; } +.event-info .type { font-size: 13px; } + +/* ================= FOOTER ================= */ +.footer { + background: #111; + color: #fff; + padding: 60px 0 30px; +} +.footer-top { + display: flex; + justify-content: space-between; + margin-bottom: 40px; +} +.footer-brand { + flex: 1; +} +.footer-logo { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; +} +.m-box { + width: 50px; height: 50px; + background: #881c1c; + color: #fff; + font-size: 24px; + font-weight: 800; + display: flex; + align-items: center; + justify-content: center; +} +.footer-logo .logo-text { + font-size: 14px; + line-height: 1.2; +} +.social-icons { + display: flex; + gap: 15px; +} +.social-icons a { + color: #fff; + width: 20px; height: 20px; +} + +.footer-links-grid { + flex: 2; + display: flex; + justify-content: flex-end; + gap: 80px; +} +.footer-col h4 { + font-size: 12px; + font-weight: 700; + color: #888; + margin-bottom: 15px; +} +.footer-col a { + display: block; + font-size: 13px; + color: #ccc; + margin-bottom: 10px; +} +.footer-bottom { + display: flex; + justify-content: space-between; + border-top: 1px solid #333; + padding-top: 20px; + font-size: 12px; + color: #888; +} +.bottom-links { + display: flex; + gap: 20px; +} +.bottom-links a { color: #888; } + +/* ================= RESPONSIVE TABLET (768px) ================= */ +@media (max-width: 1024px) { + .desktop-only { display: none; } + .mobile-only { display: flex; } + + .header { + background: #111; + padding: 15px 0; + } + .mobile-actions { + display: flex; + align-items: center; + } + .search-btn-mobile { + background: #881c1c; + color: #fff; + border: none; + width: 40px; height: 40px; + display: flex; + align-items: center; + justify-content: center; + } + .hamburger-btn { + background: transparent; + color: #fff; + border: none; + width: 40px; height: 40px; + display: flex; + align-items: center; + justify-content: center; + } + + .hero { + height: auto; + padding: 150px 0 80px; + } + .hero-title { font-size: 40px; } + + .step-into-inner { + flex-direction: column; + align-items: flex-start; + gap: 30px; + } + .step-into-links { width: 100%; justify-content: space-between; gap: 20px; } + .link-col { width: 48%; } + .link-col a { width: 100%; } + + .whats-life-inner { flex-direction: column; } + .whats-life-text { padding: 40px 0; } + .whats-life-media { height: 400px; width: 100%; } + + .stats-inner { gap: 30px; } + + .excellence-grid { grid-template-columns: 1fr; } + .sub-grid { height: auto; grid-template-columns: 1fr 1fr; } + + .card-grid-3 { grid-template-columns: 1fr; } + .card-img img { aspect-ratio: 16/9; } + + .apply-buttons { flex-wrap: wrap; } + + .news-layout { grid-template-columns: 1fr; gap: 40px; } + .events-grid { grid-template-columns: 1fr 1fr; } + + .footer-top { flex-direction: column; gap: 40px; } + .footer-links-grid { justify-content: space-between; gap: 20px; } +} + +/* ================= RESPONSIVE MOBILE (390px) ================= */ +@media (max-width: 767px) { + .hero-title { font-size: 32px; } + .hero-desc { font-size: 14px; } + + .step-into-links { flex-direction: column; } + .link-col { width: 100%; } + + .stats-inner { flex-direction: column; gap: 40px; } + + .sub-grid { grid-template-columns: 1fr; } + + .apply-buttons { flex-direction: column; align-items: center; } + .apply-buttons .btn { width: 100%; max-width: 300px; } + + .looking-grid { flex-direction: column; gap: 0; } + + .events-grid { grid-template-columns: 1fr; } + .news-small { flex-direction: column; } + .news-small img { width: 100%; height: auto; aspect-ratio: 16/9; } + + .footer-links-grid { flex-direction: column; } + .footer-bottom { flex-direction: column; gap: 20px; align-items: flex-start; } + .bottom-links { flex-direction: column; gap: 10px; } +} diff --git a/design/[Main]1920.pdf b/design/[Main]1920.pdf new file mode 100644 index 00000000..9feb794f Binary files /dev/null and b/design/[Main]1920.pdf differ diff --git a/design/[Main]1920.png b/design/[Main]1920.png new file mode 100644 index 00000000..a32ed5fd Binary files /dev/null and b/design/[Main]1920.png differ diff --git a/design/[Main]390.pdf b/design/[Main]390.pdf new file mode 100644 index 00000000..f2f162af Binary files /dev/null and b/design/[Main]390.pdf differ diff --git a/design/[Main]390.png b/design/[Main]390.png new file mode 100644 index 00000000..9f0f3aa7 Binary files /dev/null and b/design/[Main]390.png differ diff --git a/design/[Main]768.pdf b/design/[Main]768.pdf new file mode 100644 index 00000000..deada3fe Binary files /dev/null and b/design/[Main]768.pdf differ diff --git a/design/[Main]768.png b/design/[Main]768.png new file mode 100644 index 00000000..bd0be874 Binary files /dev/null and b/design/[Main]768.png differ diff --git a/images/apply-bg.png b/images/apply-bg.png new file mode 100644 index 00000000..579c93da Binary files /dev/null and b/images/apply-bg.png differ diff --git a/images/badge-fabric.png b/images/badge-fabric.png new file mode 100644 index 00000000..a80a7fe3 Binary files /dev/null and b/images/badge-fabric.png differ diff --git a/images/campus-aerial.png b/images/campus-aerial.png new file mode 100644 index 00000000..08f6f076 Binary files /dev/null and b/images/campus-aerial.png differ diff --git a/images/design-major.png b/images/design-major.png new file mode 100644 index 00000000..cd61a733 Binary files /dev/null and b/images/design-major.png differ diff --git a/images/excellence-student.png b/images/excellence-student.png new file mode 100644 index 00000000..c7fc039f Binary files /dev/null and b/images/excellence-student.png differ diff --git a/images/find-program.png b/images/find-program.png new file mode 100644 index 00000000..cb29f771 Binary files /dev/null and b/images/find-program.png differ diff --git a/images/graduation-crowd.png b/images/graduation-crowd.png new file mode 100644 index 00000000..b31c4aef Binary files /dev/null and b/images/graduation-crowd.png differ diff --git a/images/hero.png b/images/hero.png new file mode 100644 index 00000000..992b5549 Binary files /dev/null and b/images/hero.png differ diff --git a/images/news-building.png b/images/news-building.png new file mode 100644 index 00000000..ac72100d Binary files /dev/null and b/images/news-building.png differ diff --git a/images/news-campus-event.png b/images/news-campus-event.png new file mode 100644 index 00000000..8a451f5c Binary files /dev/null and b/images/news-campus-event.png differ diff --git a/images/news-ceremony.png b/images/news-ceremony.png new file mode 100644 index 00000000..d4add417 Binary files /dev/null and b/images/news-ceremony.png differ diff --git a/images/news-graduation.png b/images/news-graduation.png new file mode 100644 index 00000000..c83697cd Binary files /dev/null and b/images/news-graduation.png differ diff --git a/images/old-chapel.png b/images/old-chapel.png new file mode 100644 index 00000000..3c7e2833 Binary files /dev/null and b/images/old-chapel.png differ diff --git a/images/research-lab.png b/images/research-lab.png new file mode 100644 index 00000000..da91b5da Binary files /dev/null and b/images/research-lab.png differ diff --git a/images/stadium.png b/images/stadium.png new file mode 100644 index 00000000..14157715 Binary files /dev/null and b/images/stadium.png differ diff --git a/images/student-recreation.png b/images/student-recreation.png new file mode 100644 index 00000000..fea510ab Binary files /dev/null and b/images/student-recreation.png differ diff --git a/images/students-blue.png b/images/students-blue.png new file mode 100644 index 00000000..b06cf32d Binary files /dev/null and b/images/students-blue.png differ diff --git a/images/study-abroad.png b/images/study-abroad.png new file mode 100644 index 00000000..984fc987 Binary files /dev/null and b/images/study-abroad.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..7a6717e9 --- /dev/null +++ b/index.html @@ -0,0 +1,385 @@ + + + + + + University of Massachusetts Amherst + + + + + + + + +
+
+ + +
+
+ INFO FOR... + ALUMNI + ATHLETICS + GIVING + LIBRARIES + +
+
+ ACADEMICS + RESEARCH + CAMPUS LIFE + ADMISSIONS + WHY UMASS? + NEWS & EVENTS +
+
+ +
+ + +
+
+
+ + +
+ UMass Amherst Old Chapel +
+
+

CONGRATULATIONS,
CLASS OF 2026

+

The 156th UMass Amherst Commencement brought together more than 9,300
graduates in a celebration of achievement, community, and new beginnings.

+
+
+ + +
+
+

STEP INTO
YOUR FUTURE

+
+
+ APPLY ▶ + MAJORS & MINORS ▶ +
+
+ TUITION & COSTS ▶ + TAKE A TOUR ▶ +
+
+
+
+ + +
+
+
+

WHAT'S LIFE LIKE AT
UMASS?

+
+ Campus Life + Campus Housing + Dining + Around Amherst +
+

Make UMass Your Own

+

Explore big ideas, join vibrant communities, and shape a college experience that's uniquely yours.

+ LEARN ABOUT STUDENT ACTIVITIES +
+
+ Student playing table tennis + +
+
+
+ + +
+
+
+

#1

+

Public Research University in New England,
Non-Medical School R&D Expenditures

+
+
+

251

+

Total Degree Programs

+
+
+

Top 50

+

Best Value Colleges (Public), The Princeton Review

+
+
+
+ + +
+
+
+
+

EXCELLENCE IN ACTION

+

UMass Amherst advances academic excellence through research, teaching, and engagement across campus. Students and faculty drive discovery through programs, scholarship, and events that extend beyond the classroom.

+ EXPLORE UMASS STORIES + +
+ Students collaborating +
+ TECHNOLOGY IN ACTION +

Code, Collaborations, and Big Ideas

+

HackUMass brings innovation to life.

+
+
+
+ +
+
+ Student researching +
+ HISTORY +

A Historical Antidote to Today's Fast Fashion Culture

+

Groundbreaking Graduate Student Emily Whitted conducts research on the rich history of textile repair in early America.

+
+
+ +
+
+ FOR THE COMMON GOOD +

Building Community, Leading Change

+
+
+ STUDENT LIFE +

Students Connect Over Culture, Community—and Hip-Hop

+
+
+ STUDENT LIFE +

My Typical Day at UMass

+
+
+ +
+
+
+
+
+
+ + +
+
+

BLAZE YOUR OWN TRAIL

+

Discover more than 100 undergraduate majors, minors, and certificates in fields ranging from engineering to public health to literature. You can even design your own major through our individual concentration program. Whatever your path, UMass gives you the freedom to explore and the tools to excel.

+ +
+
+
Find a Program
+
+

Find a Program

+

With more than 100 majors, you have the freedom to explore your interests and build an academic path that reflects who you are and where you want to go.

+
+
+
+
Design Your Own Major
+
+

Design Your Own Major

+

Through the Bachelor's Degree with Individual Concentration (BDIC) Program, students can create a personalized major, blending courses across fields to explore passions beyond traditional academic boundaries.

+
+
+
+
Study Abroad
+
+

Study Abroad

+

Global learning opportunities immerse students in new cultures, expanding their perspectives and preparing them to thrive in a connected world.

+
+
+
+
+
+ + +
+
+

APPLY TODAY

+
+ FIRST YEAR + TRANSFER + INTERNATIONAL + GRADUATE SCHOOL +
+
+
+ + +
+
+

I'M LOOKING FOR...

+
+
+ VISIT CAMPUS ▶ + APPLY AS A FIRST-YEAR ▶ + MAJORS & MINORS ▶ + APPLY AS A TRANSFER STUDENT ▶ +
+
+ APPLY AS A GRADUATE STUDENT ▶ + IMPORTANT DATES & DEADLINES ▶ + TUITION & COSTS ▶ + FINANCIAL AID ▶ +
+
+
+
+ + +
+
+

NEWS & EVENTS

+ +
+ +
+ Graduation Stadium + UNIVERSITY NEWS +

Chief Justice Kimberly S. Budd Urges Graduates to Take Chances at UMass Amherst Commencement

+

UMass President Marty Meehan presided over the ceremony before approximately 7,000 graduates and 20,000 family, friends and faculty assembled at the Warren P. McGuirk Alumni Stadium.

+
+ + +
+
+ Graduation crowd +
+ UNIVERSITY NEWS +

Stockbridge School of Agriculture at UMass Amherst Honors Graduating Class of 2026

+

The new graduates will shape the beauty, health, and sustainability of the natural environment, steward for the common good, and answer pressing needs for sustainable food systems.

+
+
+
+ Speaker at podium +
+ UNIVERSITY NEWS +

UMass Amherst Graduate School Confers Over 2,200 Degrees at May 15 Master's and Education Specialist Commencement Ceremony

+

Presiding over the celebration, Interim Dean of the Graduate School Elizabeth Jakob reflected on the diversity of the Class of 2026, noting that degree recipients include 650 international students from more than 60 countries.

+
+
+
+ Graduates sitting +
+ UNIVERSITY NEWS +

UMass Amherst Graduate School Confers 393 Doctoral Degrees at Mullins Center Ceremony

+

The Graduate School conferred doctoral degrees to recipients—including international students representing more than 60 countries—during a ceremony May 9 at the Mullins Center before more than 3,000 family, friends and faculty.

+
+
+
+
+ + +
+
+ Commencement +
+ May 17 +

2026 UMass Amherst Commencement

+ Featured +
+
+
+ Move out collection +
+ May 17 +

New2U Move-Out Collection

+ 9:00 a.m. – 5:00 p.m. +
+
+
+ Information Session +
+ May 19 +

MS in Management Virtual Information Session

+ 12:00 p.m. – 1:00 p.m. +
+
+
+ Information Session +
+ May 22 +

MS in Business Analytics Virtual Information Session

+ 12:00 p.m. – 1:00 p.m. +
+
+
+ +
+ MORE NEWS & EVENTS +
+
+
+ + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..a0e933c2 --- /dev/null +++ b/js/main.js @@ -0,0 +1,97 @@ +/* ============================================ + UMass Amherst - Main JavaScript + ============================================ */ + +document.addEventListener('DOMContentLoaded', () => { + + // ---- Mobile Menu ---- + const menuToggle = document.getElementById('menu-toggle'); + const menuClose = document.getElementById('menu-close'); + const mobileMenu = document.getElementById('mobile-menu'); + + if (menuToggle) { + menuToggle.addEventListener('click', () => { + mobileMenu.classList.add('active'); + document.body.style.overflow = 'hidden'; + }); + } + + if (menuClose) { + menuClose.addEventListener('click', () => { + mobileMenu.classList.remove('active'); + document.body.style.overflow = ''; + }); + } + + document.querySelectorAll('.mobile-menu__link').forEach(link => { + link.addEventListener('click', () => { + mobileMenu.classList.remove('active'); + document.body.style.overflow = ''; + }); + }); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && mobileMenu.classList.contains('active')) { + mobileMenu.classList.remove('active'); + document.body.style.overflow = ''; + } + }); + + // ---- Hero Slider ---- + const slides = document.querySelectorAll('.hero__slide'); + const dots = document.querySelectorAll('.hero__dot'); + let currentSlide = 0; + let slideInterval; + + function goToSlide(index) { + slides.forEach(s => s.classList.remove('active')); + dots.forEach(d => d.classList.remove('active')); + slides[index].classList.add('active'); + dots[index].classList.add('active'); + currentSlide = index; + } + + function nextSlide() { + const next = (currentSlide + 1) % slides.length; + goToSlide(next); + } + + function startAutoSlide() { + slideInterval = setInterval(nextSlide, 5000); + } + + function resetAutoSlide() { + clearInterval(slideInterval); + startAutoSlide(); + } + + dots.forEach(dot => { + dot.addEventListener('click', () => { + const index = parseInt(dot.dataset.slide, 10); + goToSlide(index); + resetAutoSlide(); + }); + }); + + if (slides.length > 1) { + startAutoSlide(); + } + + // ---- Scroll Animations ---- + const fadeElements = document.querySelectorAll('.fade-up'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -60px 0px' + }); + + fadeElements.forEach(el => observer.observe(el)); + +});