Riverside University Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Riverside University - Excellence in Education</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Loading Screen --> <div class="loading" id="loading"> <div class="spinner"></div> </div> <!-- Header --> <header class="header"> <div class="header-top"> <div class="container"> ? Spring 2025 Applications Now Open | ? Virtual Campus Tours Available | ? Ranked #1 in Student Satisfaction </div> </div> <div class="header-main"> <div class="container"> <div class="header-content"> <a href="#" class="logo"> <div class="logo-icon"> ? </div> Riverside University </a> <nav> <ul class="nav-menu"> <li><a href="#programs">Programs</a></li> <li><a href="#campus">Campus Life</a></li> <li><a href="#admissions">Admissions</a></li> <li><a href="#faculty">Faculty</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="header-actions"> <button class="apply-btn" id="applyBtn"> <i class="fas fa-graduation-cap"></i> Apply Now </button> </div> </div> </div> </div> </header> <!-- Hero Section --> <section class="hero"> <div class="container"> <div class="hero-content"> <div class="hero-text"> <div class="subtitle">Excellence in Higher Education</div> <h1>Shape Your Future at <span class="highlight">Riverside</span> University</h1> <p>Discover world-class education, cutting-edge research opportunities, and a vibrant campus community that prepares you for success in an ever-changing world. Join thousands of students who have transformed their lives through our innovative programs.</p> <div class="hero-cta"> <a href="#programs" class="cta-primary"> <i class="fas fa-book-open"></i> Explore Programs </a> <a href="#campus" class="cta-secondary"> <i class="fas fa-video"></i> Virtual Tour </a> </div> </div> <div class="hero-image"> ? <div class="floating-elements"> <div class="floating-element">?</div> <div class="floating-element">?</div> <div class="floating-element">?️</div> </div> </div> </div> <div class="hero-stats"> <div class="stat-item"> <span class="stat-number">15,000+</span> <span class="stat-label">Students Enrolled</span> </div> <div class="stat-item"> <span class="stat-number">120+</span> <span class="stat-label">Degree Programs</span> </div> <div class="stat-item"> <span class="stat-number">95%</span> <span class="stat-label">Graduate Employment</span> </div> </div> </div> </section> <!-- Academic Programs --> <section class="programs" id="programs"> <div class="container"> <h2 class="section-title">Academic Programs</h2> <p class="section-subtitle">Discover our comprehensive range of undergraduate and graduate programs designed to prepare you for leadership in your chosen field.</p> <div class="program-filters"> <button class="filter-btn active" data-filter="all">All Programs</button> <button class="filter-btn" data-filter="undergraduate">Undergraduate</button> <button class="filter-btn" data-filter="graduate">Graduate</button> <button class="filter-btn" data-filter="doctoral">Doctoral</button> <button class="filter-btn" data-filter="certificate">Certificate</button> </div> <div class="programs-grid" id="programsGrid"> <div class="program-card" data-category="undergraduate"> <div class="program-header" style="background: linear-gradient(135deg, #1e40af, #1e3a8a);"> ? <div class="program-level">Bachelor's</div> <div class="program-duration">4 Years</div> </div> <div class="program-content"> <h3 class="program-name">Computer Science</h3> <p class="program-department">School of Engineering & Technology</p> <p class="program-description">Master the fundamentals of programming, algorithms, software engineering, and emerging technologies like AI and machine learning in our comprehensive computer science program.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-users detail-icon"></i> <span>Class Size: 25-30</span> </div> <div class="detail-item"> <i class="fas fa-clock detail-icon"></i> <span>120 Credit Hours</span> </div> <div class="detail-item"> <i class="fas fa-briefcase detail-icon"></i> <span>98% Job Placement</span> </div> <div class="detail-item"> <i class="fas fa-dollar-sign detail-icon"></i> <span>$85K Avg. Salary</span> </div> </div> <div class="program-actions"> <button class="btn-primary learn-more" data-program="Computer Science" data-level="Bachelor's">Learn More</button> <button class="btn-secondary">Apply Now</button> </div> </div> </div> <div class="program-card" data-category="undergraduate"> <div class="program-header" style="background: linear-gradient(135deg, #dc2626, #b91c1c);"> ? <div class="program-level">Bachelor's</div> <div class="program-duration">4 Years</div> </div> <div class="program-content"> <h3 class="program-name">Nursing</h3> <p class="program-department">School of Health Sciences</p> <p class="program-description">Prepare for a rewarding career in healthcare with hands-on clinical experience, state-of-the-art simulation labs, and expert faculty guidance in our accredited nursing program.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-users detail-icon"></i> <span>Class Size: 20-25</span> </div> <div class="detail-item"> <i class="fas fa-clock detail-icon"></i> <span>128 Credit Hours</span> </div> <div class="detail-item"> <i class="fas fa-certificate detail-icon"></i> <span>NCLEX Pass: 95%</span> </div> <div class="detail-item"> <i class="fas fa-hospital detail-icon"></i> <span>Clinical Partners: 15+</span> </div> </div> <div class="program-actions"> <button class="btn-primary learn-more" data-program="Nursing" data-level="Bachelor's">Learn More</button> <button class="btn-secondary">Apply Now</button> </div> </div> </div> <div class="program-card" data-category="graduate"> <div class="program-header" style="background: linear-gradient(135deg, #059669, #047857);"> ? <div class="program-level">Master's</div> <div class="program-duration">2 Years</div> </div> <div class="program-content"> <h3 class="program-name">Business Administration (MBA)</h3> <p class="program-department">School of Business</p> <p class="program-description">Advance your career with our AACSB-accredited MBA program featuring concentrations in finance, marketing, operations, and entrepreneurship with flexible evening and weekend options.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-users detail-icon"></i> <span>Cohort: 35-40</span> </div> <div class="detail-item"> <i class="fas fa-clock detail-icon"></i> <span>48 Credit Hours</span> </div> <div class="detail-item"> <i class="fas fa-chart-line detail-icon"></i> <span>ROI: 250%</span> </div> <div class="detail-item"> <i class="fas fa-globe detail-icon"></i> <span>Global Network</span> </div> </div> <div class="program-actions"> <button class="btn-primary learn-more" data-program="Business Administration (MBA)" data-level="Master's">Learn More</button> <button class="btn-secondary">Apply Now</button> </div> </div> </div> <div class="program-card" data-category="undergraduate"> <div class="program-header" style="background: linear-gradient(135deg, #7c3aed, #5b21b6);"> ? <div class="program-level">Bachelor's</div> <div class="program-duration">4 Years</div> </div> <div class="program-content"> <h3 class="program-name">Psychology</h3> <p class="program-department">School of Liberal Arts</p> <p class="program-description">Explore human behavior, cognition, and mental processes through research-based learning, laboratory experiences, and practical applications in clinical and counseling settings.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-users detail-icon"></i> <span>Class Size: 30-35</span> </div> <div class="detail-item"> <i class="fas fa-clock detail-icon"></i> <span>120 Credit Hours</span> </div> <div class="detail-item"> <i class="fas fa-microscope detail-icon"></i> <span>Research Labs: 5</span> </div> <div class="detail-item"> <i class="fas fa-graduation-cap detail-icon"></i> <span>Grad School: 75%</span> </div> </div> <div class="program-actions"> <button class="btn-primary learn-more" data-program="Psychology" data-level="Bachelor's">Learn More</button> <button class="btn-secondary">Apply Now</button> </div> </div> </div> <div class="program-card" data-category="doctoral"> <div class="program-header" style="background: linear-gradient(135deg, #ea580c, #c2410c);"> ? <div class="program-level">Ph.D.</div> <div class="program-duration">5-7 Years</div> </div> <div class="program-content"> <h3 class="program-name">Biomedical Sciences</h3> <p class="program-department">Graduate School</p> <p class="program-description">Conduct cutting-edge research in molecular biology, genetics, immunology, and neuroscience with world-renowned faculty and access to state-of-the-art research facilities.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-users detail-icon"></i> <span>Cohort: 8-12</span> </div> <div class="detail-item"> <i class="fas fa-flask detail-icon"></i> <span>Research Focus</span> </div> <div class="detail-item"> <i class="fas fa-money-bill detail-icon"></i> <span>Full Funding</span> </div> <div class="detail-item"> <i class="fas fa-award detail-icon"></i> <span>Publications</span> </div> </div> <div class="program-actions"> <button class="btn-primary learn-more" data-program="Biomedical Sciences" data-level="Ph.D.">Learn More</button> <button class="btn-secondary">Apply Now</button> </div> </div> </div> <div class="program-card" data-category="certificate"> <div class="program-header" style="background: linear-gradient(135deg, #0891b2, #0e7490);"> ? <div class="program-level">Certificate</div> <div class="program-duration">1 Year</div> </div> <div class="program-content"> <h3 class="program-name">Data Analytics</h3> <p class="program-department">School of Engineering & Technology</p> <p class="program-description">Master data visualization, statistical analysis, and machine learning techniques with hands-on projects using industry-standard tools like Python, R, and Tableau.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-users detail-icon"></i> <span>Class Size: 15-20</span> </div> <div class="detail-item"> <i class="fas fa-clock detail-icon"></i> <span>18 Credit Hours</span> </div> <div class="detail-item"> <i class="fas fa-laptop detail-icon"></i> <span>100% Online</span> </div> <div class="detail-item"> <i class="fas fa-certificate detail-icon"></i> <span>Industry Cert</span> </div> </div> <div class="program-actions"> <button class="btn-primary learn-more" data-program="Data Analytics" data-level="Certificate">Learn More</button> <button class="btn-secondary">Apply Now</button> </div> </div> </div> </div> </div> </section> <!-- Campus Life --> <section class="campus-life" id="campus"> <div class="container"> <h2 class="section-title">Campus Life & Student Experience</h2> <p class="section-subtitle">Immerse yourself in a vibrant campus community with endless opportunities for growth, leadership, and lifelong friendships.</p> <div class="campus-grid"> <div class="campus-card"> <div class="campus-header" style="background: linear-gradient(135deg, #059669, #047857);"> ? <div class="campus-category">Housing</div> <div class="campus-rating">4.8★</div> </div> <div class="campus-content"> <h3 class="campus-title">Residence Halls</h3> <p class="campus-type">On-Campus Living</p> <p class="campus-description">Modern residence halls with suite-style rooms, study lounges, fitness centers, and dining facilities. Living-learning communities available for academic and special interest groups.</p> <div class="program-actions"> <button class="btn-primary">Virtual Tour</button> <button class="btn-secondary">Apply Housing</button> </div> </div> </div> <div class="campus-card"> <div class="campus-header" style="background: linear-gradient(135deg, #7c3aed, #5b21b6);"> ? <div class="campus-category">Activities</div> <div class="campus-rating">200+</div> </div> <div class="campus-content"> <h3 class="campus-title">Student Organizations</h3> <p class="campus-type">Clubs & Activities</p> <p class="campus-description">Join over 200 student organizations including academic clubs, Greek life, cultural groups, service organizations, and recreational clubs to enhance your college experience.</p> <div class="program-actions"> <button class="btn-primary">Browse Clubs</button> <button class="btn-secondary">Start a Club</button> </div> </div> </div> <div class="campus-card"> <div class="campus-header" style="background: linear-gradient(135deg, #dc2626, #b91c1c);"> ? <div class="campus-category">Athletics</div> <div class="campus-rating">Division II</div> </div> <div class="campus-content"> <h3 class="campus-title">Riverside Eagles</h3> <p class="campus-type">NCAA Division II</p> <p class="campus-description">Compete at the highest level with 18 varsity sports teams, state-of-the-art athletic facilities, and comprehensive support for student-athletes' academic and athletic success.</p> <div class="program-actions"> <button class="btn-primary">Sports Schedule</button> <button class="btn-secondary">Recruitment</button> </div> </div> </div> <div class="campus-card"> <div class="campus-header" style="background: linear-gradient(135deg, #ea580c, #c2410c);"> ?️ <div class="campus-category">Dining</div> <div class="campus-rating">15 Options</div> </div> <div class="campus-content"> <h3 class="campus-title">Campus Dining</h3> <p class="campus-type">Food & Nutrition</p> <p class="campus-description">Enjoy diverse dining options including all-you-care-to-eat dining halls, specialty restaurants, grab-and-go markets, and food trucks with accommodations for all dietary needs.</p> <div class="program-actions"> <button class="btn-primary">Meal Plans</button> <button class="btn-secondary">Menus</button> </div> </div> </div> <div class="campus-card"> <div class="campus-header" style="background: linear-gradient(135deg, #1e40af, #1e3a8a);"> ? <div class="campus-category">Career</div> <div class="campus-rating">95% Success</div> </div> <div class="campus-content"> <h3 class="campus-title">Career Services</h3> <p class="campus-type">Professional Development</p> <p class="campus-description">Comprehensive career support including resume writing, interview preparation, internship placement, job fairs, and alumni networking opportunities to launch your career.</p> <div class="program-actions"> <button class="btn-primary">Career Center</button> <button class="btn-secondary">Job Board</button> </div> </div> </div> <div class="campus-card"> <div class="campus-header" style="background: linear-gradient(135deg, #0891b2, #0e7490);"> ? <div class="campus-category">Academic</div> <div class="campus-rating">24/7 Access</div> </div> <div class="campus-content"> <h3 class="campus-title">Learning Resources</h3> <p class="campus-type">Academic Support</p> <p class="campus-description">Access extensive library collections, tutoring services, writing center, research support, study spaces, and technology resources to support your academic success.</p> <div class="program-actions"> <button class="btn-primary">Library</button> <button class="btn-secondary">Tutoring</button> </div> </div> </div> </div> </div> </section> <!-- Admissions --> <section class="admissions" id="admissions"> <div class="container"> <h2 class="section-title">Admissions & Financial Aid</h2> <p class="section-subtitle">Start your journey to Riverside University with our comprehensive admissions process and generous financial aid opportunities.</p> <div class="admissions-grid"> <div class="admission-card"> <div class="admission-header"> ? <div class="admission-deadline">Priority: Feb 1</div> <div class="admission-priority">Rolling</div> </div> <div class="admission-content"> <h3 class="admission-title">Undergraduate Admissions</h3> <p class="admission-type">First-Year & Transfer Students</p> <p class="admission-description">Join our diverse community of learners with our holistic admissions process. We consider academic achievement, extracurricular involvement, leadership experience, and personal qualities.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-chart-line detail-icon"></i> <span>Average GPA: 3.6</span> </div> <div class="detail-item"> <i class="fas fa-file-alt detail-icon"></i> <span>SAT/ACT Optional</span> </div> <div class="detail-item"> <i class="fas fa-dollar-sign detail-icon"></i> <span>No Application Fee</span> </div> <div class="detail-item"> <i class="fas fa-calendar detail-icon"></i> <span>Rolling Admissions</span> </div> </div> <div class="program-actions"> <button class="btn-primary">Apply Now</button> <button class="btn-secondary">Requirements</button> </div> </div> </div> <div class="admission-card"> <div class="admission-header"> ? <div class="admission-deadline">Varies by Program</div> <div class="admission-priority">Competitive</div> </div> <div class="admission-content"> <h3 class="admission-title">Graduate Admissions</h3> <p class="admission-type">Master's & Doctoral Programs</p> <p class="admission-description">Advance your career and expertise through our rigorous graduate programs with research opportunities, assistantships, and professional development support.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-graduation-cap detail-icon"></i> <span>Bachelor's Required</span> </div> <div class="detail-item"> <i class="fas fa-file-text detail-icon"></i> <span>GRE/GMAT Varies</span> </div> <div class="detail-item"> <i class="fas fa-users detail-icon"></i> <span>Letters of Rec</span> </div> <div class="detail-item"> <i class="fas fa-edit detail-icon"></i> <span>Statement Required</span> </div> </div> <div class="program-actions"> <button class="btn-primary">Apply Now</button> <button class="btn-secondary">Program Info</button> </div> </div> </div> <div class="admission-card"> <div class="admission-header"> ? <div class="admission-deadline">FAFSA: Mar 1</div> <div class="admission-priority">Need-Based</div> </div> <div class="admission-content"> <h3 class="admission-title">Financial Aid</h3> <p class="admission-type">Scholarships & Grants</p> <p class="admission-description">Make your education affordable with our comprehensive financial aid program including merit scholarships, need-based grants, work-study opportunities, and student loans.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-percentage detail-icon"></i> <span>85% Receive Aid</span> </div> <div class="detail-item"> <i class="fas fa-award detail-icon"></i> <span>$15K Avg Award</span> </div> <div class="detail-item"> <i class="fas fa-calculator detail-icon"></i> <span>Net Price Calculator</span> </div> <div class="detail-item"> <i class="fas fa-clock detail-icon"></i> <span>Priority Deadline</span> </div> </div> <div class="program-actions"> <button class="btn-primary">Apply for Aid</button> <button class="btn-secondary">Scholarships</button> </div> </div> </div> <div class="admission-card"> <div class="admission-header"> ? <div class="admission-deadline">Year-Round</div> <div class="admission-priority">Welcome</div> </div> <div class="admission-content"> <h3 class="admission-title">International Students</h3> <p class="admission-type">Global Community</p> <p class="admission-description">Join students from over 50 countries with dedicated support services, English language programs, cultural orientation, and visa assistance for international students.</p> <div class="program-details"> <div class="detail-item"> <i class="fas fa-globe detail-icon"></i> <span>50+ Countries</span> </div> <div class="detail-item"> <i class="fas fa-language detail-icon"></i> <span>TOEFL/IELTS</span> </div> <div class="detail-item"> <i class="fas fa-passport detail-icon"></i> <span>I-20 Support</span> </div> <div class="detail-item"> <i class="fas fa-handshake detail-icon"></i> <span>Dedicated Advisor</span> </div> </div> <div class="program-actions"> <button class="btn-primary">International Info</button> <button class="btn-secondary">Contact Advisor</button> </div> </div> </div> </div> </div> </section> <!-- Faculty --> <section class="faculty" id="faculty"> <div class="container"> <h2 class="section-title">Distinguished Faculty</h2> <p class="section-subtitle">Learn from world-renowned scholars, researchers, and industry experts who are dedicated to your academic and professional success.</p> <div class="faculty-grid"> <div class="faculty-card"> <div class="faculty-avatar"> ?? </div> <h3 class="faculty-name">Dr. Michael Chen</h3> <p class="faculty-title">Professor & Department Chair</p> <p class="faculty-department">Computer Science</p> <p class="faculty-description">Leading researcher in artificial intelligence and machine learning with over 100 publications and 15 years of industry experience at Google and Microsoft.</p> </div> <div class="faculty-card"> <div class="faculty-avatar"> ?⚕️ </div> <h3 class="faculty-name">Dr. Sarah Johnson</h3> <p class="faculty-title">Professor of Nursing</p> <p class="faculty-department">Health Sciences</p> <p class="faculty-description">Award-winning educator and practicing nurse practitioner specializing in pediatric care with extensive clinical and research experience.</p> </div> <div class="faculty-card"> <div class="faculty-avatar"> ?? </div> <h3 class="faculty-name">Dr. Robert Martinez</h3> <p class="faculty-title">Dean of Business School</p> <p class="faculty-department">Business Administration</p> <p class="faculty-description">Former Fortune 500 executive and internationally recognized expert in strategic management and organizational leadership.</p> </div> <div class="faculty-card"> <div class="faculty-avatar"> ?? </div> <h3 class="faculty-name">Dr. Emily Rodriguez</h3> <p class="faculty-title">Research Professor</p> <p class="faculty-department">Biomedical Sciences</p> <p class="faculty-description">NIH-funded researcher in cancer biology and genetics with groundbreaking discoveries in personalized medicine and gene therapy.</p> </div> <div class="faculty-card"> <div class="faculty-avatar"> ?? </div> <h3 class="faculty-name">Dr. James Wilson</h3> <p class="faculty-title">Professor of Psychology</p> <p class="faculty-department">Liberal Arts</p> <p class="faculty-description">Clinical psychologist and researcher specializing in cognitive behavioral therapy and mental health treatment with 20+ years of practice.</p> </div> <div class="faculty-card"> <div class="faculty-avatar"> ?? </div> <h3 class="faculty-name">Dr. Lisa Thompson</h3> <p class="faculty-title">Associate Professor</p> <p class="faculty-department">Data Analytics</p> <p class="faculty-description">Data science expert with industry experience at Amazon and Netflix, specializing in big data analytics and predictive modeling.</p> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>Academics</h3> <ul> <li><a href="#">Undergraduate Programs</a></li> <li><a href="#">Graduate Programs</a></li> <li><a href="#">Online Learning</a></li> <li><a href="#">Academic Calendar</a></li> <li><a href="#">Course Catalog</a></li> </ul> </div> <div class="footer-section"> <h3>Campus Life</h3> <ul> <li><a href="#">Student Organizations</a></li> <li><a href="#">Athletics</a></li> <li><a href="#">Housing & Dining</a></li> <li><a href="#">Health & Wellness</a></li> <li><a href="#">Campus Events</a></li> </ul> </div> <div class="footer-section"> <h3>Admissions</h3> <ul> <li><a href="#">Apply Now</a></li> <li><a href="#">Visit Campus</a></li> <li><a href="#">Financial Aid</a></li> <li><a href="#">Scholarships</a></li> <li><a href="#">International Students</a></li> </ul> </div> <div class="footer-section"> <h3>Contact</h3> <ul> <li><a href="#">Campus Directory</a></li> <li><a href="#">Phone: (555) RIVERSIDE</a></li> <li><a href="#">Email: info@riverside.edu</a></li> <li><a href="#">1234 University Ave</a></li> <li><a href="#">Riverside, CA 92521</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2024 Riverside University. All rights reserved. | Privacy Policy | Terms of Use | Accessibility | Title IX</p> </div> </div> </footer> <!-- Application Modal --> <div class="application-modal" id="applicationModal"> <div class="application-content"> <button class="application-close" id="applicationClose"> <i class="fas fa-times"></i> </button> <h2>Apply to Riverside University</h2> <p>Start your application today and join our community of scholars and leaders.</p> <form class="application-form" id="applicationForm"> <div class="form-row"> <div class="form-group"> <label class="form-label">First Name *</label> <input type="text" class="form-input" required> </div> <div class="form-group"> <label class="form-label">Last Name *</label> <input type="text" class="form-input" required> </div> </div> <div class="form-group"> <label class="form-label">Email Address *</label> <input type="email" class="form-input" required> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Phone Number</label> <input type="tel" class="form-input"> </div> <div class="form-group"> <label class="form-label">Date of Birth</label> <input type="date" class="form-input"> </div> </div> <div class="form-group"> <label class="form-label">Program of Interest *</label> <select class="form-select" required> <option value="">Select a program</option> <option value="computer-science">Computer Science (Bachelor's)</option> <option value="nursing">Nursing (Bachelor's)</option> <option value="mba">Business Administration (MBA)</option> <option value="psychology">Psychology (Bachelor's)</option> <option value="biomedical">Biomedical Sciences (Ph.D.)</option> <option value="data-analytics">Data Analytics (Certificate)</option> </select> </div> <div class="form-group"> <label class="form-label">Intended Start Term *</label> <select class="form-select" required> <option value="">Select term</option> <option value="spring-2025">Spring 2025</option> <option value="summer-2025">Summer 2025</option> <option value="fall-2025">Fall 2025</option> </select> </div> <div class="form-group"> <label class="form-label">Tell us about your academic interests and career goals</label> <textarea class="form-textarea" placeholder="Share your motivation for pursuing this program and your future aspirations..."></textarea> </div> <div class="program-actions"> <button type="submit" class="btn-primary" style="width: 100%;">Submit Application</button> </div> </form> </div> </div> <!-- Student Portal Modal --> <div class="portal-modal" id="portalModal"> <div class="portal-content"> <button class="portal-close" id="portalClose"> <i class="fas fa-times"></i> </button> <h2>Student Portal Login</h2> <p>Access your courses, grades, schedules, and university services.</p> <form class="login-form" id="loginForm"> <div class="form-group"> <label class="form-label">Student ID or Email</label> <input type="text" class="form-input" placeholder="Enter your student ID or email"> </div> <div class="form-group"> <label class="form-label">Password</label> <input type="password" class="form-input" placeholder="Enter your password"> </div> <div class="program-actions"> <button type="submit" class="btn-primary" style="width: 100%;">Login to Portal</button> </div> <div style="text-align: center; margin-top: 1.5rem;"> <a href="#" style="color: var(--primary-color); text-decoration: none; font-weight: 600;">Forgot Password?</a> <span style="margin: 0 1rem; color: var(--text-light);">|</span> <a href="#" style="color: var(--primary-color); text-decoration: none; font-weight: 600;">First Time User?</a> </div> </form> </div> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96e2cef744769a96',t:'MTc1NTAzMTQ0My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-color: #1e40af; --primary-dark: #1e3a8a; --secondary-color: #dc2626; --accent-color: #059669; --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #ef4444; --light-blue: #eff6ff; --medium-blue: #dbeafe; --light-gray: #f8fafc; --medium-gray: #e2e8f0; --dark-gray: #64748b; --text-primary: #0f172a; --text-secondary: #475569; --text-light: #94a3b8; --border-color: #e2e8f0; --white: #ffffff; --black: #000000; --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-heavy: 0 10px 40px rgba(0, 0, 0, 0.2); --border-radius: 16px; --transition: all 0.3s ease; --gradient-primary: linear-gradient(135deg, #1e40af, #1e3a8a); --gradient-secondary: linear-gradient(135deg, #dc2626, #b91c1c); --gradient-success: linear-gradient(135deg, #059669, #047857); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--white); overflow-x: hidden; } /* Header */ .header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-light); } .header-top { background: var(--gradient-primary); color: white; padding: 0.75rem 0; font-size: 0.9rem; text-align: center; font-weight: 500; } .header-main { padding: 1rem 0; } .container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .logo { display: flex; align-items: center; gap: 0.75rem; font-size: 1.8rem; font-weight: 800; color: var(--primary-color); text-decoration: none; font-family: 'Playfair Display', serif; } .logo-icon { background: var(--gradient-primary); color: white; padding: 0.6rem; border-radius: 50%; font-size: 1.5rem; box-shadow: var(--shadow-medium); } .nav-menu { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-menu a { color: var(--text-primary); text-decoration: none; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--border-radius); transition: var(--transition); font-size: 0.95rem; } .nav-menu a:hover { background: var(--light-blue); color: var(--primary-color); transform: translateY(-2px); } .header-actions { display: flex; align-items: center; gap: 1rem; } .apply-btn, .portal-btn { background: var(--gradient-primary); color: white; padding: 0.8rem 1.8rem; border: none; border-radius: var(--border-radius); font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; box-shadow: var(--shadow-medium); } .portal-btn { background: var(--gradient-secondary); } .apply-btn:hover, .portal-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); } /* Hero Section */ .hero { background: linear-gradient(135deg, var(--light-blue), var(--white)); padding: 6rem 0; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; right: -50%; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="1" fill="%231e40af" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>'); z-index: 1; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 2; } .hero-text h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; font-family: 'Playfair Display', serif; color: var(--text-primary); } .hero-text .highlight { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-text .subtitle { font-size: 1.3rem; margin-bottom: 2rem; color: var(--text-secondary); font-weight: 500; } .hero-text p { font-size: 1.1rem; margin-bottom: 2.5rem; color: var(--text-secondary); line-height: 1.7; } .hero-cta { display: flex; gap: 1.5rem; flex-wrap: wrap; } .cta-primary { background: var(--gradient-primary); color: white; padding: 1.2rem 2.5rem; border: none; border-radius: var(--border-radius); font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; box-shadow: var(--shadow-heavy); } .cta-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(30, 64, 175, 0.4); } .cta-secondary { background: transparent; color: var(--primary-color); padding: 1.2rem 2.5rem; border: 2px solid var(--primary-color); border-radius: var(--border-radius); font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .cta-secondary:hover { background: var(--light-blue); transform: translateY(-3px); } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } .stat-item { text-align: center; padding: 1.5rem; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow-light); border: 1px solid var(--border-color); } .stat-number { font-size: 2.5rem; font-weight: 900; color: var(--primary-color); display: block; font-family: 'Playfair Display', serif; } .stat-label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; } .hero-image { text-align: center; font-size: 12rem; opacity: 0.9; position: relative; } .floating-elements { position: absolute; width: 100%; height: 100%; pointer-events: none; } .floating-element { position: absolute; font-size: 2.5rem; opacity: 0.6; animation: float 6s ease-in-out infinite; color: var(--primary-color); } .floating-element:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; } .floating-element:nth-child(2) { top: 70%; right: 15%; animation-delay: 2s; } .floating-element:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 4s; } /* Academic Programs */ .programs { padding: 6rem 0; background: var(--white); } .section-title { text-align: center; font-size: 2.8rem; font-weight: 800; margin-bottom: 1rem; color: var(--text-primary); font-family: 'Playfair Display', serif; } .section-subtitle { text-align: center; font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 4rem; max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 500; } .program-filters { display: flex; justify-content: center; gap: 1rem; margin-bottom: 4rem; flex-wrap: wrap; } .filter-btn { background: white; color: var(--text-secondary); border: 2px solid var(--border-color); padding: 1rem 2rem; border-radius: var(--border-radius); font-weight: 600; cursor: pointer; transition: var(--transition); font-size: 0.9rem; } .filter-btn.active, .filter-btn:hover { background: var(--gradient-primary); color: white; border-color: var(--primary-color); transform: translateY(-2px); } .programs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 2.5rem; } .program-card { background: white; border-radius: var(--border-radius); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-light); position: relative; border: 1px solid var(--border-color); } .program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); } .program-header { position: relative; height: 200px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; overflow: hidden; } .program-level { position: absolute; top: 1rem; left: 1rem; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); color: white; padding: 0.4rem 1rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 700; } .program-duration { position: absolute; top: 1rem; right: 1rem; background: var(--gradient-secondary); color: white; padding: 0.4rem 1rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 700; } .program-content { padding: 2.5rem; } .program-name { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; font-family: 'Playfair Display', serif; } .program-department { color: var(--primary-color); font-weight: 600; margin-bottom: 1.5rem; font-size: 1rem; } .program-description { color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; font-size: 0.95rem; } .program-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; font-size: 0.9rem; } .detail-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-weight: 500; } .detail-icon { color: var(--primary-color); width: 16px; font-size: 0.9rem; } .program-actions { display: flex; gap: 1rem; } .btn-primary { background: var(--gradient-primary); color: white; border: none; padding: 1rem 2rem; border-radius: var(--border-radius); font-weight: 700; cursor: pointer; transition: var(--transition); flex: 1; font-size: 0.9rem; } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } .btn-secondary { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 1rem 1.5rem; border-radius: var(--border-radius); font-weight: 700; cursor: pointer; transition: var(--transition); font-size: 0.9rem; } .btn-secondary:hover { background: var(--light-blue); transform: translateY(-2px); } /* Campus Life */ .campus-life { padding: 6rem 0; background: var(--light-gray); } .campus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 2.5rem; } .campus-card { background: white; border-radius: var(--border-radius); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-light); position: relative; border: 1px solid var(--border-color); } .campus-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); } .campus-header { position: relative; height: 220px; background: var(--gradient-success); display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; overflow: hidden; } .campus-category { position: absolute; top: 1rem; left: 1rem; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); color: white; padding: 0.4rem 1rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 700; } .campus-rating { position: absolute; top: 1rem; right: 1rem; background: var(--gradient-primary); color: white; padding: 0.4rem 1rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 700; } .campus-content { padding: 2.5rem; } .campus-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; font-family: 'Playfair Display', serif; } .campus-type { color: var(--accent-color); font-weight: 600; margin-bottom: 1.5rem; font-size: 1rem; } .campus-description { color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; font-size: 0.95rem; } /* Admissions */ .admissions { padding: 6rem 0; background: var(--white); } .admissions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2.5rem; } .admission-card { background: white; border-radius: var(--border-radius); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-light); position: relative; border: 1px solid var(--border-color); } .admission-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); } .admission-header { position: relative; height: 200px; background: linear-gradient(135deg, #7c3aed, #5b21b6); display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; overflow: hidden; } .admission-deadline { position: absolute; top: 1rem; left: 1rem; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); color: white; padding: 0.6rem 1.2rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 700; text-align: center; } .admission-priority { position: absolute; top: 1rem; right: 1rem; background: var(--gradient-secondary); color: white; padding: 0.4rem 1rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 700; } .admission-content { padding: 2.5rem; } .admission-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; font-family: 'Playfair Display', serif; } .admission-type { color: var(--primary-color); font-weight: 600; margin-bottom: 1.5rem; font-size: 1rem; } .admission-description { color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; font-size: 0.95rem; } /* Faculty */ .faculty { padding: 6rem 0; background: var(--light-gray); } .faculty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; } .faculty-card { background: white; padding: 3rem; border-radius: var(--border-radius); box-shadow: var(--shadow-light); transition: var(--transition); text-align: center; position: relative; overflow: hidden; border: 1px solid var(--border-color); } .faculty-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.1), transparent); transition: left 0.5s ease; } .faculty-card:hover::before { left: 100%; } .faculty-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); } .faculty-avatar { width: 100px; height: 100px; background: var(--gradient-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 2rem; box-shadow: var(--shadow-medium); } .faculty-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); font-family: 'Playfair Display', serif; } .faculty-title { color: var(--primary-color); font-weight: 600; margin-bottom: 1rem; font-size: 1rem; } .faculty-department { color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.9rem; } .faculty-description { color: var(--text-secondary); line-height: 1.7; font-size: 0.95rem; } /* Footer */ .footer { background: var(--secondary-color); color: white; padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .footer-section h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.5rem; font-family: 'Playfair Display', serif; color: var(--warning-color); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.8rem; } .footer-section ul li a { color: #fecaca; text-decoration: none; transition: var(--transition); font-weight: 500; } .footer-section ul li a:hover { color: var(--warning-color); } .footer-bottom { border-top: 1px solid #dc2626; padding-top: 2rem; text-align: center; color: #fecaca; } /* Application Modal */ .application-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10001; opacity: 0; visibility: hidden; transition: var(--transition); } .application-modal.open { opacity: 1; visibility: visible; } .application-content { background: white; border-radius: var(--border-radius); padding: 3rem; max-width: 700px; width: 90%; max-height: 90%; overflow-y: auto; position: relative; } .application-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition); } .application-close:hover { color: var(--primary-color); } .application-form { margin-top: 2rem; } .form-group { margin-bottom: 2rem; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-primary); } .form-input, .form-select, .form-textarea { width: 100%; padding: 1rem; border: 2px solid var(--border-color); border-radius: var(--border-radius); font-size: 1rem; transition: var(--transition); font-weight: 500; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1); } .form-textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Student Portal Modal */ .portal-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10001; opacity: 0; visibility: hidden; transition: var(--transition); } .portal-modal.open { opacity: 1; visibility: visible; } .portal-content { background: white; border-radius: var(--border-radius); padding: 3rem; max-width: 500px; width: 90%; position: relative; } .portal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition); } .portal-close:hover { color: var(--primary-color); } .login-form { margin-top: 2rem; } /* Responsive Design */ @media (max-width: 1024px) { .hero-text h1 { font-size: 3rem; } .hero-content { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 768px) { .header-content { flex-direction: column; gap: 1.5rem; } .nav-menu { flex-wrap: wrap; gap: 1rem; justify-content: center; } .hero-text h1 { font-size: 2.5rem; } .hero-cta { justify-content: center; } .hero-stats { grid-template-columns: 1fr; } .programs-grid, .campus-grid, .admissions-grid, .faculty-grid { grid-template-columns: 1fr; } .section-title { font-size: 2.2rem; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container { padding: 0 0.5rem; } .section-title { font-size: 2rem; } .hero { padding: 4rem 0; } .hero-image { font-size: 8rem; } .hero-text h1 { font-size: 2rem; } } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeInUp 0.8s ease forwards; } /* Loading Animation */ .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--white); display: flex; align-items: center; justify-content: center; z-index: 10000; transition: opacity 0.5s ease; } .loading.hidden { opacity: 0; pointer-events: none; } .spinner { width: 50px; height: 50px; border: 4px solid var(--light-blue); border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Pulse Animation for CTA buttons */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(30, 64, 175, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 64, 175, 0); } } .cta-primary { animation: pulse 2s infinite; }
JavaScript
// Loading screen window.addEventListener('load', () => { const loading = document.getElementById('loading'); setTimeout(() => { loading.classList.add('hidden'); }, 1000); }); // Program filtering document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', function() { document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); this.classList.add('active'); const filter = this.getAttribute('data-filter'); const programCards = document.querySelectorAll('.program-card'); programCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-category') === filter) { card.style.display = 'block'; card.style.animation = 'fadeInUp 0.8s ease forwards'; } else { card.style.display = 'none'; } }); }); }); // Application modal const applicationModal = document.getElementById('applicationModal'); const applyBtn = document.getElementById('applyBtn'); const applicationClose = document.getElementById('applicationClose'); applyBtn.addEventListener('click', () => { applicationModal.classList.add('open'); }); applicationClose.addEventListener('click', () => { applicationModal.classList.remove('open'); }); applicationModal.addEventListener('click', function(e) { if (e.target === applicationModal) { applicationModal.classList.remove('open'); } }); // Student portal modal const portalModal = document.getElementById('portalModal'); const portalBtn = document.getElementById('portalBtn'); const portalClose = document.getElementById('portalClose'); portalBtn.addEventListener('click', () => { portalModal.classList.add('open'); }); portalClose.addEventListener('click', () => { portalModal.classList.remove('open'); }); portalModal.addEventListener('click', function(e) { if (e.target === portalModal) { portalModal.classList.remove('open'); } }); // Form submissions document.getElementById('applicationForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); const firstName = this.querySelector('input[type="text"]').value; const program = this.querySelector('select').value; alert(`? Application Submitted Successfully!\n\nThank you, ${firstName}! Your application has been received.\n\nNext Steps:\n• You'll receive a confirmation email within 24 hours\n• Application review takes 2-3 weeks\n• Check your email for updates and additional requirements\n• Financial aid applications are processed separately\n\nWelcome to the Riverside University family! ?`); applicationModal.classList.remove('open'); this.reset(); }); document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const studentId = this.querySelector('input[type="text"]').value; alert(`? Portal Access\n\nWelcome back to the Student Portal!\n\nAvailable Services:\n• View current grades and transcripts\n• Register for classes\n• Check financial aid status\n• Access course materials\n• Update personal information\n• View academic calendar\n• Connect with advisors\n\nHave a great semester! ?`); portalModal.classList.remove('open'); this.reset(); }); // Learn more buttons document.querySelectorAll('.learn-more').forEach(btn => { btn.addEventListener('click', function() { const programName = this.getAttribute('data-program'); const level = this.getAttribute('data-level'); alert(`? ${programName} (${level})\n\nProgram Highlights:\n• Experienced faculty with industry expertise\n• Hands-on learning and research opportunities\n• Strong alumni network and career support\n• Modern facilities and technology\n• Internship and co-op programs\n• Study abroad opportunities\n• Small class sizes for personalized attention\n\nAdmission Requirements:\n• Completed application\n• Official transcripts\n• Letters of recommendation\n• Personal statement\n• Standardized test scores (if required)\n\nReady to apply? Contact our admissions team! ?`); }); }); // Campus life interactions document.querySelectorAll('.campus-card .btn-primary').forEach(btn => { btn.addEventListener('click', function() { const campusTitle = this.closest('.campus-content').querySelector('.campus-title').textContent; if (btn.textContent === 'Virtual Tour') { alert(`? ${campusTitle} Virtual Tour\n\nExplore our modern residence halls:\n• Suite-style rooms with private bathrooms\n• Common areas and study lounges\n• Fitness centers and recreation rooms\n• Dining facilities and kitchenettes\n• Laundry facilities on every floor\n• 24/7 security and resident advisors\n• High-speed internet and cable TV\n\nHousing applications open February 1st! ?`); } else if (btn.textContent === 'Browse Clubs') { alert(`? Student Organizations\n\nPopular Categories:\n• Academic & Professional (45 clubs)\n• Cultural & International (35 clubs)\n• Service & Volunteer (25 clubs)\n• Recreation & Sports (40 clubs)\n• Greek Life (12 organizations)\n• Special Interest (43 clubs)\n\nBenefits of Joining:\n• Leadership development\n• Networking opportunities\n• Skill building\n• Community service\n• Social connections\n\nClub Fair: First week of each semester! ?`); } else if (btn.textContent === 'Sports Schedule') { alert(`? Riverside Eagles Athletics\n\nUpcoming Games:\n• Basketball vs. State University (Jan 15)\n• Soccer vs. City College (Jan 18)\n• Swimming Championships (Jan 22)\n• Baseball season starts (Feb 1)\n\nFacilities:\n• 15,000-seat stadium\n• Olympic-size swimming pool\n• Tennis and basketball courts\n• Fitness and training centers\n\nStudent tickets are FREE with ID! ?`); } else { alert(`✨ ${campusTitle}\n\nLearn more about this amazing campus resource! Contact our student services team for detailed information, schedules, and how to get involved.\n\nPhone: (555) RIVERSIDE\nEmail: studentlife@riverside.edu\n\nWe're here to help make your college experience unforgettable! ?`); } }); }); // Faculty card interactions document.querySelectorAll('.faculty-card').forEach(card => { card.addEventListener('click', function() { const facultyName = this.querySelector('.faculty-name').textContent; const facultyTitle = this.querySelector('.faculty-title').textContent; const department = this.querySelector('.faculty-department').textContent; const description = this.querySelector('.faculty-description').textContent; alert(`?? ${facultyName}\n${facultyTitle}\n${department}\n\n${description}\n\nOffice Hours: By appointment\nEmail: Available through student portal\nResearch Interests: Contact department for details\n\nOur faculty are committed to your success! ?`); }); }); // Admission card interactions document.querySelectorAll('.admission-card .btn-primary').forEach(btn => { btn.addEventListener('click', function() { const admissionTitle = this.closest('.admission-content').querySelector('.admission-title').textContent; if (btn.textContent === 'Apply Now') { applicationModal.classList.add('open'); } else if (btn.textContent === 'Apply for Aid') { alert(`? Financial Aid Application\n\nSteps to Apply:\n1. Complete FAFSA (Free Application for Federal Student Aid)\n2. Submit CSS Profile (if required)\n3. Provide tax documents and bank statements\n4. Apply for university scholarships\n5. Review and accept aid package\n\nImportant Dates:\n• Priority FAFSA deadline: March 1\n• Scholarship applications: February 15\n• Aid packages sent: April 1\n\nNeed help? Visit our Financial Aid Office! ?`); } else if (btn.textContent === 'International Info') { alert(`? International Student Services\n\nWe Welcome Students From:\n• Over 50 countries worldwide\n• All academic backgrounds\n• Diverse cultural experiences\n\nSupport Services:\n• Visa and immigration assistance\n• English language programs\n• Cultural orientation programs\n• International student organizations\n• Academic and personal counseling\n• Career services for international students\n\nContact: international@riverside.edu ?`); } }); }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Add hover animations to cards document.querySelectorAll('.program-card, .campus-card, .admission-card, .faculty-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-10px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); // Add floating animation to hero elements const floatingElements = document.querySelectorAll('.floating-element'); floatingElements.forEach((element, index) => { element.style.animationDelay = `${index * 2}s`; }); // Dynamic stats counter animation function animateStats() { const stats = document.querySelectorAll('.stat-number'); stats.forEach(stat => { const target = parseInt(stat.textContent.replace(/\D/g, '')); let current = 0; const increment = target / 50; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } const suffix = stat.textContent.includes('+') ? '+' : (stat.textContent.includes('%') ? '%' : ''); stat.textContent = Math.floor(current).toLocaleString() + suffix; }, 30); }); } // Trigger stats animation when hero is visible const heroObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateStats(); heroObserver.unobserve(entry.target); } }); }); heroObserver.observe(document.querySelector('.hero')); // Add scroll-triggered animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-fade-in'); } }); }, observerOptions); // Observe all cards and sections document.querySelectorAll('.program-card, .campus-card, .admission-card, .faculty-card').forEach(el => { observer.observe(el); }); // Add special academic year messaging const today = new Date(); const isApplicationSeason = today.getMonth() >= 10 || today.getMonth() <= 3; // Nov-Mar if (isApplicationSeason) { // Add application season highlight to hero const hero = document.querySelector('.hero'); const applicationBanner = document.createElement('div'); applicationBanner.style.cssText = ` position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); background: var(--gradient-secondary); color: white; padding: 1rem 2rem; border-radius: var(--border-radius); font-weight: 700; z-index: 3; animation: pulse 2s infinite; `; applicationBanner.textContent = '? Application Season - Apply Now for Fall 2025!'; hero.appendChild(applicationBanner); }
Output Preview
Desktop
Mobile
Fullscreen