MOVE

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>MOVE </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="main">
      <div class="container">
        <h1>Move</h1>
        <p>Form healthy habits to take your fitness to the next level.</p>
        <form class="form-inline">
          <div class="form-group">
            <input type="text" class="form-control" id="input-search-term" placeholder="FIND YOUR CITY">  
          </div>
        </form>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
        </div>
        <div class="col">
          <h2>Sync</h2>
          <p>Access your activity on your phone, tablet, or computer.</p>
        </div>
        <div class="col">
          <h2>Compete</h2>
          <p>Set personal challenges and see how you rank against your friends.</p>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>

    <div class="feature">
      <div class="container">
        <h2>Move. Rest. Recover. Move.</h2>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <h2>Go Premium</h2>
        <p>Receive recommendations based on your activity to level up.</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <h2>Stop scrolling. Start moving</h2>
        <a class="btn" href="#">Start Now</a>
      </div>
    </div>
    <script src="http://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
   
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/move-wqGdZP */
html, body {
  margin: 0;
}

h1, h2, a {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

p {
  font-family: Helvetica, Arial, sans-serif; 
}

.container {
  max-width: 940px;
  margin: 0 auto;
}

/* Main */
.main {
  text-align: center;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/2/move/bg.jpg) no-repeat center center;
  background-size: cover;
  height: 600px;
}

.main .container {
  position: relative;
  top: 100px;
}

.main h1 {
  color: #fff;
  margin: 0;
  font-size: 200px;
}

.main p {
  color: #fff;
  margin: 0 0 20px 0;
  font-size: 18px;
}

.main .btn {
  background-color: #1c1c1c;
  color: #fff;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

#input-search-term {
  font-size:15px;
  width: 40%;
}

/* Supporting */
.supporting {
  background-color: #1c1c1c;
  text-align: center;
  padding: 50px 0 80px;
}

.supporting .col {
  float: left;
  width: 30%;
  padding: 10px;
}

.supporting h2 {
  color: #ffa800;
  font-size: 40px;
  margin-bottom: 10px;
}

.clearfix {
  clear: both;
}

.supporting p {
  color: #efefef;
  margin-bottom: 20px;
  line-height: 20px;
}

.supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

/* Feature */
.feature {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/2/move/feature.jpg) no-repeat center center;
  background-size: cover;
  height: 600px;
  text-align: center;
  padding: 0 20px;
}

.feature .container {
  position: relative;
  top: 200px;
}

.feature h2 {
  color: #fff;
  font-size: 60px;
  margin:0;
  padding:50px 0 0;

}

/* Footer */
.footer {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/2/move/footer.jpg) no-repeat center center;
  background-size: cover;
  height: 600px;
  text-align: center;
  padding: 0 20px;
}

.footer .container {
  position: relative;
  top: 200px;
}

.footer h2 {
  color: #fff;
  font-size: 40px;
  margin: 0 0 20px 0;
  padding:50px 0 0;
}

.footer p {
  color: #fff;
  margin: 0 0 20px 0;
  font-size: 18px;
}

.footer .btn {
  background-color: #1c1c1c;
  color: #fff;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

a.btn:hover {
  background:#ffa800;
  color:#000;
}

ul.ui-autocomplete {
  width: 300px;
  list-style: none;
  padding: 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  background-color: #fff;
}

ul.ui-autocomplete li {
  padding: 10px;
  font-size: 20px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

ul.ui-autocomplete li:hover {
  background-color: #ddd;
}

@media (max-width: 700px) {
  .main h1 {
    font-size: 110px;
  }
  .supporting .col {
    width: 92%;
  }
}

/*Downloaded from https://www.codeseek.co/0319AM/move-wqGdZP */
var main = function() {
    var cities = [
      "Atlanta",
      "Barcelona",
      "Berlin",
      "Columbus",
      "Denver",
      "Jacksonville",
      "Mexico City",
      "Milan",
      "Miami",
      "New York",
      "Paris",
      "Orlando",
      "San Francisco",
      "San Juan",
    ];
    $("#input-search-term").autocomplete({
      source: cities
    });
  };  
 
$(document).ready(main);

Comments