<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ACE Website</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="target active text-uppercase" id="home-button"><a href="#">Home</a></li>
<li class="target text-uppercase" id="about-button"><a href="#">About</a></li>
<li><img src="https://scontent-iad3-1.cdninstagram.com/t51.2885-19/s150x150/14280353_1263924223647358_7436332773163401216_a.jpg" id="me"/></li>
<li class="target text-uppercase" id="portfolio-button"><a href="#">Calendar</a></li>
<li class="target text-uppercase" id="contact-button"><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="icon"><a href="https://codepen.io/SamrajM/" target="_blank"><i class="fa fa-codepen"></i></a></li>
<li class="icon"><a href="https://twitter.com/SamrajMoorjani" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li class="icon"><a href="https://github.com/smoorjani" target="_blank"><i class="fa fa-github"></i></a></li>
<li class="icon last"><a href="https://www.linkedin.com/in/samraj-m-a74372120
" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</nav>
<div class="pages-container">
<div class="page active-page" id="home-page">
<h1>Asian Cultural Exchange Club</h1>
<h2></h2>
</div>
<div class="page" id="about-page">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5">
<h1>About us</h1>
<p>We are a club that explores asian culture. President: Emily Fang, Anirudh Hari
Vice President: Kevin Zhang
Secretary: Sarah Shaw
Treasurer: Andrew Nguyen
General Coordinator: Alex Jun
Technical Coordinator: Samraj Moorjani
Music Coordinator: Lucy Finefrock
Advisory: Kathleen Trang, Edward Feng, Joseph Cho, Anthony Cerniglia
</p>
</div>
</div>
</div>
<div class="page" id="portfolio-page">
<div class="row">
<div class="col-sm-0 col-md-2"></div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="#" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Origami-crane.jpg/220px-Origami-crane.jpg" alt="pic"></a>
<div class="caption">
<h3>November Meeting</h3>
<p>We will be discussing Japanese culture and participating in many cultural events. Dues are TBD at this moment. The meeting will be on November 30.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="" target="_blank"><img src="#" alt="pic"></a>
<div class="caption">
<h3>Event 2</h3>
<p>Summary</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="#" target="_blank"><img src="#" alt="pic"></a>
<div class="caption">
<h3>Event 3</h3>
<p>Summary</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="#" target="_blank"><img src="#" alt="pic"></a>
<div class="caption">
<h3>Event 4</h3>
<p>Summary</p>
</div>
</div>
</div>
</div>
</div>
<div class="page" id="contact-page">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="jumbotron">
<h1>Contact us</h1>
<p>You can contact us at <span class="mail">stormingbob@gmail.com</span> or...</p>
<a href="link" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
<a href="link" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
<a href="link" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
<a href="link" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/SamrajM/ace-website-XNpGEo */
body {
font-family: 'Roboto', sans-serif;
color: #fff;
}
nav {
height: 40px;
}
#me {
border-radius: 50%;
height: 80px;
border: 5px solid #fff;
}
#about-button {
padding-right: 10px;
}
#portfolio-button {
padding-left: 10px;
}
.icon {
margin-left: -15px;
}
.last {
margin-right: 10px;
}
.page {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#home-page {
background: url('http://cdn.wallpapersafari.com/30/30/PfwETq.jpg');
background-size: cover;
text-align: center;
}
#home-page h1 {
font-family: 'Lobster', serif;
font-size: 6em;
margin-top: 370px;
}
#home-page h2 {
font-family: 'Roboto', sans-serif;
margin-top: -10px;
font-size: 1.5em;
font-weight: bold;
}
#about-page {
background: url('http://wallpapermonkey.com/wp-content/uploads/2016/02/Indian-Wallpaper-hd.jpg');
background-size: cover;
text-align: justify;
}
#about-page h1 {
font-size: 3em;
font-weight: bold;
font-family: 'Lobster', 'Roboto', serif;
text-align: center;
}
#about-page .row {
font-size: 1.1em;
margin-top: 24%;
}
#portfolio-page {
background: url('http://www.piktpool.com/i/korean-cherry-blossom-phone-wallpaper.jpg');
background-size: cover;
}
.row {
margin-top: 10%;
width: 100%;
}
.row div {
padding-top: 20px;
}
#contact-page {
background: url('http://www.zastavki.com/pictures/1920x1200/2010/World_China_Flowering_plants_in_China_022183_.jpg');
background-size: cover;
text-align: center;
color: #fff;
}
.jumbotron {
background: none;
}
.mail {
color: white;
}
.jumbotron .fa {
color: #fff;
margin: 0px 3px;
}
.jumbotron .fa:hover {
color: palevioletred;
}
/*Downloaded from https://www.codeseek.co/SamrajM/ace-website-XNpGEo */
$(document).ready(function() {
$('.page').not('.active-page').hide();
$('.target').click(function() {
$('.target').removeClass('active');
$(this).addClass('active');
switch($(this).attr('id')) {
case 'home-button':
changePage('#home-page');
break;
case 'about-button':
changePage('#about-page');
break;
case 'portfolio-button':
changePage('#portfolio-page');
break;
case 'contact-button':
changePage('#contact-page');
break;
}
});
$(window).bind('mousewheel', function(e){
if (e.originalEvent.wheelDelta / 120 > 0) {
var prevPage = $('.active-page').prev().attr('id');
if (prevPage.length > 0) {
changePage('#' + prevPage);
$('.target').removeClass('active');
switch(prevPage) {
case 'home-page':
$('#home-button').addClass('active');
break;
case 'about-page':
$('#about-button').addClass('active');
break;
case 'portfolio-page':
$('#portfolio-button').addClass('active');
break;
case 'contact-page':
$('#contact-button').addClass('active');
break;
}
}
}
else {
var nextPage = $('.active-page').next().attr('id');
if (nextPage.length > 0) {
changePage('#' + nextPage);
$('.target').removeClass('active');
switch(nextPage) {
case 'home-page':
$('#home-button').addClass('active');
break;
case 'about-page':
$('#about-button').addClass('active');
break;
case 'portfolio-page':
$('#portfolio-button').addClass('active');
break;
case 'contact-page':
$('#contact-button').addClass('active');
break;
}
}
}
});
});
function changePage(page) {
var currentPage = $('.active-page');
if('#' + currentPage.attr('id') == page) return 0;
currentPage.fadeOut(600);
currentPage.removeClass('active-page');
$(page).fadeIn(600);
$(page).addClass('active-page');
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Google Font API
Twitter Bootstrap
jQuery
v2.1.3
