A Pen by giray

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  giray</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css'>

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

  
</head>

<body>

  <!-- NAVBAR -->
<nav class="defaultNavbar light-blue darken-1">
  <div class="nav-wrapper">
    <!--<a href="/mobilefirst/index.html" class="brand-logo center"><img src="img/logo_menu.png" width="250px"></a>-->
    <span class="brand-logo center">Etkinlik<span class=" light-blue-text text-darken-4" style="font-size: 23px;font-family: monospace;">Türkiye</span></span>
    <ul class="right">
      <li><a href="#" class="activateSearchNav"><i class="material-icons">search</i></a></li>
    </ul>
    <ul class="left">
      <li><a href="#" data-activates="slide-out" class="sidenav"><i class="material-icons">menu</i></a></li>
    </ul>
  </div>
</nav>
<!-- NAVBAR END-->
<!-- SIDENAV -->
<ul id="slide-out" class="side-nav">
  <li>
    <div class="userView">
      <div class="background">
        <img src="img/menu/concert.jpg">
      </div>
      <a href="#!user"><img class="circle" src="img/menu/concert.jpg"></a>
      <a href="#!name"><span class="white-text name">Giray123Doe</span></a>
      <a href="#!email"><span class="white-text email">giray123@gmail.com</span></a>
    </div>
  </li>
  <li><a href="#!">Discover</a></li>
  <li><a href="#!">Create</a></li>
  <li><a href="#!">Playlists</a></li>
  <li><a href="#!">Pricing</a></li>
  <li>
    <div class="divider"></div>
  </li>
  <li><a class="subheader">Tools</a></li>
  <li><a class="waves-effect" href="#!">Chords</a></li>
  <li><a class="waves-effect" href="#!">Scales</a></li>
  <li><a class="waves-effect" href="#!">Lessons</a></li>
  <li><a class="waves-effect" href="#!">Tuner</a></li>
  <li><a class="waves-effect" href="#!">Metronome</a></li>
  <li>
    <div class="divider"></div>
  </li>
  <li><a class="waves-effect" href="#!">Survey</a></li>
  <li><a class="waves-effect" href="#!">FAQ</a></li>
</ul>
<!-- SIDENAV END -->

<!-- SEARCH NAV -->
<nav class="searchNavbar light-blue darken-1 hide">
  <div class="nav-wrapper">
    <form>
      <div class="input-field">
        <input id="search" type="search" required="" style="height: 56px;">
        <label for="search"><i class="mdi-navigation-arrow-back activateDefaultNav"></i></label>
        <i class="mdi-navigation-close deleteSearch"></i>
      </div>
    </form>
  </div>
</nav>
<!-- SEARCH NAV END -->

<!-- CONTENT -->
<div class="center-align" style="margin-top:30px;">
  <div class="preloader-wrapper active">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12">

    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
        <a href="#">This is a link</a>
      </div>
    </div>

    <div class="card horizontal">
      <div class="card-image waves-effect waves-block waves-light" style="max-width: 30%;">
        <img class="activator" src="http://img03.imgsinemalar.com/images/afis_buyuk/f/fantastik-canavarlar-nelerdir-nerede-bulunurlar-1475134632.jpg">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4 event_title">
                        Fantastik Canavarlar Nelerdir, Nerede Bulunurlar?
                    </span>
          <div style="margin-top:15px;">
            <p><span class="blue-text">Tür:</span> Aksiyon</p>
            <p><span class="blue-text">Yayın Tarihi:</span> 18 Kasım 2016</p>
            <p><span class="blue-text">Yönetmen:</span> David Yates</p>
          </div>
        </div>
        <div class="card-action">
          <a href="#">GİT</a>
          <a href="#">BİLGİ</a>
          <a href="#modal1" class="modal-trigger">SEANSLAR</a>
        </div>
      </div>

      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">Card Title<i class="fa fa-remove right"></i></span>
        <p>Here is some more information about this product that is only revealed once clicked on.</p>
      </div>
    </div>
  </div>
</div>

<!-- Modal Structure -->
<div id="modal1" class="modal blue" style="width: 100%;max-height: 100%;">
  <div class="modal-content">
    <h4 class="blue-text text-lighten-4">SEANSLAR<i class="material-icons right modal-action modal-close small">close</i></h4>

    <ul class="collection">
      <li class="collection-item">
        <p class="title">Ankara Cinemaximum (ANKAmall)</p>
        <div>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
        </div>
      </li>
      <li class="collection-item">
        <p class="title">Ankara Büyülü Fener Bahçelievler</p>
        <div>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>14:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>22:00</span>
        </div>
      </li>
      <li class="collection-item">
        <p class="title">Ankara Taurus Cinemarine</p>
        <div>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>13:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>14:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:32</span>
        </div>
      </li>
      <li class="collection-item">
        <p class="title">Ankara Taurus Cinemarine</p>
        <div>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>13:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>14:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:32</span>
        </div>
      </li>
      <li class="collection-item">
        <p class="title">Ankara Taurus Cinemarine</p>
        <div>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>13:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>14:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:32</span>
        </div>
      </li>
      <li class="collection-item">
        <p class="title">Ankara Taurus Cinemarine</p>
        <div>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>13:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>14:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:32</span>
        </div>
      </li>
      <li class="collection-item">
        <p class="title">Ankara Taurus Cinemarine</p>
        <div>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>13:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>14:40</span>
          <span class="seans"><i class="material-icons tiny">access_time</i>12:32</span>
        </div>
      </li>
    </ul>
  </div>
  <div class="modal-footer blue darken-2">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat white-text">CLOSE</a>
  </div>
</div>
<!-- CONTENT END-->


<footer class="page-footer light-blue darken-1" style="margin-top:0;">
  <div class="container">
    <div class="row">
      <div class="col s6">
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Hakkımızda</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Nasıl Çalışır?</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Reklam Ver</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">İletişim</a></li>
        </ul>
      </div>
      <div class="cols6">
        <div style="padding-top:30px;">
          <a class="grey-text text-lighten-3 footer_social_link" href="#!"><i class="fa fa-2x fa-facebook"></i></a>
          <a class="grey-text text-lighten-3 footer_social_link" href="#!"><i class="fa fa-2x fa-twitter"></i></a>
          <a class="grey-text text-lighten-3 footer_social_link" href="#!"><i class="fa fa-2x fa-instagram"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2014 etkinlikturkiye.com
    </div>
  </div>
</footer>
  <script src='https://code.jquery.com/jquery-2.1.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/giray123/a-pen-by-giray-XNgxJv */
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.activateDefaultNav:hover{
	cursor: pointer;
}
.footer_social_link{
    padding:10px;
}
.event_title{
    font-size: 17px !important;
    line-height: 17px !important;
  margin-bottom:10px;
}
.seans{
  margin:2px 5px;
}

/*Downloaded from https://www.codeseek.co/giray123/a-pen-by-giray-XNgxJv */
$(".sidenav").sideNav({
  draggable: true // Choose whether you can drag to open on touch screens
});

$('.activateSearchNav').click(function(){
	$('.defaultNavbar').toggleClass('hide');
	$('.searchNavbar').toggleClass('hide');
	$('#search').focus();
});

$('.activateDefaultNav').click(function(){
	$('.defaultNavbar').toggleClass('hide');
	$('.searchNavbar').toggleClass('hide');
});

$('.deleteSearch').click(function(){
	$('#search').val("");
	$('#search').focus();
});

  $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .9, // Opacity of modal background
      in_duration: 300, // Transition in duration
      out_duration: 200, // Transition out duration
      starting_top: '100%', // Starting top style attribute
      ending_top: '0%', // Ending top style attribute
    }
  );

Comments