Difference between revisions of "Team:BGU Israel/Team"

(Prototype team page)
 
Line 1: Line 1:
 
{{BGU_Israel}}
 
{{BGU_Israel}}
−
<html>
+
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
 
 +
  <title>OriginALS</title>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <link type="text/css" rel="stylesheet" href="style.css">
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
 +
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
 +
  <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>
 +
<style>
 +
    body {
 +
      font: 400 15px Segoe UI !important;
 +
      line-height: 1.8;
 +
      color: #818181;
 +
  }
 +
  h1 {
 +
      font-size: 32px!important;
 +
      font-family: Segoe UI Light!important;
 +
      text-transform: capitalize;
 +
      color: #303030;
 +
      font-weight: 600;
 +
      margin-bottom: 30px !important;
 +
  }
 +
  h4 {
 +
      font-size: 19px;
 +
      line-height: 1.375em;
 +
      color: #303030;
 +
      font-weight: 400;
 +
      margin-bottom: 30px;
 +
  } 
 +
      p, ol {
 +
          font-size: 16px !important;
 +
         
 +
          color:#010101 !important;
 +
      }
 +
  .jumbotron {
 +
      background-color: #f4511e;
 +
      color: #fff;
 +
      padding: 100px 25px;
 +
      font-family: Montserrat, sans-serif;
 +
  }
 +
  .container-fluid {
 +
      padding: 60px 50px;
 +
  }
 +
  .bg-grey {
 +
      background-color: #f6f6f6;
 +
  }
 +
  .logo-small {
 +
      color: #f4511e;
 +
      font-size: 50px;
 +
  }
 +
  .logo {
 +
      color: #f4511e;
 +
      font-size: 200px;
 +
  }
 +
  .thumbnail {
 +
      padding: 0 0 15px 0;
 +
      border: none;
 +
      border-radius: 0;
 +
  }
 +
  .thumbnail img {
 +
      width: 100%;
 +
      height: 100%;
 +
      margin-bottom: 10px;
 +
  }
 +
  .carousel-control.right, .carousel-control.left {
 +
      background-image: none;
 +
      color: #f4511e;
 +
  }
 +
  .carousel-indicators li {
 +
      border-color: #f4511e;
 +
  }
 +
  .carousel-indicators li.active {
 +
      background-color: #f4511e;
 +
  }
 +
  .item h4 {
 +
      font-size: 19px;
 +
      line-height: 1.375em;
 +
      font-weight: 400;
 +
      font-style: italic;
 +
      margin: 70px 0;
 +
  }
 +
  .item span {
 +
      font-style: normal;
 +
  }
 +
  .panel {
 +
      border: 1px solid #f4511e;
 +
      border-radius:0 !important;
 +
      transition: box-shadow 0.5s;
 +
  }
 +
  .panel:hover {
 +
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
 +
  }
 +
  .panel-footer .btn:hover {
 +
      border: 1px solid #f4511e;
 +
      background-color: #fff !important;
 +
      color: #f4511e;
 +
  }
 +
  .panel-heading {
 +
      color: #fff !important;
 +
      background-color: #f4511e !important;
 +
      padding: 25px;
 +
      border-bottom: 1px solid transparent;
 +
      border-top-left-radius: 0px;
 +
      border-top-right-radius: 0px;
 +
      border-bottom-left-radius: 0px;
 +
      border-bottom-right-radius: 0px;
 +
  }
 +
  .panel-footer {
 +
      background-color: white !important;
 +
  }
 +
  .panel-footer h3 {
 +
      font-size: 32px;
 +
  }
 +
  .panel-footer h4 {
 +
      color: #aaa;
 +
      font-size: 14px;
 +
  }
 +
  .panel-footer .btn {
 +
      margin: 15px 0;
 +
      background-color: #f4511e;
 +
      color: #fff;
 +
  }
 +
  .navbar {
 +
      margin-bottom: 10px; !important;
 +
      background-color: #fff !important;
 +
      z-index: 9999!important;
 +
      border: 0 !important;
 +
    text-transform:uppercase !important;
 +
      border-radius: 0 !important;
 +
      font-family: 'Segoe UI Light'!important;
 +
      font-weight: 600!important;
 +
      color:#000!important;
 +
padding-top:10px;
 +
  }
 +
  .navbar-brand {
 +
  padding: 0px;
 +
}
 +
.navbar-brand>img {
 +
  height: 100%;
 +
  padding: 0 0 10px 20px;
 +
  width: auto;
 +
}
 +
  .navbar-nav li a:hover, .navbar-nav li.active a {
 +
      color: #0186ac !important;
 +
      background-color: #fff !important;
 +
  }
 +
  .navbar-default .navbar-toggle {
 +
      border-color: transparent;
 +
      color: #fff !important;
 +
  }
  
−
<div class="column two_thirds_size" >
+
  .slideanim {visibility:hidden;}
 +
  .slide {
 +
      animation-name: slide;
 +
      -webkit-animation-name: slide;
 +
      animation-duration: 1s;
 +
      -webkit-animation-duration: 1s;
 +
      visibility: visible;
 +
  }
 +
  @keyframes slide {
 +
    0% {
 +
      opacity: 0;
 +
      transform: translateY(70%);
 +
    }
 +
    100% {
 +
      opacity: 1;
 +
      transform: translateY(0%);
 +
    }
 +
  }
 +
  @-webkit-keyframes slide {
 +
    0% {
 +
      opacity: 0;
 +
      -webkit-transform: translateY(70%);
 +
    }
 +
    100% {
 +
      opacity: 1;
 +
      -webkit-transform: translateY(0%);
 +
    }
 +
  }
 +
  @media screen and (max-width: 768px) {
 +
    .col-sm-4 {
 +
      text-align: center;
 +
      margin: 25px 0;
 +
    }
 +
    .btn-lg {
 +
        width: 100%;
 +
        margin-bottom: 35px;
 +
    }
 +
  }
 +
  @media screen and (max-width: 480px) {
 +
    .logo {
 +
        font-size: 150px;
 +
    }
 +
  }
  
−
<h1>Team</h1>
+
    header.masthead {
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
  padding-top: 10rem;
 +
  padding-bottom: calc(10rem - 56px);
 +
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 +
min-height: 600px;
 +
  background-position: center center;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
}
 +
@media only screen and (max-device-width: 1366px) {
 +
    .parallax {
 +
        background-attachment: scroll;
 +
    }
 +
}
 +
      #abstract p, #abstract ol {
 +
          text-align: justify;
 +
      }
 +
      #myBtn {
 +
  display: none;
 +
         
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 20px;
 +
  z-index: 99;
 +
  font-size: 16px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: #0186ac;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 12px 15px 12px 15px;
 +
  border-radius: 100px;
 +
}
  
 +
#myBtn:hover {
 +
  background-color: #555;
 +
}
 +
      footer {
 +
          background-color:#262626;
 +
          color:#fff !important;
 +
      }
 +
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
 +
        background: #fff !important;
 +
        color:#0186ac !important;
 +
    }
 +
    .navbar-right .dropdown-menu {
 +
       
 +
    }
 +
    #mainMenu .dropdown-menu {
 +
        border:0 !important;
 +
        right:auto !important;
 +
        border-radius: 0 !important;
 +
        text-transform: capitalize;
 +
        font-size:18px;
 +
    }
 +
  @media screen and (min-width: 600px) {
 +
    .dropdown:hover .dropdown-menu {
 +
    display: block;
 +
    margin-top: 0;
 +
        color:#fff;
 +
}
 +
    }
 +
    .gray-section {
 +
        background-color:#ededed;
 +
    }
 +
    .sub-page-header {
 +
          padding-top: 10rem;
 +
  padding-bottom: calc(10rem - 56px);
 +
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 +
height:200px !important;
 +
 
 +
    /* Create the parallax scrolling effect */
 +
    background-attachment: fixed;
 +
background-position: top center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    }
 +
    </style>
 +
</head>
 +
<body id="myPage"  data-spy="scroll" data-target=".navbar" data-offset="60">
 +
    <div id="top"></div>
 +
    <a id="myBtn" class="button" href="#top" title="To Top">
 +
    <span class="glyphicon glyphicon-chevron-up"></span>
 +
  </a>
  
−
<h3>What should this page contain?</h3>
+
<nav id="mainMenu" class="navbar navbar-default navbar-fixed-top">
−
<ul>
+
  <div class="container">
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
    <div class="navbar-header">
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
        <span class="icon-bar"></span>
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
        <span class="icon-bar"></span>
−
</ul>
+
        <span class="icon-bar"></span>                       
−
</div>
+
      </button>
 +
      <a class="navbar-brand" href="index.html"><img src="https://static.igem.org/mediawiki/2018/3/32/T--BGU_Israel--logo_colored.png"></a>
 +
    </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li><a href="index.html">Home</a></li>
 +
        <li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Project
 +
        </a>
 +
        <ul class="dropdown-menu pull-right">
 +
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Description ">Description</a></li>
 +
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Design">Design</a></li>
 +
            <li><a href="https://2018.igem.org/Team:BGU_Israel/Results">Results</a></li>
 +
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Protocols">Protocols</a></li>
 +
            <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Notebook">Notebook</a></li>
 +
           
 +
        </ul>
 +
      </li>
 +
          <li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Team
 +
        </a>
 +
        <ul class="dropdown-menu pull-right">
 +
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Team">Members</a></li>
 +
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Collaborations">Collaborations</a></li>
 +
        </ul>
 +
      </li>
 +
          <li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Parts
 +
        </a>
 +
        <ul class="dropdown-menu pull-right">
 +
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Parts">Team Parts</a></li>
 +
          <li><a href="https://2018.igem.org/Team:BGU_Israel/BasicParts ">Basic Parts</a></li>
 +
            <li><a href="https://2018.igem.org/Team:BGU_Israel/PartImprovement">Part Improvement</a></li>
 +
          <li><a href="https://2018.igem.org/Team:BGU_Israel/PartCollection">Part Collection</a></li>
 +
        </ul>
 +
      </li>
  
 +
  <li class="dropdown">
 +
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Practices
  
 +
        </a>
 +
        <ul class="dropdown-menu pull-right">
 +
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSConference">ALS Conference</a></li>
 +
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSFunding">Funding Race</a></li>
 +
            <li><a href="https://2018.igem.org/Team:BGU_Israel/InterLab">InterLab</a></li>
 +
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/EthicsAndSafety">Ethics and Safty</a></li>
 +
        </ul>
 +
      </li>
 +
        <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Attributions">Attributions</a></li>
 +
          <!--<li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Achievments">Achievments</a></li>-->
 +
      </ul>
 +
    </div>
 +
  </div>
 +
</nav>
 +
  <header  class="sub-page-header text-center">
 +
      <div class="container my-auto">
 +
          <h1>Team</h1>
 +
      </div>
 +
    </header>
  
−
<div class="column third_size" >
+
<script>
−
<div class="highlight decoration_A_full">
+
   
−
<h3>Inspiration</h3>
+
</script>
−
<p>You can look at what other teams did to get some inspiration! <br />
+
<!-- Container (About Section) -->
−
Here are a few examples:</p>
+
    <style>
−
<ul>
+
  .img-container {
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
+
  position:relative;
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
+
  height:250px;
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
+
  width:250px;
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
+
  margin:0 auto;
−
</ul>
+
}
 +
 
 +
.img-container img {
 +
  position:absolute;
 +
  display: block;
 +
  left:0;
 +
  -webkit-transition: opacity 1s ease-in-out;
 +
  -moz-transition: opacity 1s ease-in-out;
 +
  -o-transition: opacity 1s ease-in-out;
 +
  transition: opacity 1s ease-in-out;
 +
    height:250px;
 +
  width:250px;
 +
}
 +
 
 +
.img-container img.top:hover  {
 +
  opacity:0;
 +
}
 +
.img-overlay:hover ~ #img-container img.top {
 +
opacity:0;
 +
}
 +
 
 +
 
 +
.img-overlay {
 +
  position: absolute;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  background-color: rgba(1,134,172, 0.5);
 +
  overflow: hidden;
 +
  width: 100%;
 +
  height: 0%;
 +
  transition: .5s ease;
 +
}
 +
 
 +
.img-container:hover .img-overlay {
 +
  height: 30%;
 +
}
 +
 
 +
.img-overlay-txt {
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  -webkit-transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 +
  text-align: center;
 +
}
 +
        #team-photos {
 +
            margin-top:30px;
 +
            margin-bottom:30px;
 +
        }
 +
        #team-photos .carousel-inner {
 +
            width:80%;
 +
            margin-top: 50px;
 +
            margin-bottom:50px;
 +
            margin-left:10%;
 +
            margin-right:10%;
 +
        }
 +
        #team-photos .carousel-indicators {
 +
            bottom:-50px;
 +
        }
 +
        #team-photos .carousel-indicators li {
 +
            border-color:#0186ac;
 +
        }
 +
        #team-photos .carousel-indicators li.active {
 +
            background-color:#0186ac;
 +
        }
 +
        #team-photos .carousel-control {
 +
            color:#0186ac;
 +
            text-shadow: none;
 +
        }
 +
</style>
 +
    <div id="team-photos" class="container">
 +
    <div id="myCarousel" class="carousel slide text-center" 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" role="listbox">
 +
      <div class="item active">
 +
        <div class="row">
 +
<div class="col-sm-4">
 +
    <div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 
</div>
 
</div>
 
</div>
 
</div>
 +
<div class="col-sm-4">
 +
    <div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
<div class="col-sm-4">
 +
    <div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
    </div>
 +
      </div>
 +
      <div class="item">
 +
        <div class="row">
 +
<div class="col-sm-4">
 +
<div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
<div class="col-sm-4">
 +
  <div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
<div class="col-sm-4">
 +
<div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
    </div>
 +
      </div>
 +
      <div class="item">
 +
          <div class="row">
 +
<div class="col-sm-4">
 +
  <div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
<div class="col-sm-4">
 +
  <div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
<div class="col-sm-4">
 +
  <div class="img-container">
 +
        <img class="bottom" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37973538_1066888756812196_7082045950323064832_n.jpg?_nc_cat=0&oh=90856e5cd9d89f76786ffaaa6d3064c3&oe=5BD4BDC1" />
 +
        <div class="img-overlay">
 +
    <div class="img-overlay-txt">Daniel Deitch
 +
    <br> Designer <br> </div>
 +
  </div>
 +
  <img class="top" src="https://scontent.ftlv2-1.fna.fbcdn.net/v/t1.15752-9/37931462_1066888683478870_8909214412015927296_n.jpg?_nc_cat=0&oh=fe8951757dada598a4796e97ed220fa6&oe=5BCF5AF3" />
 +
 
 +
     
 +
</div>
 +
</div>
 +
    </div>
 +
      </div>
 +
    </div>
 +
 +
    <!-- Left and right controls -->
 +
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 +
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 +
      <span class="sr-only">Previous</span>
 +
    </a>
 +
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 +
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 +
      <span class="sr-only">Next</span>
 +
    </a>
 +
  </div>
 +
</div>
 +
<div id="abstract" class="container text-center">
 +
 +
</div>
 +
<div id="video" class="container-fluid text-center gray-section">
 +
  <div class="row">
 +
<div class="col-sm-8 col-sm-offset-2">
 +
    <h1>Long Story Short</h1>
 +
 
 +
</div>
 +
   
 +
  </div>
 +
</div>
 +
<style>
 +
    .footer-list {
 +
        list-style: none;
 +
        color:#a5a5a5;
 +
    }
 +
    .footer-list-item {
 +
        padding:20px 0 20px 0 !important;
 +
        border-bottom: 1px solid #a5a5a5;
 +
    }
 +
    .footer-list .footer-list-item:last-child {
 +
        border:0;
 +
    }
 +
</style>
 +
 +
<footer class="container-fluid">
 +
<div class="row">
 +
    <div class="col-md-4">
 +
<ul class="footer-list">
 +
  <li class="footer-list-item">Ben-Gurion University of the Negev
 +
Ben Gurion 1, Beer Sheva 8410501, Israel</li>
 +
  <li class="footer-list-item">Second item</li>
 +
  <li class="footer-list-item">Third item</li>
 +
</ul>
 +
    </div>
 +
    <div class="col-md-4">
 +
    <ul class="footer-list">
 +
  <li class="footer-list-item">First item</li>
 +
  <li class="footer-list-item">Second item</li>
 +
  <li class="footer-list-item">Third item</li>
 +
</ul>
 +
    </div>
 +
    <div class="col-md-4">
 +
    <ul class="footer-list">
 +
  <li class="footer-list-item">First item</li>
 +
  <li class="footer-list-item">Second item</li>
 +
  <li class="footer-list-item">Third item</li>
 +
<li class="footer-list-item">Third item</li>
 +
</ul>
 +
    </div>
 +
   
 +
</div>
 +
</footer>
 +
 +
<script>
 +
$(document).ready(function(){
 +
  // Add smooth scrolling to all links in navbar + footer link
 +
  $(".navbar a, #myBtn[href='#top']").on('click', function(event) {
 +
    // Make sure this.hash has a value before overriding default behavior
 +
    if (this.hash !== "") {
 +
      // Prevent default anchor click behavior
 +
      event.preventDefault();
 +
 +
      // Store hash
 +
      var hash = this.hash;
 +
 +
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 500, function(){
 +
 
 +
        // Add hash (#) to URL when done scrolling (default click behavior)
 +
        window.location.hash = hash;
 +
      });
 +
    } // End if
 +
  });
 +
 
 +
  $(window).scroll(function() {
 +
    $(".slideanim").each(function(){
 +
      var pos = $(this).offset().top;
 +
 +
      var winTop = $(window).scrollTop();
 +
        if (pos < winTop + 600) {
 +
          $(this).addClass("slide");
 +
        }
 +
    });
 +
  });
 +
})
 +
</script>
 +
 +
    <script>
 +
// When the user scrolls down 20px from the top of the document, show the button
 +
$(window).scroll(function() {
 +
    if ($(this).scrollTop() > 20) {
 +
        $('#myBtn').fadeIn(400);
 +
    } else {
 +
        $('#myBtn').fadeOut(400);
 +
    }
 +
});
 +
 +
</script>
 +
</body>
 
</html>
 
</html>

Revision as of 08:48, 31 July 2018

OriginALS

<!DOCTYPE html> OriginALS

Team

Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Previous Next

Long Story Short

  • Ben-Gurion University of the Negev Ben Gurion 1, Beer Sheva 8410501, Israel
  • Second item
  • Third item
  • First item
  • Second item
  • Third item
  • First item
  • Second item
  • Third item
  • Third item