Boulder High Soccer v.1 using HTML/CSS with SCSS

In this example below you will see how to do a Boulder High Soccer v.1 using HTML/CSS with SCSS with some HTML / CSS and Javascript

Just a pre alpha version

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Boulder High Soccer v.1 using HTML/CSS with SCSS </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <title>Boulder High Soccer</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <header class="site-header">
    <a href="#0" id="logo">BHS</a>

    <nav class="site-nav">

      <a href="#" id="menu-icon"></a>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">2015 Game Schedules</a></li>
        <li><a href="#">2015 Rosters</a></li>
        <li><a href="#">Coaches</a></li>
        <li><a href="#">parents</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">2016 Pre-Season camp</a></li>
        <li><a href="#">2016 Summer Training</a></li>
        <li><a href="#">2015 Try outs</a></li>
      </ul>
    </nav>
  </header>
  <div id="doc">
    <div id="contents">
      <div id="slider">
        <figure>
          <img src="http://boulderhighsoccer.com/wp-content/uploads/2013/11/1394328_680441555309159_1043550731_n.jpg">
          <img src="http://44gvzb1ymseycnphg2arpye1.wpengine.netdna-cdn.com/wp-content/uploads/2015/10/012A7258-copy.jpg" />
          <img src="http://chsaanow.com/wp-content/uploads/2014/09/20140904_HS_FAIRVIEWvsBOULDER_0108.jpg" />
          <img src="http://boulderhighsoccer.com/wp-content/uploads/2012/11/Screen-Shot-2012-11-13-at-2.29.23-AM.png" />
          <img src="https://photos.smugmug.com/Boulder-vs-Legacy-Girls-Soccer/i-gRrzKvf/0/M/BouldervsLegacy009-M.jpg" />

        </figure>
      </div>
    </div>
  </div>

  <section>
    <article>
      <img src="http://www.bhs1967.org/1875_Logo.gif" />
      <h1>Boulder high Soccer Head Coach</h1>
      <p>Coach Hardy Kalisher, with the support of the Boulder High Athletic Department, is responsible for the entire boys soccer program. He is the varsity team head coach, directs all preseason and winter soccer programs, conducts tryouts and player placement,
        supervises and provides support to all the boys soccer teams and players. Hardy is Boulder High’s longest running boy soccer coach and has led the Panthers during the most successful period in the boys soccer programs 34 year history. Under Hardy
        the Panthers have reached the Colorado State Playoffs in each of his 9 previous season as varsity head coach, achieved its first State Championship (2012), State Finalist (2014), 4 Semi-Finals (2010, 2012, 2013, 2014) League Championship (2010,
        2012, 2014), and the Quarter-finals (2009), finished as League Runner Up (2007, 2011, 2013), 9 consecutive years of Colorado 5A Top 10 rankings, 1 NSCAA Western USA Ranking (2014) 5 time Top 15 Ranking in the NSCAA Western USA Rankings (2009,
        2010, 2012, 2013, 2014). He has been named League Coach of the Year (2007, 2012, 2014) 3 times and by the Daily Camera. In 2012 Hardy received the Colorado Coach of the Year award by the Colorado High School Coaches Association and Denver Post,
        NSCAA Colorado Coach of the Year, NSCAA Regional Coach of the the Year and Finalist for NSCAA National Coach of the Year. In 2012, the Positive Coaching Alliance awarded Hardy with it’s prestigious National Double-Coach of the Year Award, the
        first time the Award was given to a Colorado coach. Hardy began coaching in California in the 1980s and has coached every year in Boulder since 1994. Hardy has coached for over 100 boys and girls that have gone on to play collegiate soccer and
        several that have gone on to play in the MLS. He received coaching training in Holland with the KNVB (Dutch National soccer federation, in London at Chelsea FC and in Spain with Real Madrid. Hardy holds a USSF National Coaching License and regularly
        attends the National Soccer Coaches Association of America Convention. Hardy participates in coaching education throughout the year as a staff coach with the Colorado Rapids Youth Academy. Hardy is a former Staff Coach and Director of Operations
        of the Boulder County Force Soccer Club and ODP coach. As a student-athlete, Hardy’s collegiate experience includes being a member of the 1992 NCAA Division I National Championship Finalist and West Coast Conference Champions, University of San
        Diego. In 1990 he played against professional teams in England and Ireland while touring with the University of San Diego. During his prep days he was team captain, League Champion and California Interscholastic Federation Champion at Sacred Heart
        Prep in the San Francisco Bay Area.</p>
    </article>

  </section>

  <div class="clear"></div>

  <h2>2016 Summer Training, Tryouts and Practice Schedule</h2>

  <p><strong>The BHS Summer Training program is the foundation of our success.</strong> Each summer, the student-athlete train 3 days a week in preparation for the high demands of high school soccer. The primary focus of the summer training program is improving
    individual skills, fitness and building chemistry. For incoming freshmen, the summer training program is a great was to acclimate to Boulder High before the fall school year even begins. At each summer session we typically have 60-70 student-athletes.
    7th & 8th graders who would like to train in the summer with high school student-athletes are welcome with the permission of Coach Hardy Kalisher. Contact Coach Hardy in June/July to inquire about training with the Panthers this summer.</p>

  <aside>
    <h2>Schedule</h2>
  </aside>


</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/boulder-high-soccer-v1-using-htmlcss-with-scss-GqNqWx */
.site-header {
  background: #0d1313;
  color: white;
  display: flex;
  font-family: helvetica;
}

.site-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  font-family: helvetica;
}

a {
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  padding: 10px;
  display: inline-block;
  font-family: helvetica;
}

@keyframes slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}
#slider {
  overflow: hidden;
}

#slider figure img {
  width: 20%;
  float: left;
}

#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slider infinite;
}

Comments