giao diện main page stage 1
This commit is contained in:
NAS\NASPC
+695
@@ -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; }
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 8.9 MiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 722 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 984 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 876 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 988 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 901 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 895 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 996 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 826 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 954 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1016 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 875 KiB |
+385
@@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>University of Massachusetts Amherst</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="header">
|
||||
<div class="header-inner container">
|
||||
<a href="#" class="logo">
|
||||
<span class="logo-light">University of</span><br>
|
||||
<strong class="logo-bold">Massachusetts</strong><br>
|
||||
<span class="logo-light">Amherst</span>
|
||||
</a>
|
||||
|
||||
<div class="nav-right desktop-only">
|
||||
<div class="top-nav">
|
||||
<a href="#">INFO FOR...</a>
|
||||
<a href="#">ALUMNI</a>
|
||||
<a href="#">ATHLETICS</a>
|
||||
<a href="#">GIVING</a>
|
||||
<a href="#">LIBRARIES</a>
|
||||
<button class="search-btn" aria-label="Search">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="3" fill="none"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<a href="#">ACADEMICS</a>
|
||||
<a href="#">RESEARCH</a>
|
||||
<a href="#">CAMPUS LIFE</a>
|
||||
<a href="#">ADMISSIONS</a>
|
||||
<a href="#">WHY UMASS?</a>
|
||||
<a href="#">NEWS & EVENTS</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-actions mobile-only">
|
||||
<button class="search-btn-mobile">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
</button>
|
||||
<button class="hamburger-btn">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<img src="images/old-chapel.png" alt="UMass Amherst Old Chapel" class="hero-bg">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content container">
|
||||
<h1 class="hero-title">CONGRATULATIONS,<br>CLASS OF 2026</h1>
|
||||
<p class="hero-desc">The 156th UMass Amherst Commencement brought together more than 9,300<br>graduates in a celebration of achievement, community, and new beginnings.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- STEP INTO YOUR FUTURE -->
|
||||
<section class="step-into">
|
||||
<div class="container flex-container step-into-inner">
|
||||
<h2 class="step-into-title">STEP INTO<br><span class="text-red">YOUR FUTURE</span></h2>
|
||||
<div class="step-into-links">
|
||||
<div class="link-col">
|
||||
<a href="#">APPLY <span class="arrow">▶</span></a>
|
||||
<a href="#">MAJORS & MINORS <span class="arrow">▶</span></a>
|
||||
</div>
|
||||
<div class="link-col">
|
||||
<a href="#">TUITION & COSTS <span class="arrow">▶</span></a>
|
||||
<a href="#">TAKE A TOUR <span class="arrow">▶</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHAT'S LIFE LIKE -->
|
||||
<section class="whats-life">
|
||||
<div class="container flex-container whats-life-inner">
|
||||
<div class="whats-life-text">
|
||||
<h2 class="section-title">WHAT'S LIFE LIKE AT<br>UMASS?</h2>
|
||||
<div class="tabs">
|
||||
<a href="#" class="tab active">Campus Life</a>
|
||||
<a href="#" class="tab">Campus Housing</a>
|
||||
<a href="#" class="tab">Dining</a>
|
||||
<a href="#" class="tab">Around Amherst</a>
|
||||
</div>
|
||||
<h3 class="subtitle">Make UMass Your Own</h3>
|
||||
<p class="desc">Explore big ideas, join vibrant communities, and shape a college experience that's uniquely yours.</p>
|
||||
<a href="#" class="btn btn-red">LEARN ABOUT STUDENT ACTIVITIES</a>
|
||||
</div>
|
||||
<div class="whats-life-media">
|
||||
<img src="images/student-recreation.png" alt="Student playing table tennis">
|
||||
<button class="play-icon" aria-label="Play video">▶</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- STATS -->
|
||||
<section class="stats">
|
||||
<div class="container flex-container stats-inner">
|
||||
<div class="stat-item">
|
||||
<h2 class="stat-number text-red">#1</h2>
|
||||
<p class="stat-text">Public Research University in New England,<br>Non-Medical School R&D Expenditures</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h2 class="stat-number text-red">251</h2>
|
||||
<p class="stat-text">Total Degree Programs</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h2 class="stat-number text-red">Top 50</h2>
|
||||
<p class="stat-text">Best Value Colleges (Public), <em>The Princeton Review</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EXCELLENCE IN ACTION -->
|
||||
<section class="excellence">
|
||||
<div class="container">
|
||||
<div class="excellence-grid">
|
||||
<div class="exc-col-left">
|
||||
<h2 class="section-title text-black">EXCELLENCE IN ACTION</h2>
|
||||
<p class="desc text-black">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.</p>
|
||||
<a href="#" class="btn btn-red">EXPLORE UMASS STORIES</a>
|
||||
|
||||
<div class="story-card has-bg mt-large">
|
||||
<img src="images/students-blue.png" alt="Students collaborating">
|
||||
<div class="story-content">
|
||||
<span class="tag">TECHNOLOGY IN ACTION</span>
|
||||
<h3>Code, Collaborations, and Big Ideas</h3>
|
||||
<p>HackUMass brings innovation to life.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exc-col-right">
|
||||
<div class="story-card has-bg large">
|
||||
<img src="images/excellence-student.png" alt="Student researching">
|
||||
<div class="story-content">
|
||||
<span class="tag">HISTORY</span>
|
||||
<h3>A Historical Antidote to Today's Fast Fashion Culture</h3>
|
||||
<p>Groundbreaking Graduate Student Emily Whitted conducts research on the rich history of textile repair in early America.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-grid">
|
||||
<div class="story-card box-black">
|
||||
<span class="tag text-grey">FOR THE COMMON GOOD</span>
|
||||
<h3>Building Community, Leading Change</h3>
|
||||
</div>
|
||||
<div class="story-card box-red">
|
||||
<span class="tag text-light">STUDENT LIFE</span>
|
||||
<h3>Students Connect Over Culture, Community—and Hip-Hop</h3>
|
||||
</div>
|
||||
<div class="story-card box-grey">
|
||||
<span class="tag text-light">STUDENT LIFE</span>
|
||||
<h3>My Typical Day at UMass</h3>
|
||||
</div>
|
||||
<div class="play-box">
|
||||
<button class="play-icon-large">▶</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLAZE YOUR OWN TRAIL -->
|
||||
<section class="blaze-trail">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-black">BLAZE YOUR OWN TRAIL</h2>
|
||||
<p class="desc text-black max-w-800">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.</p>
|
||||
|
||||
<div class="card-grid-3">
|
||||
<div class="card">
|
||||
<div class="card-img"><img src="images/find-program.png" alt="Find a Program"></div>
|
||||
<div class="card-body">
|
||||
<h3>Find a Program</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-img"><img src="images/design-major.png" alt="Design Your Own Major"></div>
|
||||
<div class="card-body">
|
||||
<h3>Design Your Own Major</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-img"><img src="images/study-abroad.png" alt="Study Abroad"></div>
|
||||
<div class="card-body">
|
||||
<h3>Study Abroad</h3>
|
||||
<p>Global learning opportunities immerse students in new cultures, expanding their perspectives and preparing them to thrive in a connected world.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- APPLY TODAY -->
|
||||
<section class="apply-today">
|
||||
<div class="container text-center">
|
||||
<h2 class="section-title text-black">APPLY TODAY</h2>
|
||||
<div class="apply-buttons">
|
||||
<a href="#" class="btn btn-red-outline">FIRST YEAR</a>
|
||||
<a href="#" class="btn btn-red-outline">TRANSFER</a>
|
||||
<a href="#" class="btn btn-red-outline">INTERNATIONAL</a>
|
||||
<a href="#" class="btn btn-red-outline">GRADUATE SCHOOL</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- I'M LOOKING FOR... -->
|
||||
<section class="looking-for">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-black">I'M LOOKING FOR...</h2>
|
||||
<div class="looking-grid">
|
||||
<div class="col">
|
||||
<a href="#">VISIT CAMPUS <span class="arrow">▶</span></a>
|
||||
<a href="#">APPLY AS A FIRST-YEAR <span class="arrow">▶</span></a>
|
||||
<a href="#">MAJORS & MINORS <span class="arrow">▶</span></a>
|
||||
<a href="#">APPLY AS A TRANSFER STUDENT <span class="arrow">▶</span></a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a href="#">APPLY AS A GRADUATE STUDENT <span class="arrow">▶</span></a>
|
||||
<a href="#">IMPORTANT DATES & DEADLINES <span class="arrow">▶</span></a>
|
||||
<a href="#">TUITION & COSTS <span class="arrow">▶</span></a>
|
||||
<a href="#">FINANCIAL AID <span class="arrow">▶</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NEWS & EVENTS -->
|
||||
<section class="news-events">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-black">NEWS & EVENTS</h2>
|
||||
|
||||
<div class="news-layout">
|
||||
<!-- Left: Featured -->
|
||||
<div class="news-main">
|
||||
<img src="images/stadium.png" alt="Graduation Stadium">
|
||||
<span class="tag text-red mt-small">UNIVERSITY NEWS</span>
|
||||
<h3 class="news-main-title">Chief Justice Kimberly S. Budd Urges Graduates to Take Chances at UMass Amherst Commencement</h3>
|
||||
<p class="news-main-desc">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.</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: Small News -->
|
||||
<div class="news-sidebar">
|
||||
<div class="news-small">
|
||||
<img src="images/graduation-crowd.png" alt="Graduation crowd">
|
||||
<div class="news-info">
|
||||
<span class="tag text-red">UNIVERSITY NEWS</span>
|
||||
<h4>Stockbridge School of Agriculture at UMass Amherst Honors Graduating Class of 2026</h4>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-small">
|
||||
<img src="images/news-ceremony.png" alt="Speaker at podium">
|
||||
<div class="news-info">
|
||||
<span class="tag text-red">UNIVERSITY NEWS</span>
|
||||
<h4>UMass Amherst Graduate School Confers Over 2,200 Degrees at May 15 Master's and Education Specialist Commencement Ceremony</h4>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-small">
|
||||
<img src="images/news-graduation.png" alt="Graduates sitting">
|
||||
<div class="news-info">
|
||||
<span class="tag text-red">UNIVERSITY NEWS</span>
|
||||
<h4>UMass Amherst Graduate School Confers 393 Doctoral Degrees at Mullins Center Ceremony</h4>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event cards -->
|
||||
<div class="events-grid">
|
||||
<div class="event-card">
|
||||
<img src="images/badge-fabric.png" alt="Commencement">
|
||||
<div class="event-info">
|
||||
<span class="date text-red">May 17</span>
|
||||
<h4>2026 UMass Amherst Commencement</h4>
|
||||
<span class="type text-grey">Featured</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-card">
|
||||
<img src="images/news-building.png" alt="Move out collection">
|
||||
<div class="event-info">
|
||||
<span class="date text-red">May 17</span>
|
||||
<h4>New2U Move-Out Collection</h4>
|
||||
<span class="type text-grey">9:00 a.m. – 5:00 p.m.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-card">
|
||||
<img src="images/campus-aerial.png" alt="Information Session">
|
||||
<div class="event-info">
|
||||
<span class="date text-red">May 19</span>
|
||||
<h4>MS in Management Virtual Information Session</h4>
|
||||
<span class="type text-grey">12:00 p.m. – 1:00 p.m.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-card">
|
||||
<img src="images/news-campus-event.png" alt="Information Session">
|
||||
<div class="event-info">
|
||||
<span class="date text-red">May 22</span>
|
||||
<h4>MS in Business Analytics Virtual Information Session</h4>
|
||||
<span class="type text-grey">12:00 p.m. – 1:00 p.m.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-large">
|
||||
<a href="#" class="btn btn-red-fill">MORE NEWS & EVENTS</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-top">
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo">
|
||||
<div class="m-box">M</div>
|
||||
<div class="logo-text">University of<br>Massachusetts<br>Amherst</div>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path></svg></a>
|
||||
<a href="#" aria-label="Twitter"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path></svg></a>
|
||||
<a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33 2.78 2.78 0 001.94 2c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.33 29 29 0 00-.46-5.33zM9.75 15.02V8.48L15.5 11.75l-5.75 3.27z"></path></svg></a>
|
||||
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
|
||||
<a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path><circle cx="4" cy="4" r="2"></circle></svg></a>
|
||||
<a href="#" aria-label="Snapchat"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c-4.4 0-6.7 3.3-6.7 6.3 0 1.5.8 2.8 2.2 3.5-.2.5-.5 1.1-.9 1.7-.5.7-1.3 1.3-2.3 1.5-.7.1-1.3.6-1.3 1.3 0 .7.8 1.1 1.4 1.3 2 .6 4.3.4 6-.6.5.4 1.1.7 1.6.7s1.1-.3 1.6-.7c1.7 1 4 1.2 6 .6.6-.2 1.4-.6 1.4-1.3 0-.7-.6-1.2-1.3-1.3-1-.2-1.8-.8-2.3-1.5-.4-.6-.7-1.2-.9-1.7 1.4-.7 2.2-2 2.2-3.5C18.7 5.3 16.4 2 12 2z"></path></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-links-grid">
|
||||
<div class="footer-col">
|
||||
<h4>INFO FOR...</h4>
|
||||
<a href="#">Prospective Students</a>
|
||||
<a href="#">Current Students</a>
|
||||
<a href="#">Faculty and Staff</a>
|
||||
<a href="#">Parents and Families</a>
|
||||
<a href="#">Job Seekers</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>RESOURCES</h4>
|
||||
<a href="#">Academic Calendar</a>
|
||||
<a href="#">Campus Maps</a>
|
||||
<a href="#">People Finder</a>
|
||||
<a href="#">Policies</a>
|
||||
<a href="#">Sites A-Z Directory</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>CONNECT</h4>
|
||||
<a href="#">Alumni</a>
|
||||
<a href="#">Athletics</a>
|
||||
<a href="#">Giving</a>
|
||||
<a href="#">Libraries</a>
|
||||
<a href="#">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 University of Massachusetts Amherst</p>
|
||||
<div class="bottom-links">
|
||||
<a href="#">Site Policies</a>
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Non-Discrimination Notice</a>
|
||||
<a href="#">Accessibility</a>
|
||||
<a href="#">Terms of Use</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+97
@@ -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));
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user