Difference between revisions of "Team:BGU Israel"

Line 3: Line 3:
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
−
   <title>Bootstrap Example</title>
+
  <!-- Theme Made By www.w3schools.com - No Copyright -->
 +
   <title>Bootstrap Theme Simply Me</title>
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
<style>
+
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
−
#content,body,html {
+
−
width:100%;
+
−
}
+
−
</style>
+
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
  <style>
 +
  body {
 +
      font: 20px Montserrat, sans-serif;
 +
      line-height: 1.8;
 +
      color: #f5f6f7;
 +
  }
 +
  p {font-size: 16px;}
 +
  .margin {margin-bottom: 45px;}
 +
  .bg-1 {
 +
      background-color: #1abc9c; /* Green */
 +
      color: #ffffff;
 +
  }
 +
  .bg-2 {
 +
      background-color: #474e5d; /* Dark Blue */
 +
      color: #ffffff;
 +
  }
 +
  .bg-3 {
 +
      background-color: #ffffff; /* White */
 +
      color: #555555;
 +
  }
 +
  .bg-4 {
 +
      background-color: #2f2f2f; /* Black Gray */
 +
      color: #fff;
 +
  }
 +
  .container-fluid {
 +
      padding-top: 70px;
 +
      padding-bottom: 70px;
 +
  }
 +
  .navbar {
 +
      padding-top: 15px;
 +
      padding-bottom: 15px;
 +
      border: 0;
 +
      border-radius: 0;
 +
      margin-bottom: 0;
 +
      font-size: 12px;
 +
      letter-spacing: 5px;
 +
  }
 +
  .navbar-nav  li a:hover {
 +
      color: #1abc9c !important;
 +
  }
 +
  </style>
 
</head>
 
</head>
 
<body>
 
<body>
  
−
<div class="jumbotron">
+
<!-- Navbar -->
−
   <h1>Bootstrap Tutorial</h1>    
+
<nav class="navbar navbar-default">
−
   <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
+
  <div class="container">
 +
    <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>                       
 +
      </button>
 +
      <a class="navbar-brand" href="#">Me</a>
 +
    </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li><a href="#">WHO</a></li>
 +
        <li><a href="#">WHAT</a></li>
 +
        <li><a href="#">WHERE</a></li>
 +
      </ul>
 +
    </div>
 +
   </div>
 +
</nav>
 +
 
 +
<!-- First Container -->
 +
<div class="container-fluid bg-1 text-center">
 +
   <h3 class="margin">Who Am I?</h3>
 +
  <img src="bird.jpg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350">
 +
  <h3>I'm an adventurer</h3>
 
</div>
 
</div>
  
−
<div class="container">
+
<!-- Second Container -->
−
   <p>This is some text.</p>    
+
<div class="container-fluid bg-2 text-center">
−
   <p>This is another text.</p>    
+
   <h3 class="margin">What Am I?</h3>
 +
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
 +
  <a href="#" class="btn btn-default btn-lg">
 +
    <span class="glyphicon glyphicon-search"></span> Search
 +
  </a>
 
</div>
 
</div>
 +
 +
<!-- Third Container (Grid) -->
 +
<div class="container-fluid bg-3 text-center">   
 +
  <h3 class="margin">Where To Find Me?</h3><br>
 +
  <div class="row">
 +
    <div class="col-sm-4">
 +
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 +
      <img src="birds1.jpg" class="img-responsive margin" style="width:100%" alt="Image">
 +
    </div>
 +
    <div class="col-sm-4">
 +
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 +
      <img src="birds2.jpg" class="img-responsive margin" style="width:100%" alt="Image">
 +
    </div>
 +
    <div class="col-sm-4">
 +
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 +
      <img src="birds3.jpg" class="img-responsive margin" style="width:100%" alt="Image">
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
<!-- Footer -->
 +
<footer class="container-fluid bg-4 text-center">
 +
  <p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
 +
</footer>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 06:15, 29 July 2018

OriginALS

Bootstrap Theme Simply Me

Who Am I?

Bird

I'm an adventurer

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Search

Where To Find Me?


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image