ACE Website

In this example below you will see how to do a ACE Website with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SamrajM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SamrajM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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-MbOyYQ */
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-MbOyYQ */
$(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');
}

Comments