"Becayisler"
Bootstrap 4.1.1 Snippet by emremusaoglu

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div id="header"> <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> <a class="navbar-brand" href="#">Becayişler.net</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Anasayfa</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-external-link"></i> Forum</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Diğer </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Meslek Grupları</a> <a class="dropdown-item" href="#">Yasal Bilgiler</a> <a class="dropdown-item" href="#">Geri Bildirim</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Facebook</a> <a class="dropdown-item" href="#">İletişim</a> </div> </li> </ul> <div class="btn-group"> <a href="" class="btn btn-light border">Giriş</a> <a href="" class="btn btn-success">Kayıt Ol</a> </div> </div> </nav> </div> <!-- /header --> <div id="content"> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-lg-4"> <a href="" class="btn btn-success w-100 mb-3"><i class="fa fa-plus"></i> İlan Ver</a> <a href="" class="btn btn-danger w-100 mb-3"><i class="fa fa-trash"></i> İlan Sil</a> <div class="card"> <div class="card-header"> Detaylı Arama <span class="info float-right d-inline-block text-primary" data-origin="tooltip" data-placement="bottom" title="Çalıştığınız yeri seçip, İstenilen yeri, 'Tüm iller' seçerseniz, çalıştığınız şehiri isteyen herkesi görüntülersiniz."><i class="fa fa-info"></i></span> </div> <div class="card-body"> <div class="form-group"> <label>Çalıştığınız Yer</label> <select name="" id="" class="custom-select form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select> </div> <div class="form-group"> <label>Çalışmak İstediğiniz Yer</label> <select name="" id="" class="custom-select form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select> </div> <a href="" class="btn btn-primary w-100"><i class="fa fa-search"></i> Aramayı Başlat</a> </div> </div> <div class="card mt-3"> <div class="card-header"> Üç'lü Becayiş Arama <span class="info float-right d-inline-block text-primary" data-origin="tooltip" data-placement="bottom" title="Çalıştığınız yeri ve istediğiniz yeri girin, 'Üçlü Becayiş' yapabileceğiniz tüm ilanlar önünüze gelsin."><i class="fa fa-info"></i></span> </div> <div class="card-body"> <div class="form-group"> <label>Çalıştığınız Yer</label> <select name="" id="" class="custom-select form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select> </div> <div class="form-group"> <label>Çalışmak İstediğiniz Yer</label> <select name="" id="" class="custom-select form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select> </div> <a href="" class="btn btn-primary w-100"><i class="fa fa-search"></i> Aramayı Başlat</a> </div> </div> </div> <div class="col-lg-8"> <span class="mb-3 d-block border-bottom pb-3 mb-3 clearfix"> <h3 class="font-weight-normal float-left p-0 m-0">Son Eklenen İlanlar</h3> <span class="column-op float-right"> <a href="" class="btn btn-sm btn-info" data-origin="tooltip" data-placement="bottom" title="İkili Kolon"><i class="fa fa-columns"></i></a> <a href="" class="btn btn-sm btn-info ml-2" data-origin="tooltip" data-placement="bottom" title="Tekli Kolon"><i class="fa fa-square-o"></i></a> </span> </span> <div class="card mb-3"> <div class="card-header d-flex p-2 border-bottom"> <img src="http://placehold.it/46x46" class="mr-2 rounded float-left d-inline-block" alt=""> <span class="card-info"> <a href="" class="d-block">Hakkı Maden</a> <small class="text-muted">1 Mart 2020</small> </span> </div> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, veniam accusantium tenetur vel rem molestiae obcaecati perferendis sint iure facilis quaerat dolores ea eligendi eius veritatis mollitia vero culpa, esse? </div> </div> <div class="card mb-3"> <div class="card-header d-flex p-2 border-bottom"> <img src="http://placehold.it/46x46" class="mr-2 rounded float-left d-inline-block" alt=""> <span class="card-info"> <a href="" class="d-block">Hakkı Maden</a> <small class="text-muted">1 Mart 2020</small> </span> </div> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, veniam accusantium tenetur vel rem molestiae obcaecati perferendis sint iure facilis quaerat dolores ea eligendi eius veritatis mollitia vero culpa, esse? </div> </div> <div class="card mb-3"> <div class="card-header d-flex p-2 border-bottom"> <img src="http://placehold.it/46x46" class="mr-2 rounded float-left d-inline-block" alt=""> <span class="card-info"> <a href="" class="d-block">Hakkı Maden</a> <small class="text-muted">1 Mart 2020</small> </span> </div> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, veniam accusantium tenetur vel rem molestiae obcaecati perferendis sint iure facilis quaerat dolores ea eligendi eius veritatis mollitia vero culpa, esse? </div> </div> </div> </div> </div> </div> <!-- /content --> <div id="footer"> <div class="card rounded-0 border-top"> <div class="card-body"></div> </div> </div> <!-- /footer --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script> $(function(e){ "use strict"; $('[data-origin="tooltip"]').tooltip(); }); </script> </body> </html>

Related: See More

Rubik Presentation Page

Questions / Comments: