A Pen by Tijana

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Tijana</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

          <nav class="navbar navbar-default" role="navigation">
    	  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <div class="navbar-brand navbar-brand-centered">Shulte Table</div>
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="navbar-brand-centered">
		      <ul class="nav navbar-nav">
		        <li><a href="#">About</a></li>
		        <li><a href="#">New Game</a></li>
		      </ul>
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="#">Size: </a></li>
		        <li>
              <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Choose the Mode
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                  <button class="dropdown-item" type="button">Action</button>
                  <button class="dropdown-item" type="button">Another action</button>
                  <button class="dropdown-item" type="button">Something else here</button>
                </div>
              </div>
            </li>		        
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
<div class="container-fluid">
  <div class="text-center">
    <table id="numbersTable" class="table table-bordered">
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>      
        </tr>
        <tr>      
        </tr>
        <tr>      
        </tr>
    </table>
  </div>
</div>
        <!--
        <div class="choice">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
        </div>
        
        <div class="guess"></div>
        <ul id="hint">
            <li>-</li>
            <li>-</li>
            <li>-</li>
            <li>-</li>
        </ul>
        <br>
        <button id="check">Check!</button>
        <button id="new_game">New game</button>
        -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/tijanino/a-pen-by-tijana-aBjjNy */
@media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
        background-color: #eee;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
    }
}

/*Downloaded from https://www.codeseek.co/tijanino/a-pen-by-tijana-aBjjNy */
'use strict';

$(function() {
    
    var tableRef = document.getElementById('numbersTable').getElementsByTagName('tbody')[0]
    
    $('.dropdown-toggle').dropdown()
});

Comments