Difference between revisions of "Team:NU Kazakhstan"

Line 1: Line 1:
 
{{Team:NU_Kazakhstan/css}}  
 
{{Team:NU_Kazakhstan/css}}  
−
{{Team:NU_Kazakhstan/header}}
+
 
−
<html>
+
html lang="en">
−
<body>
+
 
−
<div class="container-fluid">
+
  <head>
−
<div class="row">
+
 
−
<div class="col-md-8 col-md-offset-2">
+
    <meta charset="utf-8">
−
<h1>NU Kazakhstan</h1>
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
</div>
+
    <meta name="description" content="">
−
</div>
+
    <meta name="author" content="">
−
</div>
+
 
−
</body>
+
    <title>iGem - Team NU Kazakhstan</title>
 +
 
 +
    <!-- Bootstrap core CSS -->
 +
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 +
 
 +
    <!-- Custom fonts for this template -->
 +
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
 +
    <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
 +
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 +
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
 +
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
 +
 
 +
    <!-- Plugin CSS -->
 +
    <link rel="stylesheet" href="device-mockups/device-mockups.min.css">
 +
 
 +
    <!-- Custom styles for this template -->
 +
    <link href="css/nu-kazakhstan.css" rel="stylesheet">
 +
 
 +
  </head>
 +
 
 +
  <body id="page-top">
 +
 
 +
    <!-- Navigation -->
 +
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
 +
      <div class="container">
 +
        <a class="navbar-brand js-scroll-trigger" href="#page-top">NU Kazakhstan</a>
 +
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
 +
          Menu
 +
          <i class="fa fa-bars"></i>
 +
        </button>
 +
        <div class="collapse navbar-collapse" id="navbarResponsive">
 +
          <ul class="navbar-nav ml-auto">
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#download">Home</a>
 +
            </li>
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#features">Research</a>
 +
            </li>
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
 +
            </li>
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#contact">Notebook</a>
 +
            </li>
 +
          </ul>
 +
        </div>
 +
      </div>
 +
    </nav>
 +
 
 +
    <header class="masthead">
 +
      <div class="container h-100">
 +
        <div class="row h-100">
 +
        <div class="container">
 +
          <h2>Carousel Example</h2> 
 +
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
 +
    <!-- Indicators -->
 +
    <ol class="carousel-indicators">
 +
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
      <li data-target="#myCarousel" data-slide-to="1"></li>
 +
      <li data-target="#myCarousel" data-slide-to="2"></li>
 +
    </ol>
 +
 
 +
    <!-- Wrapper for slides -->
 +
    <div class="carousel-inner">
 +
      <div class="item active">
 +
        <img src="https://static.igem.org/mediawiki/2017/c/c8/CouldDragonByBjzaba.png" alt="Los Angeles" style="width:100%;">
 +
      </div>
 +
 
 +
      <div class="item">
 +
        <img src="https://static.igem.org/mediawiki/2017/c/c8/CouldDragonByBjzaba.png" alt="Chicago" style="width:100%;">
 +
      </div>
 +
   
 +
      <div class="item">
 +
        <img src="https://static.igem.org/mediawiki/2017/c/c8/CouldDragonByBjzaba.png" alt="New york" style="width:100%;">
 +
      </div>
 +
    </div>
 +
 
 +
    <!-- Left and right controls -->
 +
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 +
      <span class="glyphicon glyphicon-chevron-left"></span>
 +
      <span class="sr-only">Previous</span>
 +
    </a>
 +
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
 +
      <span class="glyphicon glyphicon-chevron-right"></span>
 +
      <span class="sr-only">Next</span>
 +
    </a>
 +
  </div>
 +
</div>
 +
        </div>
 +
      </div>
 +
    </header>
 +
 
 +
    <section class="download bg-primary text-center" id="download">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="col-md-8 mx-auto">
 +
            <h2 class="section-heading">Discover what all the buzz is about!</h2>
 +
            <p>Our app is available on any mobile device! Download now to get started!</p>
 +
            <div class="badges">
 +
              <a class="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""></a>
 +
              <a class="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""></a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </section>
 +
 
 +
    <section class="features" id="features">
 +
      <div class="container">
 +
        <div class="section-heading text-center">
 +
          <h2>Unlimited Features, Unlimited Fun</h2>
 +
          <p class="text-muted">Check out what you can do with this app theme!</p>
 +
          <hr>
 +
        </div>
 +
        <div class="row">
 +
          <div class="col-lg-4 my-auto">
 +
            <div class="device-container">
 +
              <div class="device-mockup iphone6_plus portrait white">
 +
                <div class="device">
 +
                  <div class="screen">
 +
                    <!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
 +
                    <img src="img/demo-screen-1.jpg" class="img-fluid" alt="">
 +
                  </div>
 +
                  <div class="button">
 +
                    <!-- You can hook the "home button" to some JavaScript events or just remove it -->
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="col-lg-8 my-auto">
 +
            <div class="container-fluid">
 +
              <div class="row">
 +
                <div class="col-lg-6">
 +
                  <div class="feature-item">
 +
                    <i class="icon-screen-smartphone text-primary"></i>
 +
                    <h3>Device Mockups</h3>
 +
                    <p class="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
 +
                  </div>
 +
                </div>
 +
                <div class="col-lg-6">
 +
                  <div class="feature-item">
 +
                    <i class="icon-camera text-primary"></i>
 +
                    <h3>Flexible Use</h3>
 +
                    <p class="text-muted">Put an image, video, animation, or anything else in the screen!</p>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
              <div class="row">
 +
                <div class="col-lg-6">
 +
                  <div class="feature-item">
 +
                    <i class="icon-present text-primary"></i>
 +
                    <h3>Free to Use</h3>
 +
                    <p class="text-muted">As always, this theme is free to download and use for any purpose!</p>
 +
                  </div>
 +
                </div>
 +
                <div class="col-lg-6">
 +
                  <div class="feature-item">
 +
                    <i class="icon-lock-open text-primary"></i>
 +
                    <h3>Open Source</h3>
 +
                    <p class="text-muted">Since this theme is MIT licensed, you can use it commercially!</p>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </section>
 +
 
 +
    <section class="cta">
 +
      <div class="cta-content">
 +
        <div class="container">
 +
          <h2>Stop waiting.<br>Start building.</h2>
 +
          <a href="#contact" class="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
 +
        </div>
 +
      </div>
 +
      <div class="overlay"></div>
 +
    </section>
 +
 
 +
    <section class="contact bg-primary" id="contact">
 +
      <div class="container">
 +
        <h2>We
 +
          <i class="fa fa-heart"></i>
 +
          new friends!</h2>
 +
        <ul class="list-inline list-social">
 +
          <li class="list-inline-item social-twitter">
 +
            <a href="#">
 +
              <i class="fa fa-twitter"></i>
 +
            </a>
 +
          </li>
 +
          <li class="list-inline-item social-facebook">
 +
            <a href="#">
 +
              <i class="fa fa-facebook"></i>
 +
            </a>
 +
          </li>
 +
          <li class="list-inline-item social-google-plus">
 +
            <a href="#">
 +
              <i class="fa fa-google-plus"></i>
 +
            </a>
 +
          </li>
 +
        </ul>
 +
      </div>
 +
    </section>
 +
 
 +
    <footer>
 +
      <div class="container">
 +
        <p>&copy; 2017 Start Bootstrap. All Rights Reserved.</p>
 +
        <ul class="list-inline">
 +
          <li class="list-inline-item">
 +
            <a href="#">Privacy</a>
 +
          </li>
 +
          <li class="list-inline-item">
 +
            <a href="#">Terms</a>
 +
          </li>
 +
          <li class="list-inline-item">
 +
            <a href="#">FAQ</a>
 +
          </li>
 +
        </ul>
 +
      </div>
 +
    </footer>
 +
 
 +
    <!-- Bootstrap core JavaScript -->
 +
    <script src="vendor/jquery/jquery.min.js"></script>
 +
    <script src="vendor/popper/popper.min.js"></script>
 +
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
 +
 
 +
    <!-- Plugin JavaScript -->
 +
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
 +
 
 +
    <!-- Custom scripts for this template -->
 +
    <script src="js/new-age.min.js"></script>
 +
 
 +
  </body>
 +
 
 
</html>
 
</html>

Revision as of 14:33, 4 September 2017

html lang="en"> 

 <head>

   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="">
   <meta name="author" content="">

   <title>iGem - Team NU Kazakhstan</title>

   <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">

   <link rel="stylesheet" href="device-mockups/device-mockups.min.css">

   <link href="css/nu-kazakhstan.css" rel="stylesheet">

 </head>

 <body id="page-top">

   <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

       <a class="navbar-brand js-scroll-trigger" href="#page-top">NU Kazakhstan</a>
       <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
         Menu
         
       </button>

   </nav>

   <header class="masthead">

Carousel Example

   </header>

   <section class="download bg-primary text-center" id="download">

Discover what all the buzz is about!

Our app is available on any mobile device! Download now to get started!

             <a class="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""></a>
             <a class="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""></a>

   </section>

   <section class="features" id="features">

Unlimited Features, Unlimited Fun

Check out what you can do with this app theme!

                   <img src="img/demo-screen-1.jpg" class="img-fluid" alt="">

Device Mockups

Ready to use HTML/CSS device mockups, no Photoshop required!

Flexible Use

Put an image, video, animation, or anything else in the screen!

Free to Use

As always, this theme is free to download and use for any purpose!

Open Source

Since this theme is MIT licensed, you can use it commercially!

   </section>

   <section class="cta">

Stop waiting.
Start building.

         <a href="#contact" class="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>

   </section>

   <section class="contact bg-primary" id="contact">

We new friends!

   </section>

   <footer>

© 2017 Start Bootstrap. All Rights Reserved.

  • <a href="#">Privacy</a>
  • <a href="#">Terms</a>
  • <a href="#">FAQ</a> 
   </footer>

   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/popper/popper.min.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

   <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

   <script src="js/new-age.min.js"></script>

 </body>

</html>